Dev cleaning (#106)

2025-10-08 00:03:36 +07:00
parent 7fdd5c61f0
commit 3eb9dde21d
892 changed files with 51326 additions and 1 deletions
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+const openPatient = ref(false)
+const openLetter = ref(false)
+const openHistory = ref(false)
+const selectedPatient = ref('3456512345678880')
+const selectedLetter = ref('SK22334442')
+
+const patients = [
+  {
+    ktp: '3456512345678880',
+    rm: 'RM23311224',
+    bpjs: '334423213214',
+    nama: 'Ahmad Baidowi',
+  },
+  {
+    ktp: '345678804565123',
+    rm: 'RM23455667',
+    bpjs: '33442367656',
+    nama: 'Bian Maulana',
+  },
+]
+
+const letters = [
+  {
+    noSurat: 'SK22334442',
+    tglRencana: '12 Agustus 2025',
+    noSep: 'SEP3232332',
+    namaPasien: 'Ahmad Baidowi',
+    noBpjs: '33442331214',
+    klinik: 'Penyakit Dalam',
+    dokter: 'dr. Andi Prasetyo, Sp.PD-KHOM',
+  },
+  {
+    noSurat: 'SK99120039',
+    tglRencana: '12 Agustus 2025',
+    noSep: 'SEP4443232',
+    namaPasien: 'Bian Maulana',
+    noBpjs: '33442367656',
+    klinik: 'Gigi',
+    dokter: 'dr. Achmad Suparjo',
+  },
+]
+
+const histories = [
+  {
+    no_sep: "SP23311224",
+    tgl_sep: "12 Agustus 2025",
+    no_rujukan: "123444",
+    diagnosis: "C34.9 – Karsinoma Paru",
+    pelayanan: "Rawat Jalan",
+    kelas: "Kelas II",
+  },
+  {
+    no_sep: "SP23455667",
+    tgl_sep: "11 Agustus 2025",
+    no_rujukan: "2331221",
+    diagnosis: "K35 – Apendisitis akut",
+    pelayanan: "Rawat Jalan",
+    kelas: "Kelas II",
+  },
+]
+
+function handleSavePatient() {
+  console.log('Pasien dipilih:', selectedPatient.value)
+}
+
+function handleSaveLetter() {
+  console.log('Letter dipilih:', selectedLetter.value)
+}
+
+function handleEvent(value: string) {
+  if (value === 'search-patient') {
+    openPatient.value = true
+    return
+  }
+  if (value === 'search-letter') {
+    openLetter.value = true
+    return
+  }
+  if (value === 'history-sep') {
+    openHistory.value = true
+    return
+  }
+  if (value === 'back') {
+    navigateTo('/bpjs/sep')
+  }
+}
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-panel-bottom" class="me-2" />
+    <span class="font-semibold">Tambah</span> SEP
+  </div>
+  <AppSepEntryForm @event="handleEvent" />
+  <AppSepTableSearchPatient
+    v-model:open="openPatient"
+    v-model:selected="selectedPatient"
+    :patients="patients"
+    @save="handleSavePatient"
+  />
+  <AppSepTableSearchLetter
+    v-model:open="openLetter"
+    v-model:selected="selectedLetter"
+    :letters="letters"
+    @save="handleSaveLetter"
+  />
+  <AppSepTableHistorySep
+    v-model:open="openHistory"
+    :histories="histories"
+  />
+
+</template>
@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '~/components/pub/ui/dropdown-menu'
+import { X, Check } from 'lucide-vue-next'
+
+const search = ref('')
+const dateRange = ref('12 Agustus 2025 - 32 Agustus 2025')
+const open = ref(false)
+
+const sepData = {
+  no_sep: 'SP23311224',
+  kartu: '001234',
+  nama: 'Kenzie',
+}
+
+interface SepData {
+  tgl_sep: string
+  no_sep: string
+  pelayanan: string
+  jalur: string
+  no_rm: string
+  nama_pasien: string
+  no_kartu_bpjs: string
+  no_surat_kontrol: string
+  tgl_surat_kontrol: string
+  klinik_tujuan: string
+  dpjp: string
+  diagnosis_awal: string
+}
+
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: 0,
+  page: 1,
+  pageSize: 10,
+  totalPage: 5,
+  hasNext: false,
+  hasPrev: false,
+})
+
+function handlePageChange(page: number) {
+  console.log('pageChange', page)
+}
+
+const data = ref<SepData[]>([])
+
+// contoh data dummy
+const rows = [
+  {
+    tgl_sep: '12 Agustus 2025',
+    no_sep: 'SP23311224',
+    pelayanan: 'Rawat Jalan',
+    jalur: 'Kontrol',
+    no_rm: 'RM23311224',
+    nama_pasien: 'Ahmad Baidowi',
+    no_kartu_bpjs: '334423231214',
+    no_surat_kontrol: 'SK22334442',
+    tgl_surat_kontrol: '13 Agustus 2024',
+    klinik_tujuan: 'Penyakit dalam',
+    dpjp: 'dr. Andi Prasetyo, Sp.PD-KHOM',
+    diagnosis_awal: 'C34.9 - Karsinoma Paru',
+  },
+  {
+    tgl_sep: '12 Agustus 2025',
+    no_sep: 'SP23311224',
+    pelayanan: 'Rawat Jalan',
+    jalur: 'Kontrol',
+    no_rm: 'RM001234',
+    nama_pasien: 'Kenzie',
+    no_kartu_bpjs: '12301234',
+    no_surat_kontrol: '123456',
+    tgl_surat_kontrol: '10 Agustus 2024',
+    klinik_tujuan: 'Penyakit dalam',
+    dpjp: 'Dr. Andreas Sutaji',
+    diagnosis_awal: 'Bronchitis',
+  },
+  {
+    tgl_sep: '11 Agustus 2025',
+    no_sep: 'SP23455667',
+    pelayanan: 'Rawat Jalan',
+    jalur: 'Kontrol',
+    no_rm: 'RM001009',
+    nama_pasien: 'Abraham Sulaiman',
+    no_kartu_bpjs: '334235',
+    no_surat_kontrol: '123334',
+    tgl_surat_kontrol: '11 Agustus 2024',
+    klinik_tujuan: 'Penyakit dalam',
+    dpjp: 'Dr. Andreas Sutaji',
+    diagnosis_awal: 'Paru-paru basah',
+  },
+]
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Daftar SEP Prosedur',
+  icon: 'i-lucide-panel-bottom',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => {
+      navigateTo('/bpjs/sep/add')
+    },
+  },
+}
+
+async function getSepList() {
+  isLoading.dataListLoading = true
+  data.value = [...rows]
+  isLoading.dataListLoading = false
+}
+
+function exportCsv() {
+  console.log('Ekspor CSV dipilih')
+  // tambahkan logic untuk generate CSV
+}
+
+function exportExcel() {
+  console.log('Ekspor Excel dipilih')
+  // tambahkan logic untuk generate Excel
+}
+
+function handleDelete() {
+  console.log('Data dihapus:', sepData)
+  open.value = false
+}
+
+watch(
+  () => recAction.value,
+  () => {
+    if (recAction.value === 'showConfirmDel') {
+      open.value = true
+    }
+  },
+)
+
+onMounted(() => {
+  getSepList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header :prep="{ ...headerPrep }" />
+    <!-- Filter Bar -->
+    <div class="my-2 flex flex-wrap items-center gap-2">
+      <!-- Search -->
+      <Input v-model="search" placeholder="Cari No. SEP / No. Kartu BPJS..." class="w-72" />
+
+      <!-- Date Range -->
+      <Popover>
+        <PopoverTrigger as-child>
+          <Button variant="outline" class="h-[40px] w-72 border-gray-400 bg-white text-right font-normal">
+            {{ dateRange }}
+            <Icon name="i-lucide-calendar" class="h-5 w-5" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="p-2">
+          <Calendar mode="range" />
+        </PopoverContent>
+      </Popover>
+
+      <!-- Export -->
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button
+            variant="outline"
+            class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
+          >
+            <Icon name="i-lucide-download" class="h-5 w-5" /> Ekspor
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="w-40">
+          <DropdownMenuItem @click="exportCsv"> Ekspor CSV </DropdownMenuItem>
+          <DropdownMenuItem @click="exportExcel"> Ekspor Excel </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+
+    <div class="rounded-md border p-4">
+      <AppSepList v-if="!isLoading.dataListLoading" :data="data" />
+    </div>
+
+    <!-- Pagination -->
+    <template v-if="paginationMeta">
+      <div v-if="paginationMeta.totalPage > 1">
+        <PubMyUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+      </div>
+    </template>
+
+    <!-- Trigger button -->
+    <Dialog v-model:open="open">
+      <DialogTrigger as-child></DialogTrigger>
+
+      <DialogContent class="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Hapus SEP</DialogTitle>
+        </DialogHeader>
+
+        <DialogDescription class="text-gray-700">
+          Apakah anda yakin ingin menghapus SEP dengan data:
+        </DialogDescription>
+
+        <div class="mt-4 space-y-2 text-sm">
+          <p>No. SEP : {{ sepData.no_sep }}</p>
+          <p>No. Kartu BPJS : {{ sepData.kartu }}</p>
+          <p>Nama Pasien : {{ sepData.nama }}</p>
+        </div>
+
+        <DialogFooter class="mt-6 flex justify-end gap-3">
+          <Button variant="outline" class="border-green-600 text-green-600 hover:bg-green-50" @click="open = false">
+            <X class="mr-1 h-4 w-4" /> Tidak
+          </Button>
+          <Button variant="destructive" class="bg-red-600 hover:bg-red-700" @click="handleDelete">
+            <Check class="mr-1 h-4 w-4" /> Ya
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>