Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into feat/user

2025-08-28 12:01:55 +07:00
parent a48ac7cc68 6ad99d45f2
commit 00d4419bc7
225 changed files with 2110 additions and 421 deletions
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Activity, CreditCard, DollarSign, Users, UserCheck, UsersRound, Calendar, Hospital } from 'lucide-vue-next'
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'

 const dataCard = ref({
  totalRevenue: 0,
@@ -161,8 +161,11 @@ onMounted(() => {
            </div>
          </CardHeader>
          <CardContent class="grid cursor-pointer gap-8 md:grid-cols-4 md:gap-8">
-            <Card v-for="item in linkItems" :key="item"
-              class="border-primary hover:bg-primary my-2 h-32 border transition-colors duration-200 hover:bg-gray-200">
+            <Card
+            v-for="item in linkItems"
+            :key="item.title"
+              class="border-primary hover:bg-primary my-2 h-32 border transition-colors duration-200 hover:bg-gray-200"
+              >
              <NuxtLink :to="item.link">
                <CardContent class="my-2 grid h-full grid-rows-2 place-items-center">
                  <Icon :name="item.icon" class="text-primary h-9 w-[60px]" />
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { Summary } from '~/components/pub/base/summary-card.type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { Summary } from '~/components/pub/base/summary-card/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
 import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
 import SummaryCard from '~/components/pub/base/summary-card/summary-card.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
@@ -20,10 +21,11 @@ const refSearchNav: RefSearchNav = {
 }

 // Loading state management
-const isLoading = reactive({
+const isLoading = reactive<DataTableLoader>({
  summary: false,
-  table: false,
+  isTableLoading: false,
 })
+
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
@@ -84,11 +86,12 @@ async function getPatientSummary() {
 }

 async function getPatientList() {
+  isLoading.isTableLoading = true
  const resp = await xfetch('/api/v1/patient')
-  console.log('data patient', resp)
  if (resp.success) {
    data.value = (resp.body as Record<string, any>).data
  }
+  isLoading.isTableLoading = false
 }

 onMounted(() => {
@@ -99,6 +102,7 @@ onMounted(() => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
 </script>

 <template>
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
 import RehabSepProsedurList from '~/components/app/rehab/registration/sep-prosedur/list.vue'

 const props = defineProps<{
@@ -21,9 +22,9 @@ const refSearchNav: RefSearchNav = {
 }

 // Loading state management
-const isLoading = reactive({
-  summary: false,
-  table: false,
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+
 })
 const recId = ref<number>(0)
 const recAction = ref<string>('')
@@ -40,7 +41,6 @@ const hreaderPrep: HeaderPrep = {

 async function getPatientList() {
  const resp = await xfetch('/api/v1/patient')
-  console.log('data patient', resp)
  if (resp.success) {
    data.value = (resp.body as Record<string, any>).data
  }
@@ -53,12 +53,12 @@ onMounted(() => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
 </script>

 <template>
-  <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
    <RehabSepProsedurList :data="data" />
  </div>
 </template>
-/template>
@@ -0,0 +1,97 @@
+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/custom-ui/data/types'
+import { CircleCheckBig, CircleDashed, CircleX, Send } from 'lucide-vue-next'
+
+export const tabs = [
+  {
+    value: 'all',
+    label: 'Semua Resource',
+  },
+  {
+    value: 'patient',
+    label: 'Patient',
+  },
+  {
+    value: 'encounter',
+    label: 'Encounter',
+  },
+  {
+    value: 'observation',
+    label: 'Observation',
+  },
+]
+
+export const actions = [
+  {
+    value: 'export',
+    label: 'Ekspor',
+    icon: 'i-lucide-download',
+  },
+]
+
+// Status filter options
+export const statusOptions = [
+  { value: '0', label: 'Failed' },
+  { value: '1', label: 'Pending' },
+  { value: '2', label: 'Success' },
+]
+export 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',
+  },
+]
+
+// SATUSEHAT Service integration
+export const service = reactive<ServiceStatus>({
+  serviceName: 'SATUSEHAT',
+  serviceDesc: 'SATUSEHAT - FHIR R4 Compliant',
+  sessionActive: false,
+  status: 'connecting',
+  isSkeleton: false,
+})
+
+export const headerPrep: HeaderPrep = {
+  title: 'SATUSEHAT Integration',
+  icon: 'i-lucide-box',
+  addNav: {
+    label: 'Kirim Resource',
+    icon: 'i-lucide-send',
+    // onClick: () => navigateTo('/patient/add'),
+  },
+}
+
+export const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+  },
+  onClear: () => {
+  },
+}
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import { useUrlSearchParams } from '@vueuse/core'
+import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { actions, headerPrep, refSearchNav, service, summaryData, tabs } from './const'
+import { defaultQuery, querySchema, tabSwitcher } from './schema.query'
+
+// State management
+const data = ref([])
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isLoading = reactive<DataTableLoader>({
+  satusehatConn: true,
+  isTableLoading: false,
+})
+const queryParams = useUrlSearchParams('history', {
+  initialValue: defaultQuery,
+  removeFalsyValues: true,
+})
+const params = computed(() => {
+  const result = querySchema.safeParse(queryParams)
+  return result.data
+})
+// Pagination state
+const pagination = ref({
+  total: 0,
+  page: 1,
+  limit: 10,
+  total_pages: 0,
+  has_next: false,
+  has_prev: false,
+})
+
+// API function to fetch data
+async function fetchData() {
+  try {
+    isLoading.isTableLoading = true
+    data.value = []
+    const response = await xfetch('/api/v1/satusehat/list', 'POST', {
+      resource_type: params.value?.resource_type,
+      date_from: params.value?.date_from,
+      date_to: params.value?.date_to,
+      search: params.value?.q,
+      page: params.value?.page,
+      limit: params.value?.limit,
+    })
+
+    if (response.success) {
+      data.value = response.body.data
+      pagination.value = response.body.meta
+    }
+  } catch (error) {
+    console.error('Error fetching data:', error)
+    data.value = []
+  } finally {
+    isLoading.isTableLoading = false
+  }
+}
+
+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
+  }
+}
+
+// Initialize params from URL on mount
+onMounted(async () => {
+  await callSatuSehat()
+  await fetchData()
+})
+
+// Watch for url param changed state and trigger refetch
+watch(params, () => {
+  fetchData()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Sync active tab filter with queryparams
+// fallback and default to `all` filter
+const activeTabFilter = computed({
+  get: () => {
+    const result = tabSwitcher.parse(queryParams.resource_type)
+    return result
+  },
+  set: (value) => {
+    queryParams.resource_type = value
+    queryParams.q = defaultQuery.q
+    queryParams.page = defaultQuery.page
+    queryParams.limit = defaultQuery.limit
+    queryParams.date_from = defaultQuery.date_from
+    queryParams.date_to = defaultQuery.date_to
+  },
+})
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header :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">
+
+            <!-- Search Input -->
+
+            <AppSatusehatPicker />
+            <div class="relative w-full max-w-sm">
+
+              <Dialog>
+                <DialogTrigger>
+                  <Input type="text" placeholder="Cari pasien..." class="pl-3 h-9" />
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader class="border-b-1">
+                    <DialogTitle class="pb-2">Pencarian</DialogTitle>
+                  </DialogHeader>
+                  <Form>
+                    <FormField v-slot="{ componentField }" name="username">
+                      <FormItem>
+                        <FormLabel>Pasien</FormLabel>
+                        <FormControl>
+                          <Input type="text" placeholder="nama pasien, id pasien" v-bind="componentField" />
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                    <FormField v-slot="{ componentField }" name="status">
+                      <FormItem>
+                        <FormLabel>Status</FormLabel>
+                        <FormControl>
+                          <Select v-bind="componentField">
+                            <SelectTrigger class="bg-white border border-gray-300">
+                              <SelectValue class="text-gray-400" placeholder="-- select item" />
+                            </SelectTrigger>
+                            <SelectContent class="bg-white ">
+                              <SelectItem value="0">
+                                Gagal
+                              </SelectItem>
+                              <SelectItem value="1">
+                                Pending
+                              </SelectItem>
+                              <SelectItem value="2">
+                                Terkirim
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                    <FormField v-slot="{ componentField }" name="fhirId">
+                      <FormItem>
+                        <FormLabel>FHIR ID</FormLabel>
+                        <FormControl>
+                          <Input type="text" placeholder="fhir id" v-bind="componentField" />
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                  </Form>
+
+                  <DialogFooter>
+                    <Button variant="outline">
+                      Reset
+                    </Button>
+                    <Button>
+                      Apply
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </div>
+
+            <!-- Action Buttons -->
+            <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">
+              <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
+
+              <!-- Pagination -->
+              <div
+v-if="!isLoading.satusehatConn && !isLoading.isTableLoading && pagination.total > 0"
+                class="mt-4 flex justify-between items-center"
+>
+                <div class="text-sm text-muted-foreground">
+                  Menampilkan {{ ((pagination.page - 1) * pagination.limit) + 1 }} -
+                  {{ Math.min(pagination.page * pagination.limit, pagination.total) }}
+                  dari {{ pagination.total }} data
+                </div>
+                <div class="flex gap-2">
+                  <Button v-if="pagination.has_prev" variant="outline" size="sm" @click="queryParams.page--">
+                    Sebelumnya
+                  </Button>
+                  <Button v-if="pagination.has_next" variant="outline" size="sm" @click="queryParams.page++">
+                    Selanjutnya
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </TabsContent>
+        </div>
+      </Tabs>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,23 @@
+import * as z from 'zod'
+
+const resourceTabEnum = z.enum(['all', 'patient', 'encounter', 'observation'])
+
+export const tabSwitcher = resourceTabEnum.default('all').catch('all')
+export const querySchema = z.object({
+  q: z.string().min(3).optional().catch(''),
+  resource_type: tabSwitcher,
+  date_from: z.string().optional().catch(''),
+  date_to: z.string().optional().catch(''),
+  page: z.coerce.number().int().min(1).default(1).catch(1),
+  limit: z.coerce.number().int().min(1).max(20).default(10).catch(10),
+})
+
+export const defaultQuery = {
+  q: '',
+  status: '',
+  resource_type: 'all',
+  date_from: '',
+  date_to: '',
+  page: 1,
+  limit: 10,
+}
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'

 const data = ref([])
@@ -16,6 +17,10 @@ const refSearchNav: RefSearchNav = {
  },
 }

+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
@@ -29,13 +34,15 @@ const headerPrep: HeaderPrep = {
  },
 }

-useAsyncData('getDoctor', () => xfetch('/api/v1/doctor'), { server: false, immediate: true })
-
 async function getDoctorList() {
+  isLoading.dataListLoading = true
+
  const resp = await xfetch('/api/v1/doctor')
  if (resp.success) {
    data.value = (resp.body as Record<string, any>).data
  }
+
+  isLoading.dataListLoading = false
 }

 onMounted(() => {
@@ -45,9 +52,14 @@ onMounted(() => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
 </script>

 <template>
-  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <AppDoctorList :data="data" />
+  <div class="rounded-md border p-4">
+    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+    <div class="rounded-md border p-4">
+      <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
+    </div>
+  </div>
 </template>