feat: enhance filter navigation with role-based visibility and active position handling

app/components/app/encounter/filter-nav.vue

@@ -8,6 +8,7 @@ import { cn } from '~/lib/utils'
 import type { RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
 
 const props = defineProps<{
+  activePositon?: string
   refSearchNav?: RefSearchNav
   enableExport?: boolean
   refExportNav?: RefExportNav
@@ -30,6 +31,8 @@ const props = defineProps<{
 // }
 
 const searchQuery = ref('')
+const isRoleRegistration = props.activePositon === 'registration'
+const isRoleMedical = props.activePositon === 'medical'
 const dateRange = ref<{ from: Date | null; to: Date | null }>({
   from: new Date(),
   to: new Date(),
@@ -70,7 +73,7 @@ const value = ref({
     <PopoverTrigger as-child>
       <Button
         variant="outline"
-        :class="cn('w-[200px] justify-start text-left font-normal', !value && 'text-muted-foreground')"
+        :class="cn('min-w-[240px] max-w-[320px] justify-start text-left font-normal', !value && 'text-muted-foreground')"
       >
         <CalendarIcon class="mr-2 h-4 w-4" />
         <template v-if="value.start">
@@ -101,7 +104,7 @@ const value = ref({
     Filter
   </Button>
 
-  <DropdownMenu v-show="props.enableExport">
+  <DropdownMenu v-show="props.enableExport && (isRoleRegistration || isRoleMedical)">
     <DropdownMenuTrigger as-child>
       <Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
         <Icon name="i-lucide-download" class="h-4 w-4" />

app/components/content/encounter/list.vue

@@ -34,8 +34,13 @@ const props = defineProps<{
 const { setOpen } = useSidebar()
 setOpen(true)
 
+// Role reactivities
+const { getActiveRole } = useUserStore()
+
 // Main data
 const data = ref([])
+const dataFiltered = ref([])
+const activeServicePosition = ref(getServicePosition(getActiveRole()))
 const isLoading = reactive<DataTableLoader>({
   summary: false,
   isTableLoading: false,
@@ -46,17 +51,18 @@ const recItem = ref<any>(null)
 const isFilterFormDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 const isRecordCancelOpen = ref(false)
+const isRoleRegistration = activeServicePosition.value === 'registration'
 
 // Headers
 const hreaderPrep: CH.Config = {
   title: 'Kunjungan',
   icon: 'i-lucide-users',
-  addNav: {
+  addNav: isRoleRegistration ? {
     label: 'Tambah',
     onClick: () => {
       navigateTo(`/${props.classCode}/encounter/add`)
     },
-  },
+  } : {} as any,
 }
 if (!props.canCreate) {
   delete hreaderPrep.addNav
@@ -87,19 +93,17 @@ const filter = ref<{
   schema: {},
 })
 
-// Role reactivities
-const { getActiveRole } = useUserStore()
-const activeServicePosition = ref(getServicePosition(getActiveRole()))
-provide('activeServicePosition', activeServicePosition)
-watch(getActiveRole, (role? : string) => {
-  activeServicePosition.value = getServicePosition(role)
-})
-
 // Recrod reactivities
+provide('activeServicePosition', activeServicePosition)
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+
+watch(getActiveRole, (role? : string) => {
+  activeServicePosition.value = getServicePosition(role)
+})
+
 watch(() => recAction.value, () => {
   const basePath = `/${props.classCode}/encounter`
   // console.log(`${basePath}/${recId.value}`, recAction.value)
@@ -240,6 +244,7 @@ function handleRemoveConfirmation() {
 <template>
   <CH.ContentHeader v-bind="hreaderPrep">
     <FilterNav
+      :active-positon="activeServicePosition"
       @onFilterClick="() => isFilterFormDialogOpen = true"
       @onExportPdf="() => {}"
       @onExportExcel="() => {}"