simrsx-fe/app/components/content/sep/list.vue

<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 dataBpjs = {
  noSEP: '1323R0010825V027605',
  tglSEP: '2025-08-28',
  noKartu: '0001966915168 (MR. 11274212)',
  nama: 'Kenzie',
  tglLahir: '2010-01-25',
  kelamin: 'Laki-laki',
  telepon: '085854487311',
  spesialis: 'HEMODIALISA',
  dokter: 'dr. Nursam, SpPD-KGH',
  faskes: 'RS Saiful Anwar',
  diagnosa: 'Penyakit ginjal kronis, stadium 5',
  catatan: 'Riwayat HEMODIALISA di RSUD DR. SAIFUL ANWAR',
  peserta: { jenisPeserta: 'PEKERJA MANDIRI' },
  jenisRawat: 'R. Jalan',
  jenisKunjungan: 'Kunjungan Kontrol (ulangan)',
  poliPerujuk: '-',
  kelasHak: '-',
  kelasRawat: 'Kelas 3',
  penjamin: '-',
  qrCodeUrl: '/dummy-qr.png',
  cetakanKe: 1,
  tglCetak: '28-08-2025 07:10:30 WIB',
}

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('/integration/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>