simrsx-fe/app/components/content/chemotherapy/verification.vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { format } from 'date-fns'
import { id as localeID } from 'date-fns/locale'
import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
import { Button } from '~/components/pub/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
import Input from '~/components/pub/ui/input/Input.vue'
import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
import AppChemotherapyListVerification from '~/components/app/chemotherapy/list-verification.vue'
import DialogVerification from '~/components/app/chemotherapy/dialog-verification.vue'
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'

const route = useRoute()
const router = useRouter()

// Sample patient data - replace with actual API call
const patientData = ref({
  noRm: 'RM21123',
  nama: 'Ahmad Sutanto',
  jenisPembayaran: 'PKS',
  noBilling: '18291822',
  tanggalLahir: '23 April 1992',
  usia: '33 tahun',
  jenisKelamin: 'Laki-Laki (L)',
  diagnosis: 'C34.9 - Karsinoma Paru',
  klinik: 'Penyakit Dalam',
})

// Sample schedule data - replace with actual API call
const scheduleData = ref([
  {
    id: 1,
    tanggalMasuk: '12 Agustus 2025',
    pjBerkasRm: 'TPP Rawat Jalan',
    dokter: 'Dr. Andreas Sutaji',
    jenisRuangan: 'Ruang Tindakan',
    jenisTindakan: 'KEMOTERAPI',
    tanggalJadwalTindakan: '-',
    status: 'belum_terverifikasi',
    tanggalPemeriksaan: '2025-08-12',
  },
])

const search = ref('')
const dateRange = ref<{ from: Date | null; to: Date | null }>({
  from: null,
  to: null,
})

// Format date range for display
const dateRangeDisplay = computed(() => {
  if (dateRange.value.from && dateRange.value.to) {
    return `${format(dateRange.value.from, 'dd MMMM yyyy', { locale: localeID })} - ${format(dateRange.value.to, 'dd MMMM yyyy', { locale: localeID })}`
  }
  return '12 Agustus 2025 - 32 Agustus 2025' // Default display
})

// Filter + search (client-side)
const filtered = computed(() => {
  const q = search.value.trim().toLowerCase()
  return scheduleData.value.filter((r: any) => {
    if (q) {
      return r.dokter.toLowerCase().includes(q) || patientData.value.noRm.toLowerCase().includes(q)
    }
    return true
  })
})

// Pagination meta
const paginationMeta = reactive<PaginationMeta>({
  recordCount: filtered.value.length,
  page: 1,
  pageSize: 10,
  totalPage: Math.ceil(filtered.value.length / 10),
  hasNext: false,
  hasPrev: false,
})

function handlePageChange(page: number) {
  paginationMeta.page = page
  paginationMeta.hasNext = page < paginationMeta.totalPage
  paginationMeta.hasPrev = page > 1
}

function handleFilter() {
  // TODO: Implement filter logic
  console.log('Filter clicked', { search: search.value, dateRange: dateRange.value })
}

// Dialog verification state
const isDialogVerificationOpen = ref(false)
const selectedSchedule = ref<any>(null)

// Provide verify handler for verify button
function handleVerify(rec: any) {
  selectedSchedule.value = rec
  isDialogVerificationOpen.value = true
}

provide('verify-handler', handleVerify)

function handleDialogSubmit(data: { tanggalPemeriksaan: string | undefined; jadwalTanggalPemeriksaan: string | undefined }) {
  // TODO: Implement submit logic
  console.log('Verification submitted', data)
  isDialogVerificationOpen.value = false
  // Refresh data after verification
}

function handleBackToAdmin() {
  router.push('/outpation-action/chemotherapy/admin')
}
</script>

<template>
  <div class="mx-auto max-w-full">
    <!-- Back Button -->
    <div class="mb-4">
      <Button
        variant="outline"
        class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
        @click="handleBackToAdmin"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
        Kembali ke Administrasi Kunjungan
      </Button>
    </div>

    <!-- Data Pasien Section -->
    <div class="mb-6 rounded-md border bg-white p-4 shadow-sm">
      <h3 class="mb-4 text-lg font-semibold">Data Pasien:</h3>
      <div class="grid grid-cols-2 gap-6">
        <!-- Left Column -->
        <div class="space-y-3">
          <div class="flex">
            <span class="w-48 font-medium">No. RM:</span>
            <span>{{ patientData.noRm }}</span>
          </div>
          <div class="flex">
            <span class="w-48 font-medium">Nama:</span>
            <span>{{ patientData.nama }}</span>
          </div>
          <div class="flex">
            <span class="w-48 font-medium">Jenis Pembayaran:</span>
            <span>{{ patientData.jenisPembayaran }}</span>
          </div>
          <div class="flex">
            <span class="w-48 font-medium">No Billing:</span>
            <span>{{ patientData.noBilling }}</span>
          </div>
        </div>
        <!-- Right Column -->
        <div class="space-y-3">
          <div class="flex">
            <span class="w-48 font-medium">Tanggal Lahir / Usia:</span>
            <span>{{ patientData.tanggalLahir }} / {{ patientData.usia }}</span>
          </div>
          <div class="flex">
            <span class="w-48 font-medium">Jenis Kelamin:</span>
            <span>{{ patientData.jenisKelamin }}</span>
          </div>
          <div class="flex">
            <span class="w-48 font-medium">Diagnosis:</span>
            <span>{{ patientData.diagnosis }}</span>
          </div>
          <div class="flex">
            <span class="w-48 font-medium">Klinik:</span>
            <span>{{ patientData.klinik }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Header Section -->
    <div class="border-b p-6">
      <h1 class="text-2xl font-semibold">Verifikasi Jadwal Pasien</h1>
      <p class="mt-1 text-sm text-gray-500">
        Pantau riwayat masuk, dokter penanggung jawab, dan status pasien secara real-time.
      </p>
    </div>

    <!-- Search and Filter Bar -->
    <div class="flex flex-wrap items-center gap-3 border-b p-4">
      <!-- Search Input -->
      <div class="relative">
        <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
        <Input
          v-model="search"
          placeholder="Cari Nama /No.RM"
          class="w-64 pl-9"
        />
      </div>

      <!-- Date Range Picker -->
      <Popover>
        <PopoverTrigger as-child>
          <Button
            variant="outline"
            class="h-10 w-72 justify-start border-gray-300 bg-white text-left font-normal"
          >
            <CalendarIcon class="mr-2 h-4 w-4" />
            {{ dateRangeDisplay }}
          </Button>
        </PopoverTrigger>
        <PopoverContent class="w-auto p-0">
          <RangeCalendar />
        </PopoverContent>
      </Popover>

      <!-- Filter Button -->
      <Button
        variant="outline"
        class="ml-auto border-orange-500 bg-orange-50 text-orange-600 hover:bg-orange-100"
        @click="handleFilter"
      >
        <FilterIcon class="mr-2 h-4 w-4" />
        Filter
      </Button>
    </div>

    <!-- Data Table -->
    <div class="overflow-x-auto p-4">
      <AppChemotherapyListVerification
        :data="filtered"
        :pagination-meta="paginationMeta"
        @page-change="handlePageChange"
      />
    </div>

    <!-- Dialog Verification -->
    <DialogVerification
      v-model:open="isDialogVerificationOpen"
      :tanggal-pemeriksaan="selectedSchedule?.tanggalPemeriksaan"
      :jadwal-tanggal-pemeriksaan="selectedSchedule?.jadwalTanggalPemeriksaan"
      @submit="handleDialogSubmit"
    />
  </div>
</template>