diff --git a/components/Aduan/DaftarIKP/TableDetail/index.vue b/components/Aduan/DaftarIKP/TableDetail/index.vue
index 055cf455..81d99252 100644
--- a/components/Aduan/DaftarIKP/TableDetail/index.vue
+++ b/components/Aduan/DaftarIKP/TableDetail/index.vue
@@ -4,31 +4,29 @@
       Detail Instruksi Aduan
     </h1>
     <div class="table-content">
-      <BaseTableDetail header="Informasi Umum" class="mb-4">
-        <tr>
+      <BaseTableDetail
+        v-for="keysField in Object.keys(fieldDetail)"
+        :key="keysField"
+        :header="fieldDetail[keysField].title"
+        class="mb-4"
+      >
+        <tr v-for="field in fieldDetail[keysField].field" :key="field.name">
           <td
             class="text-lato text-[14px]"
             :width="
-              typeAduan.instruksiKewenanganNonPemprov.props === ikpTypePage
+              ikpTypePage === ikpType.instruksiKewenanganNonPemprov.props ||
+              ikpTypePage === ikpType.instruksiNonPemprov.props
                 ? '244px'
                 : '164px'
             "
           >
-            <strong>Narasi Instruksi </strong>
-          </td>
-          <td v-html="formatingInstructionalNarrative()" />
-        </tr>
-        <tr>
-          <td class="text-lato w-[164px] text-[14px]">
-            <strong>Jumlah Aduan </strong>
-          </td>
-          <td>{{ dataDetail?.complaints_count }}</td>
-        </tr>
-        <tr>
-          <td class="text-lato w-[164px] text-[14px]">
-            <strong>Status </strong>
+            <strong>{{ field.name }} </strong>
           </td>
-          <td>
+          <td
+            v-if="field.key === 'narrative'"
+            v-html="formatingInstructionalNarrative()"
+          />
+          <td v-else-if="field.key === 'complaint_status_id'">
             <div class="flex items-center">
               <div
                 v-if="dataDetail?.complaint_status_id"
@@ -41,112 +39,50 @@
               {{ getStatusText(dataDetail?.complaint_status_id) }}
             </div>
           </td>
-        </tr>
-        <tr>
-          <td class="text-lato w-[164px] text-[14px]">
-            <strong>Keterangan </strong>
+          <td
+            v-else-if="
+              field.key === 'created_at' || field.key === 'deadline_at'
+            "
+          >
+            {{ formatDate(dataDetail[field.key] || '') || '-' }}
           </td>
-          <td>{{ dataDetail?.description || '-' }}</td>
+          <td v-else>{{ dataDetail[field.key] || '' || '-' }}</td>
         </tr>
       </BaseTableDetail>
-    </div>
-
-    <BaseTableDetail header="Tanggal" class="mb-4">
-      <tr>
-        <td
-          class="text-lato text-[14px]"
-          :width="
-            typeAduan.instruksiKewenanganNonPemprov.props === ikpTypePage
-              ? '244px'
-              : '164px'
-          "
-        >
-          <strong>Tanggal Dibuat </strong>
-        </td>
-        <td>{{ dataDetail?.created_at || '-' }}</td>
-      </tr>
-      <tr>
-        <td class="text-lato w-[164px] text-[14px]">
-          <strong>Tanggal Deadline </strong>
-        </td>
-        <td>{{ dataDetail?.deadline_at || '-' }}</td>
-      </tr>
-    </BaseTableDetail>
-
-    <BaseTableDetail
-      v-if="ikpTypePage !== typeAduan.instruksiKewenanganNonPemprov.props"
-      header="Indikator"
-      class="mb-4"
-    >
-      <tr>
-        <td class="text-lato w-[164px] text-[14px]">
-          <strong>Indikator Nilai </strong>
-        </td>
-        <td>{{ dataDetail?.indicator_value || '-' }}</td>
-      </tr>
-      <tr>
-        <td class="text-lato w-[164px] text-[14px]">
-          <strong>Indikator Satuan </strong>
-        </td>
-        <td>{{ dataDetail?.indicator_unit || '-' }}</td>
-      </tr>
-    </BaseTableDetail>
-
-    <BaseTableDetail
-      v-if="ikpTypePage === typeAduan.instruksiKewenanganNonPemprov.props"
-      header="Lainnya"
-      class="mb-4"
-    >
-      <tr>
-        <td class="text-lato text-[14px]" width="244px">
-          <strong>Cakupan urusan </strong>
-        </td>
-        <td>{{ dataDetail?.scope_of_affairs || '-' }}</td>
-      </tr>
-      <tr>
-        <td class="text-lato text-[14px]" width="244px">
-          <strong>Instansi Penanggung Jawab </strong>
-        </td>
-        <td>{{ dataDetail?.responsible_agency || '-' }}</td>
-      </tr>
-      <tr>
-        <td class="text-lato text-[14px]" width="244px">
-          <strong>OPD Pemprov Penanggung Jawab </strong>
-        </td>
-        <td>{{ dataDetail?.responsible_provincial_government_opd || '-' }}</td>
-      </tr>
-    </BaseTableDetail>
-    <div
-      v-if="dataDetail?.complaints?.length > 0 && showDaftarAduan"
-      class="rounded-lg border border-gray-200"
-    >
-      <jds-data-table
-        :headers="filterHeaderTableComplaint()"
-        :items="dataDetail?.complaints"
-        class="default-table"
-        :class="{
-          'non-government-table':
-            ikpTypePage === typeAduan.instruksiKewenanganNonPemprov.props,
-        }"
+      <div
+        v-if="dataDetail?.complaints?.length > 0 && showDaftarAduan"
+        class="rounded-lg border border-gray-200"
       >
-        <!-- eslint-disable-next-line vue/valid-v-slot -->
-        <template #item.action="{ item }">
-          <BaseButton
-            class="w-full border border-green-700 !py-[6px] !px-[10px] text-green-700 hover:bg-green-50"
-            @click="goToDetailComplaint(item.id, item.ikp_code)"
-          >
-            Lihat Detail Aduan
-          </BaseButton>
-        </template>
-      </jds-data-table>
+        <jds-data-table
+          :headers="filterHeaderTableComplaint()"
+          :items="dataDetail?.complaints"
+          class="default-table"
+          :class="{
+            'non-government-table':
+              ikpTypePage === ikpType.instruksiKewenanganNonPemprov.props ||
+              ikpTypePage === ikpType.instruksiNonPemprov.props,
+          }"
+        >
+          <!-- eslint-disable-next-line vue/valid-v-slot -->
+          <template #item.action="{ item }">
+            <BaseButton
+              class="w-full border border-green-700 !py-[6px] !px-[10px] text-green-700 hover:bg-green-50"
+              @click="goToDetailComplaint(item.id, item.ikp_code)"
+            >
+              Lihat Detail Aduan
+            </BaseButton>
+          </template>
+        </jds-data-table>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { ikpStatus } from '~/constant/daftar-ikp'
-import { typeAduan } from '~/constant/aduan-masuk'
+import { ikpStatus, ikpType, detailField } from '~/constant/daftar-ikp'
 import { formatDate } from '~/utils'
+import detailInstruksiNonPemprov from '~/data/instruksi-non-pemprov-detail.json'
+
 export default {
   name: 'DaftarIKPTableDetail',
   props: {
@@ -175,26 +111,64 @@ export default {
         { key: 'sp4n_id', text: 'ID SP4N Lapor' },
         { key: 'action', text: 'Aksi' },
       ],
-      typeAduan,
+      ikpType,
+      fieldDetail: {},
+      formatDate,
     }
   },
   async fetch() {
+    this.dataDetail = {}
     try {
-      const response = await this.$axios.get(`/warga/ikp/${this.ikpCode}`)
-      this.dataDetail = response.data.data
-      this.dataDetail.created_at =
-        formatDate(this.dataDetail.created_at || '', 'dd/MM/yyyy HH:mm') || '-'
-
-      this.dataDetail.deadline_at =
-        formatDate(this.dataDetail.deadline_at || '', 'dd/MM/yyyy HH:mm') || '-'
+      if (this.ikpTypePage === ikpType.instruksiNonPemprov.props) {
+        this.dataDetail = detailInstruksiNonPemprov.data
+      } else {
+        const response = await this.$axios.get(`/warga/ikp/${this.ikpCode}`)
+        this.dataDetail = response.data.data
+      }
     } catch (error) {
       this.dataDetail = {}
     }
   },
+  computed: {
+    getDetailOtherField() {
+      return detailField.others.field.filter((item) =>
+        item.ikpType.includes(this.ikpTypePage)
+      )
+    },
+  },
+  mounted() {
+    const dataFieldDetail = {}
+    Object.keys(detailField).forEach((keyField) => {
+      const isCheckColumn = this.checkDetailColumn(keyField)
+      if (isCheckColumn) {
+        dataFieldDetail[keyField] = detailField[keyField]
+        dataFieldDetail[keyField] = {
+          ...dataFieldDetail[keyField],
+          field: this.filterDetailField(keyField),
+        }
+      }
+    })
+
+    this.fieldDetail = dataFieldDetail
+  },
   methods: {
+    checkDetailColumn(column) {
+      return (
+        detailField[column].ikpType.includes('all') ||
+        detailField[column].ikpType.includes(this.ikpTypePage)
+      )
+    },
+    filterDetailField(keyField) {
+      return detailField[keyField].field.filter(
+        (item) =>
+          item.ikpType.includes('all') ||
+          item.ikpType.includes(this.ikpTypePage)
+      )
+    },
     filterHeaderTableComplaint() {
       return this.headerTableComplaint.filter((item) =>
-        this.typeAduan.instruksiKewenanganNonPemprov.props !== this.ikpTypePage
+        this.ikpType.instruksiKewenanganNonPemprov.props !== this.ikpTypePage &&
+        this.ikpType.instruksiNonPemprov.props !== this.ikpTypePage
           ? item.key !== 'sp4n_id'
           : item
       )
@@ -210,7 +184,8 @@ export default {
       switch (status) {
         case ikpStatus.coordinated.id:
           return this.ikpTypePage ===
-            typeAduan.instruksiKewenanganNonPemprov.props
+            ikpType.instruksiKewenanganNonPemprov.props ||
+            this.ikpTypePage === ikpType.instruksiNonPemprov.props
             ? 'Sudah Dikoordinasikan'
             : ikpStatus.coordinated.name
         case ikpStatus.not_yet_coordinated.id:
diff --git a/components/Aduan/DaftarIKP/index.vue b/components/Aduan/DaftarIKP/index.vue
index b90de0bc..4121cdea 100644
--- a/components/Aduan/DaftarIKP/index.vue
+++ b/components/Aduan/DaftarIKP/index.vue
@@ -21,17 +21,14 @@
                 :button="false"
                 class="w-[280px]"
               />
-              <!-- TO DO : to be discuss about filter by date -->
-              <!-- <div class="ml-4 flex items-center">
+              <div class="ml-4 flex items-center">
                 <jds-icon
                   name="filter-outline"
                   size="sm"
                   fill="#022B55"
                   class="flex-shrink-0"
                 />
-                <p class="ml-2 text-sm text-blue-gray-700">
-                  Filter :
-                </p>
+                <p class="ml-2 text-sm text-blue-gray-700">Filter :</p>
                 <date-picker
                   ref="datepicker"
                   v-model="dateRange"
@@ -59,7 +56,7 @@
                     />
                   </template>
                 </date-picker>
-              </div> -->
+              </div>
             </div>
           </div>
 
@@ -99,6 +96,7 @@
                   filterTableAction(item?.complaint_status_id)
                 "
                 @detail="goToPageDetail(item.ikp_code)"
+                @app-trk="goToAppTrk()"
               />
             </template>
           </JdsDataTable>
@@ -110,68 +108,83 @@
 
 <script>
 import debounce from 'lodash.debounce'
+import { isWithinInterval, parseISO } from 'date-fns'
 import {
   formatDate,
   generateItemsPerPageOptions,
   formatNumberToUnit,
   convertToUnit,
   formatedStringDate,
-  resetQueryParamsUrl
+  resetQueryParamsUrl,
 } from '~/utils'
 import TabBarList from '~/components/Aduan/TabBar/List'
-import { headerDaftarIkp, ikpStatus } from '~/constant/daftar-ikp'
+import { headerDaftarIkp, ikpStatus, ikpType } from '~/constant/daftar-ikp'
+import dataInstruksiNonPemprov from '~/data/instruksi-non-pemprov.json'
+
 export default {
   name: 'DaftarIkpTable',
   components: { TabBarList },
   props: {
     tabName: {
       type: String,
-      default: 'ikp'
+      default: 'ikp',
     },
     ikpTypePage: {
       type: String,
-      default: ''
+      default: '',
     },
     detailPage: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   },
-  data () {
+  data() {
     return {
-      menuTableAction: [{ menu: 'Lihat Detail Instruksi', value: 'detail' }],
+      menuTableAction: [
+        { menu: 'Lihat Detail Instruksi', value: 'detail', ikpType: ['all'] },
+        {
+          menu: 'Lihat Instruksi di Aplikasi TRK',
+          value: 'app-trk',
+          ikpType: [ikpType.instruksiNonPemprov.props],
+        },
+      ],
       listDataIkp: [],
       listStatisticIkp: [],
+      // currentPageLocal: null, // TO DO : If api has already
       pagination: {
         currentPage: 1,
         totalRows: 5,
         itemsPerPage: 5,
         itemsPerPageOptions: [],
-        disabled: true
+        disabled: true,
       },
       query: {
-        limit: 5,
+        limit: 10,
         page: 1,
         search: null,
         tabIndex: 0,
-        idTab: this.tabName
+        idTab: this.tabName,
       },
       search: '',
       isShowPopupDate: false,
       isShowPopupDateRange: false,
       dateRange: [
         new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
-        new Date()
+        new Date(),
       ],
       headerDaftarIkp,
-      ikpStatus
+      ikpStatus,
+      listIkpDisplayed: [],
     }
   },
-  async fetch () {
+  async fetch() {
     try {
-      const responseList = await this.$axios.get('/warga/ikp', {
-        params: { ...this.query }
-      })
+      const responseList =
+        this.ikpTypePage === ikpType.instruksiNonPemprov.props
+          ? dataInstruksiNonPemprov
+          : await this.$axios.get('/warga/ikp', {
+              params: { ...this.query },
+            })
       const { data } = responseList.data
       this.listDataIkp = data?.data || []
       if (this.listDataIkp.length) {
@@ -179,18 +192,78 @@ export default {
       } else {
         this.pagination.disabled = true
       }
+      // data instruksi non pemprov
+      if (this.ikpTypePage === ikpType.instruksiNonPemprov.props) {
+        if (this.query.search) {
+          this.listDataIkp = this.listDataIkp.filter((item) => {
+            const ikpCodeNormalized = this.normalizeText(item.ikp_code)
+            const narrativeNormalized = this.normalizeText(item.narrative)
+            return (
+              ikpCodeNormalized.includes(this.query.search) ||
+              narrativeNormalized.includes(this.query.search)
+            )
+          })
+        }
+        if (this.query.start_date && this.query.end_date) {
+          const startDate = parseISO(this.query.start_date)
+          const endDate = parseISO(this.query.end_date)
+          this.listDataIkp = this.listDataIkp.filter((item) => {
+            const createdDate = parseISO(
+              formatDate(item.created_at, 'yyyy-MM-dd')
+            )
+            return isWithinInterval(createdDate, {
+              start: startDate,
+              end: endDate,
+            })
+          })
+        }
+        this.getCountNonPemProv()
+        if (this.query.status) {
+          this.listDataIkp = this.listDataIkp.filter(
+            (item) => item.complaint_status_id === this.query.status
+          )
+        }
 
-      this.pagination.currentPage = data?.page || 1
-      this.pagination.totalRows = data?.total_data || 0
-      this.pagination.itemsPerPage = data?.page_size || this.query.limit
+        if (this.query?.sort_by && this.query?.sort_type) {
+          this.listIkpDisplayed = [...this.listDataIkp]
+          this.listIkpDisplayed = this.listIkpDisplayed.map((item) => {
+            return {
+              ...item,
+              created_at: parseISO(item.created_at),
+              deadline_at: parseISO(item.deadline_at),
+            }
+          })
+          this.listIkpDisplayed.sort((ikpAsc, ikpDesc) => {
+            let comparison = 0
+            const key = this.query.sort_by
+            if (this.query.sort_by === 'narrative') {
+              comparison = ikpAsc[key].localeCompare(ikpDesc[key])
+            } else {
+              comparison = ikpAsc[key] - ikpDesc[key]
+            }
+            return this.query.sort_type === 'asc' ? comparison : -comparison
+          })
+          this.listDataIkp = [...this.listIkpDisplayed]
+        }
 
-      this.getCount()
+        this.pagination.totalRows = this.listDataIkp.length
+        const start = (this.query.page - 1) * this.query.limit // index awal
+        const end = start + this.query.limit // index akhir
+        this.listDataIkp = this.listDataIkp.slice(start, end)
+        this.pagination.currentPage = this.query.page
+        this.pagination.itemsPerPage = this.query.limit
+      } else {
+        this.pagination.currentPage = data?.page || 1
+        this.pagination.totalRows = data?.total_data || 0
+        this.pagination.itemsPerPage = data?.page_size || this.query.limit
+        this.getCount()
+      }
     } catch {
       this.pagination.disabled = true
     }
   },
   computed: {
-    listData () {
+    listData() {
       return this.listDataIkp.map((item) => {
         return {
           ...item,
@@ -199,34 +272,42 @@ export default {
             : '-',
           deadline_at: item?.created_at
             ? formatDate(item?.created_at, 'dd/MM/yyyy HH:mm')
-            : '-'
+            : '-',
         }
       })
     },
-    listStatistic () {
+    listStatistic() {
       return this.listStatisticIkp.map((item) => {
         return {
           ...ikpStatus[item.id],
           value: formatNumberToUnit(item.value),
           unit: convertToUnit(item.value),
-          icon: ikpStatus[item.id].icon,
-          name: ikpStatus[item.id].name
+          icon:
+            this.ikpTypePage === ikpType.instruksiNonPemprov.props &&
+            item.id === 'coordinated'
+              ? ikpStatus.followup.icon
+              : this.ikpStatus[item.id].icon,
+          name:
+            this.ikpTypePage === ikpType.instruksiNonPemprov.props &&
+            item.id === 'coordinated'
+              ? 'Sudah Dikoordinasikan'
+              : ikpStatus[item.id].name,
         }
       })
-    }
+    },
   },
   watch: {
     query: {
       deep: true,
-      handler () {
+      handler() {
         resetQueryParamsUrl(this)
         this.$fetch()
-      }
+      },
     },
     '$route.query': {
       deep: true,
       immediate: true,
-      handler (newQuery) {
+      handler(newQuery) {
         if (Object.keys(newQuery).length > 0) {
           this.query = { ...newQuery }
           this.query.tabIndex = parseInt(this.query.tabIndex)
@@ -235,14 +316,13 @@ export default {
           if (newQuery.start_date && newQuery.end_date) {
             this.dateRange = [
               formatedStringDate(newQuery.start_date),
-              formatedStringDate(newQuery.end_date)
+              formatedStringDate(newQuery.end_date),
             ]
           }
         }
-      }
-
+      },
     },
-    dateRange () {
+    dateRange() {
       if (!this.isShowPopupDateRange) {
         this.$refs.datepicker.closePopup()
       } else {
@@ -253,36 +333,50 @@ export default {
       if (value.length > 2 || value.length === 0) {
         this.query.page = 1
         this.query.search = value.length > 2 ? value : null
+        this.query.search = this.normalizeText(this.query.search)
         this.$fetch()
       }
-    }, 500)
+    }, 500),
   },
-  mounted () {
+  mounted() {
     this.pagination.itemsPerPageOptions = generateItemsPerPageOptions(
       this.pagination.itemsPerPage
     )
   },
   methods: {
-    selectedTabHandle (index) {
+    normalizeText(text) {
+      // /\s+/g => regrex untuk mengubah spasi berlebih dengan satu spasi.
+      return text.replace(/\s+/g, ' ').trim().toLowerCase()
+    },
+    selectedTabHandle(index) {
       this.query.tabIndex = index
     },
-    filterTableAction (status) {
-      if (status === 'finished') {
-        return this.menuTableAction.filter(item => item.value === 'detail')
-      } else {
-        return this.menuTableAction
-      }
+    filterTableAction(status) {
+      return this.menuTableAction.filter(
+        (item) =>
+          item.ikpType.includes('all') ||
+          item.ikpType.includes(this.ikpTypePage)
+      )
     },
-    pageChange (value) {
+    pageChange(value) {
       this.query.page = value
+      // TO DO : if api has already
+      // if (isNaN(value)) {
+      //   this.query.page = this.currentPageLocal
+      // } else {
+      //   this.currentPageLocal = value
+      //   this.query.page = value
+      // }
+      this.$fetch()
     },
-    perPageChange (value) {
+    perPageChange(value) {
       if (value) {
         this.query.limit = value
       }
       this.query.page = 1
+      this.$fetch()
     },
-    sortChange (value) {
+    sortChange(value) {
       const key = Object.keys(value)[0]
       if (key && value[key] !== 'no-sort') {
         if (key === 'created_at_format') {
@@ -290,56 +384,58 @@ export default {
         } else {
           this.query.sort_by = key
         }
-
         this.query.sort_type = value[key]
       } else {
-        delete this.query.sort_by
-        delete this.query.sort_type
+        const { sort_by: sortBy, sort_type: sortType, ...newQuery } = this.query // menghilangkan atribut sort by dan sort type
+        this.query = newQuery
       }
 
       this.$fetch()
     },
-    filterDateHandle () {
+    filterDateHandle() {
       this.setQuery({
         start_date: formatDate(this.dateRange[0], 'yyyy-MM-dd'),
-        end_date: formatDate(this.dateRange[1], 'yyyy-MM-dd')
+        end_date: formatDate(this.dateRange[1], 'yyyy-MM-dd'),
       })
       this.$fetch()
       this.$refs.datepicker.closePopup()
+      this.query.page = 1
     },
-    closePopupDateHandle () {
+    closePopupDateHandle() {
       this.isShowPopupDateRange = false
       this.$refs.datepicker.closePopup()
     },
-    setQuery (params) {
+    setQuery(params) {
       this.query = { ...this.query, ...params }
     },
-    clearDateRangeHandle () {
+    clearDateRangeHandle() {
       this.dateRange = [
         new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
-        new Date()
+        new Date(),
       ]
       this.setQuery({
         start_date: formatDate(this.dateRange[0], 'yyyy-MM-dd'),
-        end_date: formatDate(this.dateRange[1], 'yyyy-MM-dd')
+        end_date: formatDate(this.dateRange[1], 'yyyy-MM-dd'),
       })
 
       this.isShowPopupDateRange = false
       this.$fetch()
     },
-    changeDateRangeHandle () {
+    changeDateRangeHandle() {
       this.isShowPopupDateRange = true
     },
-    getTotalStatistic () {
+    getTotalStatistic() {
       const total = this.listStatisticIkp.reduce((accumulator, object) => {
         return accumulator + object.value
       }, 0)
       return total
     },
-    getStatusText (status) {
+    getStatusText(status) {
       switch (status) {
         case ikpStatus.coordinated.id:
-          return ikpStatus.coordinated.name
+          return this.ikpTypePage === ikpType.instruksiNonPemprov.props
+            ? 'Sudah Dikoordinasikan'
+            : ikpStatus.coordinated.name
         case ikpStatus.followup.id:
           return ikpStatus.followup.name
         case ikpStatus.postponed.id:
@@ -348,16 +444,18 @@ export default {
           return ikpStatus.review.name
         case ikpStatus.finished.id:
           return ikpStatus.finished.name
+        case ikpStatus.not_yet_coordinated.id:
+          return ikpStatus.not_yet_coordinated.name
         default:
           return '-'
       }
     },
-    getColorText (status) {
+    getColorText(status) {
       const ikpStatusColor = this.ikpStatus[status].statusColor
       let statusColor = {}
       if (Array.isArray(ikpStatusColor)) {
-        statusColor = ikpStatusColor.find(
-          statusColor => statusColor.ikpType.includes(this.ikpTypePage)
+        statusColor = ikpStatusColor.find((statusColor) =>
+          statusColor.ikpType.includes(this.ikpTypePage)
         )
       }
 
@@ -380,9 +478,9 @@ export default {
           return 'text-gray-900'
       }
     },
-    listTabHandle (statusId) {
+    listTabHandle(statusId) {
       const query = {
-        page: 1
+        page: 1,
       }
 
       if (statusId !== 'total') {
@@ -395,20 +493,54 @@ export default {
       this.setQuery(query)
       this.$fetch()
     },
-    goToPageDetail (id) {
+    goToPageDetail(id) {
       this.$router.push({
         path: `${this.detailPage}/${id}`,
-        query: this.query
+        query: this.query,
       })
     },
-    async getCount () {
+    goToAppTrk() {
+      window.open(
+        'https://kinerja.jabarprov.go.id/lim/bukan-urusan-pemprov',
+        '_blank'
+      )
+    },
+    getCountNonPemProv() {
+      if (this.ikpTypePage === ikpType.instruksiNonPemprov.props) {
+        const listDataIkp = this.listDataIkp
+        const listNotYetCoordinated = listDataIkp.filter(
+          (item) => item.complaint_status_id === 'not_yet_coordinated'
+        )
+        const listCoordinated = listDataIkp.filter(
+          (item) => item.complaint_status_id === 'coordinated'
+        )
+        this.listStatisticIkp = [
+          {
+            id: 'coordinated',
+            name: 'Sudah Dikoordinasikan',
+            value: listCoordinated.length,
+          },
+          {
+            id: 'not_yet_coordinated',
+            name: 'Belum Dikoordinasikan',
+            value: listNotYetCoordinated.length,
+          },
+        ]
+      }
+      ikpStatus.total.value = this.getTotalStatistic()
+      this.listStatisticIkp.unshift(ikpStatus.total)
+      if (this.listStatisticIkp.length === 2) {
+        this.listStatisticIkp.pop()
+      }
+    },
+    async getCount() {
       const queryCount = { ...this.query }
       queryCount.status = ''
       try {
         const responseListStatisticIkp = await this.$axios.get(
           '/warga/ikp/statistics',
           {
-            params: queryCount
+            params: queryCount,
           }
         )
         this.listStatisticIkp = responseListStatisticIkp.data.data
@@ -420,17 +552,17 @@ export default {
       } catch (error) {
         console.error(error)
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style scoped>
-  .jds-data-table::v-deep td:nth-child(2){
-    @apply !w-[237px]
-  }
+.jds-data-table::v-deep td:nth-child(2) {
+  @apply !w-[237px];
+}
 
-  .jds-data-table::v-deep td:nth-child(3){
-    @apply !w-[137px]
-  }
+.jds-data-table::v-deep td:nth-child(3) {
+  @apply !w-[137px];
+}
 </style>
diff --git a/components/Aduan/Detail/Table/Complaint/index.vue b/components/Aduan/Detail/Table/Complaint/index.vue
index e15afccf..2fe3f11d 100644
--- a/components/Aduan/Detail/Table/Complaint/index.vue
+++ b/components/Aduan/Detail/Table/Complaint/index.vue
@@ -271,7 +271,7 @@
           <td>{{ detailComplaint?.description || '-' }}</td>
         </tr>
         <tr>
-          <td><strong>Lokasi Kejadian</strong></td>
+          <td colspan="2"><strong>Lokasi Kejadian</strong></td>
         </tr>
         <tr>
           <td>Kabupaten / Kota</td>
@@ -575,6 +575,7 @@ export default {
       switch (this.typeAduanPage) {
         case this.typeAduan.aduanDialihkanSpanLapor.props:
         case this.typeAduan.instruksiKewenanganNonPemprov.props:
+        case this.typeAduan.instruksiNonPemprov.props:
           return true
         case this.typeAduan.penentuanKewenangan.props:
           {
diff --git a/components/Aduan/Dialog/CreateIkp/index.vue b/components/Aduan/Dialog/CreateIkp/index.vue
index 1403a02e..8a26182d 100644
--- a/components/Aduan/Dialog/CreateIkp/index.vue
+++ b/components/Aduan/Dialog/CreateIkp/index.vue
@@ -33,10 +33,7 @@
                     placeholder="Pilih Cakupan Urusan"
                     :options="listAuthority"
                     :error-message="errors[0]"
-                    :disabled="
-                      complaintType ===
-                      typeAduan.instruksiKewenanganNonPemprov.props
-                    "
+                    disabled
                   />
                 </ValidationProvider>
                 <ValidationProvider
@@ -52,10 +49,7 @@
                     label="Nama Instansi"
                     placeholder="Pilih Nama Instansi"
                     :error-message="errors[0]"
-                    :disabled="
-                      complaintType ===
-                      typeAduan.instruksiKewenanganNonPemprov.props
-                    "
+                    disabled
                     :options="listDisposition"
                   />
                 </ValidationProvider>
@@ -73,10 +67,7 @@
                     placeholder="Pilih OPD Pemprov Penanggungjawab"
                     helper-text="OPD Pemprov penanggungjawab bertugas untuk memeriksa tindaklanjut aduan di kota/kabupaten atau kementerian/lembaga."
                     :error-message="errors[0]"
-                    :disabled="
-                      complaintType ===
-                      typeAduan.instruksiKewenanganNonPemprov.props
-                    "
+                    disabled
                     :options="listGovResponsible"
                   />
                 </ValidationProvider>
@@ -98,6 +89,7 @@
                   placeholder="Pilih Perangkat Daerah"
                   :options="listDisposition"
                   :error-message="errors[0]"
+                  disabled
                 />
               </ValidationProvider>
               <div class="grid grid-cols-2 gap-3 pt-3">
@@ -136,15 +128,9 @@
                     placeholder="Pilih Tanggal Deadline"
                     :class="{
                       'mx-datepicker--error': errors[0],
-                      'mx-datepicker--disabled':
-                        complaintType ===
-                        typeAduan.instruksiKewenanganNonPemprov.props,
                     }"
-                    class="!w-full disabled:!bg-green-500"
-                    :disabled="
-                      complaintType ===
-                      typeAduan.instruksiKewenanganNonPemprov.props
-                    "
+                    class="mx-datepicker--disabled !w-full"
+                    disabled
                   >
                     <template #icon-calendar>
                       <jds-icon
@@ -192,7 +178,7 @@
                 name="Keterangan Instruksi Aduan"
               >
                 <BaseTextArea
-                  v-model="payload.description"
+                  v-model="instructionNote"
                   label="Keterangan Instruksi Aduan"
                   placeholder="Masukkan deskripsi"
                   maxlength="255"
@@ -201,7 +187,7 @@
                 />
               </ValidationProvider>
               <p class="pt-1 text-xs text-gray-600">
-                Tersisa {{ 255 - payload.description.length }} karakter
+                Tersisa {{ 255 - instructionNote.length }} karakter
               </p>
             </form>
           </ValidationObserver>
@@ -293,6 +279,7 @@ export default {
       },
       icon: {},
       typeAduan,
+      instructionNote: '',
     }
   },
   async fetch() {
@@ -354,6 +341,10 @@ export default {
       if (this.payload.coverage_of_affairs) {
         this.$fetch()
       }
+      if (this.payload.description) {
+        this.descriptionLength =
+          this.descriptionLength - this.payload.description.length
+      }
     },
   },
   methods: {
@@ -398,6 +389,7 @@ export default {
         coverage_of_affairs: '',
         opd_pemprov_id: '',
       }
+      this.instructionNote = ''
       this.$store.commit('create-ikp/setIsTruncate', false)
       this.$refs.form.reset()
     },
@@ -422,10 +414,11 @@ export default {
       this.isShowPopupConfirmation = false
       this.isShowPopupLoading = true
       try {
-        this.payload.deadline_at = formatDate(
-          this.payload.deadline_at,
-          'yyyy-MM-dd'
-        )
+        this.payload = {
+          ...this.payload,
+          deadline_at: formatDate(this.payload.deadline_at, 'yyyy-MM-dd'),
+          description: this.instructionNote,
+        }
         const response = await this.$axios.post('/warga/ikp', {
           ...this.payload,
           user_id: this.$auth?.user?.identifier,
diff --git a/components/Aduan/Dialog/FollowupComplaint/index.vue b/components/Aduan/Dialog/FollowupComplaint/index.vue
index f2972e3a..9c4f829c 100644
--- a/components/Aduan/Dialog/FollowupComplaint/index.vue
+++ b/components/Aduan/Dialog/FollowupComplaint/index.vue
@@ -311,25 +311,27 @@ export default {
       this.isShowPopupIkpNarrative = true
     },
     showPopupCreateIkp() {
+      const {
+        opd_name: opdName,
+        deadline_date: deadlineDate,
+        coverage_of_affairs: coverageOfAffairs,
+      } = this.dataDialog.dataComplaint
       if (
         this.complaintType === typeAduan.instruksiKewenanganNonPemprov.props
       ) {
-        const {
-          coverage_of_affairs: coverageOfAffairs,
-          opd_name: opdName,
-          deadline_date: deadlineDate,
-          opd_pemprov_id: opdPemprovId,
-        } = this.dataDialog.dataComplaint
-
         this.$store.commit('create-ikp/setPayload', {
           ...this.payload,
-          coverage_of_affairs: coverageOfAffairs,
-          opd_name: opdName,
-          deadline_at: deadlineDate,
-          opd_pemprov_id: opdPemprovId,
+          opd_pemprov_id: this.dataDialog.dataComplaint.opd_pemprov_id,
         })
       }
 
+      this.$store.commit('create-ikp/setPayload', {
+        ...this.payload,
+        opd_name: opdName,
+        deadline_at: deadlineDate,
+        coverage_of_affairs: coverageOfAffairs,
+      })
+
       this.$store.commit('followup-complaint/setIsShowPopup', false)
       this.$store.commit(
         'create-ikp/setIkpNarrative',
diff --git a/components/Aduan/DialogViewImage/index.vue b/components/Aduan/DialogViewImage/index.vue
index 06fc9a59..432691d4 100644
--- a/components/Aduan/DialogViewImage/index.vue
+++ b/components/Aduan/DialogViewImage/index.vue
@@ -32,7 +32,7 @@
             alt="photo"
             class="h-full w-full rounded-[4px]"
             :class="{ 'opacity-20': index !== swiperRef?.activeIndex }"
-          >
+          />
         </swiper-slide>
       </swiper>
       <footer class="flex items-center justify-center pt-7 pb-5">
@@ -48,7 +48,7 @@
           <jds-button
             variant="secondary"
             class="!rounded-full !border-2 !border-gray-200 !bg-white"
-            @click="downloadImageHandle()"
+            @click="downloadImage()"
           >
             <div class="flex items-center">
               <BaseIconSvg
@@ -75,7 +75,7 @@
 </template>
 
 <script>
-import axios from 'axios'
+// import axios from 'axios'
 import { Navigation, Pagination, Autoplay } from 'swiper'
 import { SwiperCore, Swiper, SwiperSlide } from 'swiper-vue2'
 import 'swiper/swiper-bundle.css'
@@ -85,29 +85,29 @@ export default {
   name: 'PopupViewImage',
   components: {
     Swiper,
-    SwiperSlide
+    SwiperSlide,
   },
   props: {
     showPopup: {
       type: Boolean,
-      default: false
+      default: false,
     },
     listPhoto: {
       type: Array,
-      default: () => ([])
-    }
+      default: () => [],
+    },
   },
-  data () {
+  data() {
     return {
       swiperRef: null,
-      isShowPopupInformation: false
+      isShowPopupInformation: false,
     }
   },
   methods: {
-    getSwipperRefHandle (swiper) {
+    getSwipperRefHandle(swiper) {
       this.swiperRef = swiper
     },
-    swipperImageHandle (pathButton) {
+    swipperImageHandle(pathButton) {
       if (this.swiperRef?.activeIndex < this.listPhoto.length) {
         if (pathButton === 'next') {
           this.swiperRef.slideTo(this.swiperRef?.activeIndex + 1)
@@ -116,28 +116,43 @@ export default {
         }
       }
     },
-    // TODO: integration with url Fix from API
-    async downloadImageHandle () {
+    downloadImage() {
       if (this.swiperRef) {
         const activeIndex = this.swiperRef.activeIndex
         const activeItem = this.listPhoto[activeIndex]
-
-        try {
-          const imageUrl = activeItem.url
-          const splitUrl = imageUrl.split('/')
-          const imageName = splitUrl[splitUrl.length - 1]
-          const response = await axios.get(imageUrl, { responseType: 'blob' })
-          const link = document.createElement('a')
-          link.href = window.URL.createObjectURL(new Blob([response.data]))
-          link.download = imageName
-          document.body.appendChild(link)
-          link.click()
-          document.body.removeChild(link)
-        } catch (error) {
-          console.error('Gagal mendownload gambar', error)
-        }
+        const imageUrl = activeItem.url
+        const splitUrl = imageUrl.split('/')
+        const imageName = splitUrl[splitUrl.length - 1]
+        const downloadLink = document.createElement('a')
+        downloadLink.href = imageUrl
+        downloadLink.target = '_blank'
+        // Memberikan nama file untuk didownload
+        downloadLink.download = imageName
+        downloadLink.click()
       }
-    }
-  }
+    },
+    // TODO: integration with url Fix from API
+    // async downloadImageHandle () {
+    //   if (this.swiperRef) {
+    //     const activeIndex = this.swiperRef.activeIndex
+    //     const activeItem = this.listPhoto[activeIndex]
+
+    //     try {
+    //       const imageUrl = activeItem.url
+    //       const splitUrl = imageUrl.split('/')
+    //       const imageName = splitUrl[splitUrl.length - 1]
+    //       const response = await axios.get(imageUrl, { responseType: 'blob' })
+    //       const link = document.createElement('a')
+    //       link.href = window.URL.createObjectURL(new Blob([response.data]))
+    //       link.download = imageName
+    //       document.body.appendChild(link)
+    //       link.click()
+    //       document.body.removeChild(link)
+    //     } catch (error) {
+    //       console.error('Gagal mendownload gambar', error)
+    //     }
+    //   }
+    // }
+  },
 }
 </script>
diff --git a/components/Aduan/index.vue b/components/Aduan/index.vue
index debb5f2f..fb9c006e 100644
--- a/components/Aduan/index.vue
+++ b/components/Aduan/index.vue
@@ -11,59 +11,60 @@
         />
       </template>
       <template #tab-panel>
-        <BaseTabPanel class="px-3 pt-6 pb-4">
-          <div class="mb-4 flex justify-between">
-            <div class="flex">
+        <BaseTabPanel class="overflow-auto px-3 pt-6 pb-4">
+          <div class="mb-4 flex w-full justify-between">
+            <div class="flex w-full items-center justify-start">
               <jds-search
                 v-model="search"
                 placeholder="Cari ID atau nama lengkap"
                 small
                 icon
                 :button="false"
-                class="w-[280px]"
+                class="!w-[220px] 2xl:!w-[260px]"
               />
-              <div class="ml-4 flex items-center">
-                <jds-icon
-                  name="filter-outline"
-                  size="sm"
-                  fill="#022B55"
-                  class="flex-shrink-0"
-                />
-                <p class="ml-2 text-sm text-blue-gray-700">Filter :</p>
-                <jds-select
-                  v-model="query.complaint_category_id"
-                  placeholder="Kategori Aduan"
-                  :options="listCategory"
-                  class="select-form-complaint !ml-2 mr-2 !w-[260px]"
-                  @change="filterCategoryHandle"
-                />
-                <date-picker
-                  ref="datepicker"
-                  v-model="dateRange"
-                  format="DD/MM/YYYY"
-                  range
-                  range-separator=" - "
-                  @close="isShowPopupDate = false"
-                  @clear="clearDateRangeHandle"
-                  @change="changeDateRangeHandle"
-                >
-                  <template #icon-calendar>
-                    <jds-icon
-                      name="calendar-date-outline"
-                      size="sm"
-                      fill="#069550"
-                    />
-                  </template>
-                  <template #footer="{ emit }">
-                    <BaseDialogFooter
-                      label-button-submit="Pilih"
-                      :show-cancel-button="true"
-                      @close="closePopupDateHandle()"
-                      @submit="filterDateHandle(emit)"
-                    />
-                  </template>
-                </date-picker>
-              </div>
+              <jds-icon
+                name="filter-outline"
+                size="sm"
+                fill="#022B55"
+                class="ml-4 flex-shrink-0"
+              />
+              <p class="ml-2 flex-shrink-0 text-[14px] text-blue-gray-700">
+                Filter :
+              </p>
+              <jds-select
+                v-model="query.complaint_category_id"
+                placeholder="Kategori Aduan"
+                :options="listCategory"
+                class="select-form-complaint !mx-2 flex-shrink-0"
+                @change="filterCategoryHandle"
+              />
+              <date-picker
+                ref="datepicker"
+                v-model="dateRange"
+                format="DD/MM/YYYY"
+                range
+                range-separator=" - "
+                class="!w-[210px] flex-shrink-0"
+                @close="isShowPopupDate = false"
+                @clear="clearDateRangeHandle"
+                @change="changeDateRangeHandle"
+              >
+                <template #icon-calendar>
+                  <jds-icon
+                    name="calendar-date-outline"
+                    size="sm"
+                    fill="#069550"
+                  />
+                </template>
+                <template #footer="{ emit }">
+                  <BaseDialogFooter
+                    label-button-submit="Pilih"
+                    :show-cancel-button="true"
+                    @close="closePopupDateHandle()"
+                    @submit="filterDateHandle(emit)"
+                  />
+                </template>
+              </date-picker>
               <jds-select
                 v-if="
                   typeAduanPage ===
@@ -72,7 +73,7 @@
                 v-model="query.complaint_status_id"
                 placeholder="Status"
                 :options="listNonGovComplaintStatus"
-                class="select-form-complaint !ml-2 mr-2 !w-[260px]"
+                class="select-form-complaint ml-2 flex-shrink-0"
                 @change="filterNonGovComplaintStatusHandle"
               />
             </div>
@@ -81,86 +82,91 @@
               v-show="typeAduan.aduanDariSpanLapor.props === typeAduanPage"
               label="Tambah Aduan"
               variant="primary"
+              class="flex-shrink-0"
               @click="isShowPopupAddComplaint = true"
             />
           </div>
-          <JdsDataTable
-            :headers="checkTypeHeaderAduan(typeAduanPage)"
-            :items="listData"
-            :loading="$fetchState.pending"
-            :pagination="pagination"
-            @next-page="pageChange"
-            @previous-page="pageChange"
-            @page-change="pageChange"
-            @per-page-change="perPageChange"
-            @change:sort="sortChange"
-          >
-            <!-- eslint-disable-next-line vue/valid-v-slot -->
-            <template #item.status="{ item }">
-              <div class="flex items-center">
-                <p
-                  v-show="item?.status"
-                  class="h-fit w-fit rounded-[32px] bg-gray-100 px-[10px] py-1 text-xs font-semibold"
-                  :class="getColorText(item?.status_id)"
-                >
-                  {{ item.status }}
-                </p>
-              </div>
-            </template>
-            <!-- eslint-disable-next-line vue/valid-v-slot -->
-            <template #item.sp4n_created_at="{ item }">
-              <div class="flex items-center">
-                <p
-                  :class="{
-                    'h-fit w-fit rounded-[32px] bg-gray-100 px-[10px] py-1 text-xs font-semibold text-[#FF7500]':
-                      item.sp4n_created_at === 'Belum ada',
-                  }"
-                >
-                  {{ item.sp4n_created_at }}
-                </p>
-              </div>
-            </template>
-            <!-- eslint-disable-next-line vue/valid-v-slot -->
-            <template #item.diverted_to_span_at="{ item }">
-              <div class="flex items-center">
-                <p
-                  :class="{
-                    'h-fit w-fit rounded-[32px] bg-gray-100 px-[10px] py-1 text-xs font-semibold text-[#FF7500]':
-                      item.diverted_to_span_at === 'Belum ada',
-                  }"
-                >
-                  {{ item.diverted_to_span_at }}
-                </p>
-              </div>
-            </template>
-            <!-- eslint-disable-next-line vue/valid-v-slot -->
-            <template #item.sp4n_id="{ item }">
-              <div class="flex items-center">
-                <p
-                  :class="{
-                    'h-fit w-fit rounded-[32px] bg-gray-100 px-[10px] py-1 text-xs font-semibold text-[#FF7500]':
-                      item.sp4n_id === 'Belum ada',
-                  }"
-                >
-                  {{ item.sp4n_id }}
-                </p>
-              </div>
-            </template>
-            <!-- eslint-disable-next-line vue/valid-v-slot -->
-            <template #item.action="{ item }">
-              <BaseTableAction
-                :list-menu-pop-over="menuTableActionHandle(item?.status_id)"
-                @detail="goToPageDetailHandle(item)"
-                @verify="showPopupConfirmationVerificationComplaintHandle(item)"
-                @failed="showPopupConfirmationFailedComplaintHandle(item)"
-                @add-span="showPopupInputIdSpanHandle(item)"
-                @process-complaint="showPopupProcessComplaintHandle(item)"
-                @change-authority="showPopupChangeAuthority(item)"
-                @followup-complaint="showPopupFollowupComplaint(item)"
-                @create-instruction="showPopupCreateInstruction(item)"
-              />
-            </template>
-          </JdsDataTable>
+          <div>
+            <JdsDataTable
+              :headers="checkTypeHeaderAduan(typeAduanPage)"
+              :items="listData"
+              :loading="$fetchState.pending"
+              :pagination="pagination"
+              @next-page="pageChange"
+              @previous-page="pageChange"
+              @page-change="pageChange"
+              @per-page-change="perPageChange"
+              @change:sort="sortChange"
+            >
+              <!-- eslint-disable-next-line vue/valid-v-slot -->
+              <template #item.status="{ item }">
+                <div class="flex items-center">
+                  <p
+                    v-show="item?.status"
+                    class="h-fit w-fit rounded-[32px] bg-gray-100 px-[10px] py-1 text-xs font-semibold"
+                    :class="getColorText(item?.status_id)"
+                  >
+                    {{ item.status }}
+                  </p>
+                </div>
+              </template>
+              <!-- eslint-disable-next-line vue/valid-v-slot -->
+              <template #item.sp4n_created_at="{ item }">
+                <div class="flex items-center">
+                  <p
+                    :class="{
+                      'h-fit w-fit rounded-[32px] bg-gray-100 px-[10px] py-1 text-xs font-semibold text-[#FF7500]':
+                        item.sp4n_created_at === 'Belum ada',
+                    }"
+                  >
+                    {{ item.sp4n_created_at }}
+                  </p>
+                </div>
+              </template>
+              <!-- eslint-disable-next-line vue/valid-v-slot -->
+              <template #item.diverted_to_span_at="{ item }">
+                <div class="flex items-center">
+                  <p
+                    :class="{
+                      'h-fit w-fit rounded-[32px] bg-gray-100 px-[10px] py-1 text-xs font-semibold text-[#FF7500]':
+                        item.diverted_to_span_at === 'Belum ada',
+                    }"
+                  >
+                    {{ item.diverted_to_span_at }}
+                  </p>
+                </div>
+              </template>
+              <!-- eslint-disable-next-line vue/valid-v-slot -->
+              <template #item.sp4n_id="{ item }">
+                <div class="flex items-center">
+                  <p
+                    :class="{
+                      'h-fit w-fit rounded-[32px] bg-gray-100 px-[10px] py-1 text-xs font-semibold text-[#FF7500]':
+                        item.sp4n_id === 'Belum ada',
+                    }"
+                  >
+                    {{ item.sp4n_id }}
+                  </p>
+                </div>
+              </template>
+              <!-- eslint-disable-next-line vue/valid-v-slot -->
+              <template #item.action="{ item }">
+                <BaseTableAction
+                  :list-menu-pop-over="menuTableActionHandle(item?.status_id)"
+                  @detail="goToPageDetailHandle(item)"
+                  @verify="
+                    showPopupConfirmationVerificationComplaintHandle(item)
+                  "
+                  @failed="showPopupConfirmationFailedComplaintHandle(item)"
+                  @add-span="showPopupInputIdSpanHandle(item)"
+                  @process-complaint="showPopupProcessComplaintHandle(item)"
+                  @change-authority="showPopupChangeAuthority(item)"
+                  @followup-complaint="showPopupFollowupComplaint(item)"
+                  @create-instruction="showPopupCreateInstruction(item)"
+                />
+              </template>
+            </JdsDataTable>
+          </div>
         </BaseTabPanel>
       </template>
     </BaseTabGroup>
@@ -241,6 +247,10 @@ import {
   typeAduan,
   complaintSource,
 } from '~/constant/aduan-masuk'
+import {
+  ENDPOINT_ADUAN,
+  ENDPOINT_ADUAN_NON_PEMPROV,
+} from '~/constant/endpoint-api'
 import popupAduanMasuk from '~/mixins/popup-aduan-masuk'
 
 export default {
@@ -360,32 +370,28 @@ export default {
   },
   async fetch() {
     try {
-      let apiPath = 'complaints'
+      const urlApi =
+        this.typeAduanPage === typeAduan.instruksiKewenanganNonPemprov.props
+          ? ENDPOINT_ADUAN_NON_PEMPROV
+          : ENDPOINT_ADUAN
       if (
         !JSON.stringify(Object.keys(this.query)).match('complaint_status_id')
       ) {
         this.query = this.addComplaintStatusFilterHandle()
       }
 
-      if (
-        this.typeAduanPage === typeAduan.instruksiKewenanganNonPemprov.props
-      ) {
-        apiPath = 'non-pemprov-complaints'
-      }
-
       if (this.typeAduan.aduanDariSpanLapor.props === this.typeAduanPage) {
         this.setQuery({ complaint_source: 'sp4n' })
       }
 
       // default sort by updated date
-      if (this.checkPropsSortByUpdatedDate() && !this.query.sort_by) {
-        this.setQuery({ sort_by: 'updated_at' })
-      }
+      this.setQuery({ sort_by: 'updated_at' })
 
       // handle list data complaint
-      const responseListComplaint = await this.$axios.get(`/warga/${apiPath}`, {
+      const responseListComplaint = await this.$axios.get(urlApi, {
         params: { ...this.query, is_admin: 1 },
       })
+
       const { data } = responseListComplaint.data
       this.listDataComplaint = data?.data || []
       if (this.listDataComplaint.length) {
@@ -578,6 +584,7 @@ export default {
         complaint_category_id: null,
         'complaint_category_id[0]': null,
       })
+      this.query.page = 1
       if (value) {
         this.query['complaint_category_id[0]'] = value
       }
@@ -585,13 +592,11 @@ export default {
     },
     filterNonGovComplaintStatusHandle(value) {
       this.query.complaint_status_id = null
+      this.query.page = 1
       if (value) {
         this.query.complaint_status_id = value
       }
       this.$fetch()
-      if (value === '') {
-        this.query.complaint_status_id = ''
-      }
     },
     goToPageDetailHandle(item) {
       this.$router.push({
@@ -816,32 +821,28 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .icon-tab rect {
-  fill: #008444 !important;
-}
-
-.icon-tab path {
-  stroke: white;
+  @apply !fill-[#008444];
 }
 
 .icon-tab path {
-  stroke: white;
+  @apply stroke-white;
 }
 
 .icon-tab-selected rect {
-  fill: #f5f5f5;
+  @apply fill-[#f5f5f5];
 }
 
 .icon-tab-selected path {
-  stroke: #16a75c;
+  @apply stroke-[#16a75c];
 }
 
-.select-form-complaint .jds-input-text {
-  width: 260px !important;
+.select-form-complaint::v-deep .jds-input-text__input-wrapper {
+  @apply !w-fit 2xl:!w-[260px];
 }
 
 .select-form-complaint .jds-popover__content {
-  width: 260px !important;
+  @apply !w-fit 2xl:!w-[260px];
 }
 </style>
diff --git a/components/Base/Tab/index.vue b/components/Base/Tab/index.vue
index 365673b6..4a8f690b 100644
--- a/components/Base/Tab/index.vue
+++ b/components/Base/Tab/index.vue
@@ -1,7 +1,13 @@
 <template>
-  <div class="h-[70px] bg-green-700 py-2 px-3 min-w-[180px] rounded-t-lg" :class="{'!bg-white':selected}">
+  <div
+    class="h-[70px] min-w-[150px] rounded-t-lg bg-green-700 py-2 px-3"
+    :class="{ '!bg-white': selected }"
+  >
     <slot>
-      <button class="text-sm text-green-100 items-center" :class="{'!text-gray-700':selected}">
+      <button
+        class="items-center text-sm text-green-100"
+        :class="{ '!text-gray-700': selected }"
+      >
         {{ title }}
       </button>
     </slot>
@@ -14,12 +20,12 @@ export default {
   props: {
     title: {
       type: String,
-      default: ''
+      default: '',
     },
     selected: {
       type: Boolean,
-      default: false
-    }
-  }
+      default: false,
+    },
+  },
 }
 </script>
diff --git a/components/Sidebar/Item.vue b/components/Sidebar/Item.vue
index 8c0c8b43..ac3ff744 100644
--- a/components/Sidebar/Item.vue
+++ b/components/Sidebar/Item.vue
@@ -1,20 +1,20 @@
 <template>
   <nuxt-link
     :to="{ path: link }"
-    class="flex w-full min-w-[200px] items-center justify-between rounded-lg p-3 hover:bg-green-700 hover:font-bold hover:text-white"
+    class="flex w-full min-w-[100px] items-center justify-between rounded-lg px-2 py-[10px] hover:bg-green-700 hover:font-bold hover:text-white"
     :exact="link === '/' && $route.name !== 'detail-id'"
   >
-    <div class="flex items-center">
+    <div class="flex w-full items-center">
       <BaseIconSvg
         v-if="icon"
         :icon="`/icon/${icon}`"
-        :size="16"
+        :size="20"
         fill-color="#FFFFFF"
         class="mr-3 flex-shrink-0"
       />
-      <div class="font-lato text-sm text-white">
+      <label class="font-lato text-[13px] text-white line-clamp-2">
         {{ label }}
-      </div>
+      </label>
     </div>
     <ChevronRight v-if="isShowArrow" class="stroke-white" />
   </nuxt-link>
@@ -56,6 +56,6 @@ export default {
 
 <style scoped>
 a.nuxt-link-active {
-  @apply bg-green-700 p-3 font-bold text-white !important;
+  @apply bg-green-700 p-2 font-bold text-white !important;
 }
 </style>
diff --git a/components/Sidebar/index.vue b/components/Sidebar/index.vue
index afd58755..6b6c1e0c 100644
--- a/components/Sidebar/index.vue
+++ b/components/Sidebar/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="sticky top-0 flex h-screen flex-col">
     <SidebarHeader class="px-6 py-7" />
-    <div class="sidebar-content overflow-y-auto px-6">
+    <div class="sidebar-content overflow-y-auto px-4">
       <div v-for="(menuList, index) in menu" :key="index" class="mb-3">
         <SidebarTitleMenu
           v-show="
diff --git a/constant/aduan-masuk.js b/constant/aduan-masuk.js
index c97340af..b75f9cea 100644
--- a/constant/aduan-masuk.js
+++ b/constant/aduan-masuk.js
@@ -92,6 +92,12 @@ export const typeAduan = {
     props: 'instruksi-aduan-warga',
     id: 'instruksiAduanWarga',
   },
+  instruksiNonPemprov: {
+    props: 'instruksi-non-pemprov',
+    label: 'Daftar Instruksi Aduan Non Pemprov',
+    link: '/aduan/instruksi-non-pemprov',
+    id: 'instruksiNonPemprov',
+  },
 }
 
 export const complaintSource = {
diff --git a/constant/daftar-ikp.js b/constant/daftar-ikp.js
index f5eae86c..430fcbdc 100644
--- a/constant/daftar-ikp.js
+++ b/constant/daftar-ikp.js
@@ -50,6 +50,12 @@ export const ikpType = {
     link: '/aduan/instruksi-aduan-warga',
     id: 'instruksiAduan',
   },
+  instruksiNonPemprov: {
+    props: 'instruksi-non-pemprov',
+    label: 'Daftar Instruksi Aduan Non Pemprov',
+    link: '/aduan/instruksi-non-pemprov',
+    id: 'instruksiNonPemprov',
+  },
 }
 
 export const ikpStatus = Object.freeze({
@@ -59,6 +65,7 @@ export const ikpStatus = Object.freeze({
     value: 0,
     icon: '/icon/icon-aduan/complaint-status/complaint-all-icon.svg',
     statusColor: '-',
+    ikpType: ['all'],
   },
   coordinated: {
     id: 'coordinated',
@@ -69,9 +76,16 @@ export const ikpStatus = Object.freeze({
       { color: 'yellow', ikpType: [ikpType.instruksiKewenanganPemprov.props] },
       {
         color: 'green',
-        ikpType: [ikpType.instruksiKewenanganNonPemprov.props],
+        ikpType: [
+          ikpType.instruksiKewenanganNonPemprov.props,
+          ikpType.instruksiNonPemprov.props,
+        ],
       },
     ],
+    ikpType: [
+      ikpType.instruksiKewenanganNonPemprov.props,
+      ikpType.instruksiNonPemprov.props,
+    ],
   },
   followup: {
     id: 'followup',
@@ -85,16 +99,29 @@ export const ikpStatus = Object.freeze({
       },
       { color: 'yellow', ikpType: [ikpType.instruksiAduanWarga.props] },
     ],
+    ikpType: [
+      ikpType.instruksiKewenanganPemprov.props,
+      ikpType.instruksiAduanWarga.props,
+    ],
   },
   not_yet_coordinated: {
     id: 'not_yet_coordinated',
     name: 'Belum Dikoordinasikan',
+    icon: '/icon/icon-aduan/complaint-status/complaint-not-yet-coordinated.svg',
     value: 0,
     statusColor: [
       {
         color: 'light-blue',
         ikpType: [ikpType.instruksiKewenanganNonPemprov.props],
       },
+      {
+        color: 'yellow',
+        ikpType: [ikpType.instruksiNonPemprov.props],
+      },
+    ],
+    ikpType: [
+      ikpType.instruksiKewenanganNonPemprov.props,
+      ikpType.instruksiNonPemprov.props,
     ],
   },
   postponed: {
@@ -102,20 +129,140 @@ export const ikpStatus = Object.freeze({
     name: 'Pengerjaan Ditunda',
     value: 0,
     icon: '/icon/icon-aduan/complaint-status/complaint-postponed-icon.svg',
-    statusColor: 'purple',
+    statusColor: [
+      {
+        color: 'purple',
+        ikpType: [
+          ikpType.instruksiKewenanganPemprov.props,
+          ikpType.instruksiAduanWarga.props,
+        ],
+      },
+    ],
+    ikpType: [
+      ikpType.instruksiKewenanganPemprov.props,
+      ikpType.instruksiAduanWarga.props,
+    ],
   },
   review: {
     id: 'review',
     name: 'Ditinjau Ulang',
     value: 0,
     icon: '/icon/icon-aduan/complaint-status/complaint-review-icon.svg',
-    statusColor: 'dark-blue',
+    statusColor: [
+      {
+        color: 'dark-blue',
+        ikpType: [
+          ikpType.instruksiKewenanganPemprov.props,
+          ikpType.instruksiAduanWarga.props,
+        ],
+      },
+    ],
+    ikpType: [
+      ikpType.instruksiKewenanganPemprov.props,
+      ikpType.instruksiAduanWarga.props,
+    ],
   },
   finished: {
     id: 'finished',
     name: 'Selesai',
     value: 0,
     icon: '/icon/icon-aduan/complaint-status/complaint-finished-icon.svg',
-    statusColor: 'green',
+    statusColor: [
+      {
+        color: 'green',
+        ikpType: [
+          ikpType.instruksiKewenanganPemprov.props,
+          ikpType.instruksiAduanWarga.props,
+        ],
+      },
+    ],
+    ikpType: [
+      ikpType.instruksiKewenanganPemprov.props,
+      ikpType.instruksiAduanWarga.props,
+    ],
   },
 })
+
+export const detailField = {
+  generalInformation: {
+    title: 'Informasi Umum',
+    field: [
+      { name: 'Narasi Instruksi', key: 'narrative', ikpType: ['all'] },
+      { name: 'Jumlah Aduan', key: 'complaints_count', ikpType: ['all'] },
+      { name: 'Status', key: 'complaint_status_id', ikpType: ['all'] },
+      { name: 'Keterangan', key: 'description', ikpType: ['all'] },
+    ],
+    ikpType: ['all'],
+  },
+  date: {
+    title: 'Tanggal',
+    field: [
+      { name: 'Tanggal Dibuat', key: 'created_at', ikpType: ['all'] },
+      { name: 'Tanggal Deadline', key: 'deadline_at', ikpType: ['all'] },
+    ],
+    ikpType: ['all'],
+  },
+  indicator: {
+    title: 'Indikator',
+    field: [
+      {
+        name: 'Indikator Nilai',
+        key: 'indicator_value',
+        ikpType: [
+          ikpType.instruksiAduanWarga.props,
+          ikpType.instruksiKewenanganPemprov.props,
+        ],
+      },
+      {
+        name: 'Indikator Satuan',
+        key: 'indicator_unit',
+        ikpType: [
+          ikpType.instruksiAduanWarga.props,
+          ikpType.instruksiKewenanganPemprov.props,
+        ],
+      },
+    ],
+    ikpType: [
+      ikpType.instruksiAduanWarga.props,
+      ikpType.instruksiKewenanganPemprov.props,
+    ],
+  },
+  others: {
+    title: 'Lainnya',
+    field: [
+      {
+        name: 'Cakupan Urusan',
+        key: 'scope_of_affairs',
+        ikpType: [
+          ikpType.instruksiKewenanganNonPemprov.props,
+          ikpType.instruksiNonPemprov.props,
+        ],
+      },
+      {
+        name: 'Instansi Penanggung Jawab',
+        key: 'responsible_agency',
+        ikpType: [
+          ikpType.instruksiKewenanganNonPemprov.props,
+          ikpType.instruksiNonPemprov.props,
+        ],
+      },
+      {
+        name: 'OPD Pemprov Penanggung Jawab',
+        key: 'responsible_provincial_government_opd',
+        ikpType: [
+          ikpType.instruksiKewenanganNonPemprov.props,
+          ikpType.instruksiNonPemprov.props,
+        ],
+      },
+      {
+        name: 'Perangkat Daerah',
+        key: 'opd_name',
+        ikpType: [
+          ikpType.instruksiAduanWarga.props,
+          ikpType.instruksiKewenanganPemprov.props,
+        ],
+      },
+    ],
+    ikpType: ['all'],
+  },
+}
diff --git a/constant/endpoint-api.js b/constant/endpoint-api.js
new file mode 100644
index 00000000..9d9c1b6c
--- /dev/null
+++ b/constant/endpoint-api.js
@@ -0,0 +1,2 @@
+export const ENDPOINT_ADUAN = '/warga/complaints'
+export const ENDPOINT_ADUAN_NON_PEMPROV = '/warga/non-pemprov-complaints'
diff --git a/constant/menuList.js b/constant/menuList.js
index f56ce85f..0c69eafa 100644
--- a/constant/menuList.js
+++ b/constant/menuList.js
@@ -149,6 +149,14 @@ const aduanMenu = {
       icon: 'bag.svg',
       unleashVariable: 'SAPAWARGA-CMS__ADUAN--INSTRUKSI-ADUAN-WARGA',
     },
+    {
+      name: 'Daftar Instruksi Non-Pemprov',
+      path: '/aduan/instruksi-non-pemprov',
+      arrow: false,
+      showMenuAndAccessForRoles: ['admin', 'admin:aduan-team-opd'],
+      icon: 'bag.svg',
+      unleashVariable: 'SAPAWARGA-CMS__ADUAN--INSTRUKSI-NON-PEMPROV',
+    },
     {
       name: 'Management Akun',
       path: '/aduan/management-akun',
diff --git a/data/instruksi-non-pemprov-detail.json b/data/instruksi-non-pemprov-detail.json
new file mode 100644
index 00000000..66846068
--- /dev/null
+++ b/data/instruksi-non-pemprov-detail.json
@@ -0,0 +1,49 @@
+{
+  "data": {
+      "id": "1cbd3151-43af-4ccb-a15e-1d6eeacbd6ce",
+      "ikp_code": "1228",
+      "narrative": "instruksi pertama",
+      "complaint_status_id": "coordinated",
+      "detail": "{\"id_ikp_aduan\":\"8928982938928392893293829\",\"id\":1228,\"instruksi\":\"instruksi pertama\",\"keterangan_instruksi\":\"Mohon berkoordinasi\",\"indikator\":\"1.00\",\"satuan\":\"dokumen laporan hasil pelaksanaan kegiatan.\",\"tanggal\":\"2023-10-02\",\"deadline\":\"2023-12-31\",\"kolok\":\"2-23.2-24.0-0.01.00.00.01\",\"unit_kerja_id\":null,\"kepala_pd\":\"I GUSTI AGUNG KIM FAJAR WIYATI OKA\",\"pd\":\"DINAS PERPUSTAKAAN DAN KEARSIPAN DAERAH\",\"duration\":90,\"deadline_format\":\"Minggu, 31 Desember 2023\",\"tanggal_format\":\"Senin, 2 Oktober 2023\",\"updated_by\":\"lapor_aduan\",\"created_at\":\"2023-10-02 15:11:40\",\"updated_at\":\"2023-10-02 15:11:40\",\"is_done\":false,\"status\":\"2.0 Instruksi Sedang dalam Proses Pengerjaan oleh SKPD\",\"banding\":false,\"laporan\":false}",
+      "created_by": null,
+      "created_at": "2024-09-03T04:10:33.000000Z",
+      "updated_at": "2024-09-03T04:10:33.000000Z",
+      "deadline_at": "2024-08-31 00:00:00",
+      "description": "Mohon berkoordinasi",
+      "indicator_value": "1",
+      "indicator_unit": "dokumen laporan hasil pelaksanaan kegiatan.",
+      "opd_name": "DINAS PERPUSTAKAAN DAN KEARSIPAN DAERAH",
+      "evidence": null,
+      "scope_of_affairs": "Pemerintah Kabupaten / Kota",
+      "responsible_agency": "Kabupaten Bekasi",
+      "responsible_provincial_government_opd": "Dinas Kependudukan dan Pencatatan Sipil Provinsi Jawa Barat",
+      "complaints_count": 3,
+      "complaint_status": {
+          "id": "coordinated",
+          "name": "Sudah Dikoordinasikan"
+      },
+      "complaints": [
+          {
+              "id": "c76313b2-2f03-4233-82bb-704a8dfcbf20",
+              "complaint_id": "SWA041220230000001",
+              "ikp_code": "1228",
+              "sp4n_id": "13212",
+              "complaint_source": "sp4n"
+          },
+          {
+              "id": "f1027511-8990-4baa-a58b-46f8a0545d12",
+              "complaint_id": "SWA191220230000006",
+              "ikp_code": "1228",
+              "sp4n_id": null,
+              "complaint_source": "sapawarga"
+          },
+          {
+              "id": "50b43cec-7aed-407c-bdbe-355e1314a583",
+              "complaint_id": "SWA080720240000002",
+              "ikp_code": "1228",
+              "sp4n_id": "23456789",
+              "complaint_source": "sp4n"
+          }
+      ]
+  }
+}
diff --git a/data/instruksi-non-pemprov.json b/data/instruksi-non-pemprov.json
new file mode 100644
index 00000000..5abba67b
--- /dev/null
+++ b/data/instruksi-non-pemprov.json
@@ -0,0 +1,493 @@
+{
+  "data": {
+    "code": "200",
+    "data": {
+      "data": [
+        {
+          "id": "4e705d90-7a33-4c28-8b9f-34bd401d256e",
+          "ikp_code": "1343",
+          "narrative": "lorem ipsum dolordolor1",
+          "complaint_status_id": "not_yet_coordinated",
+          "detail": "{\"user_id\":\"d7ac7b94-8cc9-49f4-8cd3-2575b9f596d4\",\"narrative\":\"lorem ipsum dolordolor\",\"deadline_at\":\"2023-10-24\",\"description\":\"descripsi dari lorem ipsum dolordolor\",\"indicator_value\":1,\"indicator_unit\":\"dokumen laporan\",\"opd_name\":\"DINAS PERPUSTAKAAN DAN KEARSIPAN DAERAH\"}",
+          "created_by": "d7ac7b94-8cc9-49f4-8cd3-2575b9f596d4",
+          "created_at": "2024-08-03T07:09:00.000000Z",
+          "updated_at": "2024-08-03T07:09:00.000000Z",
+         "deadline_at": "2024-08-03T07:09:00.000000Z",
+          "description": null,
+          "indicator_value": null,
+          "indicator_unit": null,
+          "opd_name": null,
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 1,
+          "complaint_status": {
+            "id": "not_yet_coordinated",
+            "name": "Belum Dikoordinasikan"
+          }
+        },
+        {
+          "id": "7367110a-5782-4807-8b26-afb3276b9f58",
+          "ikp_code": "1342",
+          "narrative": "lorem ipsum dolordolor2",
+          "complaint_status_id": "not_yet_coordinated",
+          "detail": "{\"user_id\":\"d7ac7b94-8cc9-49f4-8cd3-2575b9f596d4\",\"narrative\":\"lorem ipsum dolordolor\",\"deadline_at\":\"2023-10-24\",\"description\":\"descripsi dari lorem ipsum dolordolor\",\"indicator_value\":1,\"indicator_unit\":\"dokumen laporan\",\"opd_name\":\"DINAS PERPUSTAKAAN DAN KEARSIPAN DAERAH\"}",
+          "created_by": "d7ac7b94-8cc9-49f4-8cd3-2575b9f596d4",
+          "created_at": "2024-08-03T07:09:00.000000Z",
+          "updated_at": "2024-08-03T07:09:00.000000Z",
+          "deadline_at": "2024-08-03T07:09:00.000000Z",
+          "description": null,
+          "indicator_value": null,
+          "indicator_unit": null,
+          "opd_name": null,
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 2,
+          "complaint_status": {
+            "id": "not_yet_coordinated",
+            "name": "Belum Dikoordinasikan"
+          }
+        },
+        {
+          "id": "f1159fb6-05c3-432a-9bcc-aade366b74ed",
+          "ikp_code": "1344",
+          "narrative": "lorem ipsum dolordolor3",
+          "complaint_status_id": "not_yet_coordinated",
+          "detail": "{\"user_id\":\"d7ac7b94-8cc9-49f4-8cd3-2575b9f596d4\",\"narrative\":\"lorem ipsum dolordolor\",\"deadline_at\":\"2023-10-24\",\"description\":\"descripsi dari lorem ipsum dolordolor\",\"indicator_value\":1,\"indicator_unit\":\"dokumen laporan\",\"opd_name\":\"DINAS PERPUSTAKAAN DAN KEARSIPAN DAERAH\"}",
+          "created_by": "d7ac7b94-8cc9-49f4-8cd3-2575b9f596d4",
+          "created_at": "2024-08-03T07:09:00.000000Z",
+          "updated_at": "2024-08-03T07:09:00.000000Z",
+          "deadline_at": "2024-08-03T07:09:00.000000Z",
+          "description": null,
+          "indicator_value": null,
+          "indicator_unit": null,
+          "opd_name": null,
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "not_yet_coordinated",
+            "name": "Belum Dikoordinasikan"
+          }
+        },
+        {
+          "id": "e38075e0-d04b-4d5d-b81c-f71255ec9751",
+          "ikp_code": "1382",
+          "narrative": "coba usulan narasi instruksi1",
+          "complaint_status_id": "not_yet_coordinated",
+          "detail": "{\"narrative\":\"coba usulan narasi instruksi\",\"deadline_at\":\"2024-08-31\",\"description\":\"coba keterangan instruksi aduan\",\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"BADAN KEPEGAWAIAN DAERAH\",\"coverage_of_affairs\":\"Pemerintah Provinsi Jawa Barat\",\"opd_pemprov_id\":null,\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-09-03T04:30:04.000000Z",
+          "updated_at": "2024-09-03T04:30:04.000000Z",
+          "deadline_at": "2024-09-03T04:30:04.000000Z",
+          "description": "coba keterangan instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "BADAN KEPEGAWAIAN DAERAH",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "not_yet_coordinated",
+            "name": "Belum Dikoordinasikan"
+          }
+        },
+        {
+          "id": "11dd3a2e-ebc9-4f37-8c7a-3f53982cfd1b",
+          "ikp_code": "1381",
+          "narrative": "test narasi instruksi2",
+          "complaint_status_id": "not_yet_coordinated",
+          "detail": "{\"narrative\":\"test narasi instruksi\",\"deadline_at\":\"2024-08-31\",\"instructionNote\":null,\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"BADAN KEPEGAWAIAN DAERAH\",\"coverage_of_affairs\":\"Pemerintah Provinsi Jawa Barat\",\"opd_pemprov_id\":null,\"description\":\"coba instruksi aduan\",\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-09-03T04:10:33.000000Z",
+          "updated_at": "2024-09-03T04:10:33.000000Z",
+          "deadline_at": "2024-09-03T04:10:33.000000Z",
+          "description": "coba instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "BADAN KEPEGAWAIAN DAERAH",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "not_yet_coordinated",
+            "name": "Belum Dikoordinasikan"
+          }
+        },
+        {
+          "id": "390379e7-2899-4792-b1ba-4a2d6d21c1b5",
+          "ikp_code": "1380",
+          "narrative": "narasi instruksi3",
+          "complaint_status_id": "coordinated",
+          "detail": "{\"narrative\":\"narasi instruksi\",\"deadline_at\":\"2024-08-31\",\"description\":\"keterangan instruksi aduan\",\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"KABUPATEN BANDUNG\",\"coverage_of_affairs\":\"Pemerintah Kabupaten\\/Kota\",\"opd_pemprov_id\":\"1\",\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-08-23T07:09:00.000000Z",
+          "updated_at": "2024-08-23T07:09:00.000000Z",
+          "deadline_at": "2024-08-23T07:09:00.000000Z",
+          "description": "keterangan instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "KABUPATEN BANDUNG",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "coordinated",
+            "name": "Dikoordinasikan"
+          }
+        },
+        {
+          "id": "57b0bcf2-92af-4e17-a2ee-aad690315c4d",
+          "ikp_code": "1379",
+          "narrative": "narasi instruksi4",
+          "complaint_status_id": "coordinated",
+          "detail": "{\"narrative\":\"narasi instruksi\",\"deadline_at\":\"2024-08-31\",\"description\":\"keterangan instruksi aduan\",\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"KABUPATEN BANDUNG\",\"coverage_of_affairs\":\"Pemerintah Kabupaten\\/Kota\",\"opd_pemprov_id\":\"1\",\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-08-23T07:08:20.000000Z",
+          "updated_at": "2024-08-23T07:08:20.000000Z",
+          "deadline_at": "2024-08-23T07:08:20.000000Z",
+          "description": "keterangan instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "KABUPATEN BANDUNG",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "coordinated",
+            "name": "Dikoordinasikan"
+          }
+        },
+        {
+          "id": "ca7fd73c-761a-495b-be0f-ef5cf00b1f97",
+          "ikp_code": "1378",
+          "narrative": "narasi instruksi5",
+          "complaint_status_id": "coordinated",
+          "detail": "{\"narrative\":\"narasi instruksi\",\"deadline_at\":\"2024-08-31\",\"description\":\"keterangan instruksi aduan\",\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"KABUPATEN BANDUNG\",\"coverage_of_affairs\":\"Pemerintah Kabupaten\\/Kota\",\"opd_pemprov_id\":\"1\",\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-08-23T04:45:03.000000Z",
+          "updated_at": "2024-08-23T04:45:03.000000Z",
+          "deadline_at": "2024-08-23T04:45:03.000000Z",
+          "description": "keterangan instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "KABUPATEN BANDUNG",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "coordinated",
+            "name": "Dikoordinasikan"
+          }
+        },
+        {
+          "id": "6c9b06d5-4e98-4aa5-829f-f8df85c52747",
+          "ikp_code": "1377",
+          "narrative": "test narasi instruksi1",
+          "complaint_status_id": "coordinated",
+          "detail": "{\"narrative\":\"-\",\"deadline_at\":\"2024-08-31\",\"description\":\"test keterangan instruksi aduan\",\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"KABUPATEN BANDUNG\",\"coverage_of_affairs\":\"Pemerintah Kabupaten\\/Kota\",\"opd_pemprov_id\":\"1\",\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-08-23T04:44:02.000000Z",
+          "updated_at": "2024-08-23T04:44:02.000000Z",
+          "deadline_at": "2024-08-23T04:44:02.000000Z",
+          "description": "test keterangan instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "KABUPATEN BANDUNG",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "coordinated",
+            "name": "Dikoordinasikan"
+          }
+        },
+        {
+          "id": "3e28ec6c-916e-437f-9d60-a03b2f1b375e",
+          "ikp_code": "1376",
+          "narrative": "test usulan narasi instruksi2",
+          "complaint_status_id": "coordinated",
+          "detail": "{\"narrative\":\"test usulan narasi instruksi\",\"deadline_at\":\"2024-08-31\",\"description\":\"test keterangan instruksi aduan\",\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"KABUPATEN BANDUNG\",\"coverage_of_affairs\":\"Pemerintah Kabupaten\\/Kota\",\"opd_pemprov_id\":\"1\",\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-08-23T04:43:07.000000Z",
+          "updated_at": "2024-08-23T04:43:07.000000Z",
+          "deadline_at": "2024-08-23T04:43:07.000000Z",
+          "description": "test keterangan instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "KABUPATEN BANDUNG",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "coordinated",
+            "name": "Dikoordinasikan"
+          }
+        },
+        {
+          "id": "4e705d90-7a33-4c28-8b9f-34bd401d256e",
+          "ikp_code": "1343",
+          "narrative": "lorem ipsum dolordolor4",
+          "complaint_status_id": "not_yet_coordinated",
+          "detail": "{\"user_id\":\"d7ac7b94-8cc9-49f4-8cd3-2575b9f596d4\",\"narrative\":\"lorem ipsum dolordolor\",\"deadline_at\":\"2023-10-24\",\"description\":\"descripsi dari lorem ipsum dolordolor\",\"indicator_value\":1,\"indicator_unit\":\"dokumen laporan\",\"opd_name\":\"DINAS PERPUSTAKAAN DAN KEARSIPAN DAERAH\"}",
+          "created_by": "d7ac7b94-8cc9-49f4-8cd3-2575b9f596d4",
+          "created_at": "2024-08-03T07:09:00.000000Z",
+          "updated_at": "2024-08-03T07:09:00.000000Z",
+          "deadline_at": "2024-08-03T07:09:00.000000Z",
+          "description": null,
+          "indicator_value": null,
+          "indicator_unit": null,
+          "opd_name": null,
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 1,
+          "complaint_status": {
+            "id": "not_yet_coordinated",
+            "name": "Belum Dikoordinasikan"
+          }
+        },
+        {
+          "id": "7367110a-5782-4807-8b26-afb3276b9f58",
+          "ikp_code": "1342",
+          "narrative": "lorem ipsum dolordolor5",
+          "complaint_status_id": "not_yet_coordinated",
+          "detail": "{\"user_id\":\"d7ac7b94-8cc9-49f4-8cd3-2575b9f596d4\",\"narrative\":\"lorem ipsum dolordolor\",\"deadline_at\":\"2023-10-24\",\"description\":\"descripsi dari lorem ipsum dolordolor\",\"indicator_value\":1,\"indicator_unit\":\"dokumen laporan\",\"opd_name\":\"DINAS PERPUSTAKAAN DAN KEARSIPAN DAERAH\"}",
+          "created_by": "d7ac7b94-8cc9-49f4-8cd3-2575b9f596d4",
+          "created_at": "2024-08-03T07:09:00.000000Z",
+          "updated_at": "2024-08-03T07:09:00.000000Z",
+          "deadline_at": "2024-08-03T07:09:00.000000Z",
+          "description": null,
+          "indicator_value": null,
+          "indicator_unit": null,
+          "opd_name": null,
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 2,
+          "complaint_status": {
+            "id": "not_yet_coordinated",
+            "name": "Belum Dikoordinasikan"
+          }
+        },
+        {
+          "id": "f1159fb6-05c3-432a-9bcc-aade366b74ed",
+          "ikp_code": "1344",
+          "narrative": "lorem ipsum dolordolor6",
+          "complaint_status_id": "not_yet_coordinated",
+          "detail": "{\"user_id\":\"d7ac7b94-8cc9-49f4-8cd3-2575b9f596d4\",\"narrative\":\"lorem ipsum dolordolor\",\"deadline_at\":\"2023-10-24\",\"description\":\"descripsi dari lorem ipsum dolordolor\",\"indicator_value\":1,\"indicator_unit\":\"dokumen laporan\",\"opd_name\":\"DINAS PERPUSTAKAAN DAN KEARSIPAN DAERAH\"}",
+          "created_by": "d7ac7b94-8cc9-49f4-8cd3-2575b9f596d4",
+          "created_at": "2024-08-03T07:09:00.000000Z",
+          "updated_at": "2024-08-03T07:09:00.000000Z",
+          "deadline_at": "2024-08-03T07:09:00.000000Z",
+          "description": null,
+          "indicator_value": null,
+          "indicator_unit": null,
+          "opd_name": null,
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "not_yet_coordinated",
+            "name": "Belum Dikoordinasikan"
+          }
+        },
+        {
+          "id": "e38075e0-d04b-4d5d-b81c-f71255ec9751",
+          "ikp_code": "1382",
+          "narrative": "coba usulan narasi instruksi2",
+          "complaint_status_id": "not_yet_coordinated",
+          "detail": "{\"narrative\":\"coba usulan narasi instruksi\",\"deadline_at\":\"2024-08-31\",\"description\":\"coba keterangan instruksi aduan\",\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"BADAN KEPEGAWAIAN DAERAH\",\"coverage_of_affairs\":\"Pemerintah Provinsi Jawa Barat\",\"opd_pemprov_id\":null,\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-09-03T04:30:04.000000Z",
+          "updated_at": "2024-09-03T04:30:04.000000Z",
+          "deadline_at": "2024-09-03T04:30:04.000000Z",
+          "description": "coba keterangan instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "BADAN KEPEGAWAIAN DAERAH",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "not_yet_coordinated",
+            "name": "Belum Dikoordinasikan"
+          }
+        },
+        {
+          "id": "11dd3a2e-ebc9-4f37-8c7a-3f53982cfd1b",
+          "ikp_code": "1381",
+          "narrative": "test narasi instruksi8",
+          "complaint_status_id": "not_yet_coordinated",
+          "detail": "{\"narrative\":\"test narasi instruksi\",\"deadline_at\":\"2024-08-31\",\"instructionNote\":null,\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"BADAN KEPEGAWAIAN DAERAH\",\"coverage_of_affairs\":\"Pemerintah Provinsi Jawa Barat\",\"opd_pemprov_id\":null,\"description\":\"coba instruksi aduan\",\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-09-03T04:10:33.000000Z",
+          "updated_at": "2024-09-03T04:10:33.000000Z",
+          "deadline_at": "2024-09-03T04:10:33.000000Z",
+          "description": "coba instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "BADAN KEPEGAWAIAN DAERAH",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "not_yet_coordinated",
+            "name": "Belum Dikoordinasikan"
+          }
+        },
+        {
+          "id": "390379e7-2899-4792-b1ba-4a2d6d21c1b5",
+          "ikp_code": "1380",
+          "narrative": "narasi instruksi9",
+          "complaint_status_id": "coordinated",
+          "detail": "{\"narrative\":\"narasi instruksi\",\"deadline_at\":\"2024-08-31\",\"description\":\"keterangan instruksi aduan\",\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"KABUPATEN BANDUNG\",\"coverage_of_affairs\":\"Pemerintah Kabupaten\\/Kota\",\"opd_pemprov_id\":\"1\",\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-08-23T07:09:00.000000Z",
+          "updated_at": "2024-08-23T07:09:00.000000Z",
+          "deadline_at": "2024-08-23T07:09:00.000000Z",
+          "description": "keterangan instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "KABUPATEN BANDUNG",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "coordinated",
+            "name": "Dikoordinasikan"
+          }
+        },
+        {
+          "id": "57b0bcf2-92af-4e17-a2ee-aad690315c4d",
+          "ikp_code": "1379",
+          "narrative": "narasi instruksi10",
+          "complaint_status_id": "coordinated",
+          "detail": "{\"narrative\":\"narasi instruksi\",\"deadline_at\":\"2024-08-31\",\"description\":\"keterangan instruksi aduan\",\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"KABUPATEN BANDUNG\",\"coverage_of_affairs\":\"Pemerintah Kabupaten\\/Kota\",\"opd_pemprov_id\":\"1\",\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-08-23T07:08:20.000000Z",
+          "updated_at": "2024-08-23T07:08:20.000000Z",
+          "deadline_at": "2024-08-23T07:08:20.000000Z",
+          "description": "keterangan instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "KABUPATEN BANDUNG",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "coordinated",
+            "name": "Dikoordinasikan"
+          }
+        },
+        {
+          "id": "ca7fd73c-761a-495b-be0f-ef5cf00b1f97",
+          "ikp_code": "1378",
+          "narrative": "narasi instruksi11",
+          "complaint_status_id": "coordinated",
+          "detail": "{\"narrative\":\"narasi instruksi\",\"deadline_at\":\"2024-08-31\",\"description\":\"keterangan instruksi aduan\",\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"KABUPATEN BANDUNG\",\"coverage_of_affairs\":\"Pemerintah Kabupaten\\/Kota\",\"opd_pemprov_id\":\"1\",\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-08-23T04:45:03.000000Z",
+          "updated_at": "2024-08-23T04:45:03.000000Z",
+          "deadline_at": "2024-08-23T04:45:03.000000Z",
+          "description": "keterangan instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "KABUPATEN BANDUNG",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "coordinated",
+            "name": "Dikoordinasikan"
+          }
+        },
+        {
+          "id": "6c9b06d5-4e98-4aa5-829f-f8df85c52747",
+          "ikp_code": "1377",
+          "narrative": "test narasi instruksi12",
+          "complaint_status_id": "coordinated",
+          "detail": "{\"narrative\":\"-\",\"deadline_at\":\"2024-08-31\",\"description\":\"test keterangan instruksi aduan\",\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"KABUPATEN BANDUNG\",\"coverage_of_affairs\":\"Pemerintah Kabupaten\\/Kota\",\"opd_pemprov_id\":\"1\",\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-08-23T04:44:02.000000Z",
+          "updated_at": "2024-08-23T04:44:02.000000Z",
+          "deadline_at": "2024-08-23T04:44:02.000000Z",
+          "description": "test keterangan instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "KABUPATEN BANDUNG",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "coordinated",
+            "name": "Dikoordinasikan"
+          }
+        },
+        {
+          "id": "3e28ec6c-916e-437f-9d60-a03b2f1b375e",
+          "ikp_code": "1376",
+          "narrative": "test usulan narasi instruksi13",
+          "complaint_status_id": "coordinated",
+          "detail": "{\"narrative\":\"test usulan narasi instruksi\",\"deadline_at\":\"2024-08-31\",\"description\":\"test keterangan instruksi aduan\",\"indicator_value\":\"1\",\"indicator_unit\":\"dokumen\",\"opd_name\":\"KABUPATEN BANDUNG\",\"coverage_of_affairs\":\"Pemerintah Kabupaten\\/Kota\",\"opd_pemprov_id\":\"1\",\"user_id\":\"a32d9d06-2fa0-4de4-bfd8-b85303aa7048\"}",
+          "created_by": "a32d9d06-2fa0-4de4-bfd8-b85303aa7048",
+          "created_at": "2024-08-23T04:43:07.000000Z",
+          "updated_at": "2024-08-23T04:43:07.000000Z",
+          "deadline_at": "2024-08-23T04:43:07.000000Z",
+          "description": "test keterangan instruksi aduan",
+          "indicator_value": "1",
+          "indicator_unit": "dokumen",
+          "opd_name": "KABUPATEN BANDUNG",
+          "evidence": null,
+          "scope_of_affairs": "",
+          "responsible_agency": "",
+          "responsible_provincial_government_opd": "",
+          "complaints_count": 0,
+          "complaint_status": {
+            "id": "coordinated",
+            "name": "Dikoordinasikan"
+          }
+        }
+      ],
+      "page_size": 10,
+      "page": 1,
+      "total_pages": 20,
+      "total_data": 20
+    }
+  }
+}
diff --git a/layouts/Dashboard.vue b/layouts/Dashboard.vue
index 2e4ba5c7..8f632e14 100644
--- a/layouts/Dashboard.vue
+++ b/layouts/Dashboard.vue
@@ -1,9 +1,11 @@
 <template>
   <div>
     <div class="flex bg-[#EDEFF3]">
-      <Sidebar class="fixed left-0 top-0 z-10 h-screen bg-green-600" />
+      <Sidebar
+        class="fixed left-0 top-0 z-10 h-screen w-[225px] bg-green-600 2xl:w-[240px]"
+      />
       <div class="h-full w-full py-6">
-        <div class="mx-10">
+        <div class="max-w-screen-xl px-6 2xl:max-w-full 2xl:px-10">
           <BaseHeader
             :navigations="$store.state.header.navigations"
             :description-page="$store.state.header.descriptionPage"
@@ -17,6 +19,6 @@
 
 <script>
 export default {
-  name: 'LayoutDashboard'
+  name: 'LayoutDashboard',
 }
 </script>
diff --git a/mixins/popup-aduan-masuk.js b/mixins/popup-aduan-masuk.js
index 29abd920..c770bbf1 100644
--- a/mixins/popup-aduan-masuk.js
+++ b/mixins/popup-aduan-masuk.js
@@ -156,7 +156,13 @@ export default {
     showPopupFollowupComplaint(dataComplaint) {
       this.idApi = dataComplaint.id
       this.typeDialog = 'followupComplaint'
+      dataComplaint = {
+        opd_name: dataComplaint.opd_name,
+        deadline_date: new Date(dataComplaint.deadline_date) || '-',
+        coverage_of_affairs: dataComplaint.coverage_of_affairs,
+      }
       this.setDataDialog({
+        dataComplaint,
         ...this.setDataDialogConfirmation(
           'Tindaklanjuti Aduan',
           'No.Aduan',
diff --git a/pages/aduan/instruksi-non-pemprov/detail-aduan/_id/index.vue b/pages/aduan/instruksi-non-pemprov/detail-aduan/_id/index.vue
new file mode 100644
index 00000000..b263d3de
--- /dev/null
+++ b/pages/aduan/instruksi-non-pemprov/detail-aduan/_id/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <AduanDetail :type-aduan-page="typeAduan.instruksiNonPemprov.props" />
+</template>
+
+<script>
+import { typeAduan } from '~/constant/aduan-masuk'
+import popupAduanMasuk from '~/mixins/popup-aduan-masuk'
+
+export default {
+  name: 'PageDetailAduanMasuk',
+  mixins: [popupAduanMasuk],
+  layout: 'Dashboard',
+  data() {
+    return {
+      navigations: [
+        {
+          label: '...',
+          link: '/aduan/instruksi-non-pemprov',
+          disabled: true,
+        },
+        {
+          label: 'Detail Instruksi Aduan',
+          link: `/aduan/instruksi-non-pemprov/detail/${this.$route.query.ikpCode}`,
+          disabled: true,
+        },
+        {
+          label: 'Detail Aduan',
+          link: this.$route.fullPath,
+        },
+      ],
+      descriptionPage: 'Berisi detail aduan warga.',
+      typeAduan,
+    }
+  },
+  mounted() {
+    this.$store.commit('setActivePage', 'Daftar Instruksi Aduan Non Pemprov')
+    this.$store.commit('setHeader', {
+      navigations: this.navigations,
+      descriptionPage: this.descriptionPage,
+    })
+  },
+}
+</script>
diff --git a/pages/aduan/instruksi-non-pemprov/detail/_id/index.vue b/pages/aduan/instruksi-non-pemprov/detail/_id/index.vue
new file mode 100644
index 00000000..025a2edc
--- /dev/null
+++ b/pages/aduan/instruksi-non-pemprov/detail/_id/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div class="mt-4 mb-8 flex justify-between">
+      <jds-button
+        variant="secondary"
+        class="!text-[14px] !font-bold"
+        @click="goToBackHandle()"
+      >
+        <div class="flex items-center text-sm">
+          <ArrowLeft class="mr-[10px] h-[12px] w-[14px]" />
+          Kembali
+        </div>
+      </jds-button>
+      <jds-button variant="primary" @click="goToAppTrk()">
+        <div class="flex items-center text-sm font-bold">
+          Link Instruksi di Aplikasi TRK
+          <BaseIconSvg
+            :icon="`/icon/link-external.svg`"
+            :size="20"
+            fill-color="#FFFFFF"
+            class="ml-2 flex-shrink-0"
+          />
+        </div>
+      </jds-button>
+    </div>
+    <BaseTabGroup>
+      <template #tab-list>
+        <TabBarDetail :list-tab="listDataTab" />
+      </template>
+      <template #tab-panel>
+        <BaseTabPanel
+          class="layout-content h-[calc(100vh-280px)] overflow-y-auto py-4 px-[19px]"
+        >
+          <AduanDaftarIKPTableDetail
+            :show-daftar-aduan="true"
+            detail-complaint-link="/aduan/instruksi-non-pemprov/detail-aduan"
+            :ikp-type-page="ikpType.instruksiNonPemprov.props"
+            :ikp-code="$route.params.id"
+          />
+        </BaseTabPanel>
+      </template>
+    </BaseTabGroup>
+  </div>
+</template>
+
+<script>
+import TabBarDetail from '~/components/Aduan/TabBar/Detail'
+import ArrowLeft from '~/assets/icon/arrow-left.svg?inline'
+import { ikpType } from '~/constant/daftar-ikp'
+
+export default {
+  name: 'PageDetailIKP',
+  components: {
+    TabBarDetail,
+    ArrowLeft,
+  },
+  layout: 'Dashboard',
+  data() {
+    return {
+      navigations: [
+        {
+          label: 'Instruksi Aduan Non-Pemprov',
+          link: '/aduan/instruksi-non-pemprov',
+          disabled: true,
+        },
+        {
+          label: 'Detail Instruksi Aduan',
+          link: `/aduan/instruksi-non-pemprov/detail/${this.$route.params.id}`,
+        },
+      ],
+      descriptionPage: 'Berisi detail Intruksi Aduan Non-Pemprov.',
+      listDataTab: [
+        {
+          id: 'ikp-non-pemprov',
+          name: 'Instruksi Aduan',
+          icon: '/icon/icon-aduan/complaint-detail.svg',
+        },
+      ],
+      ikpType,
+    }
+  },
+  mounted() {
+    this.$store.commit('setActivePage', ikpType.instruksiNonPemprov.label)
+    this.$store.commit('setHeader', {
+      navigations: this.navigations,
+      descriptionPage: this.descriptionPage,
+    })
+  },
+
+  methods: {
+    goToBackHandle() {
+      this.$router.push({
+        path: '/aduan/instruksi-non-pemprov',
+        query: this.$route.query,
+      })
+    },
+    goToAppTrk() {
+      window.open(
+        'https://kinerja.jabarprov.go.id/lim/bukan-urusan-pemprov',
+        '_blank'
+      )
+    },
+  },
+}
+</script>
diff --git a/pages/aduan/instruksi-non-pemprov/index.vue b/pages/aduan/instruksi-non-pemprov/index.vue
new file mode 100644
index 00000000..4ffb277b
--- /dev/null
+++ b/pages/aduan/instruksi-non-pemprov/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <DaftarIkp
+    :ikp-type-page="ikpType.instruksiNonPemprov.props"
+    detail-page="/aduan/instruksi-non-pemprov/detail"
+  />
+</template>
+
+<script>
+import DaftarIkp from '~/components/Aduan/DaftarIKP'
+import { ikpType } from '~/constant/daftar-ikp'
+export default {
+  name: 'PageInstruksiAduan',
+  components: { DaftarIkp },
+  layout: 'Dashboard',
+  data() {
+    return {
+      ikpType,
+      navigations: [
+        {
+          label: ikpType.instruksiNonPemprov.label,
+          link: ikpType.instruksiNonPemprov.link,
+        },
+      ],
+      descriptionPage:
+        'Berisi semua daftar instruksi aduan warga dari masyarakat Jabar yang perlu ditindaklanjuti.',
+    }
+  },
+  mounted() {
+    this.$store.commit('setActivePage', 'Daftar Instruksi Non Pemprov')
+    this.$store.commit('setHeader', {
+      navigations: this.navigations,
+      descriptionPage: this.descriptionPage,
+    })
+  },
+}
+</script>
diff --git a/static/icon/icon-aduan/complaint-status/complaint-not-yet-coordinated.svg b/static/icon/icon-aduan/complaint-status/complaint-not-yet-coordinated.svg
new file mode 100644
index 00000000..c1ded95f
--- /dev/null
+++ b/static/icon/icon-aduan/complaint-status/complaint-not-yet-coordinated.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.66667 12C9.2 12 8.80556 11.8389 8.48333 11.5167C8.16111 11.1945 8 10.8 8 10.3334C8 9.86671 8.16111 9.47226 8.48333 9.15004C8.80556 8.82782 9.2 8.66671 9.66667 8.66671C10.1333 8.66671 10.5278 8.82782 10.85 9.15004C11.1722 9.47226 11.3333 9.86671 11.3333 10.3334C11.3333 10.8 11.1722 11.1945 10.85 11.5167C10.5278 11.8389 10.1333 12 9.66667 12ZM3.33333 14.6667C2.96667 14.6667 2.65267 14.5363 2.39133 14.2754C2.13044 14.014 2 13.7 2 13.3334V4.00004C2 3.63337 2.13044 3.3196 2.39133 3.05871C2.65267 2.79737 2.96667 2.66671 3.33333 2.66671H4V2.00004C4 1.81115 4.06378 1.65271 4.19133 1.52471C4.31933 1.39715 4.47778 1.33337 4.66667 1.33337C4.85556 1.33337 5.014 1.39715 5.142 1.52471C5.26956 1.65271 5.33333 1.81115 5.33333 2.00004V2.66671H10.6667V2.00004C10.6667 1.81115 10.7307 1.65271 10.8587 1.52471C10.9862 1.39715 11.1444 1.33337 11.3333 1.33337C11.5222 1.33337 11.6804 1.39715 11.808 1.52471C11.936 1.65271 12 1.81115 12 2.00004V2.66671H12.6667C13.0333 2.66671 13.3473 2.79737 13.6087 3.05871C13.8696 3.3196 14 3.63337 14 4.00004V13.3334C14 13.7 13.8696 14.014 13.6087 14.2754C13.3473 14.5363 13.0333 14.6667 12.6667 14.6667H3.33333ZM3.33333 13.3334H12.6667V6.66671H3.33333V13.3334ZM3.33333 5.33337H12.6667V4.00004H3.33333V5.33337ZM3.33333 5.33337V4.00004V5.33337Z" fill="white"/>
+</svg>
diff --git a/static/icon/link-external.svg b/static/icon/link-external.svg
new file mode 100644
index 00000000..6bc91fda
--- /dev/null
+++ b/static/icon/link-external.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.3333 16.2222H4.66667C4.17778 16.2222 3.77778 15.8222 3.77778 15.3333V4.66667C3.77778 4.17778 4.17778 3.77778 4.66667 3.77778H9.11111C9.6 3.77778 10 3.37778 10 2.88889C10 2.4 9.6 2 9.11111 2H3.77778C3.30628 2 2.8541 2.1873 2.5207 2.5207C2.1873 2.8541 2 3.30628 2 3.77778V16.2222C2 17.2 2.8 18 3.77778 18H16.2222C17.2 18 18 17.2 18 16.2222V10.8889C18 10.4 17.6 10 17.1111 10C16.6222 10 16.2222 10.4 16.2222 10.8889V15.3333C16.2222 15.8222 15.8222 16.2222 15.3333 16.2222ZM11.7778 2.88889C11.7778 3.37778 12.1778 3.77778 12.6667 3.77778H14.9689L6.85333 11.8933C6.68713 12.0595 6.59376 12.285 6.59376 12.52C6.59376 12.755 6.68713 12.9805 6.85333 13.1467C7.01954 13.3129 7.24495 13.4062 7.48 13.4062C7.71505 13.4062 7.94046 13.3129 8.10667 13.1467L16.2222 5.03111V7.33333C16.2222 7.82222 16.6222 8.22222 17.1111 8.22222C17.6 8.22222 18 7.82222 18 7.33333V2.88889C18 2.4 17.6 2 17.1111 2H12.6667C12.1778 2 11.7778 2.4 11.7778 2.88889Z" fill="white"/>
+</svg>