From 81398549e272758d3e39d58aafe27a3621379292 Mon Sep 17 00:00:00 2001
From: Fanrouver <akbararya34@gmail.com>
Date: Wed, 13 Aug 2025 11:36:20 +0700
Subject: [PATCH] wednesday 13 2025 progress klinik, non functionality script

---
 components/.vue                  |  13 --
 pages/Anjungan/AdminAnjungan.vue | 235 +++++++++++++++++++++++++++++++
 pages/KlinikAdmin.vue            |  95 ++++++++++---
 pages/KlinikRuangAdmin.vue       | 213 +++++++++++++++++++++++++++-
 pages/LoketAdmin.vue             |  19 ++-
 pages/index.vue                  |  49 +++++--
 6 files changed, 568 insertions(+), 56 deletions(-)
 delete mode 100644 components/.vue
 create mode 100644 pages/Anjungan/AdminAnjungan.vue

diff --git a/components/.vue b/components/.vue
deleted file mode 100644
index 542020b..0000000
--- a/components/.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>
-
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/pages/Anjungan/AdminAnjungan.vue b/pages/Anjungan/AdminAnjungan.vue
new file mode 100644
index 0000000..4a1f04c
--- /dev/null
+++ b/pages/Anjungan/AdminAnjungan.vue
@@ -0,0 +1,235 @@
+<template>
+  <v-app>
+    <v-layout>
+      <!-- App Bar Header -->
+      <v-app-bar app color="green darken-1" dark>
+        <v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
+        <v-toolbar-title class="ml-2">Antrian RSSA</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn icon>
+          <v-icon>mdi-account-circle</v-icon>
+        </v-btn>
+        <span class="mr-2">Rajal Bayu Nogroho</span>
+      </v-app-bar>
+
+      <!-- Navigation Drawer -->
+      <v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
+        <v-list density="compact" nav>
+          <template v-for="item in items" :key="item.title">
+            <v-menu
+              v-if="item.children"
+              open-on-hover
+              location="end"
+              :nudge-right="3"
+            >
+              <template v-slot:activator="{ props }">
+                <v-list-item
+                  v-bind="props"
+                  :prepend-icon="item.icon"
+                  :title="item.title"
+                  :value="item.title"
+                  :class="{ 'v-list-item--active': item.title === currentPage }"
+                >
+                </v-list-item>
+              </template>
+
+              <v-list>
+                <v-list-item>
+                  <v-list-item-title class="font-weight-bold">{{
+                    item.title
+                  }}</v-list-item-title>
+                </v-list-item>
+                <v-divider></v-divider>
+                <v-list-item
+                  v-for="child in item.children"
+                  :key="child.title"
+                  :to="child.to"
+                  link
+                >
+                  <v-list-item-title>{{ child.title }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+
+            <v-list-item
+              v-else
+              :prepend-icon="item.icon"
+              :title="item.title"
+              :to="item.to"
+              :value="item.title"
+              :class="{ 'v-list-item--active': item.title === currentPage }"
+              link
+            ></v-list-item>
+          </template>
+        </v-list>
+      </v-navigation-drawer>    
+
+      <v-main>
+        <v-container fluid>
+          <p>Admin Anjungan</p>
+          <v-card class="pa-5 mb-5" color="white" flat>
+            <v-row align="center">
+              <v-col cols="12" md="4">
+                <v-text-field
+                  label="Barcode"
+                  placeholder="Masukkan Barcode"
+                  outlined
+                  dense
+                  hide-details
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-chip color="#B71C1C" class="text-caption">
+                  Tekan Enter. (Barcode depan nomor selalu ada huruf lain, Ex:
+                  J20073010005 "Hiraukan huruf 'J' nya")
+                </v-chip>
+              </v-col>
+              <v-col cols="12" md="2">
+                <v-btn block color="info">Pendaftaran Online</v-btn>
+              </v-col>
+            </v-row>
+          </v-card>
+
+          <v-divider class="my-5"></v-divider>
+
+          <v-card class="mb-5">
+            <v-toolbar flat color="transparent" dense>
+              <v-toolbar-title
+                class="text-subtitle-1 font-weight-bold red--text"
+                >DATA PENGUNJUNG TERLAMBAT</v-toolbar-title
+              >
+              <v-spacer></v-spacer>
+              <v-text-field
+                v-model="searchLate"
+                append-icon="mdi-magnify"
+                label="Search"
+                single-line
+                hide-details
+                dense
+                class="mr-2"
+              ></v-text-field>
+              <v-select
+                :items="[10, 25, 50, 100]"
+                label="Show"
+                dense
+                single-line
+                hide-details
+                class="shrink"
+              ></v-select>
+            </v-toolbar>
+            <v-card-text>
+              <v-data-table
+                :headers="lateHeaders"
+                :items="lateVisitors"
+                :search="searchLate"
+                no-data-text="No data available in table"
+                hide-default-footer
+                class="elevation-1"
+              ></v-data-table>
+              <div class="d-flex justify-end pt-2">
+                <v-pagination
+                  v-model="page"
+                  :length="10"
+                  :total-visible="5"
+                ></v-pagination>
+              </div>
+            </v-card-text>
+          </v-card>
+
+          <v-divider class="my-5"></v-divider>
+
+          <v-card>
+            <v-toolbar flat color="transparent" dense>
+              <v-toolbar-title
+                class="text-subtitle-1 font-weight-bold red--text"
+                >DATA PENGUNJUNG</v-toolbar-title
+              >
+              <v-spacer></v-spacer>
+              <v-text-field
+                v-model="search"
+                append-icon="mdi-magnify"
+                label="Search"
+                single-line
+                hide-details
+                dense
+                class="mr-2"
+              ></v-text-field>
+              <v-select
+                :items="[10, 25, 50, 100]"
+                label="Show"
+                dense
+                single-line
+                hide-details
+                class="shrink"
+              ></v-select>
+            </v-toolbar>
+            <v-card-text>
+              <v-data-table
+                :headers="headers"
+                :items="visitors"
+                :search="search"
+                no-data-text="No data available in table"
+                class="elevation-1"
+                :footer-props="{
+                  'items-per-page-options': [10, 25, 50, 100],
+                  'show-current-page': true,
+                }"
+              >
+                <template v-slot:item.aksi="{ item }">
+                  <div class="d-flex flex-column">
+                    <v-btn small color="success" class="my-1">Tiket</v-btn>
+                    <v-btn small color="primary" class="my-1"
+                      >Tiket Pengantar</v-btn
+                    >
+                    <v-btn small color="warning" class="my-1">ByPass</v-btn>
+                  </div>
+                </template>
+              </v-data-table>
+            </v-card-text>
+          </v-card>
+        </v-container>
+      </v-main>
+    </v-layout>
+  </v-app>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const drawer = ref(true); // Nilai awal true agar sidebar terlihat
+const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
+const search = ref("");
+const lateSearch = ref("");
+const clinicSearch = ref("");
+const itemsPerPage = ref(10);
+const lateItemsPerPage = ref(10);
+const clinicItemsPerPage = ref(10);
+const currentPage = ref("Admin Anjungan");
+
+
+// Struktur data yang memisahkan menu dengan dan tanpa submenu
+const items = ref([
+  { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
+  {
+    title: "Setting",
+    icon: "mdi-cog",
+    children: [
+      { title: "Hak Akses", to: "/setting/hak-akses" },
+      { title: "User Login", to: "/setting/user-login" },
+      { title: "Master Loket", to: "/setting/master-loket" },
+      { title: "Master Klinik", to: "/setting/master-klinik" },
+      { title: "Master Klinik Ruang", to: "/setting/master-klinik-ruang" },
+      { title: "Screen", to: "/setting/screen" },
+    ],
+  },
+  { title: "Loket Admin", icon: "mdi-account-supervisor", to : "/LoketAdmin" },
+  { title: "Ranap Admin", icon: "mdi-bed" },
+  { title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
+  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
+  { title: "Anjungan", icon: "mdi-account-box-multiple", to: "/anjungan" },
+  { title: "Fast Track", icon: "mdi-clock-fast" },
+  { title: "Data Pasien", icon: "mdi-account-multiple" },
+  { title: "Screen", icon: "mdi-monitor" },
+  { title: "List Pasien", icon: "mdi-format-list-bulleted" },
+]);
+</script>
diff --git a/pages/KlinikAdmin.vue b/pages/KlinikAdmin.vue
index 8dda0cd..d3d7343 100644
--- a/pages/KlinikAdmin.vue
+++ b/pages/KlinikAdmin.vue
@@ -20,6 +20,7 @@
               open-on-hover
               location="end"
               :nudge-right="3"
+              
             >
               <template v-slot:activator="{ props }">
                 <v-list-item
@@ -50,15 +51,26 @@
               </v-list>
             </v-menu>
 
-            <v-list-item
-              v-else
-              :prepend-icon="item.icon"
-              :title="item.title"
-              :to="item.to"
-              :value="item.title"
-              :class="{ 'v-list-item--active': item.title === currentPage }"
-              link
-            ></v-list-item>
+         <v-tooltip
+            v-else
+            :disabled="!rail"
+            open-on-hover
+            location="end"
+            :text="item.title"
+            color="blue"
+          >
+            <template v-slot:activator="{ props }">
+              <v-list-item
+                v-bind="props"
+                :prepend-icon="item.icon"
+                :title="item.title"
+                :to="item.to"
+                :value="item.title"
+                :class="{ 'v-list-item--active': item.title === currentPage }"
+                link
+              ></v-list-item>
+            </template>
+          </v-tooltip>
           </template>
         </v-list>
       </v-navigation-drawer>    
@@ -68,22 +80,54 @@
       <v-container>
         <div class="d-flex align-center justify-space-between mb-4">
           <h1 class="text-h4">Klinik Admin</h1>
-          <v-chip color="green" variant="elevated">
+          <v-tooltip text="Jumlah Maksimal Bangku Tersedia">
+            <template v-slot:activator="{ props }">
+          <v-chip v-bind="props" color="green" variant="elevated">
             <v-icon left>mdi-circle-small</v-icon>
             Max Quota Bangku 0
           </v-chip>
+            </template>
+          </v-tooltip>
         </div>
 
         <!-- Loket Admin Table -->
         <v-card class="mb-5 pa-4">
           <v-card-title class="d-flex justify-space-between align-center">
             Loket Admin
+             <!-- <div class="d-flex align-center">
+              <span text-h1>Show</span>
+              <v-select
+                density="compact"
+                variant="outlined"
+                :items="[10, 25, 50, 100]"
+                class="mx-1"
+                style="width: 90px"
+              ></v-select>
+              <span>entries</span>
+            </div>   --> 
+            <!-- not aligned with the class div "need seperated div class" -->
             <div>
-              <v-btn color="green" class="mr-2">1</v-btn>
-              <v-btn color="blue" class="mr-2">5</v-btn>
-              <v-btn color="orange" class="mr-2">10</v-btn>
-              <v-btn color="red">20</v-btn>
-            </div>
+                <v-tooltip text="Panggil 1 Antrian">
+                  <template v-slot:activator="{ props }">
+                    <v-btn v-bind="props" color="green" class="mr-2">1</v-btn>
+                  </template>
+                </v-tooltip>
+                <v-tooltip text="Panggil 5 Antrian">
+                  <template v-slot:activator="{ props }">
+                    <v-btn v-bind="props" color="blue" class="mr-2">5</v-btn>
+                  </template>
+                </v-tooltip>
+                <v-tooltip text="Panggil 10 Antrian">
+                  <template v-slot:activator="{ props }">
+                    <v-btn v-bind="props" color="orange" class="mr-2">10</v-btn>
+                  </template>
+                </v-tooltip>
+                <v-tooltip text="Panggil 20 Antrian">
+                  <template v-slot:activator="{ props }">
+                    <v-btn v-bind="props" color="red">20</v-btn>
+                  </template>
+                </v-tooltip>
+            </div>  
           </v-card-title>
           <v-table class="mt-3">
             <thead>
@@ -146,19 +190,20 @@
 import { ref, computed } from "vue";
 
 // Reactive data
-const drawer = ref(true);
-const rail = ref(false);
+const drawer = ref(true); // Nilai awal true agar sidebar terlihat
+const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
 const search = ref("");
 const lateSearch = ref("");
 const clinicSearch = ref("");
 const itemsPerPage = ref(10);
 const lateItemsPerPage = ref(10);
 const clinicItemsPerPage = ref(10);
-const currentPage = ref("Loket Admin");
+const currentPage = ref("Klinik Admin");
 
 // Navigation items
 const items = ref([
   { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
+
   {
     title: "Setting",
     icon: "mdi-cog",
@@ -171,11 +216,19 @@ const items = ref([
       { title: "Screen", to: "/setting/screen" },
     ],
   },
-  { title: "Loket Admin", icon: "mdi-account-supervisor" },
+  { title: "Loket Admin", icon: "mdi-account-supervisor", to : "/LoketAdmin" },
   { title: "Ranap Admin", icon: "mdi-bed" },
   { title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
-  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker" },
-  { title: "Anjungan", icon: "mdi-account-box-multiple", to: "/anjungan" },
+  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
+
+  { 
+    title: "Anjungan", 
+    icon: "mdi-account-box-multiple", 
+    children: [
+      {title: "Anjungan", to: "/Anjungan/Anjungan"},
+      {title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan"}
+    ],
+  },
   { title: "Fast Track", icon: "mdi-clock-fast" },
   { title: "Data Pasien", icon: "mdi-account-multiple" },
   { title: "Screen", icon: "mdi-monitor" },
diff --git a/pages/KlinikRuangAdmin.vue b/pages/KlinikRuangAdmin.vue
index 8e8347f..101b952 100644
--- a/pages/KlinikRuangAdmin.vue
+++ b/pages/KlinikRuangAdmin.vue
@@ -1,13 +1,218 @@
 <template>
-    <div>
+  <v-app id="inspire">
+    <!-- App Bar Header -->
+      <v-app-bar app color="green darken-1" dark>
+        <v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
+        <v-toolbar-title class="ml-2">Antrian RSSA</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn icon>
+          <v-icon>mdi-account-circle</v-icon>
+        </v-btn>
+        <span class="mr-2">Rajal Bayu Nogroho</span>
+      </v-app-bar>
 
-    </div>
+      <!-- Navigation Drawer -->
+      <v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
+        <v-list density="compact" nav>
+          <template v-for="item in items" :key="item.title">
+            <v-menu
+              v-if="item.children"
+              open-on-hover
+              location="end"
+              :nudge-right="3"
+            >
+              <template v-slot:activator="{ props }">
+                <v-list-item
+                  v-bind="props"
+                  :prepend-icon="item.icon"
+                  :title="item.title"
+                  :value="item.title"
+                  :class="{ 'v-list-item--active': item.title === currentPage }"
+                >
+                </v-list-item>
+              </template>
+
+              <v-list>
+                <v-list-item>
+                  <v-list-item-title class="font-weight-bold">{{
+                    item.title
+                  }}</v-list-item-title>
+                </v-list-item>
+                <v-divider></v-divider>
+                <v-list-item
+                  v-for="child in item.children"
+                  :key="child.title"
+                  :to="child.to"
+                  link
+                >
+                  <v-list-item-title>{{ child.title }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+
+            <v-list-item
+              v-else
+              :prepend-icon="item.icon"
+              :title="item.title"
+              :to="item.to"
+              :value="item.title"
+              :class="{ 'v-list-item--active': item.title === currentPage }"
+              link
+            ></v-list-item>
+          </template>
+        </v-list>
+      </v-navigation-drawer>  
+
+    <!-- Main Content -->
+    <v-main class="bg-grey-lighten-3">
+      <v-container>
+        <!-- Klinik Ruang Admin Content -->
+        <h1 class="text-h4 mb-4">Klinik Ruang Admin</h1>
+        <v-card class="pa-4 mb-4">
+          <v-card-title>GENERATE TIKET</v-card-title>
+          <div class="d-flex align-center">
+            <v-text-field
+              label="Masukkan Barcode"
+              variant="outlined"
+              density="compact"
+              class="mr-4"
+            ></v-text-field> 
+            <v-col cols="12 " md="6">
+                <v-chip color="#B71C1C" class="text-caption">
+                  Tekan Enter: (Apabila barcode depan nomor ada huruf lain, ex:
+                    J008730180085 "hiraukan huruf 'J' nya")
+                </v-chip>
+              </v-col>
+          </div>
+         
+        </v-card>
+
+        <v-card class="pa-4">
+          <v-card-title>Pasien Klinik Ruang Admin</v-card-title>
+          <div class="d-flex justify-space-between align-center my-3">
+            <div class="d-flex align-center">
+              <span>Show</span>
+              <v-select
+                density="compact"
+                variant="outlined"
+                :items="[10, 25, 50, 100]"
+                class="mx-2"
+                style="width: 80px"
+              ></v-select>
+              <span>entries</span>
+            </div>
+            <v-text-field
+              label="Search"
+              variant="outlined"
+              density="compact"
+              style="max-width: 200px"
+            ></v-text-field>
+          </div>
+
+          <v-table class="mt-3">
+            <thead>
+              <tr>
+                <th
+                  v-for="header in klinikRuangAdminHeaders"
+                  :key="header.text"
+                >
+                  {{ header.text }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td :colspan="klinikRuangAdminHeaders.length" class="text-center">
+                  No data available in table
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+
+          <div class="d-flex justify-space-between align-center mt-3">
+            <span>Showing 0 to 0 of 0 entries</span>
+            <div>
+              <v-btn size="small" variant="text" disabled>Previous</v-btn>
+              <v-btn size="small" variant="text" disabled>Next</v-btn>
+            </div>
+          </div>
+        </v-card>
+      </v-container>
+    </v-main>
+  </v-app>
 </template>
 
-<script setup lang="ts">
+<script setup>
+import { ref, computed } from "vue";
+
+// Reactive data
+const drawer = ref(true); // Nilai awal true agar sidebar terlihat
+const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
+const search = ref("");
+const lateSearch = ref("");
+const clinicSearch = ref("");
+const itemsPerPage = ref(10);
+const lateItemsPerPage = ref(10);
+const clinicItemsPerPage = ref(10);
+const currentPage = ref("Klinik Ruang Admin");
+
+// Navigation items
+const items = ref([
+  { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
+
+  {
+    title: "Setting",
+    icon: "mdi-cog",
+    children: [
+      { title: "Hak Akses", to: "/setting/hak-akses" },
+      { title: "User Login", to: "/setting/user-login" },
+      { title: "Master Loket", to: "/setting/master-loket" },
+      { title: "Master Klinik", to: "/setting/master-klinik" },
+      { title: "Master Klinik Ruang", to: "/setting/master-klinik-ruang" },
+      { title: "Screen", to: "/setting/screen" },
+    ],
+  },
+  { title: "Loket Admin", icon: "mdi-account-supervisor", to : "/LoketAdmin" },
+  { title: "Ranap Admin", icon: "mdi-bed" },
+  { title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
+  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
+
+  { 
+    title: "Anjungan", 
+    icon: "mdi-account-box-multiple", 
+    children: [
+      {title: "Anjungan", to: "/Anjungan/Anjungan"},
+      {title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan"}
+    ],
+  },
+  { title: "Fast Track", icon: "mdi-clock-fast" },
+  { title: "Data Pasien", icon: "mdi-account-multiple" },
+  { title: "Screen", icon: "mdi-monitor" },
+  { title: "List Pasien", icon: "mdi-format-list-bulleted" },
+]);
+
+
+const klinikRuangAdminHeaders = [
+  { text: 'No' },
+  { text: 'Barcode' },
+  { text: 'No Rekamedik' },
+  { text: 'No Antrian' },
+  { text: 'No Antrian Klinik' },
+  { text: 'No Antrian Ruang' },
+  { text: 'Shift' },
+  { text: 'Pembayaran' },
+  { text: 'Action' },
+  { text: 'Status' },
+]
 
 </script>
 
 <style scoped>
+#inspire .v-navigation-drawer__content {
+  background-color: #f5f5f5;
+}
 
-</style>
\ No newline at end of file
+#inspire .v-app-bar {
+  background-color: #fff;
+}
+</style>
diff --git a/pages/LoketAdmin.vue b/pages/LoketAdmin.vue
index b0769c6..ee7efdf 100644
--- a/pages/LoketAdmin.vue
+++ b/pages/LoketAdmin.vue
@@ -272,8 +272,8 @@
 import { ref, computed } from "vue";
 
 // Reactive data
-const drawer = ref(true);
-const rail = ref(false);
+const drawer = ref(true); // Nilai awal true agar sidebar terlihat
+const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
 const search = ref("");
 const lateSearch = ref("");
 const clinicSearch = ref("");
@@ -285,6 +285,7 @@ const currentPage = ref("Loket Admin");
 // Navigation items
 const items = ref([
   { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
+
   {
     title: "Setting",
     icon: "mdi-cog",
@@ -297,11 +298,19 @@ const items = ref([
       { title: "Screen", to: "/setting/screen" },
     ],
   },
-  { title: "Loket Admin", icon: "mdi-account-supervisor" },
+  { title: "Loket Admin", icon: "mdi-account-supervisor", to : "/LoketAdmin" },
   { title: "Ranap Admin", icon: "mdi-bed" },
   { title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
-  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker" },
-  { title: "Anjungan", icon: "mdi-account-box-multiple", to: "/anjungan" },
+  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
+
+  { 
+    title: "Anjungan", 
+    icon: "mdi-account-box-multiple", 
+    children: [
+      {title: "Anjungan", to: "/Anjungan/Anjungan"},
+      {title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan"}
+    ],
+  },
   { title: "Fast Track", icon: "mdi-clock-fast" },
   { title: "Data Pasien", icon: "mdi-account-multiple" },
   { title: "Screen", icon: "mdi-monitor" },
diff --git a/pages/index.vue b/pages/index.vue
index ce01673..a45d0da 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,26 +1,26 @@
 <template>
   <v-app>
     <v-layout>
+      <!-- App Bar Header -->
       <v-app-bar app color="green darken-1" dark>
         <v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
         <v-toolbar-title class="ml-2">Antrian RSSA</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn icon>
+          <v-icon>mdi-account-circle</v-icon>
+        </v-btn>
+        <span class="mr-2">Rajal Bayu Nogroho</span>
       </v-app-bar>
 
+      <!-- Navigation Drawer -->
       <v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
-        <!-- /* <v-list-item>
-          <v-list-item-title class="text-h6">
-            RSSA
-          </v-list-item-title>
-        </v-list-item>
-         -->
-
         <v-list density="compact" nav>
           <template v-for="item in items" :key="item.title">
             <v-menu
               v-if="item.children"
               open-on-hover
               location="end"
-              :nudge-right="8"
+              :nudge-right="3"
             >
               <template v-slot:activator="{ props }">
                 <v-list-item
@@ -28,6 +28,7 @@
                   :prepend-icon="item.icon"
                   :title="item.title"
                   :value="item.title"
+                  :class="{ 'v-list-item--active': item.title === currentPage }"
                 >
                 </v-list-item>
               </template>
@@ -56,11 +57,12 @@
               :title="item.title"
               :to="item.to"
               :value="item.title"
+              :class="{ 'v-list-item--active': item.title === currentPage }"
               link
             ></v-list-item>
           </template>
         </v-list>
-      </v-navigation-drawer>
+      </v-navigation-drawer>    
 
       <v-main>
         <v-container fluid>
@@ -196,10 +198,19 @@ import { ref } from "vue";
 
 const drawer = ref(true); // Nilai awal true agar sidebar terlihat
 const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
+const search = ref("");
+const lateSearch = ref("");
+const clinicSearch = ref("");
+const itemsPerPage = ref(10);
+const lateItemsPerPage = ref(10);
+const clinicItemsPerPage = ref(10);
+const currentPage = ref("Admin Anjungan");
+
 
 // Struktur data yang memisahkan menu dengan dan tanpa submenu
 const items = ref([
   { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
+
   {
     title: "Setting",
     icon: "mdi-cog",
@@ -212,10 +223,22 @@ const items = ref([
       { title: "Screen", to: "/setting/screen" },
     ],
   },
-  { title: "Loket Admin", icon: "mdi-account-supervisor" },
+  { title: "Loket Admin", icon: "mdi-account-supervisor", to : "/LoketAdmin" },
   { title: "Ranap Admin", icon: "mdi-bed" },
-  { title: "Klinik Admin", icon: "mdi-hospital-box", to: "/KlinikAdmin"},
-  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker" },
-  { title: "Anjungan", icon: "mdi-account-box-multiple", to: "/anjungan" },
+  { title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
+  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
+
+  { 
+    title: "Anjungan", 
+    icon: "mdi-account-box-multiple", 
+    children: [
+      {title: "Anjungan", to: "/Anjungan/Anjungan"},
+      {title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan"}
+    ],
+  },
+  { title: "Fast Track", icon: "mdi-clock-fast" },
+  { title: "Data Pasien", icon: "mdi-account-multiple" },
+  { title: "Screen", icon: "mdi-monitor" },
+  { title: "List Pasien", icon: "mdi-format-list-bulleted" },
 ]);
 </script>