⚡ enhance (layout): adjust base layout

app/components/layout/AppSidebar.vue

@@ -4,15 +4,57 @@ const navMenu: any[] = [
     heading: 'Menu Utama',
     items: [
       {
-        title: 'Home',
+        title: 'Dashboard',
         icon: 'i-lucide-home',
         link: '/',
       },
       {
         title: 'Pasien',
-        icon: 'i-lucide-home',
+        icon: 'i-lucide-users',
         link: '/patient',
       },
+      {
+        title: 'Rehabilitasi Medik',
+        icon: 'i-lucide-heart',
+        link: '/rehabilitasi',
+      },
+      {
+        title: 'Rawat Jalan',
+        icon: 'i-lucide-stethoscope',
+        link: '/rawat-jalan',
+      },
+      {
+        title: 'Rawat Inap',
+        icon: 'i-lucide-building-2',
+        link: '/rawat-inap',
+      },
+      {
+        title: 'VClaim BPJS',
+        icon: 'i-lucide-refresh-cw',
+        link: '/vclaim',
+        badge: 'Live',
+      },
+      {
+        title: 'SATUSEHAT',
+        icon: 'i-lucide-database',
+        link: '/satusehat',
+        badge: 'FHIR',
+      },
+      {
+        title: 'Medical Records',
+        icon: 'i-lucide-file-text',
+        link: '/medical-records',
+      },
+      {
+        title: 'Laporan',
+        icon: 'i-lucide-clipboard-list',
+        link: '/laporan',
+      },
+      {
+        title: 'Monitoring',
+        icon: 'i-lucide-bar-chart-3',
+        link: '/monitoring',
+      },
     ],
   },
 ]
@@ -43,15 +85,15 @@ const teams: {
   },
 ]
 
-const user: {
-  name: string
-  email: string
-  avatar: string
-} = {
-  name: 'John Doe',
-  email: 'john.doe@email.com',
-  avatar: '/avatars/avatartion.png',
-}
+// const user: {
+//   name: string
+//   email: string
+//   avatar: string
+// } = {
+//   name: '',
+//   email: '',
+//   avatar: '/',
+// }
 
 // const { sidebar } = useAppSettings()
 const sidebar = {
@@ -72,7 +114,13 @@ const sidebar = {
         <SidebarGroupLabel v-if="nav.heading">
           {{ nav.heading }}
         </SidebarGroupLabel>
-        <component :is="resolveNavItemComponent(item)" v-for="(item, index) in nav.items" :key="index" :item="item" />
+        <component
+          :is="resolveNavItemComponent(item)"
+          v-for="(item, index) in nav.items"
+          :key="index"
+          :item="item"
+          class="mb-2"
+        />
       </SidebarGroup>
       <SidebarGroup class="mt-auto">
         <component
@@ -85,7 +133,7 @@ const sidebar = {
       </SidebarGroup>
     </SidebarContent>
     <SidebarFooter>
-      <LayoutSidebarNavFooter :user="user" />
+      <LayoutSidebarNavFooter />
     </SidebarFooter>
     <SidebarRail />
   </Sidebar>

app/components/layout/Auth.vue

@@ -6,7 +6,7 @@ defineProps<{
 
 <template>
   <div
-    class="relative flex h-dvh items-center justify-center bg-[url('/rssa-login-page.jpg')] px-4 lg:max-w-none lg:px-0"
+    class="relative flex h-dvh items-center justify-center px-4 lg:max-w-none lg:px-0"
     :class="{ 'flex-row-reverse': reverse }"
   >
     <div class="bg-muted relative hidden h-full flex-1 flex-col p-10 text-white lg:flex dark:border-r">

app/components/layout/SidebarNavFooter.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
 import { useSidebar } from '~/components/pub/ui/sidebar'
 
-defineProps<{
-  user: {
-    name: string
-    email: string
-    avatar: string
-  }
-}>()
+// defineProps<{
+//   user: {
+//     name: string
+//     email: string
+//     avatar: string
+//   }
+// }>()
 
 const { isMobile } = useSidebar()
+const { logout } = useUserStore()
+const userStore = useUserStore().user
 
 function handleLogout() {
   navigateTo('/auth/login')
+  logout()
 }
 
 const showModalTheme = ref(false)
@@ -28,19 +31,19 @@ const showModalTheme = ref(false)
             class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
           >
             <Avatar class="h-8 w-8 rounded-lg">
-              <AvatarImage :src="user.avatar" :alt="user.name" />
+              <AvatarImage src="" :alt="userStore?.user_name" />
               <AvatarFallback class="rounded-lg">
                 {{
-                  user.name
-                    .split(' ')
+                  userStore?.user_name
+                    ?.split(' ')
                     .map((n) => n[0])
                     .join('')
                 }}
               </AvatarFallback>
             </Avatar>
             <div class="grid flex-1 text-left text-sm leading-tight">
-              <span class="truncate font-semibold">{{ user.name }}</span>
-              <span class="truncate text-xs">{{ user.email }}</span>
+              <span class="truncate font-semibold">{{ userStore?.user_name }}</span>
+              <span class="truncate text-xs">{{ userStore?.user_email }}</span>
             </div>
             <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
           </SidebarMenuButton>
@@ -53,19 +56,19 @@ const showModalTheme = ref(false)
           <DropdownMenuLabel class="p-0 font-normal">
             <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
               <Avatar class="h-8 w-8 rounded-lg">
-                <AvatarImage :src="user.avatar" :alt="user.name" />
+                <AvatarImage src="" :alt="userStore?.user_name" />
                 <AvatarFallback class="rounded-lg">
                   {{
-                    user.name
-                      .split(' ')
+                    userStore?.user_name
+                      ?.split(' ')
                       .map((n) => n[0])
                       .join('')
                   }}
                 </AvatarFallback>
               </Avatar>
               <div class="grid flex-1 text-left text-sm leading-tight">
-                <span class="truncate font-semibold">{{ user.name }}</span>
-                <span class="truncate text-xs">{{ user.email }}</span>
+                <span class="truncate font-semibold">{{ userStore?.user_name }}</span>
+                <span class="truncate text-xs">{{ userStore?.user_email }}</span>
               </div>
             </div>
           </DropdownMenuLabel>
@@ -73,8 +76,8 @@ const showModalTheme = ref(false)
           <DropdownMenuSeparator />
           <DropdownMenuGroup>
             <DropdownMenuItem @click="showModalTheme = true">
-              <Icon name="i-lucide-paintbrush" />
-              Theme
+              <Icon name="i-lucide-user" />
+              Profile
             </DropdownMenuItem>
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
@@ -86,16 +89,6 @@ const showModalTheme = ref(false)
       </DropdownMenu>
     </SidebarMenuItem>
   </SidebarMenu>
-
-  <Dialog v-model:open="showModalTheme">
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>Customize</DialogTitle>
-        <DialogDescription class="text-muted-foreground text-xs"> Customize & Preview in Real Time </DialogDescription>
-      </DialogHeader>
-      <ThemeCustomize />
-    </DialogContent>
-  </Dialog>
 </template>
 
 <style scoped></style>

app/components/layout/SidebarNavLink.vue

@@ -9,7 +9,7 @@ withDefaults(
   }>(),
   {
     size: 'default',
-  }
+  },
 )
 
 const { setOpenMobile } = useSidebar()
@@ -19,7 +19,11 @@ const { setOpenMobile } = useSidebar()
   <SidebarMenu>
     <SidebarMenuItem>
       <SidebarMenuButton as-child :tooltip="item.title" :size="size">
-        <NuxtLink :to="item.link" @click="setOpenMobile(false)">
+        <NuxtLink
+          :to="item.link"
+          class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200"
+          @click="setOpenMobile(false)"
+        >
           <Icon :name="item.icon || ''" mode="svg" />
           <span>{{ item.title }}</span>
           <span