update warna dan klinik ruang

components/checkin/CheckInDialog.vue

@@ -96,7 +96,7 @@
                 </div>
                 <div class="text-right">
                   <p class="text-caption patient-info-label mb-0">Waktu Scan</p>
-                  <p class="text-body-2 patient-info-value mb-0">{{ new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) }}</p>
+                  <p class="text-body-2 patient-info-value mb-0">{{ getCurrentTime() }}</p>
                 </div>
               </div>
             </v-card-text>
@@ -164,6 +164,16 @@ const handleClose = () => {
   emit('close')
   emit('update:modelValue', false)
 }
+
+const getCurrentTime = () => {
+  // Format jam dengan titik dua (HH:MM:SS)
+  const timeString = new Date().toLocaleTimeString('id-ID', { 
+    hour: '2-digit', 
+    minute: '2-digit',
+    second: '2-digit'
+  })
+  return timeString.replace(/\./g, ':')
+}
 </script>
 
 <style scoped lang="scss">

components/common/PageHeader.vue

@@ -3,7 +3,7 @@
     <div class="header-content">
       <div class="header-left">
         <div class="header-icon">
-          <v-icon size="32" color="white">{{ icon }}</v-icon>
+          <v-icon size="28" color="white">{{ icon }}</v-icon>
         </div>
         <div class="header-text">
           <h2 class="page-title">{{ title }}</h2>
@@ -108,7 +108,7 @@ $font-weight-semibold: 600;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 32px;
+  padding: 20px 28px;
   color: $neutral-100;
 }
 
@@ -119,15 +119,15 @@ $font-weight-semibold: 600;
 
 .header-icon {
   background: rgba(255, 255, 255, 0.2);
-  border-radius: 16px;
-  padding: 16px;
-  margin-right: 20px;
+  border-radius: 12px;
+  padding: 12px;
+  margin-right: 16px;
   backdrop-filter: blur(10px);
 }
 
 .page-title {
-  font-size: 36px;
-  line-height: 44px;
+  font-size: 32px;
+  line-height: 40px;
   font-weight: $font-weight-semibold;
   margin: 0;
   color: $neutral-100;
@@ -135,10 +135,10 @@ $font-weight-semibold: 600;
 }
 
 .page-subtitle {
-  margin: 4px 0 0 0;
+  margin: 2px 0 0 0;
   opacity: 0.9;
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 15px;
+  line-height: 22px;
   font-weight: $font-weight-regular;
   color: $neutral-100;
 }

components/common/SelectionDialog.vue

@@ -1,14 +1,16 @@
 <template>
-  <v-dialog v-model="dialogModel" max-width="800px">
-    <v-card>
+  <v-dialog v-model="dialogModel" max-width="800px" persistent>
+    <v-card class="dialog-card">
       <v-card-title class="dialog-header">
-        <v-btn icon size="small" @click="dialogModel = false">
+        <span class="headline-4">{{ title }}</span>
+        <v-btn icon variant="text" size="small" class="btn-close" @click="dialogModel = false">
           <v-icon>mdi-close</v-icon>
         </v-btn>
-        <span>{{ title }}</span>
       </v-card-title>
 
-      <v-card-text class="pa-4">
+      <v-divider />
+
+      <v-card-text class="dialog-content">
         <v-text-field
           v-model="searchModel"
           :placeholder="searchPlaceholder"
@@ -94,32 +96,62 @@ const handleSelect = (item) => {
 </script>
 
 <style scoped lang="scss">
+.dialog-card {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
 .dialog-header {
-  background: var(--color-neutral-300);
-  padding: 16px 20px;
+  background: linear-gradient(135deg, var(--color-secondary-600) 0%, var(--color-secondary-700) 100%);
+  color: var(--color-neutral-100);
+  padding: 20px 24px;
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 12px;
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--color-neutral-900);
+}
+
+.headline-4 {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  margin: 0;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.btn-close {
+  color: var(--color-neutral-100) !important;
+  transition: all 0.2s ease;
+}
+
+.btn-close:hover {
+  background: rgba(255, 255, 255, 0.2) !important;
+  transform: rotate(90deg);
+}
+
+.dialog-content {
+  padding: 24px !important;
+  background: var(--color-neutral-300);
 }
 
 .selection-card {
   cursor: pointer;
-  transition: all 0.2s;
-  border: 2px solid var(--color-neutral-500);
+  transition: all 0.2s ease;
+  border: 1px solid var(--color-neutral-400);
   background: var(--color-neutral-100);
+  border-radius: 8px;
 }
 
 .selection-card:hover {
   border-color: var(--color-secondary-600);
-  background: var(--color-secondary-200);
+  background: var(--color-secondary-300);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(6, 113, 224, 0.15);
 }
 
 .selection-name {
-  font-size: 13px;
-  font-weight: 700;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   color: var(--color-neutral-900);
 }
 </style>

components/features/queue/CurrentPatientCard.vue

@@ -120,7 +120,20 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call']);
 .call-button {
   text-transform: none;
   font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.call-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.call-button:active {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .patient-details {
@@ -142,15 +155,16 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call']);
 
 .patient-number {
   font-size: 28px;
-  font-weight: 800;
+  line-height: 36px;
+  font-weight: 700;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   color: var(--color-neutral-900);
-  line-height: 1;
 }
 
 .patient-info-text {
-  font-size: 13px;
+  font-size: 14px;
+  line-height: 20px;
   color: var(--color-neutral-700);
-  line-height: 1.5;
 }
 
 .action-grid {
@@ -160,13 +174,58 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call']);
   margin-top: 12px;
 }
 
+.action-grid .v-btn {
+  text-transform: none;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.action-grid .v-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.action-grid .v-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.action-grid .v-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
 .empty-state {
   text-align: center;
   padding: 32px 16px;
 }
 
+.empty-state .v-btn {
+  text-transform: none;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.empty-state .v-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.empty-state .v-btn:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
 .empty-text {
-  font-size: 13px;
+  font-size: 14px;
+  line-height: 20px;
   color: var(--color-neutral-600);
   margin-top: 8px;
 }
@@ -181,8 +240,10 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call']);
 
 .info-text {
   font-size: 12px;
+  line-height: 16px;
   color: var(--color-neutral-700);
   font-weight: 600;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
 
 @media (max-width: 960px) {

components/features/queue/QueueActionsCard.vue

@@ -188,8 +188,22 @@ defineEmits(['call']);
 
 .call-buttons .v-btn {
   font-size: 16px;
+  line-height: 24px;
   font-weight: 700;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   height: 44px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.call-buttons .v-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.call-buttons .v-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 @media (max-width: 960px) {