simrsx-fe/app/components/flow/satusehat/list.vue

<script setup lang="ts">
import type { ServiceStatus } from '~/components/pub/base/service-status.type'
import type { Summary } from '~/components/pub/base/summary-card.type'
import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
import { CircleCheckBig, CircleDashed, CircleX, Download, Ellipsis, ListFilter, Search, Send } from 'lucide-vue-next'

const data = ref([
  {
    id: 'RSC001',
    resource_type: 'Encounter',
    patient: {
      name: 'Ahmad Wepe',
      mrn: 'RM001234',
    },
    status: 2,
    updated_at: '2025-03-12',
    fhir_id: 'ENC-00123',
  },
  {
    id: 'RSC002',
    resource_type: 'Encounter',
    patient: {
      name: 'Siti Aminah',
      mrn: 'RM001235',
    },
    status: 1,
    updated_at: '2025-03-10',
    fhir_id: 'ENC-001235',
  },
  {
    id: 'RSC003',
    resource_type: 'Encounter',
    patient: {
      name: 'Budi Antono',
      mrn: 'RM001236',
    },
    status: 0,
    updated_at: '2025-03-11',
    fhir_id: 'ENC-001236',
  },
  {
    id: 'RSC001',
    resource_type: 'Encounter',
    patient: {
      name: 'Ahmad Wepe',
      mrn: 'RM001234',
    },
    status: 2,
    updated_at: '2025-03-12',
    fhir_id: 'ENC-00123',
  },
  {
    id: 'RSC001',
    resource_type: 'Encounter',
    patient: {
      name: 'Ahmad Wepe',
      mrn: 'RM001234',
    },
    status: 2,
    updated_at: '2025-03-12',
    fhir_id: 'ENC-00123',
  },
  {
    id: 'RSC001',
    resource_type: 'Encounter',
    patient: {
      name: 'Ahmad Wepe',
      mrn: 'RM001234',
    },
    status: 2,
    updated_at: '2025-03-12',
    fhir_id: 'ENC-00123',
  },
])

const refSearchNav: RefSearchNav = {
  onClick: () => {
    // open filter modal
  },
  onInput: (_val: string) => {
    // filter patient list
  },
  onClear: () => {
    // clear url param
  },
}

const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)

// Loading state management
const isLoading = reactive({
  satusehatConn: true,
})

const headerPrep: HeaderPrep = {
  title: 'SATUSEHAT Integration',
  icon: 'i-lucide-box',
  addNav: {
    label: 'Kirim Resource',
    icon: 'i-lucide-send',
    // onClick: () => navigateTo('/patient/add'),
  },
}

// SATUSEHAT Service integration
const service = reactive<ServiceStatus>({
  serviceName: 'SATUSEHAT',
  serviceDesc: 'SATUSEHAT - FHIR R4 Compliant',
  sessionActive: false,
  status: 'connecting',
  isSkeleton: false,
})

// Initial/default data structure
const summaryData: Summary[] = [
  {
    title: 'Resource Terkirim',
    icon: Send,
    metric: 1245,
    trend: 0,
    timeframe: 'daily',
  },
  {
    title: 'Sync Success',
    icon: CircleCheckBig,
    metric: '97%',
    trend: 0,
    timeframe: 'daily',
  },
  {
    title: 'Pending Queue',
    icon: CircleDashed,
    metric: 32,
    trend: 0,
    timeframe: 'daily',
  },
  {
    title: 'Failed Items',
    icon: CircleX,
    metric: 10,
    trend: 0,
    timeframe: 'daily',
  },
]

async function callSatuSehat() {
  try {
    await new Promise((resolve) => setTimeout(resolve, 500))
    service.status = 'connected'
    // service.status = 'error'
    service.sessionActive = true
    // service.sessionActive = false
  } finally {
    isLoading.satusehatConn = false
  }
}

onMounted(() => {
  callSatuSehat()
})

provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)

const listTitle = 'FHIR Resource'

const tabs = [
  {
    value: 'all',
    label: 'Semua Resource',
  },
  {
    value: 'patient',
    label: 'Patient',
  },
  {
    value: 'encounter',
    label: 'Encounter',
  },
  {
    value: 'observation',
    label: 'Observation',
  },
]

const form = [
  {
    value: 'search',
    label: 'Cari pasien'
  },
  {
    value: 'date-picker',
    label: 'Filter berdasarkan tanggal',
  },
]
const actions = [
  {
    value: 'filter',
    label: 'Filter',
    icon: 'i-lucide-list-filter',
  },
  {
    value: 'export',
    label: 'Ekspor',
    icon: 'i-lucide-download',

  },
]

const activeTabFilter = ref('all')
</script>

<template>
  <PubNavHeaderPrep :prep="headerPrep" :ref-search-nav="refSearchNav" />
  <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
    <PubBaseServiceStatus v-bind="service" />
    <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn" :summary-data="summaryData" />
  </div>
  <div class="rounded-md border p-4">
    <h2 class="text-md font-semibold py-2">FHIR Resource</h2>
    <Tabs v-model="activeTabFilter">
      <div class="scrollbar-hide overflow-x-auto flex gap-2 justify-between">
        <TabsList>
          <TabsTrigger v-for="tab in tabs" :key="tab.value" :value="tab.value"
            class="flex-shrink-0 px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700">
            {{ tab.label }}
          </TabsTrigger>
        </TabsList>
        <div class="flex gap-2 items-center">
          <AppSatusehatPicker />
          <div class="relative w-full max-w-sm">
            <Input id="search" type="text" placeholder="Cari pasien..." class="pl-7 h-9" />
            <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
              <Search class="size-4 text-muted-foreground" />
            </span>
          </div>
          <AppSatusehatButtonAction v-for="action in actions" :key="action.value" :icon="action.icon"
            :text="action.label" />
        </div>
      </div>
      <div class="mt-4">
        <TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
          <div class="rounded-md border p-4">
            <Ellipsis v-if="isLoading.satusehatConn" class="size-6 animate-pulse text-muted-foreground mx-auto" />
            <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
          </div>
        </TabsContent>
      </div>
    </Tabs>
  </div>
</template>