diff --git a/package.json b/package.json
index 7711d74a..637b1d30 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@coreui/vue": "^5.8.0",
     "@coreui/vue-chartjs": "^3.0.0",
     "@popperjs/core": "^2.11.8",
+    "axios": "^1.18.1",
     "chart.js": "^4.5.1",
     "pinia": "^3.0.4",
     "simplebar-vue": "^2.4.2",
diff --git a/src/services/api.js b/src/services/api.js
new file mode 100644
index 00000000..8f28047c
--- /dev/null
+++ b/src/services/api.js
@@ -0,0 +1,19 @@
+import axios from 'axios'
+
+const api = axios.create({
+  baseURL: 'https://api.radiq.my.id/api',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+    Authorization: 'Bearer uZ1vM4UON3CsDV9niGD1gLS4sHpCxT9nzadkITmc6caf2ea2',
+  },
+})
+
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    return Promise.reject(error)
+  },
+)
+
+export default api
diff --git a/src/stores/ticketType.js b/src/stores/ticketType.js
new file mode 100644
index 00000000..119b6d6b
--- /dev/null
+++ b/src/stores/ticketType.js
@@ -0,0 +1,94 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import api from '@/services/api.js'
+
+export const useTicketTypeStore = defineStore('ticketType', () => {
+  const ticketTypes = ref([])
+  const loading = ref(false)
+  const error = ref(null)
+
+  async function fetchTicketTypes(page = 1) {
+    loading.value = true
+    error.value = null
+    try {
+      const response = await api.get(`/ticket-types?page=${page}`)
+      ticketTypes.value = response.data.data.data
+      return response.data.data
+    } catch (err) {
+      error.value = err.response?.data?.message || err.message || 'Gagal memuat data'
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function fetchTicketType(id) {
+    loading.value = true
+    error.value = null
+    try {
+      const response = await api.get(`/ticket-types/${id}`)
+      return response.data.data
+    } catch (err) {
+      error.value = err.response?.data?.message || err.message || 'Gagal memuat data'
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function addTicketType(ticketType) {
+    loading.value = true
+    error.value = null
+    try {
+      const response = await api.post('/ticket-types', ticketType)
+      return response.data
+    } catch (err) {
+      error.value = err.response?.data?.message || err.message || 'Gagal menambah data'
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function updateTicketType(id, ticketType) {
+    loading.value = true
+    error.value = null
+    try {
+      const response = await api.post(`/ticket-types/${id}`, {
+        ...ticketType,
+        _method: 'PUT',
+      })
+      return response.data
+    } catch (err) {
+      error.value = err.response?.data?.message || err.message || 'Gagal mengupdate data'
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function deleteTicketType(id) {
+    loading.value = true
+    error.value = null
+    try {
+      const response = await api.delete(`/ticket-types/${id}`)
+      return response.data
+    } catch (err) {
+      error.value = err.response?.data?.message || err.message || 'Gagal menghapus data'
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    ticketTypes,
+    loading,
+    error,
+    fetchTicketTypes,
+    fetchTicketType,
+    addTicketType,
+    updateTicketType,
+    deleteTicketType,
+  }
+})
diff --git a/src/views/tickets/TicketType.vue b/src/views/tickets/TicketType.vue
index b333016f..18512353 100644
--- a/src/views/tickets/TicketType.vue
+++ b/src/views/tickets/TicketType.vue
@@ -1,54 +1,346 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useTicketTypeStore } from '@/stores/ticketType.js'
+
+const store = useTicketTypeStore()
+
+const ticketTypeModal = ref(false)
+const detailModal = ref(false)
+const editingId = ref(null)
+const isEdit = ref(false)
+const form = reactive({
+  code: '',
+  name: '',
+  need_approval: false,
+  sla_minutes: '',
+  require_photo: false,
+  require_material: false,
+  need_customer: false,
+})
+
+const emptyForm = () => ({
+  code: '',
+  name: '',
+  need_approval: false,
+  sla_minutes: '',
+  require_photo: false,
+  require_material: false,
+  need_customer: false,
+})
+
+const detailItem = ref(null)
+const pagination = ref(null)
+
+onMounted(() => {
+  store.fetchTicketTypes()
+})
+
+async function loadPage(page) {
+  const result = await store.fetchTicketTypes(page)
+  pagination.value = result
+}
+
+function openAddModal() {
+  isEdit.value = false
+  editingId.value = null
+  Object.assign(form, emptyForm())
+  ticketTypeModal.value = true
+}
+
+function openEditModal(item) {
+  isEdit.value = true
+  editingId.value = item.id
+  Object.assign(form, {
+    code: item.code,
+    name: item.name,
+    need_approval: item.need_approval,
+    sla_minutes: item.sla_minutes,
+    require_photo: item.require_photo,
+    require_material: item.require_material,
+    need_customer: item.need_customer,
+  })
+  ticketTypeModal.value = true
+}
+
+function openDetail(item) {
+  detailItem.value = item
+  detailModal.value = true
+}
+
+async function saveTicketType() {
+  const payload = {
+    code: form.code,
+    name: form.name,
+    need_approval: form.need_approval,
+    sla_minutes: Number(form.sla_minutes),
+    require_photo: form.require_photo,
+    require_material: form.require_material,
+    need_customer: form.need_customer,
+  }
+
+  try {
+    if (isEdit.value && editingId.value) {
+      await store.updateTicketType(editingId.value, payload)
+    } else {
+      await store.addTicketType(payload)
+    }
+    ticketTypeModal.value = false
+    await store.fetchTicketTypes()
+  } catch (err) {
+    store.error = err.response?.data?.message || err.message || 'Gagal menyimpan data'
+  }
+}
+
+async function deleteTicketType(id) {
+  try {
+    await store.deleteTicketType(id)
+    await store.fetchTicketTypes()
+  } catch (err) {
+    // error handled by store
+  }
+}
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Ticket Type</strong>
+          <CButton color="primary" size="sm" class="float-end" @click="openAddModal">
+            + Tambah Ticket Type
+          </CButton>
         </CCardHeader>
         <CCardBody>
-          <CTable striped hover>
-            <CTableHead>
-              <CTableRow>
-                <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                <CTableHeaderCell scope="col">Name</CTableHeaderCell>
-                <CTableHeaderCell scope="col">Description</CTableHeaderCell>
-                <CTableHeaderCell scope="col">Color</CTableHeaderCell>
-                <CTableHeaderCell scope="col">Status</CTableHeaderCell>
-              </CTableRow>
-            </CTableHead>
-            <CTableBody>
-              <CTableRow>
-                <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                <CTableDataCell>Bug</CTableDataCell>
-                <CTableDataCell>Error or issue in the system</CTableDataCell>
-                <CTableDataCell>Red</CTableDataCell>
-                <CTableDataCell>Active</CTableDataCell>
-              </CTableRow>
-              <CTableRow>
-                <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                <CTableDataCell>Enhancement</CTableDataCell>
-                <CTableDataCell>Request for new feature</CTableDataCell>
-                <CTableDataCell>Blue</CTableDataCell>
-                <CTableDataCell>Active</CTableDataCell>
-              </CTableRow>
-              <CTableRow>
-                <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                <CTableDataCell>Support</CTableDataCell>
-                <CTableDataCell>General support request</CTableDataCell>
-                <CTableDataCell>Green</CTableDataCell>
-                <CTableDataCell>Active</CTableDataCell>
-              </CTableRow>
-              <CTableRow>
-                <CTableHeaderCell scope="row">4</CTableHeaderCell>
-                <CTableDataCell>Question</CTableDataCell>
-                <CTableDataCell>General inquiry</CTableDataCell>
-                <CTableDataCell>Yellow</CTableDataCell>
-                <CTableDataCell>Inactive</CTableDataCell>
-              </CTableRow>
-            </CTableBody>
-          </CTable>
+          <CAlert color="danger" v-if="store.error" dismissible @close="store.error = null">
+            {{ store.error }}
+          </CAlert>
+
+          <div v-if="store.loading" class="text-center py-3">
+            <CSpinner color="primary" />
+            <span class="ms-2">Memuat data...</span>
+          </div>
+
+          <div v-else class="table-responsive">
+            <CTable striped hover small>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">No</CTableHeaderCell>
+                  <CTableHeaderCell scope="col" class="text-center">Code</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Name</CTableHeaderCell>
+                  <CTableHeaderCell scope="col" class="text-center">Need Approval</CTableHeaderCell>
+                  <CTableHeaderCell scope="col" class="text-center">SLA (menit)</CTableHeaderCell>
+                  <CTableHeaderCell scope="col" class="text-center">Require Photo</CTableHeaderCell>
+                  <CTableHeaderCell scope="col" class="text-center"
+                    >Require Material</CTableHeaderCell
+                  >
+                  <CTableHeaderCell scope="col" class="text-center">Need Customer</CTableHeaderCell>
+                  <CTableHeaderCell scope="col" class="text-center">Aksi</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow v-for="(item, index) in store.ticketTypes" :key="item.id">
+                  <CTableHeaderCell scope="row">{{ index + 1 }}</CTableHeaderCell>
+                  <CTableDataCell class="text-center">
+                    <CBadge color="dark">{{ item.code }}</CBadge>
+                  </CTableDataCell>
+                  <CTableDataCell>{{ item.name }}</CTableDataCell>
+                  <CTableDataCell class="text-center">
+                    <CBadge :color="item.need_approval ? 'success' : 'secondary'">
+                      {{ item.need_approval ? 'Yes' : 'No' }}
+                    </CBadge>
+                  </CTableDataCell>
+                  <CTableDataCell class="text-center">{{ item.sla_minutes }}</CTableDataCell>
+                  <CTableDataCell class="text-center">
+                    <CBadge :color="item.require_photo ? 'success' : 'secondary'">
+                      {{ item.require_photo ? 'Yes' : 'No' }}
+                    </CBadge>
+                  </CTableDataCell>
+                  <CTableDataCell class="text-center">
+                    <CBadge :color="item.require_material ? 'success' : 'secondary'">
+                      {{ item.require_material ? 'Yes' : 'No' }}
+                    </CBadge>
+                  </CTableDataCell>
+                  <CTableDataCell class="text-center">
+                    <CBadge :color="item.need_customer ? 'success' : 'secondary'">
+                      {{ item.need_customer ? 'Yes' : 'No' }}
+                    </CBadge>
+                  </CTableDataCell>
+                  <CTableDataCell class="text-center">
+                    <CButton color="info" size="sm" class="me-1" @click="openDetail(item)"
+                      >Detail</CButton
+                    >
+                    <CButton color="warning" size="sm" class="me-1" @click="openEditModal(item)"
+                      >Edit</CButton
+                    >
+                    <CButton color="danger" size="sm" @click="deleteTicketType(item.id)"
+                      >Hapus</CButton
+                    >
+                  </CTableDataCell>
+                </CTableRow>
+                <CTableRow v-if="store.ticketTypes.length === 0">
+                  <CTableDataCell colSpan="9" class="text-center">Tidak ada data</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </div>
+
+          <nav v-if="pagination" class="mt-3">
+            <ul class="pagination justify-content-center mb-0">
+              <li class="page-item" :class="{ disabled: !pagination.prev_page_url }">
+                <button
+                  class="page-link"
+                  @click="loadPage(pagination.current_page - 1)"
+                  :disabled="!pagination.prev_page_url"
+                >
+                  Previous
+                </button>
+              </li>
+              <li
+                class="page-item"
+                v-for="link in pagination.links"
+                :key="link.label"
+                :class="{ active: link.active }"
+                v-if="!link.label.includes('Previous') && !link.label.includes('Next')"
+              >
+                <button class="page-link" @click="loadPage(link.page)" v-html="link.label"></button>
+              </li>
+              <li class="page-item" :class="{ disabled: !pagination.next_page_url }">
+                <button
+                  class="page-link"
+                  @click="loadPage(pagination.current_page + 1)"
+                  :disabled="!pagination.next_page_url"
+                >
+                  Next
+                </button>
+              </li>
+            </ul>
+          </nav>
         </CCardBody>
       </CCard>
     </CCol>
   </CRow>
+
+  <!-- Form Modal (Add / Edit) -->
+  <CModal :visible="ticketTypeModal" @close="ticketTypeModal = false" size="lg" alignment="center">
+    <CModalHeader dismiss @close="ticketTypeModal = false">
+      <CModalTitle>{{ isEdit ? 'Edit Ticket Type' : 'Tambah Ticket Type' }}</CModalTitle>
+    </CModalHeader>
+    <CModalBody>
+      <CForm>
+        <CRow class="mb-3">
+          <CCol :md="6">
+            <CFormLabel>Code</CFormLabel>
+            <CFormInput v-model="form.code" placeholder="Contoh: GGN" />
+          </CCol>
+          <CCol :md="6">
+            <CFormLabel>Name</CFormLabel>
+            <CFormInput v-model="form.name" placeholder="Contoh: Gangguan" />
+          </CCol>
+        </CRow>
+        <CRow class="mb-3">
+          <CCol :md="6">
+            <CFormLabel>SLA (menit)</CFormLabel>
+            <CFormInput v-model="form.sla_minutes" type="number" />
+          </CCol>
+        </CRow>
+        <CRow class="mb-3">
+          <CCol :md="3">
+            <CFormCheck id="need_approval" v-model="form.need_approval" :label="'Need Approval'" />
+          </CCol>
+          <CCol :md="3">
+            <CFormCheck id="require_photo" v-model="form.require_photo" :label="'Require Photo'" />
+          </CCol>
+          <CCol :md="3">
+            <CFormCheck
+              id="require_material"
+              v-model="form.require_material"
+              :label="'Require Material'"
+            />
+          </CCol>
+          <CCol :md="3">
+            <CFormCheck id="need_customer" v-model="form.need_customer" :label="'Need Customer'" />
+          </CCol>
+        </CRow>
+      </CForm>
+    </CModalBody>
+    <CModalFooter>
+      <CButton color="secondary" @click="ticketTypeModal = false">Batal</CButton>
+      <CButton color="primary" @click="saveTicketType">Simpan</CButton>
+    </CModalFooter>
+  </CModal>
+
+  <!-- Detail Modal -->
+  <CModal :visible="detailModal" @close="detailModal = false" size="lg" alignment="center">
+    <CModalHeader dismiss @close="detailModal = false">
+      <CModalTitle>Detail Ticket Type</CModalTitle>
+    </CModalHeader>
+    <CModalBody>
+      <CTable bordered small v-if="detailItem">
+        <CTableBody>
+          <CTableRow>
+            <CTableHeaderCell style="width: 30%">ID</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.id }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Code</CTableHeaderCell>
+            <CTableDataCell>
+              <CBadge color="dark">{{ detailItem.code }}</CBadge>
+            </CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Name</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.name }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Need Approval</CTableHeaderCell>
+            <CTableDataCell>
+              <CBadge :color="detailItem.need_approval ? 'success' : 'secondary'">
+                {{ detailItem.need_approval ? 'Yes' : 'No' }}
+              </CBadge>
+            </CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>SLA (menit)</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.sla_minutes }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Require Photo</CTableHeaderCell>
+            <CTableDataCell>
+              <CBadge :color="detailItem.require_photo ? 'success' : 'secondary'">
+                {{ detailItem.require_photo ? 'Yes' : 'No' }}
+              </CBadge>
+            </CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Require Material</CTableHeaderCell>
+            <CTableDataCell>
+              <CBadge :color="detailItem.require_material ? 'success' : 'secondary'">
+                {{ detailItem.require_material ? 'Yes' : 'No' }}
+              </CBadge>
+            </CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Need Customer</CTableHeaderCell>
+            <CTableDataCell>
+              <CBadge :color="detailItem.need_customer ? 'success' : 'secondary'">
+                {{ detailItem.need_customer ? 'Yes' : 'No' }}
+              </CBadge>
+            </CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Created At</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.created_at || '-' }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Updated At</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.updated_at || '-' }}</CTableDataCell>
+          </CTableRow>
+        </CTableBody>
+      </CTable>
+    </CModalBody>
+    <CModalFooter>
+      <CButton color="secondary" @click="detailModal = false">Tutup</CButton>
+    </CModalFooter>
+  </CModal>
 </template>