From 1b1d7e331a540c486c47168ac400b17d25d820cb Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Wed, 24 Sep 2025 11:18:02 +0700
Subject: [PATCH] Update Theme

---
 layouts/default.vue                          |  48 +++---
 pages/Anjungan/Anjungan.vue                  |   8 +-
 pages/{Screen => Anjungan}/AntrianKlinik.vue |  10 +-
 pages/Fast-Track.vue                         |   4 +-
 pages/Loket-Admin.vue                        |  12 +-
 pages/Setting/Master-Loket.vue               | 137 +++++++++++++---
 pages/Setting/Screen/edit/[id].vue           |   2 +-
 pages/Setting/Screen/index.vue               | 155 +++++++++++++++----
 pages/data-pasien/edit/[id].vue              |   2 +-
 pages/data-pasien/index.vue                  |   2 +-
 pages/index.vue                              |  88 ++++++++++-
 11 files changed, 368 insertions(+), 100 deletions(-)
 rename pages/{Screen => Anjungan}/AntrianKlinik.vue (98%)

diff --git a/layouts/default.vue b/layouts/default.vue
index d019483..e8d9d27 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,31 +1,26 @@
 <template>
-  <!-- Root component for the entire Vuetify application -->
   <v-app>
-    <!-- App bar di bagian atas layout -->
-     <v-app-bar app color=#ff9248 dark>
-        <v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
-        <v-toolbar-title class="ml-2" style="color: white;">Antrean RSSA</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-btn icon>
-          <v-icon color="white">mdi-account-circle</v-icon>
-        </v-btn>
-        <span class="mr-2" style="color:white">Adam Sulfat</span>
-      </v-app-bar>
+    <v-app-bar app color="#ff9248" dark>
+      <v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
+      <v-toolbar-title class="ml-2" style="color: white"
+        >Antrean RSSA</v-toolbar-title
+      >
+      <v-spacer></v-spacer>
+      <v-btn icon>
+        <v-icon color="white">mdi-account-circle</v-icon>
+      </v-btn>
+      <span class="mr-2" style="color: white">Adam Sulfat</span>
+    </v-app-bar>
 
-    <!-- Komponen sidebar (v-navigation-drawer) yang Anda berikan -->
     <v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
-      <!-- Komponen untuk menampilkan item daftar menu -->
       <v-list density="compact" nav>
-        <!-- Loop melalui setiap item di array 'items' -->
         <template v-for="item in items" :key="item.title">
-          <!-- V-menu untuk item yang memiliki sub-menu (children) -->
           <v-menu
             v-if="item.children"
             open-on-hover
             location="end"
             :nudge-right="8"
           >
-            <!-- Slot untuk mengaktifkan menu saat diklik/hover -->
             <template v-slot:activator="{ props }">
               <v-list-item
                 v-bind="props"
@@ -71,10 +66,8 @@
       </v-list>
     </v-navigation-drawer>
 
-    <!-- Area konten utama aplikasi -->
     <v-main>
       <v-container fluid class="pa-0">
-        <!-- Di sini, konten halaman akan di-render oleh Nuxt -->
         <slot></slot>
       </v-container>
     </v-main>
@@ -83,7 +76,8 @@
         <v-row no-gutters align="center">
           <v-col cols="12" md="6">
             <span class="text-caption text-grey-darken-2">
-              RSUD Dr. Saiful Anwar Malang | Jl. Jaksa Agung Suprapto No. 2 Malang | Telp : 0341- 362101 | Fax : 0341-369384
+              RSUD Dr. Saiful Anwar Malang | Jl. Jaksa Agung Suprapto No. 2
+              Malang | Telp : 0341- 362101 | Fax : 0341-369384
             </span>
           </v-col>
           <v-col cols="12" md="6" class="text-right">
@@ -100,13 +94,12 @@
 <script setup>
 import { ref, computed } from "vue";
 import { useRoute } from 'vue-router';
+import AntrianKlinik from "~/pages/Anjungan/AntrianKlinik.vue";
 
 // Data untuk item-item sidebar
 const items = ref([
   { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
-  {
-    title: "Setting",
-    icon: "mdi-cog",
+  { title: "Setting", icon: "mdi-cog",
     children: [
       { title: "Hak Akses", to: "/setting/hak-akses" },
       { title: "User Login", to: "/setting/user-login" },
@@ -120,10 +113,15 @@ const items = ref([
   { title: "Ranap Admin", icon: "mdi-bed", to: "/ranap-admin" },
   { title: "Klinik Admin", icon: "mdi-hospital-box", to: "/klinik-admin" },
   { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/klinik-ruang-admin" },
-  { title: "Anjungan", icon: "mdi-account-box-multiple", to: "/anjungan" },
+  { title: "Anjungan", icon: "mdi-account-box-multiple",
+      children: [
+        { title: "Anjungan", to: "/anjungan/anjungan" },
+        { title: "Klinik Ruang", to: "/anjungan/AntrianKlinik"},
+        ],
+  },
   { title: "Fast Track", icon: "mdi-clock-fast", to: "/fast-track" },
   { title: "Data Pasien", icon: "mdi-account-multiple", to: "/data-pasien" },
-  { title: "Screen", icon: "mdi-monitor", to: "/screen" },
+  { title: "Screen", icon: "mdi-monitor", to: "/setting/screen" },
   { title: "List Pasien", icon: "mdi-format-list-bulleted", to: "/list-pasien" },
 ]);
 
@@ -155,4 +153,4 @@ const currentActiveMenu = computed(() => {
   background-color: #ffffff;
   color: #000000 !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/Anjungan/Anjungan.vue b/pages/Anjungan/Anjungan.vue
index a57a1dc..d443867 100644
--- a/pages/Anjungan/Anjungan.vue
+++ b/pages/Anjungan/Anjungan.vue
@@ -23,7 +23,7 @@
     </div>
 
     <!-- Controls Section -->
-    <v-card class="controls-card mb-4" elevation="2">
+    <!-- <v-card class="controls-card mb-4" elevation="2">
       <v-card-text class="py-3">
         <v-row align="center">
           <v-col cols="12" md="6">
@@ -67,14 +67,14 @@
           </v-col>
         </v-row>
       </v-card-text>
-    </v-card>
+    </v-card> -->
 
     <!-- Clinic Cards -->
     <v-card elevation="2" class="main-content-card">
-      <v-card-title class="d-flex align-center pa-4 bg-grey-lighten-4">
+      <!-- <v-card-title class="d-flex align-center pa-4 bg-grey-lighten-4">
         <v-icon class="mr-2">mdi-hospital-marker</v-icon>
         <span>Daftar Klinik - {{ filteredClinics.length }} dari {{ totalClinics }} klinik</span>
-      </v-card-title>
+      </v-card-title> -->
 
       <v-card-text class="pa-6">
         <v-row>
diff --git a/pages/Screen/AntrianKlinik.vue b/pages/Anjungan/AntrianKlinik.vue
similarity index 98%
rename from pages/Screen/AntrianKlinik.vue
rename to pages/Anjungan/AntrianKlinik.vue
index 3519523..025b544 100644
--- a/pages/Screen/AntrianKlinik.vue
+++ b/pages/Anjungan/AntrianKlinik.vue
@@ -210,30 +210,30 @@
       
       <v-card-text class="pa-4">
         <v-row>
-          <v-col cols="6" md="3" class="text-center">
+          <v-col cols="8" md="4" class="text-center">
             <div class="stat-item">
               <div class="stat-number text-primary">{{ statistics.total }}</div>
               <div class="stat-label">Total Antrian</div>
             </div>
           </v-col>
-          <v-col cols="6" md="3" class="text-center">
+          <v-col cols="8" md="4" class="text-center">
             <div class="stat-item">
               <div class="stat-number text-success">{{ statistics.completed }}</div>
               <div class="stat-label">Selesai</div>
             </div>
           </v-col>
-          <v-col cols="6" md="3" class="text-center">
+          <v-col cols="8" md="4" class="text-center">
             <div class="stat-item">
               <div class="stat-number text-warning">{{ statistics.waiting }}</div>
               <div class="stat-label">Menunggu</div>
             </div>
           </v-col>
-          <v-col cols="6" md="3" class="text-center">
+          <!-- <v-col cols="6" md="3" class="text-center">
             <div class="stat-item">
               <div class="stat-number text-error">{{ statistics.avgWaitTime }}</div>
               <div class="stat-label">Rata-rata Tunggu (menit)</div>
             </div>
-          </v-col>
+          </v-col> -->
         </v-row>
       </v-card-text>
     </v-card>
diff --git a/pages/Fast-Track.vue b/pages/Fast-Track.vue
index 9d7b568..d892c28 100644
--- a/pages/Fast-Track.vue
+++ b/pages/Fast-Track.vue
@@ -22,7 +22,7 @@
             <v-icon start>{{ isLiveMode ? 'mdi-circle' : 'mdi-circle-outline' }}</v-icon>
             {{ isLiveMode ? 'Live Mode' : 'Offline Mode' }}
           </v-chip> -->
-          <v-btn
+          <!-- <v-btn
             color="white"
             variant="flat"
             prepend-icon="mdi-qrcode-scan"
@@ -30,7 +30,7 @@
             class="text-primary"
           >
             Scan Barcode
-          </v-btn>
+          </v-btn> -->
         </div>
       </div>
     </div>
diff --git a/pages/Loket-Admin.vue b/pages/Loket-Admin.vue
index f2348dc..e5f11b9 100644
--- a/pages/Loket-Admin.vue
+++ b/pages/Loket-Admin.vue
@@ -139,9 +139,12 @@
                 height="8"
                 rounded
               ></v-progress-linear>
-              <v-card-text class="call-controls-card align-center py-4">
-                <div> <span class="text-subtitle-1 font-weight-medium"
-                    >Panggil Pasien:</span> </div>
+            </div>
+          </v-card-text>
+        </v-card>
+                      <v-card-text class="call-controls-card align-center py-4">
+               <div class="text-subtitle-1 font-weight-medium"
+                    >Panggil Pasien:</div>
                 <div class="d-flex align-center flex-wrap mb-3">
                   <v-btn
                     color="success"
@@ -181,9 +184,6 @@
                   </v-btn>
                 </div>
               </v-card-text>
-            </div>
-          </v-card-text>
-        </v-card>
       </v-col>
     </v-row>
 
diff --git a/pages/Setting/Master-Loket.vue b/pages/Setting/Master-Loket.vue
index bceaefd..e6145c0 100644
--- a/pages/Setting/Master-Loket.vue
+++ b/pages/Setting/Master-Loket.vue
@@ -1,18 +1,40 @@
 <template>
   <v-container>
     <v-card>
-      <v-card-title class="d-flex justify-space-between align-center">
+      <!-- <v-card-title class="d-flex justify-space-between align-center">
         <span>Master Loket</span>
         <v-btn color=#ff9248 @click="tambahLoket" style="color:white;">Tambah Baru</v-btn>
-      </v-card-title>
+      </v-card-title> -->
+      <div class="page-header">
+        <div class="header-content">
+          <div class="header-left">
+            <div class="header-icon">
+              <v-icon size="32" color="white">mdi-view-dashboard</v-icon>
+            </div>
+            <div class="header-text">
+              <h1 class="page-title">Master Loket</h1>
+              <p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
+            </div>
+          </div>
+        </div>
+      </div>
       <TabelData
         :headers="loketHeaders"
         :items="loketData"
         title="Master Loket"
       >
         <template #actions="{ item }">
-          <v-btn small color=#ff9248 @click="editLoket(item)" class="mr-2" style="color:white;">Edit</v-btn>
-          <v-btn small color="grey-lighten-4" @click="deleteLoket(item)">Delete</v-btn>
+          <v-btn
+            small
+            color="#ff9248"
+            @click="editLoket(item)"
+            class="mr-2"
+            style="color: white"
+            >Edit</v-btn
+          >
+          <v-btn small color="grey-lighten-4" @click="deleteLoket(item)"
+            >Delete</v-btn
+          >
         </template>
       </TabelData>
     </v-card>
@@ -20,28 +42,60 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import TabelData from '../../components/TabelData.vue';
-import { useRouter } from 'vue-router';
+import { ref } from "vue";
+import TabelData from "../../components/TabelData.vue";
+import { useRouter } from "vue-router";
 
 const router = useRouter();
 
 const loketHeaders = ref([
-  { title: 'No', value: 'no' },
-  { title: 'Nama Loket', value: 'namaLoket' },
-  { title: 'Kuota', value: 'kuota' },
-  { title: 'Pelayanan', value: 'pelayanan' },
-  { title: 'Pembayaran', value: 'pembayaran' },
-  { title: 'Keterangan', value: 'keterangan' },
-  { title: 'Aksi', value: 'aksi', sortable: false }, // 'value' harus 'actions'
+  { title: "No", value: "no" },
+  { title: "Nama Loket", value: "namaLoket" },
+  { title: "Kuota", value: "kuota" },
+  { title: "Pelayanan", value: "pelayanan" },
+  { title: "Pembayaran", value: "pembayaran" },
+  { title: "Keterangan", value: "keterangan" },
+  { title: "Aksi", value: "aksi", sortable: false }, // 'value' harus 'actions'
 ]);
 
 // Master-Loket.vue
 const loketData = ref([
-  { id: 1, no: 1, namaLoket: 'Loket 1', kuota: 500, pelayanan: ['RADIOTERAPI', 'REHAB MEDIK', 'TINDAKAN'], pembayaran: 'JKN', keterangan: 'ONLINE' },
-  { id: 2, no: 2, namaLoket: 'Loket 2', kuota: 666, pelayanan: ['JIWA', 'SARAF'], pembayaran: 'JKN', keterangan: 'ONLINE' },
-  { id: 3, no: 3, namaLoket: 'Loket 3', kuota: 666, pelayanan: ['ANESTESI', 'JANTUNG'], pembayaran: 'JKN', keterangan: 'ONLINE' },
-  { id: 4, no: 4, namaLoket: 'Loket 4', kuota: 3676, pelayanan: ['KULIT KELAMIN', 'PARU'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+  {
+    id: 1,
+    no: 1,
+    namaLoket: "Loket 1",
+    kuota: 500,
+    pelayanan: ["RADIOTERAPI", "REHAB MEDIK", "TINDAKAN"],
+    pembayaran: "JKN",
+    keterangan: "ONLINE",
+  },
+  {
+    id: 2,
+    no: 2,
+    namaLoket: "Loket 2",
+    kuota: 666,
+    pelayanan: ["JIWA", "SARAF"],
+    pembayaran: "JKN",
+    keterangan: "ONLINE",
+  },
+  {
+    id: 3,
+    no: 3,
+    namaLoket: "Loket 3",
+    kuota: 666,
+    pelayanan: ["ANESTESI", "JANTUNG"],
+    pembayaran: "JKN",
+    keterangan: "ONLINE",
+  },
+  {
+    id: 4,
+    no: 4,
+    namaLoket: "Loket 4",
+    kuota: 3676,
+    pelayanan: ["KULIT KELAMIN", "PARU"],
+    pembayaran: "JKN",
+    keterangan: "ONLINE",
+  },
 ]);
 
 const editLoket = (item) => {
@@ -49,13 +103,54 @@ const editLoket = (item) => {
 };
 
 const deleteLoket = (item) => {
-  const index = loketData.value.findIndex(loket => loket.id === item.id);
+  const index = loketData.value.findIndex((loket) => loket.id === item.id);
   if (index !== -1) {
     loketData.value.splice(index, 1);
   }
 };
 
 const tambahLoket = () => {
-  router.push({ path: '/Setting/Tambah-Loket' });
+  router.push({ path: "/Setting/Tambah-Loket" });
 };
-</script>
\ No newline at end of file
+</script>
+<style scoped>
+.page-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
+}
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.page-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+}
+</style>
diff --git a/pages/Setting/Screen/edit/[id].vue b/pages/Setting/Screen/edit/[id].vue
index 8b94631..b1e34b3 100644
--- a/pages/Setting/Screen/edit/[id].vue
+++ b/pages/Setting/Screen/edit/[id].vue
@@ -190,7 +190,7 @@ onMounted(() => {
 
 .screen-card.active {
   border-color: #1976d2;
-  background-color: #f3f7ff;
+  background-color: #d4d4d4;
 }
 
 .screen-card .v-card-title {
diff --git a/pages/Setting/Screen/index.vue b/pages/Setting/Screen/index.vue
index 9ae244b..d5ca716 100644
--- a/pages/Setting/Screen/index.vue
+++ b/pages/Setting/Screen/index.vue
@@ -1,7 +1,28 @@
 <template>
   <div class="screen-list">
     <!-- Header -->
-    <div class="d-flex justify-space-between align-center mb-4">
+    <div class="page-header">
+      <div class="header-content">
+        <div class="header-left">
+          <div class="header-icon">
+            <v-icon size="32" color="white">mdi-monitor</v-icon>
+          </div>
+          <div class="header-text">
+            <h1 class="page-title">Screen</h1>
+            <p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
+          </div>
+        </div>
+        <div class="header-right">
+          <!-- <v-chip color="success" variant="flat" class="mr-2">
+            Total {{ totalPasien }} Pasien
+          </v-chip> -->
+          <v-chip color="white" variant="flat" class="text-primary" to="/Setting/screen/edit/1">
+            Edit Screen
+          </v-chip>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="d-flex justify-space-between align-center mb-4">
       <h2>Screen</h2>
       <div class="d-flex gap-2">
         <v-btn color="primary" variant="outlined" prepend-icon="mdi-eye">
@@ -11,7 +32,7 @@
           Edit
         </v-btn>
       </div>
-    </div>
+    </div> -->
 
     <!-- Controls -->
     <div class="d-flex justify-space-between align-center mb-4">
@@ -22,11 +43,11 @@
           :items="[10, 25, 50, 100]"
           density="compact"
           variant="outlined"
-          style="width: 80px;"
+          style="width: 80px"
         ></v-select>
         <span>entries</span>
       </div>
-      
+
       <div class="d-flex align-center gap-2">
         <span>Search:</span>
         <v-text-field
@@ -34,7 +55,7 @@
           density="compact"
           variant="outlined"
           hide-details
-          style="width: 200px;"
+          style="width: 200px"
         ></v-text-field>
       </div>
     </div>
@@ -50,7 +71,7 @@
       <template v-slot:item.no="{ index }">
         {{ index + 1 }}
       </template>
-      
+
       <template v-slot:item.klinik="{ item }">
         <div class="klinik-tags">
           <v-chip
@@ -70,9 +91,9 @@
         <v-btn
           icon="mdi-pencil"
           size="small"
-          color=#ff9248
+          color="#ff9248"
           @click="editScreen(item)"
-          style="color:white;"
+          style="color: white"
         ></v-btn>
       </template>
     </v-data-table>
@@ -80,9 +101,10 @@
     <!-- Footer -->
     <div class="d-flex justify-space-between align-center mt-4">
       <div>
-        Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalItems }} entries
+        Showing {{ currentPageStart }} to {{ currentPageEnd }} of
+        {{ totalItems }} entries
       </div>
-      
+
       <v-pagination
         v-model="currentPage"
         :length="totalPages"
@@ -93,43 +115,75 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed } from "vue";
 
 // Data
-const search = ref('');
+const search = ref("");
 const itemsPerPage = ref(10);
 const currentPage = ref(1);
 
 const headers = [
-  { title: 'No', key: 'no', sortable: false, width: '60px' },
-  { title: 'Nama Screen', key: 'nama_screen', sortable: true },
-  { title: 'Klinik', key: 'klinik', sortable: false },
-  { title: 'Actions', key: 'actions', sortable: false, width: '100px' }
+  { title: "No", key: "no", sortable: false, width: "60px" },
+  { title: "Nama Screen", key: "nama_screen", sortable: true },
+  { title: "Klinik", key: "klinik", sortable: false },
+  { title: "Actions", key: "actions", sortable: false, width: "100px" },
 ];
 
 const screenItems = ref([
   {
     id: 1,
-    nama_screen: 'Layar Screen 1',
-    klinik: ['ANAK', 'ANESTESI', 'BEDAH', 'GIGI DAN MULUT', 'GERIATRI', 'GIZI', 'IPD', 'JANTUNG']
+    nama_screen: "Layar Screen 1",
+    klinik: [
+      "ANAK",
+      "ANESTESI",
+      "BEDAH",
+      "GIGI DAN MULUT",
+      "GERIATRI",
+      "GIZI",
+      "IPD",
+      "JANTUNG",
+    ],
   },
   {
     id: 2,
-    nama_screen: 'Layar Screen 2',
-    klinik: ['JIWA', 'KUL KEL', 'KOMPLEMENTER', 'MATA', 'SARAF', 'KANDUNGAN', 'ONKOLOGI', 'PARU']
+    nama_screen: "Layar Screen 2",
+    klinik: [
+      "JIWA",
+      "KUL KEL",
+      "KOMPLEMENTER",
+      "MATA",
+      "SARAF",
+      "KANDUNGAN",
+      "ONKOLOGI",
+      "PARU",
+    ],
   },
   {
     id: 3,
-    nama_screen: 'Layar Screen 3',
-    klinik: ['RADIOTERAPI', 'REHAB MEDIK', 'THT', 'MCU', 'KEMOTERAPI', 'R. TINDAKAN', 'HOM']
-  }
+    nama_screen: "Layar Screen 3",
+    klinik: [
+      "RADIOTERAPI",
+      "REHAB MEDIK",
+      "THT",
+      "MCU",
+      "KEMOTERAPI",
+      "R. TINDAKAN",
+      "HOM",
+    ],
+  },
 ]);
 
 // Computed
 const totalItems = computed(() => screenItems.value.length);
-const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage.value));
-const currentPageStart = computed(() => (currentPage.value - 1) * itemsPerPage.value + 1);
-const currentPageEnd = computed(() => Math.min(currentPage.value * itemsPerPage.value, totalItems.value));
+const totalPages = computed(() =>
+  Math.ceil(totalItems.value / itemsPerPage.value)
+);
+const currentPageStart = computed(
+  () => (currentPage.value - 1) * itemsPerPage.value + 1
+);
+const currentPageEnd = computed(() =>
+  Math.min(currentPage.value * itemsPerPage.value, totalItems.value)
+);
 
 // Methods
 const editScreen = (item) => {
@@ -138,6 +192,53 @@ const editScreen = (item) => {
 </script>
 
 <style scoped>
+.page-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.page-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+
 .screen-list {
   padding: 20px;
 }
@@ -149,4 +250,4 @@ const editScreen = (item) => {
 .gap-2 {
   gap: 8px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/data-pasien/edit/[id].vue b/pages/data-pasien/edit/[id].vue
index d36dce6..a0afdbc 100644
--- a/pages/data-pasien/edit/[id].vue
+++ b/pages/data-pasien/edit/[id].vue
@@ -230,7 +230,7 @@ const mockPasienData = {
     no_rekammedik: '11555500',
     klinik: 'IPD',
     shift: 'Shift 1 = Mulai Pukul 07:00',
-    keterangan: 'FINGATMANA ONLINE',
+    keterangan: 'PENDAFTARAN ONLINE',
     pembayaran: 'JKN'
   },
   2: {
diff --git a/pages/data-pasien/index.vue b/pages/data-pasien/index.vue
index 39a81d0..c239e3e 100644
--- a/pages/data-pasien/index.vue
+++ b/pages/data-pasien/index.vue
@@ -271,7 +271,7 @@ const pasienItems = ref([
       no_rekammedik: "11555500",
       klinik: "IPD",
       shift: "Shift 1 = Mulai Pukul 07:00",
-      keterangan: "FINGATMANA ONLINE",
+      keterangan: "PENDAFTARAN ONLINE",
       pembayaran: "JKN",
     },
   },
diff --git a/pages/index.vue b/pages/index.vue
index 9aad804..fc87043 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,18 @@
 <template>
   <v-container fluid class="bg-grey-lighten-4 pa-4">
-    <p class="mb-4">Admin Anjungan</p>
+    <div class="page-header">
+      <div class="header-content">
+        <div class="header-left">
+          <div class="header-icon">
+            <v-icon size="32" color="white">mdi-view-dashboard</v-icon>
+          </div>
+          <div class="header-text">
+            <h1 class="page-title">Admin Anjungan</h1>
+            <p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
+          </div>
+        </div>
+      </div>
+    </div>
     <v-card flat>
       <v-card-text>
         <v-row align="center">
@@ -20,7 +32,9 @@
             </v-chip>
           </v-col>
           <v-col cols="12" md="2">
-            <v-btn block color=#ff9248 style="color:white;">Pendaftaran Online</v-btn>
+            <v-btn block color="#ff9248" style="color: white"
+              >Pendaftaran Online</v-btn
+            >
           </v-col>
         </v-row>
       </v-card-text>
@@ -42,15 +56,27 @@
       >
         <template v-slot:actions="{ item }">
           <div class="d-flex ga-1">
-            <v-btn small color=#ff9248 class="d-flex flex-row" variant="flat" style="color:white;">PASIEN</v-btn>
-            <v-btn small color="grey-lighten-3" class="d-flex flex-row" variant="flat"
+            <v-btn
+              small
+              color="#ff9248"
+              class="d-flex flex-row"
+              variant="flat"
+              style="color: white"
+              >PASIEN</v-btn
+            >
+            <v-btn
+              small
+              color="grey-lighten-3"
+              class="d-flex flex-row"
+              variant="flat"
               >PENGANTAR</v-btn
             >
-            <v-btn small color="info" class="d-flex flex-row" variant="flat">ByPass</v-btn>
+            <v-btn small color="info" class="d-flex flex-row" variant="flat"
+              >ByPass</v-btn
+            >
           </div>
         </template>
       </TabelData>
-      
     </v-card>
   </v-container>
 </template>
@@ -165,4 +191,52 @@ const items = ref([
   { title: "Screen", icon: "mdi-monitor" },
   { title: "List Pasien", icon: "mdi-format-list-bulleted" },
 ]);
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.page-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: white;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.page-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+</style>