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

app/components/app/doctor/entry-form.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import Block from '~/components/pub/form/block.vue'
+import FieldGroup from '~/components/pub/form/field-group.vue'
+import Field from '~/components/pub/form/field.vue'
+import Label from '~/components/pub/form/label.vue'
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Icon name="i-lucide-user" class="me-2" />
+      <span class="font-semibold">Tambah</span> Dokter
+    </div>
+
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup :column="1">
+            <Label>Nama dan Gelar</Label>
+            <Field>
+              <Input type="text" name="name" default-value="dr." />
+            </Field>
+            <Field>
+              <Input type="text" name="name" />
+            </Field>
+            <Field>
+              <Input type="text" name="name" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>NIK</Label>
+            <Field>
+              <Input type="text" name="identity_number" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>NO SIP</Label>
+            <Field name="sip_number">
+              <Input type="text" name="sip_no" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Telepon / HP</Label>
+            <Field name="phone">
+              <Input type="text" name="phone" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Kode BPJS</Label>
+            <Field>
+              <Input type="text" name="bpjs_code" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Fee Rajal</Label>
+            <Field>
+              <Input type="number" name="outPatient_rate" />
+
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Fee Ranap</Label>
+            <Field>
+              <Input type="number" name="inPatient_rate" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="3">
+            <Label>Status</Label>
+            <Field>
+              <Input type="select" name="status">
+              <option value="active">Aktif</option>
+              <option value="inactive">Tidak Aktif</option>
+              </Input>
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Username</Label>
+            <Field>
+              <Input type="text" name="username" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Password</Label>
+            <Field>
+              <Input type="password" name="password" />
+            </Field>
+
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+    <div class="my-2 flex justify-end py-2">
+      <PubNavFooterCsd />
+    </div>
+  </form>
+</template>

app/components/app/doctor/list-cfg.ts

@@ -0,0 +1,102 @@
+import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 100 },
+  { width: 100 },
+  { width: 100 },
+  { width: 50 },
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Kode JKN' },
+    { label: 'Nama' },
+    { label: 'No KTP' },
+    { label: 'No SIP' },
+    { label: 'No IHS' },
+    { label: 'Telpon' },
+    { label: 'Fee Ranap' },
+    { label: 'Fee Rajal' },
+    { label: 'Status' },
+  ],
+]
+
+export const keys = [
+  'bpjs_code',
+  'name',
+  'identity_number',
+  'sip_no',
+  'ihs_number',
+  'phone',
+  'inPatient_itemPrice',
+  'outPatient_itemPrice',
+  'status',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    console.log(rec)
+    const recX = rec as SmallDetailDto
+    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  inPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  outPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  status: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return doctorStatus[recX.status_code as keyof typeof doctorStatus]
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}

app/components/app/doctor/list.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>

app/components/flow/dashboard/index.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { Activity, CreditCard, DollarSign, Users, UserCheck, UsersRound, Calendar, Hospital } from 'lucide-vue-next'
+
+definePageMeta({
+  roles: ['sys', 'doc'],
+})
+
+const dataCard = ref({
+  totalRevenue: 0,
+  totalRevenueDesc: 0,
+  subscriptions: 0,
+  subscriptionsDesc: 0,
+  sales: 0,
+  salesDesc: 0,
+  activeNow: 0,
+  activeNowDesc: 0,
+})
+
+const dataRecentSales = [
+  {
+    name: 'Olivia Martin',
+    email: 'olivia.martin@email.com',
+    amount: 1999,
+  },
+  {
+    name: 'Jackson Lee',
+    email: 'jackson.lee@email.com',
+    amount: 39,
+  },
+  {
+    name: 'Isabella Nguyen',
+    email: 'isabella.nguyen@email.com',
+    amount: 299,
+  },
+  {
+    name: 'William Kim',
+    email: 'will@email.com',
+    amount: 99,
+  },
+  {
+    name: 'Sofia Davis',
+    email: 'sofia.davis@email.com',
+    amount: 39,
+  },
+]
+
+const summaryData: any[] = [
+  {
+    title: 'Total Pasien Hari Ini',
+    icon: UsersRound,
+    metric: 23,
+    trend: 15,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Rehabilitasi Medik',
+    icon: UserCheck,
+    metric: 100,
+    trend: 9,
+    timeframe: 'daily',
+  },
+  {
+    title: 'VClaim BPJS',
+    icon: Calendar,
+    metric: 52,
+    trend: 1,
+    timeframe: 'daily',
+  },
+  {
+    title: 'SATUSEHAT Sync',
+    icon: Hospital,
+    metric: 71,
+    trend: -3,
+    timeframe: 'daily',
+  },
+]
+
+const linkItems = [
+  {
+    title: 'Daftar Pasien',
+    link: '/patient',
+    icon: 'i-lucide-users',
+  },
+  {
+    title: 'Rawat Jalan',
+    link: '/outpatient/registration-queue',
+    icon: 'i-lucide-stethoscope',
+  },
+  {
+    title: 'Rawat Inap',
+    link: '/outpatient/registration-queue',
+    icon: 'i-lucide-hospital',
+  },
+  {
+    title: 'Rehabilitasi',
+    link: '/patient',
+    icon: 'i-lucide-heart',
+  },
+]
+
+onMounted(() => {
+  dataCard.value = {
+    totalRevenue: 45231.89,
+    totalRevenueDesc: 20.1 / 100,
+    subscriptions: 2350,
+    subscriptionsDesc: 180.5 / 100,
+    sales: 12234,
+    salesDesc: 45 / 100,
+    activeNow: 573,
+    activeNowDesc: 201,
+  }
+})
+</script>
+
+<template>
+  <div class="flex w-full flex-col gap-4">
+    <div class="mt-4 flex flex-wrap items-center justify-between gap-2">
+      <h2 class="text-2xl font-bold tracking-tight">Dashboard SIMRS</h2>
+      <div class="flex items-center gap-4 space-x-2">
+        <div class="bg-primary rounded-xl border p-1 text-white">Status: Aktif</div>
+        <Button class="bg-primary p-2 text-white" size="lg">
+          <Icon name="i-lucide-refresh-ccw" class="h-6 w-6" />
+          Sinkronisasi
+        </Button>
+      </div>
+    </div>
+    <main class="my-6 flex flex-1 flex-col gap-4 md:gap-8">
+      <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+        <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
+      </div>
+      <div class="grid gap-4 md:gap-8 lg:grid-cols-1 xl:grid-cols-3">
+        <Card v-for="n in 3" :key="n">
+          <CardHeader>
+            <CardTitle>Recent Sales</CardTitle>
+          </CardHeader>
+          <CardContent class="grid gap-8">
+            <div v-for="recentSales in dataRecentSales" :key="recentSales.name" class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarFallback>{{
+                  recentSales.name
+                    .split(' ')
+                    .map((n) => n[0])
+                    .join('')
+                }}</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1">
+                <p class="text-sm font-medium leading-none">
+                  {{ recentSales.name }}
+                </p>
+                <p class="text-muted-foreground text-sm">
+                  {{ recentSales.email }}
+                </p>
+              </div>
+              <div class="ml-auto font-medium"></div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+      <div>
+        <Card>
+          <CardHeader>
+            <div class="flex flex-wrap items-center gap-2">
+              <Icon name="i-lucide-activity" class="text-primary me-2 h-6 w-6" />
+              <h2 class="text-xl font-semibold tracking-tight">Aksi Cepat</h2>
+            </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"
+            >
+              <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]" />
+                  <h1>{{ item.title }}</h1>
+                </CardContent>
+              </NuxtLink>
+            </Card>
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  </div>
+</template>

app/components/flow/doctor/add.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <AppDoctorEntryForm />
+</template>

app/components/flow/doctor/list.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+
+const data = ref([])
+
+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)
+
+const headerPrep: HeaderPrep = {
+  title: 'Dokter',
+  icon: 'i-lucide-network',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/doctor/add'),
+  },
+}
+
+useAsyncData('getDoctor', () => xfetch('/api/v1/doctor'), { server: false, immediate: true })
+
+async function getDoctorList() {
+  const resp = await xfetch('/api/v1/doctor')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+onMounted(() => {
+  getDoctorList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+</script>
+
+<template>
+  <PubNavHeaderPrep :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <AppDoctorList :data="data" />
+</template>

app/components/layout/AppSidebar.vue

@@ -12,12 +12,12 @@ const teams: {
   logo: string
   plan: string
 }[] = [
-  {
-    name: 'SIMRS - RSSA',
-    logo: '/rssa-logo.png',
-    plan: 'Saiful Anwar Hospital',
-  },
-]
+    {
+      name: 'SIMRS - RSSA',
+      logo: '/rssa-logo.png',
+      plan: 'Saiful Anwar Hospital',
+    },
+  ]
 const sidebar = {
   collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
   side: 'left', // 'left' | 'right'
@@ -59,13 +59,8 @@ async function setMenu() {
         <SidebarGroupLabel>
           {{ navMenu.heading }}
         </SidebarGroupLabel>
-        <component
-          :is="resolveNavItemComponent(item)"
-          v-for="(item, index) in navMenu.items"
-          :key="index"
-          :item="item"
-          class="my-2 mb-2"
-        />
+        <component :is="resolveNavItemComponent(item)" v-for="(item, index) in navMenu.items" :key="index" :item="item"
+          class="my-2 mb-2" />
       </SidebarGroup>
       <template v-else>
         <div class="p-5">
@@ -73,13 +68,8 @@ async function setMenu() {
         </div>
       </template>
       <SidebarGroup class="mt-auto">
-        <component
-          :is="resolveNavItemComponent(item)"
-          v-for="(item, index) in navMenuBottom"
-          :key="index"
-          :item="item"
-          size="sm"
-        />
+        <component :is="resolveNavItemComponent(item)" v-for="(item, index) in navMenuBottom" :key="index" :item="item"
+          size="sm" />
       </SidebarGroup>
     </SidebarContent>
     <SidebarFooter>

app/components/pub/base/summary-card.vue

@@ -44,10 +44,10 @@ const isTrending = computed<boolean>(() => (props.stat?.trend ?? 0) > 0)
       <Skeleton v-if="props.stat?.trend" class="h-4 w-64 bg-gray-100 text-xs font-medium" />
     </CardContent>
   </Card>
-  <Card v-else-if="props.stat && !props.isSkeleton">
+  <Card v-else-if="props.stat && !props.isSkeleton" class="h-42">
     <CardHeader class="flex flex-row items-center justify-between pb-2">
       <CardTitle class="text-sm font-medium"> {{ props.stat.title }} </CardTitle>
-      <component :is="props.stat.icon" class="text-muted-foreground h-4 w-4" />
+      <component :is="props.stat.icon" class="bg-primary h-[40px] w-auto rounded-md p-2 text-white" />
     </CardHeader>
     <CardContent>
       <div class="text-2xl font-bold">

app/composables/useXfetch.ts

@@ -1,3 +1,5 @@
+import type { Pinia } from 'pinia'
+
 export interface XError {
   code: string
   message: string
@@ -75,7 +77,7 @@ export async function xfetch(
 
 function clearStore() {
   const { $pinia } = useNuxtApp()
-  const userStore = useUserStore($pinia)
+  const userStore = useUserStore($pinia as Pinia)
   userStore.logout()
   navigateTo('/401')
 }

app/lib/page-permission.ts

@@ -9,6 +9,14 @@ export const PAGE_PERMISSIONS = {
     billing: ['R'],
     management: ['R'],
   },
+  '/doctor': {
+    doctor: ['C', 'R', 'U', 'D'],
+    nurse: ['R'],
+    admisi: ['R'],
+    pharmacy: ['R'],
+    billing: ['R'],
+    management: ['R'],
+  },
   '/satusehat': {
     doctor: ['R'],
     nurse: ['R'],

app/middleware/rbac.ts

@@ -1,3 +1,4 @@
+import type { Pinia } from 'pinia'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
 export default defineNuxtRouteMiddleware((to) => {
@@ -5,7 +6,7 @@ export default defineNuxtRouteMiddleware((to) => {
 
   const { $pinia } = useNuxtApp()
   if (import.meta.server) {
-    const authStore = useUserStore($pinia)
+    const authStore = useUserStore($pinia as Pinia)
     // Check specific page permissions if defined in config
     const pagePermissions = PAGE_PERMISSIONS[to.path as keyof typeof PAGE_PERMISSIONS]
     if (pagePermissions) {

app/pages/(features)/doctor/[id]/detail.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  roles: ['sys', 'doc'],
+})
+</script>
+
+<template>
+  <div>detail pasien</div>
+</template>

app/pages/(features)/doctor/[id]/edit.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  roles: ['sys', 'doc'],
+})
+</script>
+
+<template>
+  <div>edit detail pasien</div>
+</template>

app/pages/(features)/doctor/add.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Dokter',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <FlowDoctorAdd />
+  </div>
+  <PubBaseError v-else :status-code="403" />
+</template>

app/pages/(features)/doctor/index.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Dokter',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <FlowDoctorList />
+    </div>
+    <PubBaseError v-else :status-code="403" />
+  </div>
+</template>

app/pages/(features)/patient/index.vue

@@ -12,7 +12,7 @@ definePageMeta({
 const route = useRoute()
 
 useHead({
-  title: () => route.meta.title,
+  title: () => route.meta.title as string,
 })
 
 const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']

app/pages/index.vue

@@ -1,190 +1,17 @@
 <script setup lang="ts">
-import { Activity, CreditCard, DollarSign, Users } from 'lucide-vue-next'
-
 definePageMeta({
-  roles: ['sys', 'doc'],
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Dashboard',
+  contentFrame: 'cf-full-width',
 })
 
-const { userRole } = useUserStore()
-
-const dataCard = ref({
-  totalRevenue: 0,
-  totalRevenueDesc: 0,
-  subscriptions: 0,
-  subscriptionsDesc: 0,
-  sales: 0,
-  salesDesc: 0,
-  activeNow: 0,
-  activeNowDesc: 0,
-})
-
-const dataRecentSales = [
-  {
-    name: 'Olivia Martin',
-    email: 'olivia.martin@email.com',
-    amount: 1999,
-  },
-  {
-    name: 'Jackson Lee',
-    email: 'jackson.lee@email.com',
-    amount: 39,
-  },
-  {
-    name: 'Isabella Nguyen',
-    email: 'isabella.nguyen@email.com',
-    amount: 299,
-  },
-  {
-    name: 'William Kim',
-    email: 'will@email.com',
-    amount: 99,
-  },
-  {
-    name: 'Sofia Davis',
-    email: 'sofia.davis@email.com',
-    amount: 39,
-  },
-]
-
-onMounted(() => {
-  dataCard.value = {
-    totalRevenue: 45231.89,
-    totalRevenueDesc: 20.1 / 100,
-    subscriptions: 2350,
-    subscriptionsDesc: 180.5 / 100,
-    sales: 12234,
-    salesDesc: 45 / 100,
-    activeNow: 573,
-    activeNowDesc: 201,
-  }
+const route = useRoute()
+useHead({
+  title: () => route.meta.title,
 })
 </script>
 
 <template>
-  <div class="flex w-full flex-col gap-4">
-    <div class="flex flex-wrap items-center justify-between gap-2">
-      <h2 class="text-2xl font-bold tracking-tight">Dashboard {{ userRole }}</h2>
-      <div class="flex items-center space-x-2"></div>
-    </div>
-    <main class="flex flex-1 flex-col gap-4 md:gap-8">
-      <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-        <Card>
-          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle class="text-sm font-medium"> Total Pasien Hari Ini </CardTitle>
-            <DollarSign class="text-muted-foreground h-4 w-4" />
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              <!-- <NumberFlow -->
-              <!--   :value="dataCard.totalRevenue" -->
-              <!--   :format="{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }" -->
-              <!-- /> -->
-            </div>
-            <p class="text-muted-foreground text-xs">
-              <!-- <NumberFlow -->
-              <!--   :value="dataCard.totalRevenueDesc" -->
-              <!--   prefix="+" -->
-              <!--   :format="{ style: 'percent', minimumFractionDigits: 1 }" -->
-              <!-- /> -->
-              from last month
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle class="text-sm font-medium"> Subscriptions </CardTitle>
-            <Users class="text-muted-foreground h-4 w-4" />
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              <!-- <NumberFlow :value="dataCard.subscriptions" prefix="+" /> -->
-            </div>
-            <p class="text-muted-foreground text-xs">
-              <!-- <NumberFlow -->
-              <!--   :value="dataCard.subscriptionsDesc" -->
-              <!--   prefix="+" -->
-              <!--   :format="{ style: 'percent', minimumFractionDigits: 1 }" -->
-              <!-- /> -->
-              from last month
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle class="text-sm font-medium"> Sales </CardTitle>
-            <CreditCard class="text-muted-foreground h-4 w-4" />
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              <!-- <NumberFlow :value="dataCard.sales" prefix="+" /> -->
-            </div>
-            <p class="text-muted-foreground text-xs">
-              <!-- <NumberFlow -->
-              <!--   :value="dataCard.salesDesc" -->
-              <!--   prefix="+" -->
-              <!--   :format="{ style: 'percent', minimumFractionDigits: 1 }" -->
-              <!-- /> -->
-              from last month
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle class="text-sm font-medium"> Active Now </CardTitle>
-            <Activity class="text-muted-foreground h-4 w-4" />
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              <!-- <NumberFlow :value="dataCard.activeNow" prefix="+" /> -->
-            </div>
-            <p class="text-muted-foreground text-xs">
-              <!-- <NumberFlow :value="dataCard.activeNowDesc" prefix="+" /> since last hour -->
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-      <div class="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
-        <Card class="xl:col-span-2">
-          <CardHeader>
-            <CardTitle>Overview</CardTitle>
-          </CardHeader>
-          <CardContent class="pl-2">
-            <!-- <DashboardOverview /> -->
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Recent Sales</CardTitle>
-          </CardHeader>
-          <CardContent class="grid gap-8">
-            <div v-for="recentSales in dataRecentSales" :key="recentSales.name" class="flex items-center gap-4">
-              <Avatar class="hidden h-9 w-9 sm:flex">
-                <AvatarFallback>{{
-                  recentSales.name
-                    .split(' ')
-                    .map((n) => n[0])
-                    .join('')
-                }}</AvatarFallback>
-              </Avatar>
-              <div class="grid gap-1">
-                <p class="text-sm font-medium leading-none">
-                  {{ recentSales.name }}
-                </p>
-                <p class="text-muted-foreground text-sm">
-                  {{ recentSales.email }}
-                </p>
-              </div>
-              <div class="ml-auto font-medium">
-                <!-- <NumberFlow -->
-                <!--   :value="recentSales.amount" -->
-                <!--   :format="{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }" -->
-                <!--   prefix="+" -->
-                <!-- /> -->
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </main>
-  </div>
+  <FlowDashboard />
 </template>

app/stores/user.ts

@@ -18,7 +18,7 @@ export const useUserStore = defineStore(
     return {
       user,
       isAuthenticated,
-      userRole: ['admisi'],
+      userRole: ['doctor'],
       login,
       logout,
     }

package.json

@@ -28,10 +28,10 @@
   "devDependencies": {
     "@antfu/eslint-config": "^4.10.1",
     "@nuxt/eslint": "^1.2.0",
-    "@nuxt/icon": "^1.11.0",
+    "@nuxt/icon": "^1.15.0",
     "@nuxt/test-utils": "^3.19.2",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@pinia/nuxt": "^0.5.1",
+    "@pinia/nuxt": "^0.11.2",
     "@unocss/eslint-plugin": "^66.0.0",
     "@unocss/nuxt": "^66.0.0",
     "@vee-validate/zod": "^4.15.0",
@@ -46,7 +46,7 @@
     "eslint-plugin-format": "^1.0.1",
     "happy-dom": "^18.0.1",
     "lucide-vue-next": "^0.482.0",
-    "nuxt": "^4.0.1",
+    "nuxt": "^4.0.3",
     "playwright-core": "^1.54.2",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.5.14",
@@ -65,5 +65,6 @@
     "vue-sonner": "^1.3.0",
     "vue-tsc": "^2.1.10",
     "zod": "^3.24.2"
-  }
+  },
+  "packageManager": "pnpm@8.15.9+sha512.499434c9d8fdd1a2794ebf4552b3b25c0a633abcee5bb15e7b5de90f32f47b513aca98cd5cfd001c31f0db454bc3804edccd578501e4ca293a6816166bbd9f81"
 }

public/side-menu-items/sys.json

@@ -30,6 +30,11 @@
       }
     ]
   },
+  {
+    "title": "Dokter",
+    "icon": "i-lucide-cross",
+    "link": "/doctor"
+  },
   {
     "title": "Pasien",
     "icon": "i-lucide-users",