diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss
index d68de2e..a05e544 100644
--- a/assets/scss/_colors.scss
+++ b/assets/scss/_colors.scss
@@ -10,12 +10,12 @@ $neutral-400: #E5F7FA;
 $neutral-300: #F5F7FA;
 $neutral-100: #FFFFFF;
 
-$primary-700: #0053AD;
-$primary-600: #0663C7;
-$primary-500: #0671E0;
-$primary-400: #4196F0;
-$primary-300: #DBEDFF;
-$primary-200: #EEF5FC;
+$primary-700: #FF9B1B;
+$primary-600: #FFA532;
+$primary-500: #FFB95F;
+$primary-400: #FFCD8D;
+$primary-300: #FFDCAF;
+$primary-200: #FFE6C6;
 $primary-100: #EEF5FC;
 
 $secondary-700: #0053AD;
diff --git a/components/common/AppSnackbar.vue b/components/common/AppSnackbar.vue
new file mode 100644
index 0000000..44d6e48
--- /dev/null
+++ b/components/common/AppSnackbar.vue
@@ -0,0 +1,54 @@
+<template>
+  <v-snackbar v-model="showModel" :color="color" :timeout="timeout">
+    <span class="body-3">{{ message }}</span>
+    <template #actions>
+      <v-btn variant="text" size="small" @click="showModel = false">
+        {{ closeText }}
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  message: {
+    type: String,
+    default: ''
+  },
+  color: {
+    type: String,
+    default: 'success'
+  },
+  timeout: {
+    type: Number,
+    default: 3000
+  },
+  closeText: {
+    type: String,
+    default: 'Tutup'
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const showModel = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+</script>
+
+<style scoped lang="scss">
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+.body-3 {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: $font-family-base;
+}
+</style>
\ No newline at end of file
diff --git a/components/common/FormFieldGroup.vue b/components/common/FormFieldGroup.vue
new file mode 100644
index 0000000..9197b9c
--- /dev/null
+++ b/components/common/FormFieldGroup.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="field-group">
+    <div class="group-label">
+      <v-icon v-if="icon" size="18" class="icon-label">{{ icon }}</v-icon>
+      <span>{{ title }}</span>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  icon: {
+    type: String,
+    default: ''
+  }
+});
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$neutral-400: #E5F7FA;
+$primary-600: #FFA532;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-semibold: 600;
+
+.field-group {
+  background: $neutral-100;
+  padding: 20px;
+  border-radius: 12px;
+  margin-bottom: 0;
+  border: 1px solid $neutral-400;
+}
+
+.group-label {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-semibold;
+  color: $primary-600;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.icon-label {
+  color: $primary-600 !important;
+}
+</style>
\ No newline at end of file
diff --git a/components/common/PageHeader.vue b/components/common/PageHeader.vue
new file mode 100644
index 0000000..3e16713
--- /dev/null
+++ b/components/common/PageHeader.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="page-header" :class="`page-header-${theme}`">
+    <div class="header-content">
+      <div class="header-left">
+        <div class="header-icon">
+          <v-icon size="32" color="white">{{ icon }}</v-icon>
+        </div>
+        <div class="header-text">
+          <h2 class="page-title">{{ title }}</h2>
+          <p class="page-subtitle">{{ subtitle }}</p>
+        </div>
+      </div>
+      <slot name="actions">
+        <v-btn 
+          v-if="showAddButton"
+          color="white" 
+          elevation="0"
+          class="add-btn"
+          :class="`add-btn-${theme}`"
+          @click="$emit('add-click')"
+        >
+          <v-icon left size="20">mdi-plus-circle</v-icon>
+          {{ addButtonText }}
+        </v-btn>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  icon: {
+    type: String,
+    default: 'mdi-view-dashboard'
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  showAddButton: {
+    type: Boolean,
+    default: true
+  },
+  addButtonText: {
+    type: String,
+    default: 'Tambah'
+  },
+  theme: {
+    type: String,
+    default: 'primary', // 'primary', 'secondary', 'success', or 'accent'
+    validator: (value) => ['primary', 'secondary', 'success', 'accent'].includes(value)
+  }
+});
+
+defineEmits(['add-click']);
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$primary-600: #FFA532;
+$primary-700: #FF9B1B;
+$secondary-600: #0671E0;
+$secondary-700: #0053AD;
+$success-600: #009262;
+$success-700: #1B6E53;
+$accent-600: #8B5CF6;
+$accent-700: #7C3AED;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-semibold: 600;
+
+.page-header {
+  border-radius: 16px 16px 0 0;
+}
+
+.page-header-primary {
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
+  box-shadow: 0 4px 16px rgba(255, 165, 50, 0.2);
+}
+
+.page-header-secondary {
+  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  box-shadow: 0 4px 16px rgba(6, 113, 224, 0.2);
+}
+
+.page-header-success {
+  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
+  box-shadow: 0 4px 16px rgba(0, 146, 98, 0.2);
+}
+
+.page-header-accent {
+  background: linear-gradient(135deg, $accent-600 0%, $accent-700 100%);
+  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: $neutral-100;
+}
+
+.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: 36px;
+  line-height: 44px;
+  font-weight: $font-weight-semibold;
+  margin: 0;
+  color: $neutral-100;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: $font-weight-regular;
+  color: $neutral-100;
+}
+
+.add-btn {
+  font-weight: $font-weight-semibold;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.add-btn-primary {
+  color: $primary-600 !important;
+}
+
+.add-btn-secondary {
+  color: $secondary-600 !important;
+}
+
+.add-btn-success {
+  color: $success-600 !important;
+}
+
+.add-btn-accent {
+  color: $accent-600 !important;
+}
+</style>
\ No newline at end of file
diff --git a/components/common/SelectionDialog.vue b/components/common/SelectionDialog.vue
new file mode 100644
index 0000000..ac3b4b3
--- /dev/null
+++ b/components/common/SelectionDialog.vue
@@ -0,0 +1,125 @@
+<template>
+  <v-dialog v-model="dialogModel" max-width="800px">
+    <v-card>
+      <v-card-title class="dialog-header">
+        <v-btn icon size="small" @click="dialogModel = false">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+        <span>{{ title }}</span>
+      </v-card-title>
+
+      <v-card-text class="pa-4">
+        <v-text-field
+          v-model="searchModel"
+          :placeholder="searchPlaceholder"
+          density="compact"
+          hide-details
+          class="mb-4"
+          prepend-inner-icon="mdi-magnify"
+        />
+
+        <v-row dense>
+          <v-col 
+            v-for="item in filteredItems" 
+            :key="item.id" 
+            cols="6" 
+            sm="4"
+          >
+            <v-card 
+              class="selection-card" 
+              @click="handleSelect(item)" 
+              elevation="0"
+            >
+              <v-card-text class="text-center pa-3">
+                <div class="selection-name">{{ item.name }}</div>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  title: {
+    type: String,
+    default: 'Pilih Item'
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  searchQuery: {
+    type: String,
+    default: ''
+  },
+  searchPlaceholder: {
+    type: String,
+    default: 'Cari...'
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'update:searchQuery', 'select']);
+
+const dialogModel = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+
+const searchModel = computed({
+  get: () => props.searchQuery,
+  set: (value) => emit('update:searchQuery', value)
+});
+
+const filteredItems = computed(() => {
+  if (!searchModel.value) return props.items;
+  const search = searchModel.value.toLowerCase();
+  return props.items.filter(item => 
+    item.name.toLowerCase().includes(search)
+  );
+});
+
+const handleSelect = (item) => {
+  emit('select', item);
+  dialogModel.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+.dialog-header {
+  background: var(--color-neutral-300);
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+
+.selection-card {
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 2px solid var(--color-neutral-500);
+  background: var(--color-neutral-100);
+}
+
+.selection-card:hover {
+  border-color: var(--color-secondary-600);
+  background: var(--color-secondary-200);
+}
+
+.selection-name {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+</style>
\ No newline at end of file
diff --git a/components/features/antrean/PatientSearchFilter.vue b/components/features/antrean/PatientSearchFilter.vue
new file mode 100644
index 0000000..cf6778a
--- /dev/null
+++ b/components/features/antrean/PatientSearchFilter.vue
@@ -0,0 +1,102 @@
+<template>
+  <v-card class="filter-card" elevation="0">
+    <v-card-text>
+      <v-row align="center">
+        <v-col cols="12" md="6">
+          <v-text-field
+            :model-value="searchQuery"
+            @update:model-value="$emit('update:searchQuery', $event)"
+            prepend-inner-icon="mdi-magnify"
+            label="Pencarian"
+            :placeholder="searchPlaceholder"
+            variant="outlined"
+            density="comfortable"
+            hide-details
+            clearable
+            class="search-field"
+          />
+        </v-col>
+        <v-col cols="12" md="3">
+          <v-select
+            :model-value="statusFilter"
+            @update:model-value="$emit('update:statusFilter', $event)"
+            :items="statusOptions"
+            label="Status"
+            variant="outlined"
+            density="comfortable"
+            hide-details
+            clearable
+            class="filter-select"
+          />
+        </v-col>
+        <v-col cols="12" md="3">
+          <v-btn
+            color="primary-600"
+            variant="outlined"
+            block
+            size="large"
+            @click="$emit('refresh')"
+            :loading="loading"
+            class="refresh-btn"
+          >
+            <v-icon start>mdi-refresh</v-icon>
+            Refresh Data
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+defineProps({
+  searchQuery: {
+    type: String,
+    default: ''
+  },
+  statusFilter: {
+    type: String,
+    default: null
+  },
+  statusOptions: {
+    type: Array,
+    default: () => ['Terdaftar', 'Belum Terdaftar', 'Proses']
+  },
+  searchPlaceholder: {
+    type: String,
+    default: 'Cari nama pasien, No. RM, atau alamat...'
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+});
+
+defineEmits(['update:searchQuery', 'update:statusFilter', 'refresh']);
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$neutral-500: #ABBED1;
+$primary-600: #FFA532;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-semibold: 600;
+
+.filter-card {
+  border-radius: 12px;
+  border: 1px solid $neutral-500;
+  background: $neutral-100;
+  margin-bottom: 16px;
+}
+
+.search-field,
+.filter-select {
+  font-family: $font-family-base;
+}
+
+.refresh-btn {
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-family: $font-family-base;
+}
+</style>
\ No newline at end of file
diff --git a/components/features/antrean/QueueCreationDialog.vue b/components/features/antrean/QueueCreationDialog.vue
new file mode 100644
index 0000000..a07db38
--- /dev/null
+++ b/components/features/antrean/QueueCreationDialog.vue
@@ -0,0 +1,231 @@
+<template>
+  <v-dialog v-model="dialogModel" max-width="600px">
+    <v-card class="dialog-card">
+      <v-card-title class="dialog-header" :class="`dialog-header-${type}`">
+        <v-icon class="mr-2">{{ icon }}</v-icon>
+        <span>{{ title }}</span>
+        <v-spacer />
+        <v-btn icon @click="dialogModel = false" size="small" class="close-btn">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+
+      <v-card-text class="pa-4">
+        <!-- Patient Info Card -->
+        <div v-if="patient" class="patient-card mb-4">
+          <h4 class="card-title">Informasi Pasien</h4>
+          <v-row>
+            <v-col cols="6">
+              <div class="info-label">Nama</div>
+              <div class="info-value">{{ patient.namaPasien }}</div>
+            </v-col>
+            <v-col cols="6">
+              <div class="info-label">No. RM</div>
+              <div class="info-value">{{ patient.noRM }}</div>
+            </v-col>
+          </v-row>
+        </div>
+
+        <!-- Search Field -->
+        <v-text-field
+          v-model="searchModel"
+          prepend-inner-icon="mdi-magnify"
+          :label="searchLabel"
+          variant="outlined"
+          density="comfortable"
+          hide-details
+          class="mb-4 search-field"
+        />
+
+        <!-- Options Grid -->
+        <v-row>
+          <v-col
+            v-for="option in filteredOptions"
+            :key="option.id"
+            cols="6"
+          >
+            <v-card
+              class="option-card"
+              :class="`option-card-${type}`"
+              @click="$emit('select', option)"
+              elevation="0"
+            >
+              <v-card-text class="text-center pa-4">
+                <v-icon :size="32" :color="iconColor" class="mb-2">
+                  {{ icon }}
+                </v-icon>
+                <div class="option-title">{{ option.name }}</div>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  type: {
+    type: String,
+    default: 'klinik', // 'klinik' | 'penunjang'
+    validator: (value) => ['klinik', 'penunjang'].includes(value)
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  icon: {
+    type: String,
+    required: true
+  },
+  patient: {
+    type: Object,
+    default: null
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  searchQuery: {
+    type: String,
+    default: ''
+  },
+  searchLabel: {
+    type: String,
+    default: 'Cari...'
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'update:searchQuery', 'select']);
+
+const dialogModel = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+
+const searchModel = computed({
+  get: () => props.searchQuery,
+  set: (value) => emit('update:searchQuery', value)
+});
+
+const filteredOptions = computed(() => {
+  if (!searchModel.value) return props.options;
+  const search = searchModel.value.toLowerCase();
+  return props.options.filter(opt =>
+    opt.name.toLowerCase().includes(search)
+  );
+});
+
+const iconColor = computed(() => {
+  return props.type === 'klinik' ? 'secondary-600' : 'accent-600';
+});
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$neutral-300: #F5F7FA;
+$neutral-500: #ABBED1;
+$neutral-700: #717171;
+$neutral-900: #212121;
+$secondary-600: #0671E0;
+$secondary-700: #0053AD;
+$accent-600: #8B5CF6;
+$accent-700: #7C3AED;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-semibold: 600;
+
+.dialog-card {
+  font-family: $font-family-base;
+}
+
+.dialog-header {
+  color: $neutral-100;
+  padding: 20px 24px;
+  font-size: 18px;
+  font-weight: $font-weight-semibold;
+  display: flex;
+  align-items: center;
+}
+
+.dialog-header-klinik {
+  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+}
+
+.dialog-header-penunjang {
+  background: linear-gradient(135deg, $accent-600 0%, $accent-700 100%);
+}
+
+.close-btn {
+  color: $neutral-100 !important;
+}
+
+.patient-card {
+  background: $neutral-300;
+  padding: 16px;
+  border-radius: 12px;
+  border: 1px solid $neutral-500;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: $font-weight-semibold;
+  color: $neutral-900;
+  margin-bottom: 12px;
+  font-family: $font-family-base;
+}
+
+.info-label {
+  font-size: 12px;
+  line-height: 16px;
+  color: $neutral-700;
+  margin-bottom: 4px;
+  font-family: $font-family-base;
+}
+
+.info-value {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-semibold;
+  color: $neutral-900;
+  font-family: $font-family-base;
+}
+
+.search-field {
+  font-family: $font-family-base;
+}
+
+.option-card {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid $neutral-500;
+  background: $neutral-100;
+}
+
+.option-card-klinik:hover {
+  border-color: $secondary-600;
+  background: var(--color-secondary-200);
+  transform: translateY(-2px);
+}
+
+.option-card-penunjang:hover {
+  border-color: $accent-600;
+  background: var(--color-accent-200);
+  transform: translateY(-2px);
+}
+
+.option-title {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-semibold;
+  color: $neutral-900;
+  font-family: $font-family-base;
+}
+</style>
\ No newline at end of file
diff --git a/components/features/antrean/RuangSelectionDialog.vue b/components/features/antrean/RuangSelectionDialog.vue
new file mode 100644
index 0000000..552170c
--- /dev/null
+++ b/components/features/antrean/RuangSelectionDialog.vue
@@ -0,0 +1,262 @@
+<template>
+  <v-dialog v-model="dialogModel" max-width="800px">
+    <v-card class="dialog-card">
+      <v-card-title class="dialog-header">
+        <v-icon class="mr-2">mdi-door-open</v-icon>
+        <span>Pilih Klinik Ruang</span>
+        <v-spacer />
+        <v-btn icon @click="dialogModel = false" size="small" class="close-btn">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+
+      <v-card-text class="pa-4">
+        <!-- Patient Info Card -->
+        <div v-if="patient" class="patient-card mb-4">
+          <h4 class="card-title">Informasi Pasien</h4>
+          <v-row>
+            <v-col cols="6">
+              <div class="info-label">Nama</div>
+              <div class="info-value">{{ patient.namaPasien }}</div>
+            </v-col>
+            <v-col cols="6">
+              <div class="info-label">No. RM</div>
+              <div class="info-value">{{ patient.noRM }}</div>
+            </v-col>
+          </v-row>
+        </div>
+
+        <!-- Search Field -->
+        <v-text-field
+          v-model="searchModel"
+          prepend-inner-icon="mdi-magnify"
+          label="Cari Klinik Ruang"
+          variant="outlined"
+          density="comfortable"
+          hide-details
+          class="mb-4 search-field"
+        />
+
+        <!-- Ruang List with Expansion Panels -->
+        <v-expansion-panels class="ruang-panels">
+          <v-expansion-panel
+            v-for="klinikRuang in filteredRuang"
+            :key="klinikRuang.id"
+            class="panel-item"
+          >
+            <v-expansion-panel-title class="panel-title">
+              <div class="d-flex align-center w-100">
+                <v-chip size="small" color="primary-600" class="mr-2 kode-chip">
+                  {{ klinikRuang.kodeKlinik }}
+                </v-chip>
+                <strong class="klinik-name">{{ klinikRuang.namaKlinik }}</strong>
+                <v-spacer />
+                <v-chip size="small" variant="outlined" class="count-chip">
+                  {{ klinikRuang.ruangList.length }} Ruang
+                </v-chip>
+              </div>
+            </v-expansion-panel-title>
+            
+            <v-expansion-panel-text>
+              <v-list density="compact" class="ruang-list">
+                <v-list-item
+                  v-for="ruang in klinikRuang.ruangList"
+                  :key="ruang.nomorRuang"
+                  @click="$emit('select', klinikRuang, ruang)"
+                  class="ruang-item"
+                >
+                  <template #prepend>
+                    <v-icon color="primary-600" size="20">mdi-door</v-icon>
+                  </template>
+                  
+                  <v-list-item-title class="ruang-title">
+                    <strong>Ruang {{ ruang.nomorRuang }}</strong> - {{ ruang.namaRuang }}
+                  </v-list-item-title>
+                  
+                  <v-list-item-subtitle class="ruang-subtitle">
+                    Screen: {{ ruang.nomorScreen }}
+                  </v-list-item-subtitle>
+                  
+                  <template #append>
+                    <v-icon size="20">mdi-chevron-right</v-icon>
+                  </template>
+                </v-list-item>
+              </v-list>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  patient: {
+    type: Object,
+    default: null
+  },
+  ruangList: {
+    type: Array,
+    default: () => []
+  },
+  searchQuery: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'update:searchQuery', 'select']);
+
+const dialogModel = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+
+const searchModel = computed({
+  get: () => props.searchQuery,
+  set: (value) => emit('update:searchQuery', value)
+});
+
+const filteredRuang = computed(() => {
+  if (!searchModel.value) return props.ruangList;
+  const search = searchModel.value.toLowerCase();
+  return props.ruangList.filter(k =>
+    k.namaKlinik.toLowerCase().includes(search) ||
+    k.kodeKlinik.toLowerCase().includes(search)
+  );
+});
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$neutral-300: #F5F7FA;
+$neutral-400: #E5F7FA;
+$neutral-500: #ABBED1;
+$neutral-700: #717171;
+$neutral-900: #212121;
+$primary-600: #FFA532;
+$primary-700: #FF9B1B;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-semibold: 600;
+
+.dialog-card {
+  font-family: $font-family-base;
+}
+
+.dialog-header {
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
+  color: $neutral-100;
+  padding: 20px 24px;
+  font-size: 18px;
+  font-weight: $font-weight-semibold;
+  display: flex;
+  align-items: center;
+}
+
+.close-btn {
+  color: $neutral-100 !important;
+}
+
+.patient-card {
+  background: $neutral-300;
+  padding: 16px;
+  border-radius: 12px;
+  border: 1px solid $neutral-500;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: $font-weight-semibold;
+  color: $neutral-900;
+  margin-bottom: 12px;
+  font-family: $font-family-base;
+}
+
+.info-label {
+  font-size: 12px;
+  line-height: 16px;
+  color: $neutral-700;
+  margin-bottom: 4px;
+  font-family: $font-family-base;
+}
+
+.info-value {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-semibold;
+  color: $neutral-900;
+  font-family: $font-family-base;
+}
+
+.search-field {
+  font-family: $font-family-base;
+}
+
+.ruang-panels {
+  font-family: $font-family-base;
+}
+
+.panel-item {
+  margin-bottom: 8px;
+  border: 1px solid $neutral-500;
+  border-radius: 8px;
+}
+
+.panel-title {
+  font-family: $font-family-base;
+}
+
+.kode-chip {
+  font-weight: $font-weight-semibold;
+  font-size: 12px;
+}
+
+.klinik-name {
+  font-size: 14px;
+  font-weight: $font-weight-semibold;
+  color: $neutral-900;
+  font-family: $font-family-base;
+}
+
+.count-chip {
+  font-size: 12px;
+  font-family: $font-family-base;
+}
+
+.ruang-list {
+  padding: 0;
+}
+
+.ruang-item {
+  cursor: pointer;
+  border-radius: 8px;
+  margin-bottom: 4px;
+  transition: background 0.2s;
+  font-family: $font-family-base;
+}
+
+.ruang-item:hover {
+  background: $neutral-300;
+}
+
+.ruang-title {
+  font-size: 14px;
+  font-weight: $font-weight-semibold;
+  color: $neutral-900;
+  font-family: $font-family-base;
+}
+
+.ruang-subtitle {
+  font-size: 12px;
+  color: $neutral-700;
+  font-family: $font-family-base;
+}
+</style>
\ No newline at end of file
diff --git a/components/features/antrean/TabelPatientList.vue b/components/features/antrean/TabelPatientList.vue
new file mode 100644
index 0000000..01b1608
--- /dev/null
+++ b/components/features/antrean/TabelPatientList.vue
@@ -0,0 +1,195 @@
+<template>
+  <v-card elevation="0" class="patient-table-card">
+    <v-card-title class="table-title">
+      <v-icon class="mr-2" color="primary-600">mdi-account-group</v-icon>
+      <span>Daftar Pasien - {{ items.length }} pasien</span>
+    </v-card-title>
+
+    <v-card-text class="pa-0">
+      <v-data-table
+        :headers="headers"
+        :items="items"
+        :search="searchQuery"
+        :items-per-page="itemsPerPage"
+        class="elevation-0 data-table"
+        density="comfortable"
+      >
+        <template #item.namaPasien="{ item }">
+          <div class="patient-info">
+            <div class="patient-name">{{ item.namaPasien }}</div>
+            <div class="patient-meta">{{ item.noRM }}</div>
+          </div>
+        </template>
+
+        <template #item.status="{ item }">
+          <v-chip
+            :color="getStatusColor(item.status)"
+            size="small"
+            variant="flat"
+            class="status-chip"
+          >
+            {{ item.status }}
+          </v-chip>
+        </template>
+
+        <template #item.buatAntrean="{ item }">
+          <div class="action-buttons">
+            <v-btn
+              size="small"
+              color="secondary-600"
+              variant="outlined"
+              @click="$emit('create-klinik', item)"
+              class="action-btn"
+            >
+              <v-icon size="16" start>mdi-hospital-building</v-icon>
+              Klinik
+            </v-btn>
+            <v-btn
+              size="small"
+              color="primary-600"
+              variant="outlined"
+              @click="$emit('create-ruang', item)"
+              class="action-btn"
+            >
+              <v-icon size="16" start>mdi-door-open</v-icon>
+              Klinik Ruang
+            </v-btn>
+            <v-btn
+              size="small"
+              color="accent-600"
+              variant="outlined"
+              @click="$emit('create-penunjang', item)"
+              class="action-btn"
+            >
+              <v-icon size="16" start>mdi-clipboard-pulse</v-icon>
+              Penunjang
+            </v-btn>
+          </div>
+        </template>
+      </v-data-table>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  searchQuery: {
+    type: String,
+    default: ''
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 10
+  }
+});
+
+const headers = [
+  { title: 'Nama Pasien', value: 'namaPasien', sortable: true },
+  { title: 'No. RM', value: 'noRM', sortable: true },
+  { title: 'Alamat', value: 'alamat', sortable: true },
+  { title: 'Status', value: 'status', sortable: true },
+  { title: 'Buat Antrean', value: 'buatAntrean', sortable: false, width: '360px' },
+];
+
+defineEmits(['create-klinik', 'create-ruang', 'create-penunjang']);
+
+const getStatusColor = (status) => {
+  const colors = {
+    'Terdaftar': 'var(--color-success-600)',
+    'Belum Terdaftar': 'var(--color-primary-600)',
+    'Proses': 'var(--color-secondary-600)'
+  };
+  return colors[status] || 'var(--color-neutral-600)';
+};
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$neutral-400: #E5F7FA;
+$neutral-500: #ABBED1;
+$neutral-600: #89939E;
+$neutral-700: #717171;
+$neutral-900: #212121;
+$primary-600: #FFA532;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-semibold: 600;
+
+.patient-table-card {
+  border-radius: 12px;
+  border: 1px solid $neutral-500;
+  background: $neutral-100;
+}
+
+.table-title {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  background: var(--color-neutral-300);
+  font-size: 16px;
+  font-weight: $font-weight-semibold;
+  font-family: $font-family-base;
+  color: $neutral-900;
+}
+
+.patient-info {
+  padding: 4px 0;
+}
+
+.patient-name {
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+  color: $neutral-900;
+  font-family: $font-family-base;
+}
+
+.patient-meta {
+  font-size: 12px;
+  line-height: 16px;
+  color: $neutral-700;
+  font-family: $font-family-base;
+}
+
+.status-chip {
+  font-weight: $font-weight-semibold;
+  font-size: 11px;
+  font-family: $font-family-base;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+
+.action-btn {
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 12px;
+  font-family: $font-family-base;
+}
+
+:deep(.data-table) {
+  font-family: $font-family-base;
+}
+
+:deep(.data-table th) {
+  font-family: $font-family-base;
+  font-weight: $font-weight-semibold !important;
+  color: $neutral-600 !important;
+}
+
+:deep(.data-table td) {
+  font-family: $font-family-base;
+  border-bottom: 1px solid $neutral-400 !important;
+}
+
+:deep(.data-table tbody tr:hover) {
+  background: var(--color-neutral-300) !important;
+}
+</style>
\ No newline at end of file
diff --git a/components/features/master/klinik/DaySelector.vue b/components/features/master/klinik/DaySelector.vue
new file mode 100644
index 0000000..71517fe
--- /dev/null
+++ b/components/features/master/klinik/DaySelector.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="day-selector">
+    <v-chip
+      v-for="hari in dayList"
+      :key="hari.hari"
+      class="day-chip"
+      :class="{ 'day-chip-active': selectedDays.includes(hari.hari) }"
+      label
+      @click="toggleDay(hari.hari)"
+    >
+      <v-icon v-if="selectedDays.includes(hari.hari)" left size="16">mdi-check</v-icon>
+      {{ hari.hari }}
+    </v-chip>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const dayList = ref([
+  { no: 1, hari: 'Senin' },
+  { no: 2, hari: 'Selasa' },
+  { no: 3, hari: 'Rabu' },
+  { no: 4, hari: 'Kamis' },
+  { no: 5, hari: 'Jum\'at' },
+]);
+
+const selectedDays = ref(props.modelValue);
+
+const toggleDay = (hari) => {
+  const index = selectedDays.value.indexOf(hari);
+  if (index > -1) {
+    selectedDays.value.splice(index, 1);
+  } else {
+    selectedDays.value.push(hari);
+  }
+  emit('update:modelValue', selectedDays.value);
+};
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$neutral-500: #ABBED1;
+$neutral-800: #4D4D4D;
+$secondary-300: #DBEDFF;
+$secondary-600: #0671E0;
+$font-weight-medium: 500;
+
+.day-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.day-chip {
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-medium;
+  border: 1px solid $neutral-500;
+  background-color: $neutral-100;
+  color: $neutral-800;
+  
+  &:hover {
+    background-color: $secondary-300;
+  }
+}
+
+.day-chip-active {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  border-color: $secondary-600 !important;
+}
+</style>
\ No newline at end of file
diff --git a/components/features/master/klinik/FormDialogKlinik.vue b/components/features/master/klinik/FormDialogKlinik.vue
new file mode 100644
index 0000000..5e9334b
--- /dev/null
+++ b/components/features/master/klinik/FormDialogKlinik.vue
@@ -0,0 +1,276 @@
+<template>
+  <v-dialog v-model="dialogModel" max-width="900px" persistent scrollable>
+    <v-card class="dialog-card">
+      <v-card-title class="dialog-header">
+        <span class="headline-4">{{ isEdit ? 'Edit Klinik' : 'Tambah Klinik' }}</span>
+        <v-btn icon variant="text" size="small" class="btn-close" @click="handleClose">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text class="dialog-content">
+        <v-form ref="formRef">
+          <!-- Informasi Dasar -->
+          <FormFieldGroup title="Informasi Dasar">
+            <v-row dense>
+              <v-col cols="4">
+                <v-text-field
+                  v-model="formModel.kode"
+                  label="Kode"
+                  variant="outlined"
+                  density="compact"
+                  :rules="[v => !!v || 'Kode harus diisi']"
+                  hide-details="auto"
+                  placeholder="AN"
+                  class="mb-3 input-field"
+                />
+                <small class="caption-2">2 Huruf</small>
+              </v-col>
+              <v-col cols="4">
+                <v-text-field
+                  v-model="formModel.nama"
+                  label="Nama"
+                  variant="outlined"
+                  density="compact"
+                  :rules="[v => !!v || 'Nama harus diisi']"
+                  hide-details="auto"
+                  placeholder="Gigi dan Mulut"
+                  class="mb-3 input-field"
+                />
+              </v-col>
+              <v-col cols="4">
+                <v-text-field
+                  v-model.number="formModel.shift"
+                  label="Jumlah Shift"
+                  type="number"
+                  variant="outlined"
+                  density="compact"
+                  :rules="[v => !!v || 'Shift harus diisi', v => v > 0 || 'Minimal 1']"
+                  hide-details="auto"
+                  class="mb-3 input-field"
+                  @update:model-value="updateShiftCount"
+                />
+              </v-col>
+            </v-row>
+
+            <v-checkbox
+              v-model="formModel.autoShift"
+              label="Auto Shift"
+              hide-details
+              color="#0671E0"
+              density="compact"
+              class="checkbox-field"
+            />
+          </FormFieldGroup>
+
+          <v-divider class="my-4 divider-section"/>
+
+          <!-- Konfigurasi Shift & Kuota -->
+          <FormFieldGroup title="Konfigurasi Shift & Kuota" icon="mdi-clock-outline">
+            <ShiftConfiguration
+              :shifts="formModel.jamShiftList"
+              @update:shifts="formModel.jamShiftList = $event"
+              @remove-shift="removeShift"
+            />
+          </FormFieldGroup>
+
+          <v-divider class="my-4 divider-section"/>
+
+          <!-- Jadwal Klinik -->
+          <FormFieldGroup title="Jadwal Klinik" icon="mdi-calendar-check">
+            <DaySelector v-model="formModel.jadwalKlinik" />
+          </FormFieldGroup>
+        </v-form>
+      </v-card-text>
+
+      <v-divider/>
+
+      <v-card-actions class="dialog-actions">
+        <v-spacer/>
+        <v-btn
+          variant="outlined"
+          class="btn-cancel"
+          @click="handleClose"
+        >
+          <v-icon left size="18">mdi-close</v-icon>
+          Batal
+        </v-btn>
+        <v-btn
+          variant="flat"
+          class="btn-submit"
+          @click="handleSubmit"
+        >
+          <v-icon left size="18">mdi-content-save</v-icon>
+          Simpan
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import FormFieldGroup from '@/components/common/FormFieldGroup.vue';
+import ShiftConfiguration from '@/components/master/ShiftConfiguration.vue';
+import DaySelector from '@/components/master/DaySelector.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  },
+  formData: {
+    type: Object,
+    required: true
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'update:formData', 'submit', 'close']);
+
+const formRef = ref(null);
+
+const dialogModel = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+
+const formModel = computed({
+  get: () => props.formData,
+  set: (value) => emit('update:formData', value)
+});
+
+const updateShiftCount = (newShiftCount) => {
+  const currentCount = formModel.value.jamShiftList.length;
+  
+  if (newShiftCount > currentCount) {
+    for (let i = currentCount; i < newShiftCount; i++) {
+      let defaultDari = '07:00', defaultSampai = '11:00';
+      
+      if (i === 1) { defaultDari = '13:00'; defaultSampai = '16:00'; }
+      else if (i === 2) { defaultDari = '18:00'; defaultSampai = '20:00'; }
+      else if (i > 2) {
+        const prevShift = formModel.value.jamShiftList[i - 1];
+        const [prevHour] = prevShift.sampai.split(':');
+        const nextHour = (parseInt(prevHour) + 1) % 24;
+        defaultDari = `${String(nextHour).padStart(2, '0')}:00`;
+        defaultSampai = `${String((nextHour + 4) % 24).padStart(2, '0')}:00`;
+      }
+      
+      formModel.value.jamShiftList.push({ dari: defaultDari, sampai: defaultSampai, kuota: 0 });
+    }
+  } else if (newShiftCount < currentCount && newShiftCount > 0) {
+    formModel.value.jamShiftList = formModel.value.jamShiftList.slice(0, newShiftCount);
+  }
+};
+
+const removeShift = (index) => {
+  if (formModel.value.jamShiftList.length > 1) {
+    formModel.value.jamShiftList.splice(index, 1);
+    formModel.value.shift = formModel.value.jamShiftList.length;
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleSubmit = async () => {
+  const { valid } = await formRef.value.validate();
+  if (valid) {
+    emit('submit', formModel.value);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$neutral-300: #F5F7FA;
+$neutral-400: #E5F7FA;
+$neutral-600: #89939E;
+$neutral-700: #717171;
+$neutral-800: #4D4D4D;
+$secondary-600: #0671E0;
+$secondary-700: #0053AD;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-semibold: 600;
+
+.dialog-card {
+  font-family: $font-family-base;
+}
+
+.dialog-header {
+  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  color: $neutral-100;
+  padding: 20px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.headline-4 {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: $font-weight-semibold;
+  margin: 0;
+}
+
+.btn-close {
+  color: $neutral-100 !important;
+}
+
+.dialog-content {
+  padding: 24px !important;
+  background: $neutral-300;
+}
+
+.dialog-actions {
+  padding: 16px 24px;
+  background: $neutral-300;
+}
+
+.caption-2 {
+  font-size: 12px;
+  line-height: 16px;
+  color: $neutral-700;
+}
+
+.input-field {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.checkbox-field {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.divider-section {
+  border-color: $neutral-400 !important;
+}
+
+.btn-cancel {
+  border-color: $neutral-600 !important;
+  color: $neutral-800 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+
+.btn-submit {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+</style>
\ No newline at end of file
diff --git a/components/features/master/klinik/KonfigurasiShift.vue b/components/features/master/klinik/KonfigurasiShift.vue
new file mode 100644
index 0000000..09c2e4a
--- /dev/null
+++ b/components/features/master/klinik/KonfigurasiShift.vue
@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <div v-for="(shift, index) in shifts" :key="index" class="shift-item">
+      <v-row dense align="center">
+        <v-col cols="2">
+          <div class="shift-badge body-3">Shift {{ index + 1 }}</div>
+        </v-col>
+        
+        <v-col cols="3">
+          <v-text-field
+            v-model="shift.dari"
+            label="Mulai"
+            type="time"
+            variant="outlined"
+            density="compact"
+            hide-details
+            class="input-field"
+            @update:model-value="emitUpdate"
+          />
+        </v-col>
+        
+        <v-col cols="3">
+          <v-text-field
+            v-model="shift.sampai"
+            label="Selesai"
+            type="time"
+            variant="outlined"
+            density="compact"
+            hide-details
+            class="input-field"
+            @update:model-value="emitUpdate"
+          />
+        </v-col>
+        
+        <v-col cols="3">
+          <v-text-field
+            v-model.number="shift.kuota"
+            label="Kuota"
+            type="number"
+            variant="outlined"
+            density="compact"
+            hide-details
+            placeholder="0"
+            class="input-field"
+            @update:model-value="emitUpdate"
+          />
+        </v-col>
+        
+        <v-col cols="1">
+          <v-btn
+            v-if="shifts.length > 1"
+            icon
+            size="small"
+            variant="text"
+            class="btn-delete-shift"
+            @click="removeShift(index)"
+          >
+            <v-icon size="18">mdi-delete</v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </div>
+
+    <div class="total-badge">
+      <v-icon size="18" class="icon-success">mdi-sigma</v-icon>
+      <span class="body-3 text-medium">Total Kuota:</span>
+      <v-chip size="small" variant="flat" class="chip-success">
+        {{ totalQuota }}
+      </v-chip>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  shifts: {
+    type: Array,
+    required: true
+  }
+});
+
+const emit = defineEmits(['update:shifts', 'remove-shift']);
+
+const totalQuota = computed(() => {
+  return props.shifts.reduce((total, shift) => {
+    return total + (parseInt(shift.kuota) || 0);
+  }, 0);
+});
+
+const emitUpdate = () => {
+  emit('update:shifts', props.shifts);
+};
+
+const removeShift = (index) => {
+  emit('remove-shift', index);
+};
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$neutral-300: #F5F7FA;
+$neutral-500: #ABBED1;
+$neutral-700: #717171;
+$secondary-600: #0671E0;
+$secondary-700: #0053AD;
+$success-200: #F1FBF8;
+$success-300: #84DFC1;
+$success-600: #009262;
+$danger-600: #E02B1D;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+
+.shift-item {
+  background: $neutral-300;
+  padding: 12px;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  border: 1px solid $neutral-500;
+}
+
+.shift-badge {
+  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  color: $neutral-100;
+  padding: 8px;
+  border-radius: 6px;
+  text-align: center;
+  font-weight: $font-weight-semibold;
+}
+
+.body-3 {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.text-medium {
+  font-weight: $font-weight-medium !important;
+}
+
+.input-field {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.btn-delete-shift {
+  color: $danger-600 !important;
+}
+
+.total-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+  background: $success-200;
+  border-radius: 8px;
+  margin-top: 8px;
+  border: 1px solid $success-300;
+}
+
+.icon-success {
+  color: $success-600 !important;
+}
+
+.chip-success {
+  background-color: $success-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-semibold;
+}
+</style>
\ No newline at end of file
diff --git a/components/features/master/klinik/TabelKlinik.vue b/components/features/master/klinik/TabelKlinik.vue
new file mode 100644
index 0000000..f9cdc76
--- /dev/null
+++ b/components/features/master/klinik/TabelKlinik.vue
@@ -0,0 +1,111 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="items"
+    :items-per-page="itemsPerPage"
+    class="elevation-0 data-table"
+  >
+    <template #item.shift="{ item }">
+      <v-chip size="small" class="chip-secondary">
+        {{ item.shift }}
+      </v-chip>
+    </template>
+    
+    <template #item.totalQuota="{ item }">
+      <span class="body-2 text-semibold">{{ item.totalQuota }}</span>
+    </template>
+    
+    <template #item.aksi="{ item }">
+      <v-btn
+        size="small"
+        class="btn-edit mr-2"
+        variant="flat"
+        @click="$emit('edit', item)"
+      >
+        <v-icon size="16" left>mdi-pencil</v-icon>
+        Edit
+      </v-btn>
+      <v-btn
+        size="small"
+        class="btn-delete"
+        variant="outlined"
+        @click="$emit('delete', item)"
+      >
+        <v-icon size="16" left>mdi-delete</v-icon>
+        Delete
+      </v-btn>
+    </template>
+  </v-data-table>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 10
+  }
+});
+
+const headers = [
+  { title: 'No', value: 'no', sortable: true },
+  { title: 'Kode', value: 'kode', sortable: true },
+  { title: 'Nama Klinik', value: 'nama', sortable: true },
+  { title: 'Shift', value: 'shift', sortable: true },
+  { title: 'Total Kuota', value: 'totalQuota', sortable: true },
+  { title: 'Aksi', value: 'aksi', sortable: false },
+];
+
+defineEmits(['edit', 'delete']);
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$neutral-800: #4D4D4D;
+$primary-600: #FFA532;
+$secondary-600: #0671E0;
+$danger-600: #E02B1D;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+
+.data-table {
+  font-family: $font-family-base;
+}
+
+.chip-secondary {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-medium;
+}
+
+.body-2 {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.text-semibold {
+  font-weight: $font-weight-semibold !important;
+}
+
+.btn-edit {
+  background-color: $primary-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.btn-delete {
+  border-color: $danger-600 !important;
+  color: $danger-600 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/components/features/master/loket/LoketFormDialog.vue b/components/features/master/loket/LoketFormDialog.vue
new file mode 100644
index 0000000..2c367d8
--- /dev/null
+++ b/components/features/master/loket/LoketFormDialog.vue
@@ -0,0 +1,327 @@
+<template>
+  <v-dialog v-model="dialogModel" max-width="700px" persistent scrollable>
+    <v-card class="dialog-card">
+      <v-card-title class="dialog-header">
+        <span class="headline-4">{{ isEdit ? 'Edit Loket' : 'Tambah Loket Baru' }}</span>
+        <v-btn icon variant="text" size="small" class="btn-close" @click="handleClose">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text class="dialog-content">
+        <v-form ref="formRef">
+          <!-- Informasi Loket -->
+          <FormFieldGroup title="Informasi Loket">
+            <v-text-field
+              v-model="formModel.namaLoket"
+              label="Nama Loket"
+              variant="outlined"
+              density="compact"
+              :rules="[v => !!v || 'Nama loket harus diisi']"
+              hide-details="auto"
+              class="mb-3 input-field"
+              placeholder="Loket 1"
+            />
+
+            <v-text-field
+              v-model.number="formModel.kuota"
+              label="Kuota Bangku"
+              type="number"
+              variant="outlined"
+              density="compact"
+              :rules="[v => !!v || 'Kuota harus diisi', v => v > 0 || 'Kuota minimal 1']"
+              hide-details="auto"
+              class="mb-3 input-field"
+              placeholder="500"
+            />
+          </FormFieldGroup>
+
+          <v-divider class="my-4 divider-section"/>
+
+          <!-- Konfigurasi -->
+          <FormFieldGroup title="Konfigurasi">
+            <v-select
+              v-model="formModel.statusPelayanan"
+              label="Status Pelayanan"
+              :items="['RAWAT JALAN', 'RAWAT INAP']"
+              variant="outlined"
+              density="compact"
+              :rules="[v => !!v || 'Status pelayanan harus dipilih']"
+              hide-details="auto"
+              class="mb-3 input-field"
+            />
+
+            <v-row dense>
+              <v-col cols="6">
+                <v-select
+                  v-model="formModel.pembayaran"
+                  label="Pembayaran"
+                  :items="['JKN', 'UMUM', 'SPM', 'JKMM', 'JAMPERSAL', 'T4', 'KARYAWAN']"
+                  variant="outlined"
+                  density="compact"
+                  :rules="[v => !!v || 'Pembayaran harus dipilih']"
+                  hide-details="auto"
+                  class="input-field"
+                />
+              </v-col>
+              <v-col cols="6">
+                <v-select
+                  v-model="formModel.keterangan"
+                  label="Keterangan"
+                  :items="['ONLINE', 'OFFLINE']"
+                  variant="outlined"
+                  density="compact"
+                  :rules="[v => !!v || 'Keterangan harus dipilih']"
+                  hide-details="auto"
+                  class="input-field"
+                />
+              </v-col>
+            </v-row>
+          </FormFieldGroup>
+
+          <v-divider class="my-4 divider-section"/>
+
+          <!-- Pelayanan -->
+          <FormFieldGroup title="Pelayanan" icon="mdi-hospital-box">
+            <v-select
+              v-model="formModel.pelayanan"
+              label="Pilih Pelayanan"
+              :items="availableServices"
+              item-title="nama"
+              item-value="id"
+              variant="outlined"
+              density="compact"
+              multiple
+              chips
+              closable-chips
+              :rules="[v => v.length > 0 || 'Pilih minimal 1 pelayanan']"
+              hide-details="auto"
+              class="input-field"
+            >
+              <template #chip="{ props, item }">
+                <v-chip
+                  v-bind="props"
+                  closable
+                  size="small"
+                  class="chip-primary"
+                >
+                  {{ item.raw.nama }}
+                </v-chip>
+              </template>
+              <template #item="{ props, item }">
+                <v-list-item v-bind="props">
+                  <template #prepend>
+                    <v-chip size="x-small" class="chip-primary-small">{{ item.raw.id }}</v-chip>
+                  </template>
+                  <v-list-item-title class="body-3">{{ item.raw.nama }}</v-list-item-title>
+                </v-list-item>
+              </template>
+            </v-select>
+            
+            <!-- Selected Services Preview -->
+            <div v-if="formModel.pelayanan.length > 0" class="selected-preview">
+              <v-icon size="14" class="icon-success">mdi-check-circle</v-icon>
+              <small class="caption-2">{{ formModel.pelayanan.length }} pelayanan dipilih</small>
+            </div>
+          </FormFieldGroup>
+        </v-form>
+      </v-card-text>
+
+      <v-divider/>
+
+      <v-card-actions class="dialog-actions">
+        <v-spacer/>
+        <v-btn
+          variant="outlined"
+          class="btn-cancel"
+          @click="handleClose"
+        >
+          <v-icon left size="18">mdi-close</v-icon>
+          Batal
+        </v-btn>
+        <v-btn
+          variant="flat"
+          class="btn-submit"
+          @click="handleSubmit"
+        >
+          <v-icon left size="18">mdi-content-save</v-icon>
+          Simpan
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import FormFieldGroup from '@/components/common/FormFieldGroup.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  },
+  formData: {
+    type: Object,
+    required: true
+  },
+  availableServices: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'update:formData', 'submit', 'close']);
+
+const formRef = ref(null);
+
+const dialogModel = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+
+const formModel = computed({
+  get: () => props.formData,
+  set: (value) => emit('update:formData', value)
+});
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleSubmit = async () => {
+  const { valid } = await formRef.value.validate();
+  if (valid) {
+    emit('submit', formModel.value);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$neutral-300: #F5F7FA;
+$neutral-400: #E5F7FA;
+$neutral-600: #89939E;
+$neutral-700: #717171;
+$neutral-800: #4D4D4D;
+$primary-600: #FFA532;
+$primary-700: #FF9B1B;
+$success-200: #F1FBF8;
+$success-300: #84DFC1;
+$success-600: #009262;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+
+.dialog-card {
+  font-family: $font-family-base;
+}
+
+.dialog-header {
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
+  color: $neutral-100;
+  padding: 20px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.headline-4 {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: $font-weight-semibold;
+  margin: 0;
+}
+
+.btn-close {
+  color: $neutral-100 !important;
+}
+
+.dialog-content {
+  padding: 24px !important;
+  background: $neutral-300;
+}
+
+.dialog-actions {
+  padding: 16px 24px;
+  background: $neutral-300;
+}
+
+.input-field {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.divider-section {
+  border-color: $neutral-400 !important;
+}
+
+.body-3 {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-regular;
+}
+
+.caption-2 {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: $font-weight-regular;
+  color: $neutral-700;
+}
+
+.chip-primary {
+  background-color: $primary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-medium;
+}
+
+.chip-primary-small {
+  background-color: $primary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.selected-preview {
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: $success-200;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid $success-300;
+}
+
+.icon-success {
+  color: $success-600 !important;
+}
+
+.btn-cancel {
+  border-color: $neutral-600 !important;
+  color: $neutral-800 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+
+.btn-submit {
+  background-color: $primary-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+</style>
\ No newline at end of file
diff --git a/components/features/master/loket/LoketTable.vue b/components/features/master/loket/LoketTable.vue
new file mode 100644
index 0000000..5934845
--- /dev/null
+++ b/components/features/master/loket/LoketTable.vue
@@ -0,0 +1,125 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="items"
+    :items-per-page="itemsPerPage"
+    class="elevation-0 data-table"
+  >
+    <template #item.pelayanan="{ item }">
+      <v-chip
+        v-for="(serviceKode, idx) in item.pelayanan.slice(0, 2)"
+        :key="idx"
+        size="small"
+        class="mr-1 mb-1 chip-primary-outline"
+      >
+        {{ getKlinikName(serviceKode) }}
+      </v-chip>
+      <v-chip
+        v-if="item.pelayanan.length > 2"
+        size="small"
+        class="chip-neutral"
+      >
+        +{{ item.pelayanan.length - 2 }}
+      </v-chip>
+    </template>
+
+    <template #item.aksi="{ item }">
+      <v-btn
+        size="small"
+        variant="flat"
+        class="btn-edit mr-2"
+        @click="$emit('edit', item)"
+      >
+        <v-icon size="16" left>mdi-pencil</v-icon>
+        Edit
+      </v-btn>
+      <v-btn 
+        size="small" 
+        variant="outlined" 
+        class="btn-delete"
+        @click="$emit('delete', item)"
+      >
+        <v-icon size="16" left>mdi-delete</v-icon>
+        Delete
+      </v-btn>
+    </template>
+  </v-data-table>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 10
+  },
+  getKlinikName: {
+    type: Function,
+    required: true
+  }
+});
+
+const headers = [
+  { 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 },
+];
+
+defineEmits(['edit', 'delete']);
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$neutral-600: #89939E;
+$primary-600: #FFA532;
+$danger-600: #E02B1D;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+
+.data-table {
+  font-family: $font-family-base;
+}
+
+.chip-primary-outline {
+  border: 1px solid $primary-600;
+  background-color: transparent !important;
+  color: $primary-600 !important;
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.chip-neutral {
+  background-color: $neutral-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.btn-edit {
+  background-color: $primary-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.btn-delete {
+  border-color: $danger-600 !important;
+  color: $danger-600 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/components/features/master/ruang/FormDialogRuang.vue b/components/features/master/ruang/FormDialogRuang.vue
new file mode 100644
index 0000000..05092c5
--- /dev/null
+++ b/components/features/master/ruang/FormDialogRuang.vue
@@ -0,0 +1,245 @@
+<template>
+  <v-dialog v-model="dialogModel" max-width="700px" persistent scrollable>
+    <v-card class="dialog-card">
+      <v-card-title class="dialog-header">
+        <span class="headline-4">{{ isEdit ? 'Edit Klinik Ruang' : 'Tambah Klinik Ruang' }}</span>
+        <v-btn icon variant="text" @click="handleClose" size="small" class="btn-close">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text class="dialog-content">
+        <v-form ref="formRef">
+          <!-- Pilih Klinik -->
+          <FormFieldGroup title="Pilih Klinik" icon="mdi-hospital-building">
+            <v-autocomplete
+              label="Kode Klinik"
+              v-model="formModel.kodeKlinik"
+              :items="klinikList"
+              item-title="nama"
+              item-value="kode"
+              variant="outlined"
+              density="compact"
+              :rules="[v => !!v || 'Kode klinik harus dipilih']"
+              hide-details="auto"
+              placeholder="Pilih Klinik"
+              @update:model-value="handleKlinikChange"
+              class="mb-3 input-field"
+            >
+              <template v-slot:item="{ props, item }">
+                <v-list-item v-bind="props">
+                  <template v-slot:prepend>
+                    <v-chip size="x-small" class="chip-success-small">{{ item.raw.kode }}</v-chip>
+                  </template>
+                  <v-list-item-title class="body-3">{{ item.raw.nama }}</v-list-item-title>
+                </v-list-item>
+              </template>
+            </v-autocomplete>
+          </FormFieldGroup>
+
+          <v-divider class="my-4 divider-section"/>
+
+          <!-- Daftar Ruangan -->
+          <FormFieldGroup title="Daftar Ruangan" icon="mdi-door">
+            <RoomListManager
+              :rooms="formModel.ruangList"
+              @update:rooms="formModel.ruangList = $event"
+              @add-room="addRoom"
+              @remove-room="removeRoom"
+            />
+          </FormFieldGroup>
+        </v-form>
+      </v-card-text>
+
+      <v-divider/>
+
+      <v-card-actions class="dialog-actions">
+        <v-spacer/>
+        <v-btn
+          variant="outlined"
+          @click="handleClose"
+          class="btn-cancel"
+        >
+          <v-icon left size="18">mdi-close</v-icon>
+          Batal
+        </v-btn>
+        <v-btn
+          variant="flat"
+          @click="handleSubmit"
+          class="btn-submit"
+        >
+          <v-icon left size="18">mdi-content-save</v-icon>
+          Simpan
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import FormFieldGroup from '@/components/common/FormFieldGroup.vue';
+import RoomListManager from '@/components/master/RoomListManager.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  },
+  formData: {
+    type: Object,
+    required: true
+  },
+  klinikList: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'update:formData', 'submit', 'close', 'klinik-change']);
+
+const formRef = ref(null);
+
+const dialogModel = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+
+const formModel = computed({
+  get: () => props.formData,
+  set: (value) => emit('update:formData', value)
+});
+
+const handleKlinikChange = (kode) => {
+  emit('klinik-change', kode);
+};
+
+const addRoom = () => {
+  formModel.value.ruangList.push({
+    nomorRuang: '',
+    namaRuang: '',
+    nomorScreen: ''
+  });
+};
+
+const removeRoom = (index) => {
+  if (formModel.value.ruangList.length > 1) {
+    formModel.value.ruangList.splice(index, 1);
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleSubmit = async () => {
+  const { valid } = await formRef.value.validate();
+  
+  if (!valid) return;
+
+  if (formModel.value.ruangList.length === 0) {
+    // Emit validation error
+    emit('validation-error', 'Tambahkan minimal 1 ruangan');
+    return;
+  }
+
+  emit('submit', formModel.value);
+};
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$neutral-300: #F5F7FA;
+$neutral-400: #E5F7FA;
+$neutral-600: #89939E;
+$neutral-700: #717171;
+$neutral-800: #4D4D4D;
+$success-600: #009262;
+$success-700: #1B6E53;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-semibold: 600;
+
+.dialog-card {
+  font-family: $font-family-base;
+}
+
+.dialog-header {
+  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
+  color: $neutral-100;
+  padding: 20px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.headline-4 {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: $font-weight-semibold;
+  margin: 0;
+}
+
+.btn-close {
+  color: $neutral-100 !important;
+}
+
+.dialog-content {
+  padding: 24px !important;
+  background: $neutral-300;
+}
+
+.dialog-actions {
+  padding: 16px 24px;
+  background: $neutral-300;
+}
+
+.body-3 {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-regular;
+}
+
+.input-field {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.divider-section {
+  border-color: $neutral-400 !important;
+}
+
+.chip-success-small {
+  background-color: $success-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.btn-cancel {
+  border-color: $neutral-600 !important;
+  color: $neutral-800 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+
+.btn-submit {
+  background-color: $success-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+</style>
\ No newline at end of file
diff --git a/components/features/master/ruang/RoomListManager.vue b/components/features/master/ruang/RoomListManager.vue
new file mode 100644
index 0000000..05efbaa
--- /dev/null
+++ b/components/features/master/ruang/RoomListManager.vue
@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <div v-for="(ruang, index) in rooms" :key="index" class="ruang-item">
+      <v-row dense align="center">
+        <v-col cols="1">
+          <div class="ruang-badge body-3">{{ index + 1 }}</div>
+        </v-col>
+        
+        <v-col cols="3">
+          <v-text-field
+            label="No. Ruang"
+            v-model="ruang.nomorRuang"
+            variant="outlined"
+            density="compact"
+            hide-details
+            placeholder="1"
+            class="input-field"
+            @update:model-value="emitUpdate"
+          />
+        </v-col>
+        
+        <v-col cols="4">
+          <v-text-field
+            label="Nama Ruang"
+            v-model="ruang.namaRuang"
+            variant="outlined"
+            density="compact"
+            hide-details
+            placeholder="Ruang Konsultasi"
+            class="input-field"
+            @update:model-value="emitUpdate"
+          />
+        </v-col>
+        
+        <v-col cols="3">
+          <v-text-field
+            label="No. Screen"
+            v-model="ruang.nomorScreen"
+            variant="outlined"
+            density="compact"
+            hide-details
+            placeholder="101"
+            class="input-field"
+            @update:model-value="emitUpdate"
+          />
+        </v-col>
+        
+        <v-col cols="1">
+          <v-btn
+            v-if="rooms.length > 1"
+            icon
+            size="small"
+            variant="text"
+            @click="removeRoom(index)"
+            class="btn-delete-ruang"
+          >
+            <v-icon size="18">mdi-delete</v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </div>
+
+    <v-btn
+      variant="outlined"
+      size="small"
+      @click="addRoom"
+      class="btn-add-ruang mt-2"
+    >
+      <v-icon left size="18">mdi-plus</v-icon>
+      Tambah Ruang
+    </v-btn>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  rooms: {
+    type: Array,
+    required: true
+  }
+});
+
+const emit = defineEmits(['update:rooms', 'add-room', 'remove-room']);
+
+const emitUpdate = () => {
+  emit('update:rooms', props.rooms);
+};
+
+const addRoom = () => {
+  emit('add-room');
+};
+
+const removeRoom = (index) => {
+  emit('remove-room', index);
+};
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$neutral-300: #F5F7FA;
+$neutral-500: #ABBED1;
+$success-600: #009262;
+$success-700: #1B6E53;
+$danger-600: #E02B1D;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-semibold: 600;
+
+.ruang-item {
+  background: $neutral-300;
+  padding: 12px;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  border: 1px solid $neutral-500;
+}
+
+.ruang-badge {
+  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
+  color: $neutral-100;
+  padding: 8px;
+  border-radius: 6px;
+  text-align: center;
+  font-weight: $font-weight-semibold;
+}
+
+.body-3 {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.input-field {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.btn-delete-ruang {
+  color: $danger-600 !important;
+}
+
+.btn-add-ruang {
+  border-color: $success-600 !important;
+  color: $success-600 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/components/features/master/ruang/TabelRuang.vue b/components/features/master/ruang/TabelRuang.vue
new file mode 100644
index 0000000..f684756
--- /dev/null
+++ b/components/features/master/ruang/TabelRuang.vue
@@ -0,0 +1,108 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="items"
+    :items-per-page="itemsPerPage"
+    class="elevation-0 data-table"
+  >
+    <template v-slot:item.namaKlinik="{ item }">
+      <v-chip size="small" class="chip-success-outline">
+        {{ item.kodeKlinik }}
+      </v-chip>
+      <span class="ml-2 body-3 text-medium">{{ item.namaKlinik }}</span>
+    </template>
+    
+    <template v-slot:item.aksi="{ item }">
+      <v-btn
+        size="small"
+        @click="$emit('edit', item)"
+        class="btn-edit mr-2"
+        variant="flat"
+      >
+        <v-icon size="16" left>mdi-pencil</v-icon>
+        Edit
+      </v-btn>
+      <v-btn
+        size="small"
+        @click="$emit('delete', item)"
+        class="btn-delete"
+        variant="outlined"
+      >
+        <v-icon size="16" left>mdi-delete</v-icon>
+        Delete
+      </v-btn>
+    </template>
+  </v-data-table>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 10
+  }
+});
+
+const headers = [
+  { title: 'No', value: 'no', sortable: true },
+  { title: 'Nama Klinik', value: 'namaKlinik', sortable: true },
+  { title: 'Kode', value: 'kodeKlinik', sortable: true },
+  { title: 'Nama Ruang', value: 'namaRuang', sortable: true },
+  { title: 'Aksi', value: 'aksi', sortable: false },
+];
+
+defineEmits(['edit', 'delete']);
+</script>
+
+<style scoped lang="scss">
+$neutral-100: #FFFFFF;
+$success-600: #009262;
+$danger-600: #E02B1D;
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+
+.data-table {
+  font-family: $font-family-base;
+}
+
+.chip-success-outline {
+  border: 1px solid $success-600;
+  background-color: transparent !important;
+  color: $success-600 !important;
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.body-3 {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.text-medium {
+  font-weight: $font-weight-medium !important;
+}
+
+.btn-edit {
+  background-color: $success-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.btn-delete {
+  border-color: $danger-600 !important;
+  color: $danger-600 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/components/TabelData.vue b/components/features/monitoring/TabelData.vue
similarity index 100%
rename from components/TabelData.vue
rename to components/features/monitoring/TabelData.vue
diff --git a/components/TabelLayanan.vue b/components/features/monitoring/TabelLayanan.vue
similarity index 100%
rename from components/TabelLayanan.vue
rename to components/features/monitoring/TabelLayanan.vue
diff --git a/components/TabelListPasien.vue b/components/features/monitoring/TabelListPasien.vue
similarity index 100%
rename from components/TabelListPasien.vue
rename to components/features/monitoring/TabelListPasien.vue
diff --git a/components/features/queue/CurrentPatientCard.vue b/components/features/queue/CurrentPatientCard.vue
new file mode 100644
index 0000000..afc7fe3
--- /dev/null
+++ b/components/features/queue/CurrentPatientCard.vue
@@ -0,0 +1,129 @@
+<template>
+  <v-card class="current-patient-card" elevation="0">
+    <v-card-text class="pa-4">
+      <div class="section-label mb-3">SEDANG DIPROSES</div>
+      
+      <div v-if="patient" class="patient-details" :class="`patient-details-${theme}`">
+        <div class="patient-number mb-2">{{ patient.noAntrian.split(" |")[0] }}</div>
+        <div class="patient-info-text mb-3">
+          <div>{{ patient.barcode }}</div>
+          <div>{{ patient.klinik }} | {{ patient.pembayaran }}</div>
+        </div>
+        
+        <div class="action-grid">
+          <v-btn color="success-600" variant="flat" block size="large" @click="$emit('action', 'check-in')">
+            <v-icon start size="20">mdi-check</v-icon>
+            Selesai
+          </v-btn>
+          <v-btn color="primary-600" variant="flat" block size="large" @click="$emit('action', 'terlambat')">
+            <v-icon start size="20">mdi-clock-alert</v-icon>
+            Terlambat
+          </v-btn>
+          <v-btn color="danger-600" variant="flat" block size="large" @click="$emit('action', 'pending')">
+            <v-icon start size="20">mdi-pause</v-icon>
+            Pending
+          </v-btn>
+          <v-btn color="secondary-600" variant="flat" block size="large" @click="$emit('change-klinik')">
+            <v-icon start size="20">mdi-swap-horizontal</v-icon>
+            {{ changeButtonText }}
+          </v-btn>
+        </div>
+      </div>
+      
+      <div v-else class="empty-state">
+        <v-icon size="48" color="grey-lighten-2">mdi-account-off-outline</v-icon>
+        <div class="empty-text">Tidak ada pasien yang diproses</div>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+defineProps({
+  patient: {
+    type: Object,
+    default: null
+  },
+  theme: {
+    type: String,
+    default: 'primary', // 'primary', 'secondary', or 'accent'
+    validator: (value) => ['primary', 'secondary', 'accent'].includes(value)
+  },
+  changeButtonText: {
+    type: String,
+    default: 'Ubah Klinik'
+  }
+});
+
+defineEmits(['action', 'change-klinik']);
+</script>
+
+<style scoped lang="scss">
+.current-patient-card {
+  border-radius: 12px;
+  border: 1px solid var(--color-neutral-500);
+  background: var(--color-neutral-100);
+}
+
+.section-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  color: var(--color-neutral-600);
+  text-transform: uppercase;
+}
+
+.patient-details {
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.patient-details-primary {
+  background: linear-gradient(135deg, var(--color-primary-200) 0%, var(--color-primary-300) 100%);
+}
+
+.patient-details-secondary {
+  background: linear-gradient(135deg, var(--color-secondary-200) 0%, var(--color-secondary-300) 100%);
+}
+
+.patient-details-accent {
+  background: linear-gradient(135deg, var(--color-accent-200) 0%, var(--color-accent-300) 100%);
+}
+
+.patient-number {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--color-neutral-900);
+  line-height: 1;
+}
+
+.patient-info-text {
+  font-size: 13px;
+  color: var(--color-neutral-700);
+  line-height: 1.5;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 32px 16px;
+}
+
+.empty-text {
+  font-size: 13px;
+  color: var(--color-neutral-600);
+  margin-top: 8px;
+}
+
+@media (max-width: 960px) {
+  .action-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/features/queue/QueueActionsCard.vue b/components/features/queue/QueueActionsCard.vue
new file mode 100644
index 0000000..5f2c8a2
--- /dev/null
+++ b/components/features/queue/QueueActionsCard.vue
@@ -0,0 +1,143 @@
+<template>
+  <v-card class="queue-actions-card" elevation="0">
+    <v-card-text class="pa-4">
+      <div class="section-label mb-3">PANGGIL ANTREAN</div>
+      
+      <div class="quota-info mb-3">
+        <div class="quota-item">
+          <span class="quota-label">Kuota</span>
+          <span class="quota-value">{{ totalQuota }}</span>
+        </div>
+        <div class="quota-item">
+          <span class="quota-label">Tersedia</span>
+          <span class="quota-value quota-available">{{ availableQuota }}</span>
+        </div>
+        <div class="quota-item full-width">
+          <v-progress-linear 
+            :model-value="quotaPercentage" 
+            color="success-600" 
+            height="6" 
+            rounded 
+            class="mt-1"
+          />
+          <span class="quota-used">Terpakai: {{ usedQuota }}</span>
+        </div>
+      </div>
+
+      <div class="call-buttons">
+        <v-btn 
+          color="success-600" 
+          variant="outlined" 
+          @click="$emit('call', 1)" 
+          :disabled="!hasNext"
+        >
+          1
+        </v-btn>
+        <v-btn color="secondary-600" variant="outlined" @click="$emit('call', 5)">5</v-btn>
+        <v-btn color="primary-600" variant="outlined" @click="$emit('call', 10)">10</v-btn>
+        <v-btn color="danger-600" variant="outlined" @click="$emit('call', 20)">20</v-btn>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  totalQuota: {
+    type: Number,
+    default: 150
+  },
+  usedQuota: {
+    type: Number,
+    default: 0
+  },
+  hasNext: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const availableQuota = computed(() => props.totalQuota - props.usedQuota);
+const quotaPercentage = computed(() => (props.usedQuota / props.totalQuota) * 100);
+
+defineEmits(['call']);
+</script>
+
+<style scoped lang="scss">
+.queue-actions-card {
+  border-radius: 12px;
+  border: 1px solid var(--color-neutral-500);
+  background: var(--color-neutral-100);
+}
+
+.section-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  color: var(--color-neutral-600);
+  text-transform: uppercase;
+}
+
+.quota-info {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.quota-item {
+  background: var(--color-neutral-300);
+  border-radius: 8px;
+  padding: 12px;
+  text-align: center;
+}
+
+.quota-item.full-width {
+  grid-column: 1 / -1;
+}
+
+.quota-label {
+  display: block;
+  font-size: 11px;
+  color: var(--color-neutral-600);
+  margin-bottom: 4px;
+  font-weight: 600;
+}
+
+.quota-value {
+  display: block;
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--color-neutral-900);
+}
+
+.quota-available {
+  color: var(--color-success-600);
+}
+
+.quota-used {
+  display: block;
+  font-size: 11px;
+  color: var(--color-neutral-600);
+  margin-top: 4px;
+}
+
+.call-buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.call-buttons .v-btn {
+  font-size: 16px;
+  font-weight: 700;
+  height: 44px;
+}
+
+@media (max-width: 960px) {
+  .call-buttons {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/features/queue/TabelPatientData.vue b/components/features/queue/TabelPatientData.vue
new file mode 100644
index 0000000..530db08
--- /dev/null
+++ b/components/features/queue/TabelPatientData.vue
@@ -0,0 +1,304 @@
+<template>
+  <v-card class="patient-table-card" elevation="0">
+    <v-card-text class="pa-4">
+      <!-- Table Header with Filters -->
+      <div class="table-header mb-4">
+        <div class="section-label">DATA PASIEN</div>
+        
+        <div class="filters">
+          <v-chip-group v-model="selectedStatusModel" mandatory class="status-filter">
+            <v-chip 
+              v-for="status in statusOptions" 
+              :key="status.value"
+              :value="status.value" 
+              :class="{ 'active-chip': selectedStatusModel === status.value }"
+            >
+              {{ status.label }} ({{ status.count }})
+            </v-chip>
+          </v-chip-group>
+
+          <v-text-field
+            v-model="searchModel"
+            placeholder="Cari barcode, nomor antrian..."
+            density="compact"
+            hide-details
+            class="search-field"
+            prepend-inner-icon="mdi-magnify"
+          />
+        </div>
+      </div>
+
+      <!-- Data Table -->
+      <v-data-table
+        :headers="headers"
+        :items="filteredItems"
+        :search="searchModel"
+        class="patient-table"
+        :items-per-page="itemsPerPage"
+        density="comfortable"
+      >
+        <template #item.noAntrian="{ item }">
+          <div class="queue-number">{{ item.noAntrian.split(" |")[0] }}</div>
+        </template>
+
+        <template #item.status="{ item }">
+          <v-chip
+            :color="getStatusColor(item.status)"
+            size="small"
+            class="status-chip"
+          >
+            {{ getStatusLabel(item.status) }}
+          </v-chip>
+        </template>
+
+        <template #item.klinik="{ item }">
+          <v-chip size="small" variant="outlined" class="klinik-chip">
+            {{ item.klinik }}
+          </v-chip>
+        </template>
+
+        <template #item.aksi="{ item }">
+          <div class="action-buttons-table">
+            <v-btn
+              v-if="item.status === 'diloket'"
+              size="small"
+              color="primary-600"
+              variant="flat"
+              @click="$emit('action', item, 'proses')"
+            >
+              Proses
+            </v-btn>
+            <v-btn
+              v-else-if="item.status === 'terlambat'"
+              size="small"
+              color="success-600"
+              variant="flat"
+              @click="$emit('action', item, 'aktifkan')"
+            >
+              Aktifkan
+            </v-btn>
+            <v-btn
+              v-else-if="item.status === 'pending'"
+              size="small"
+              color="success-600"
+              variant="flat"
+              @click="$emit('action', item, 'proses')"
+            >
+              Proses
+            </v-btn>
+          </div>
+        </template>
+      </v-data-table>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  selectedStatus: {
+    type: String,
+    default: 'all'
+  },
+  searchQuery: {
+    type: String,
+    default: ''
+  },
+  diLoketCount: {
+    type: Number,
+    default: 0
+  },
+  terlambatCount: {
+    type: Number,
+    default: 0
+  },
+  pendingCount: {
+    type: Number,
+    default: 0
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 10
+  },
+  statusLabels: {
+    type: Object,
+    default: () => ({
+      all: 'Semua',
+      diloket: 'Di Loket',
+      terlambat: 'Terlambat',
+      pending: 'Pending'
+    })
+  }
+});
+
+const emit = defineEmits(['update:selectedStatus', 'update:searchQuery', 'action']);
+
+const selectedStatusModel = computed({
+  get: () => props.selectedStatus,
+  set: (value) => emit('update:selectedStatus', value)
+});
+
+const searchModel = computed({
+  get: () => props.searchQuery,
+  set: (value) => emit('update:searchQuery', value)
+});
+
+const statusOptions = computed(() => [
+  { value: 'all', label: props.statusLabels.all, count: props.items.length },
+  { value: 'diloket', label: props.statusLabels.diloket, count: props.diLoketCount },
+  { value: 'terlambat', label: props.statusLabels.terlambat, count: props.terlambatCount },
+  { value: 'pending', label: props.statusLabels.pending, count: props.pendingCount }
+]);
+
+const filteredItems = computed(() => {
+  if (selectedStatusModel.value === 'all') return props.items;
+  return props.items.filter(p => p.status === selectedStatusModel.value);
+});
+
+const headers = [
+  { title: "No", value: "no", width: "60px", sortable: false },
+  { title: "Jam Panggil", value: "jamPanggil", width: "100px" },
+  { title: "Barcode", value: "barcode", width: "130px" },
+  { title: "No Antrian", value: "noAntrian", width: "140px" },
+  { title: "Klinik", value: "klinik", width: "100px" },
+  { title: "Fast Track", value: "fastTrack", width: "100px" },
+  { title: "Pembayaran", value: "pembayaran", width: "100px" },
+  { title: "Status", value: "status", width: "100px" },
+  { title: "Aksi", value: "aksi", width: "100px", sortable: false },
+];
+
+const getStatusColor = (status) => {
+  const colors = {
+    diloket: "var(--color-secondary-600)",
+    terlambat: "var(--color-primary-600)",
+    pending: "var(--color-danger-600)"
+  };
+  return colors[status] || "var(--color-neutral-600)";
+};
+
+const getStatusLabel = (status) => {
+  const labels = {
+    diloket: "Di Loket",
+    terlambat: "Terlambat",
+    pending: "Pending"
+  };
+  return labels[status] || status;
+};
+</script>
+
+<style scoped lang="scss">
+.patient-table-card {
+  border-radius: 12px;
+  border: 1px solid var(--color-neutral-500);
+  background: var(--color-neutral-100);
+}
+
+.section-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  color: var(--color-neutral-600);
+  text-transform: uppercase;
+}
+
+.table-header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.filters {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.status-filter {
+  flex: 1;
+}
+
+.status-filter .v-chip {
+  font-size: 12px;
+  font-weight: 600;
+  height: 32px;
+  border: 1px solid var(--color-neutral-500);
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-600);
+}
+
+.status-filter .v-chip.active-chip {
+  background: var(--color-secondary-600);
+  color: var(--color-neutral-100);
+  border-color: var(--color-secondary-600);
+}
+
+.search-field {
+  max-width: 250px;
+}
+
+:deep(.patient-table) {
+  border-radius: 8px;
+}
+
+:deep(.patient-table .v-data-table__thead) {
+  background: var(--color-neutral-300);
+}
+
+:deep(.patient-table th) {
+  font-size: 11px !important;
+  font-weight: 700 !important;
+  color: var(--color-neutral-600) !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 12px 8px !important;
+}
+
+:deep(.patient-table td) {
+  font-size: 13px !important;
+  padding: 10px 8px !important;
+  border-bottom: 1px solid var(--color-neutral-400) !important;
+}
+
+:deep(.patient-table tbody tr:hover) {
+  background: var(--color-neutral-300) !important;
+}
+
+.queue-number {
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+
+.status-chip {
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.klinik-chip {
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.action-buttons-table .v-btn {
+  text-transform: none;
+  font-weight: 600;
+  font-size: 12px;
+  height: 32px;
+}
+
+@media (max-width: 960px) {
+  .filters {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .search-field {
+    max-width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/AppBar.vue.txt b/components/layout/AppBar.vue.txt
similarity index 100%
rename from components/AppBar.vue.txt
rename to components/layout/AppBar.vue.txt
diff --git a/components/ProfileMenu.vue b/components/layout/ProfileMenu.vue
similarity index 100%
rename from components/ProfileMenu.vue
rename to components/layout/ProfileMenu.vue
diff --git a/components/ProfilePopup.vue b/components/layout/ProfilePopup.vue
similarity index 100%
rename from components/ProfilePopup.vue
rename to components/layout/ProfilePopup.vue
diff --git a/components/SideBar.vue b/components/layout/SideBar.vue
similarity index 100%
rename from components/SideBar.vue
rename to components/layout/SideBar.vue
diff --git a/composables/useQueue.js b/composables/useQueue.js
index 1a342fb..59a452c 100644
--- a/composables/useQueue.js
+++ b/composables/useQueue.js
@@ -1,53 +1,55 @@
 // composables/useQueue.js
-import { ref, computed } from 'vue';
-import { useQueueStore } from '../stores/queueStore';
+import { ref, computed } from "vue";
+import { useQueueStore } from "../stores/queueStore";
 
-export const useQueue = (adminType = 'loket') => {
+export const useQueue = (adminType = "loket") => {
   const queueStore = useQueueStore();
-  
+
   // Local state
   const snackbar = ref(false);
-  const snackbarText = ref('');
-  const snackbarColor = ref('success');
+  const snackbarText = ref("");
+  const snackbarColor = ref("success");
 
   // Dialog states
   const showKlinikDialog = ref(false);
   const showPenunjangDialog = ref(false);
   const showChangeKlinikDialog = ref(false);
-  const klinikSearch = ref('');
-  const penunjangSearch = ref('');
-  const changeKlinikSearch = ref('');
+  const klinikSearch = ref("");
+  const penunjangSearch = ref("");
+  const changeKlinikSearch = ref("");
   const selectedPatientForPenunjang = ref(null);
 
-  // Computed from store - filtered by stage
-  const currentProcessingPatient = queueStore.getCurrentProcessing(adminType);
-  
-  // Get patients based on admin type stage - ISOLATED PER ADMIN
+  // FIXED: Get stage patients once, then derive others from it
   const stagePatients = computed(() => {
-    return queueStore.getPatientsByStage(adminType).value;
+    // Don't use .value here - getPatientsByStage returns a computed already
+    const patients = queueStore.getPatientsByStage(adminType);
+    return patients.value;
   });
 
-  // Tabel "Di Loket" - hanya untuk stage admin ini
-  const diLoketPatients = computed(() => stagePatients.value.diLoket);
+  // Computed from store - filtered by stage
+  const currentProcessingPatient = computed(() => {
+    return queueStore.currentProcessingPatient[adminType];
+  });
+
+  // Derive from stagePatients
+  const diLoketPatients = computed(() => stagePatients.value.diLoket || []);
   
-  // Tabel "Terlambat" - hanya untuk stage admin ini
-  const terlambatPatients = computed(() => stagePatients.value.terlambat);
+  const terlambatPatients = computed(() => stagePatients.value.terlambat || []);
   
-  // Tabel "Pending" - hanya untuk stage admin ini
-  const pendingPatients = computed(() => stagePatients.value.pending);
-  
-  // Pasien waiting - hanya untuk stage admin ini
-  const waitingPatients = computed(() => stagePatients.value.waiting);
+  const pendingPatients = computed(() => stagePatients.value.pending || []);
   
+  const waitingPatients = computed(() => stagePatients.value.waiting || []);
+
   const nextPatient = computed(() => {
     return waitingPatients.value[0] || null;
   });
 
   // Total pasien hanya untuk stage admin ini
-  const totalPasien = computed(() => 
-    queueStore.getTotalPasienByStage(adminType).value
-  );
-  
+  const totalPasien = computed(() => {
+    const total = queueStore.getTotalPasienByStage(adminType);
+    return total.value;
+  });
+
   const quotaUsed = computed(() => queueStore.quotaUsed);
 
   // Filtered lists
@@ -73,7 +75,7 @@ export const useQueue = (adminType = 'loket') => {
   });
 
   // Methods
-  const showSnackbar = (text, color = 'success') => {
+  const showSnackbar = (text, color = "success") => {
     snackbarText.value = text;
     snackbarColor.value = color;
     snackbar.value = true;
@@ -81,27 +83,27 @@ export const useQueue = (adminType = 'loket') => {
 
   const callNext = () => {
     const result = queueStore.callNext(adminType);
-    showSnackbar(result.message, result.success ? 'success' : 'warning');
+    showSnackbar(result.message, result.success ? "success" : "warning");
   };
 
   const callMultiplePatients = (count) => {
     const result = queueStore.callMultiplePatients(count, adminType);
-    showSnackbar(result.message, result.success ? 'success' : 'warning');
+    showSnackbar(result.message, result.success ? "success" : "warning");
   };
 
   const processPatient = (patient, action) => {
     const result = queueStore.processPatient(patient, action, adminType);
-    
-    let color = 'success';
-    if (action === 'terlambat') color = 'warning';
-    else if (action === 'pending') color = 'info';
-    
+
+    let color = "success";
+    if (action === "terlambat") color = "warning";
+    else if (action === "pending") color = "info";
+
     showSnackbar(result.message, color);
   };
 
   const selectKlinik = (klinik) => {
     const result = queueStore.createAntreanKlinik(klinik, adminType);
-    showSnackbar(result.message, 'success');
+    showSnackbar(result.message, "success");
     showKlinikDialog.value = false;
   };
 
@@ -111,7 +113,7 @@ export const useQueue = (adminType = 'loket') => {
       selectedPatientForPenunjang.value,
       adminType
     );
-    showSnackbar(result.message, 'success');
+    showSnackbar(result.message, "success");
     showPenunjangDialog.value = false;
     selectedPatientForPenunjang.value = null;
   };
@@ -128,16 +130,16 @@ export const useQueue = (adminType = 'loket') => {
         klinik,
         adminType
       );
-      showSnackbar(result.message, result.success ? 'success' : 'error');
+      showSnackbar(result.message, result.success ? "success" : "error");
       showChangeKlinikDialog.value = false;
     }
   };
 
   const getRowClass = (item) => {
-    if (item.status === 'current') {
-      return 'text-success font-weight-bold';
+    if (item.status === "current") {
+      return "text-success font-weight-bold";
     }
-    return '';
+    return "";
   };
 
   return {
@@ -152,7 +154,7 @@ export const useQueue = (adminType = 'loket') => {
     penunjangSearch,
     changeKlinikSearch,
     selectedPatientForPenunjang,
-    
+
     // Computed
     currentProcessingPatient,
     diLoketPatients,
@@ -166,7 +168,7 @@ export const useQueue = (adminType = 'loket') => {
     filteredPenunjangs,
     filteredChangeKliniks,
     stagePatients,
-    
+
     // Methods
     showSnackbar,
     callNext,
diff --git a/layouts/default.vue b/layouts/default.vue
index 3793d5c..dd0c9f6 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import SideBar from "../components/SideBar.vue";
+import SideBar from "../components/layout/SideBar.vue";
 // Ensure this path matches your store location
 import { useNavItemsStore } from '~/stores/navItems1'; 
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e39630d..3452b9a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -10,7 +10,7 @@ export default defineNuxtConfig({
   },
 
   modules: [
-    "@nuxt/content",
+    // "@nuxt/content",
     "@nuxt/eslint",
     "@nuxt/fonts",
     "@nuxt/icon",
diff --git a/package-lock.json b/package-lock.json
index 61eb7e9..351bed2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -490,16 +490,16 @@
       }
     },
     "node_modules/@bufbuild/protobuf": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.10.0.tgz",
-      "integrity": "sha512-fdRs9PSrBF7QUntpZpq6BTw58fhgGJojgg39m9oFOJGZT+nip9b0so5cYY1oWl5pvemDLr0cPPsH46vwThEbpQ==",
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.10.1.tgz",
+      "integrity": "sha512-ckS3+vyJb5qGpEYv/s1OebUHDi/xSNtfgw1wqKZo7MR9F2z+qXr0q5XagafAG/9O0QPVIUfST0smluYSTpYFkg==",
       "devOptional": true,
       "license": "(Apache-2.0 AND BSD-3-Clause)"
     },
     "node_modules/@capsizecss/metrics": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@capsizecss/metrics/-/metrics-3.5.0.tgz",
-      "integrity": "sha512-Ju2I/Qn3c1OaU8FgeW4Tc22D4C9NwyVfKzNmzst59bvxBjPoLYNZMqFYn+HvCtn4MpXwiaDtCE8fNuQLpdi9yA==",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@capsizecss/metrics/-/metrics-3.6.2.tgz",
+      "integrity": "sha512-5uL1EIhAlfg0dvWsR1DGfqIsyiPBUsD/qlra15B82Ik28BcH7ScYEHLA4F34fZA0KamlpYcappvt2n1pTuDUfw==",
       "license": "MIT"
     },
     "node_modules/@capsizecss/unpack": {
@@ -559,21 +559,22 @@
       }
     },
     "node_modules/@dxup/nuxt": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@dxup/nuxt/-/nuxt-0.1.1.tgz",
-      "integrity": "sha512-ZQWCoeK4fQYgeP/xs+ldOMJHhd+7BSbx5JAYw0PEvbCfY2VLhz8sZDPtnSO5ur+o17wjApHc/DUTOqF8j+9Zag==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@dxup/nuxt/-/nuxt-0.2.2.tgz",
+      "integrity": "sha512-RNpJjDZs9+JcT9N87AnOuHsNM75DEd58itADNd/s1LIF6BZbTLZV0xxilJZb55lntn4TYvscTaXLCBX2fq9CXg==",
       "license": "MIT",
       "dependencies": {
-        "@dxup/unimport": "^0.1.0",
-        "@nuxt/kit": "^4.1.3",
+        "@dxup/unimport": "^0.1.2",
+        "@nuxt/kit": "^4.2.1",
         "chokidar": "^4.0.3",
-        "pathe": "2.0.3"
+        "pathe": "^2.0.3",
+        "tinyglobby": "^0.2.15"
       }
     },
     "node_modules/@dxup/nuxt/node_modules/@nuxt/kit": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.0.tgz",
-      "integrity": "sha512-1yN3LL6RDN5GjkNLPUYCbNRkaYnat6hqejPyfIBBVzrWOrpiQeNMGxQM/IcVdaSuBJXAnu0sUvTKXpXkmPhljg==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.1.tgz",
+      "integrity": "sha512-lLt8KLHyl7IClc3RqRpRikz15eCfTRlAWL9leVzPyg5N87FfKE/7EWgWvpiL/z4Tf3dQCIqQb88TmHE0JTIDvA==",
       "license": "MIT",
       "dependencies": {
         "c12": "^3.3.1",
@@ -614,15 +615,15 @@
       "license": "MIT"
     },
     "node_modules/@dxup/unimport": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@dxup/unimport/-/unimport-0.1.0.tgz",
-      "integrity": "sha512-6Q/Po8qGmlrShdG/R9+rpIhme9N/PGJumpvmwr1UAxGpt9DfOCt9kF8+yJkxhtPdJFL37KgUILZBRAkSU8cJZg==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@dxup/unimport/-/unimport-0.1.2.tgz",
+      "integrity": "sha512-/B8YJGPzaYq1NbsQmwgP8EZqg40NpTw4ZB3suuI0TplbxKHeK94jeaawLmVhCv+YwUnOpiWEz9U6SeThku/8JQ==",
       "license": "MIT"
     },
     "node_modules/@emnapi/core": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.6.0.tgz",
-      "integrity": "sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.7.0.tgz",
+      "integrity": "sha512-pJdKGq/1iquWYtv1RRSljZklxHCOCAJFJrImO5ZLKPJVJlVUcs8yFwNQlqS0Lo8xT1VAXXTCZocF9n26FWEKsw==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -631,9 +632,9 @@
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.6.0.tgz",
-      "integrity": "sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.0.tgz",
+      "integrity": "sha512-oAYoQnCYaQZKVS53Fq23ceWMRxq5EhQsE0x0RdQ55jT7wagMu5k+fS39v1fiSLrtrLQlXwVINenqhLMtTrV/1Q==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -676,9 +677,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.11.tgz",
-      "integrity": "sha512-Xt1dOL13m8u0WE8iplx9Ibbm+hFAO0GsU2P34UNoDGvZYkY8ifSiy6Zuc1lYxfG7svWE2fzqCUmFp5HCn51gJg==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
       "cpu": [
         "ppc64"
       ],
@@ -692,9 +693,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.11.tgz",
-      "integrity": "sha512-uoa7dU+Dt3HYsethkJ1k6Z9YdcHjTrSb5NUy66ZfZaSV8hEYGD5ZHbEMXnqLFlbBflLsl89Zke7CAdDJ4JI+Gg==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
       "cpu": [
         "arm"
       ],
@@ -708,9 +709,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.11.tgz",
-      "integrity": "sha512-9slpyFBc4FPPz48+f6jyiXOx/Y4v34TUeDDXJpZqAWQn/08lKGeD8aDp9TMn9jDz2CiEuHwfhRmGBvpnd/PWIQ==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
       "cpu": [
         "arm64"
       ],
@@ -724,9 +725,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.11.tgz",
-      "integrity": "sha512-Sgiab4xBjPU1QoPEIqS3Xx+R2lezu0LKIEcYe6pftr56PqPygbB7+szVnzoShbx64MUupqoE0KyRlN7gezbl8g==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
       "cpu": [
         "x64"
       ],
@@ -740,9 +741,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.11.tgz",
-      "integrity": "sha512-VekY0PBCukppoQrycFxUqkCojnTQhdec0vevUL/EDOCnXd9LKWqD/bHwMPzigIJXPhC59Vd1WFIL57SKs2mg4w==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
       "cpu": [
         "arm64"
       ],
@@ -756,9 +757,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.11.tgz",
-      "integrity": "sha512-+hfp3yfBalNEpTGp9loYgbknjR695HkqtY3d3/JjSRUyPg/xd6q+mQqIb5qdywnDxRZykIHs3axEqU6l1+oWEQ==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
       "cpu": [
         "x64"
       ],
@@ -772,9 +773,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.11.tgz",
-      "integrity": "sha512-CmKjrnayyTJF2eVuO//uSjl/K3KsMIeYeyN7FyDBjsR3lnSJHaXlVoAK8DZa7lXWChbuOk7NjAc7ygAwrnPBhA==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
       "cpu": [
         "arm64"
       ],
@@ -788,9 +789,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.11.tgz",
-      "integrity": "sha512-Dyq+5oscTJvMaYPvW3x3FLpi2+gSZTCE/1ffdwuM6G1ARang/mb3jvjxs0mw6n3Lsw84ocfo9CrNMqc5lTfGOw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
       "cpu": [
         "x64"
       ],
@@ -804,9 +805,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.11.tgz",
-      "integrity": "sha512-TBMv6B4kCfrGJ8cUPo7vd6NECZH/8hPpBHHlYI3qzoYFvWu2AdTvZNuU/7hsbKWqu/COU7NIK12dHAAqBLLXgw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
       "cpu": [
         "arm"
       ],
@@ -820,9 +821,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.11.tgz",
-      "integrity": "sha512-Qr8AzcplUhGvdyUF08A1kHU3Vr2O88xxP0Tm8GcdVOUm25XYcMPp2YqSVHbLuXzYQMf9Bh/iKx7YPqECs6ffLA==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
       "cpu": [
         "arm64"
       ],
@@ -836,9 +837,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.11.tgz",
-      "integrity": "sha512-TmnJg8BMGPehs5JKrCLqyWTVAvielc615jbkOirATQvWWB1NMXY77oLMzsUjRLa0+ngecEmDGqt5jiDC6bfvOw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
       "cpu": [
         "ia32"
       ],
@@ -852,9 +853,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.11.tgz",
-      "integrity": "sha512-DIGXL2+gvDaXlaq8xruNXUJdT5tF+SBbJQKbWy/0J7OhU8gOHOzKmGIlfTTl6nHaCOoipxQbuJi7O++ldrxgMw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
       "cpu": [
         "loong64"
       ],
@@ -868,9 +869,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.11.tgz",
-      "integrity": "sha512-Osx1nALUJu4pU43o9OyjSCXokFkFbyzjXb6VhGIJZQ5JZi8ylCQ9/LFagolPsHtgw6himDSyb5ETSfmp4rpiKQ==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
       "cpu": [
         "mips64el"
       ],
@@ -884,9 +885,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.11.tgz",
-      "integrity": "sha512-nbLFgsQQEsBa8XSgSTSlrnBSrpoWh7ioFDUmwo158gIm5NNP+17IYmNWzaIzWmgCxq56vfr34xGkOcZ7jX6CPw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
       "cpu": [
         "ppc64"
       ],
@@ -900,9 +901,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.11.tgz",
-      "integrity": "sha512-HfyAmqZi9uBAbgKYP1yGuI7tSREXwIb438q0nqvlpxAOs3XnZ8RsisRfmVsgV486NdjD7Mw2UrFSw51lzUk1ww==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
       "cpu": [
         "riscv64"
       ],
@@ -916,9 +917,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.11.tgz",
-      "integrity": "sha512-HjLqVgSSYnVXRisyfmzsH6mXqyvj0SA7pG5g+9W7ESgwA70AXYNpfKBqh1KbTxmQVaYxpzA/SvlB9oclGPbApw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
       "cpu": [
         "s390x"
       ],
@@ -932,9 +933,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.11.tgz",
-      "integrity": "sha512-HSFAT4+WYjIhrHxKBwGmOOSpphjYkcswF449j6EjsjbinTZbp8PJtjsVK1XFJStdzXdy/jaddAep2FGY+wyFAQ==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
       "cpu": [
         "x64"
       ],
@@ -948,9 +949,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.11.tgz",
-      "integrity": "sha512-hr9Oxj1Fa4r04dNpWr3P8QKVVsjQhqrMSUzZzf+LZcYjZNqhA3IAfPQdEh1FLVUJSiu6sgAwp3OmwBfbFgG2Xg==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
       "cpu": [
         "arm64"
       ],
@@ -964,9 +965,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.11.tgz",
-      "integrity": "sha512-u7tKA+qbzBydyj0vgpu+5h5AeudxOAGncb8N6C9Kh1N4n7wU1Xw1JDApsRjpShRpXRQlJLb9wY28ELpwdPcZ7A==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
       "cpu": [
         "x64"
       ],
@@ -980,9 +981,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.11.tgz",
-      "integrity": "sha512-Qq6YHhayieor3DxFOoYM1q0q1uMFYb7cSpLD2qzDSvK1NAvqFi8Xgivv0cFC6J+hWVw2teCYltyy9/m/14ryHg==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
       "cpu": [
         "arm64"
       ],
@@ -996,9 +997,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.11.tgz",
-      "integrity": "sha512-CN+7c++kkbrckTOz5hrehxWN7uIhFFlmS/hqziSFVWpAzpWrQoAG4chH+nN3Be+Kzv/uuo7zhX716x3Sn2Jduw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
       "cpu": [
         "x64"
       ],
@@ -1012,9 +1013,9 @@
       }
     },
     "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.11.tgz",
-      "integrity": "sha512-rOREuNIQgaiR+9QuNkbkxubbp8MSO9rONmwP5nKncnWJ9v5jQ4JxFnLu4zDSRPf3x4u+2VN4pM4RdyIzDty/wQ==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
       "cpu": [
         "arm64"
       ],
@@ -1028,9 +1029,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.11.tgz",
-      "integrity": "sha512-nq2xdYaWxyg9DcIyXkZhcYulC6pQ2FuCgem3LI92IwMgIZ69KHeY8T4Y88pcwoLIjbed8n36CyKoYRDygNSGhA==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
       "cpu": [
         "x64"
       ],
@@ -1044,9 +1045,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.11.tgz",
-      "integrity": "sha512-3XxECOWJq1qMZ3MN8srCJ/QfoLpL+VaxD/WfNRm1O3B4+AZ/BnLVgFbUV3eiRYDMXetciH16dwPbbHqwe1uU0Q==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
       "cpu": [
         "arm64"
       ],
@@ -1060,9 +1061,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.11.tgz",
-      "integrity": "sha512-3ukss6gb9XZ8TlRyJlgLn17ecsK4NSQTmdIXRASVsiS2sQ6zPPZklNJT5GR5tE/MUarymmy8kCEf5xPCNCqVOA==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
       "cpu": [
         "ia32"
       ],
@@ -1076,9 +1077,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.11.tgz",
-      "integrity": "sha512-D7Hpz6A2L4hzsRpPaCYkQnGOotdUpDzSGRIv9I+1ITdHROSFUWW95ZPZWQmGka1Fg7W3zFJowyn9WGwMJ0+KPA==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
       "cpu": [
         "x64"
       ],
@@ -1131,12 +1132,12 @@
       }
     },
     "node_modules/@eslint/compat": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.4.0.tgz",
-      "integrity": "sha512-DEzm5dKeDBPm3r08Ixli/0cmxr8LkRdwxMRUIJBlSCpAwSrvFEJpVBzV+66JhDxiaqKxnRzCXhtiMiczF7Hglg==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.4.1.tgz",
+      "integrity": "sha512-cfO82V9zxxGBxcQDr1lfaYB7wykTa0b00mGa36FrJl7iTFd0Z2cHfEYuxcBRP/iNijCsWsEkA+jzT8hGYmv33w==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.16.0"
+        "@eslint/core": "^0.17.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1187,12 +1188,12 @@
       }
     },
     "node_modules/@eslint/config-helpers": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.1.tgz",
-      "integrity": "sha512-csZAzkNhsgwb0I/UAV6/RGFTbiakPCf0ZrGmrIxQpYvGZ00PhTkSnyKNolphgIvmnJeGw6rcGVEXfTzUnFuEvw==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.16.0"
+        "@eslint/core": "^0.17.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1276,9 +1277,9 @@
       }
     },
     "node_modules/@eslint/core": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.16.0.tgz",
-      "integrity": "sha512-nmC8/totwobIiFcGkDza3GIKfAw1+hLiYVrh3I1nIomQ8PEr5cxg34jnkmGawul/ep52wGRAcyeDCNtWKSOj4Q==",
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/json-schema": "^7.0.15"
@@ -1354,9 +1355,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.38.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.38.0.tgz",
-      "integrity": "sha512-UZ1VpFvXf9J06YG9xQBdnzU+kthors6KjhMAl6f4gH4usHyh31rUf2DLGInT8RFYIReYXNSydgPY0V2LuWgl7A==",
+      "version": "9.39.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.1.tgz",
+      "integrity": "sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==",
       "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1375,12 +1376,12 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.0.tgz",
-      "integrity": "sha512-sB5uyeq+dwCWyPi31B2gQlVlo+j5brPlWx4yZBrEaRo/nhdDE8Xke1gsGgtiBdaBTxuTkceLVuVt/pclrasb0A==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.16.0",
+        "@eslint/core": "^0.17.0",
         "levn": "^0.4.1"
       },
       "engines": {
@@ -1508,9 +1509,9 @@
       }
     },
     "node_modules/@iconify/collections": {
-      "version": "1.0.612",
-      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.612.tgz",
-      "integrity": "sha512-YwafHLk3sCSNWt5pxPEnR1O3LRD//zRJXye3T6KK7kkybOKc8mu8tscOuqlIH7qmfPh273SZldVR4HuBs+pdcQ==",
+      "version": "1.0.617",
+      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.617.tgz",
+      "integrity": "sha512-coRyOUT2gQ8SHptjaW5YG2VEscoIcpEAN/mn1UgorKKgoA6l+aoebW58WXLWcvSZ4LKEmim3Hnp/bLMLMoOejg==",
       "license": "MIT",
       "dependencies": {
         "@iconify/types": "*"
@@ -1769,38 +1770,35 @@
       }
     },
     "node_modules/@nuxt/cli": {
-      "version": "3.29.3",
-      "resolved": "https://registry.npmjs.org/@nuxt/cli/-/cli-3.29.3.tgz",
-      "integrity": "sha512-48GYmH4SyzR5pqd02UXVzBfrvEGaurPKMjSWxlHgqnpI5buwOYCvH+OqvHOmvnLrDP2bxR9hbDod/UIphOjMhg==",
+      "version": "3.30.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/cli/-/cli-3.30.0.tgz",
+      "integrity": "sha512-nBNEkvOwqzxgvfTBUKPX0zN4h85dWjjkW+kP4OFnVaN3C3kdsbScNtYPIZyp0+ArabL5t4RT93Gyx0IZMRNzAQ==",
       "license": "MIT",
       "dependencies": {
-        "c12": "^3.3.0",
+        "c12": "^3.3.1",
         "citty": "^0.1.6",
-        "clipboardy": "^5.0.0",
         "confbox": "^0.2.2",
         "consola": "^3.4.2",
+        "copy-paste": "^2.2.0",
         "defu": "^6.1.4",
         "exsolve": "^1.0.7",
         "fuse.js": "^7.1.0",
-        "get-port-please": "^3.2.0",
         "giget": "^2.0.0",
-        "h3": "^1.15.4",
         "jiti": "^2.6.1",
         "listhen": "^1.9.0",
         "nypm": "^0.6.2",
-        "ofetch": "^1.4.1",
+        "ofetch": "^1.5.1",
         "ohash": "^2.0.11",
         "pathe": "^2.0.3",
         "perfect-debounce": "^2.0.0",
         "pkg-types": "^2.3.0",
         "scule": "^1.3.0",
-        "semver": "^7.7.2",
-        "srvx": "^0.8.9",
-        "std-env": "^3.9.0",
+        "semver": "^7.7.3",
+        "srvx": "^0.9.4",
+        "std-env": "^3.10.0",
         "tinyexec": "^1.0.1",
         "ufo": "^1.6.1",
-        "undici": "^7.16.0",
-        "youch": "^4.1.0-beta.11"
+        "youch": "^4.1.0-beta.12"
       },
       "bin": {
         "nuxi": "bin/nuxi.mjs",
@@ -1812,139 +1810,18 @@
         "node": "^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@nuxt/cli/node_modules/clipboardy": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-5.0.0.tgz",
-      "integrity": "sha512-MQfKHaD09eP80Pev4qBxZLbxJK/ONnqfSYAPlCmPh+7BDboYtO/3BmB6HGzxDIT0SlTRc2tzS8lQqfcdLtZ0Kg==",
-      "license": "MIT",
-      "dependencies": {
-        "execa": "^9.6.0",
-        "is-wayland": "^0.1.0",
-        "is-wsl": "^3.1.0",
-        "is64bit": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@nuxt/cli/node_modules/execa": {
-      "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-9.6.0.tgz",
-      "integrity": "sha512-jpWzZ1ZhwUmeWRhS7Qv3mhpOhLfwI+uAX4e5fOcXqwMR7EcJ0pj2kV1CVzHVMX/LphnKWD3LObjZCoJ71lKpHw==",
-      "license": "MIT",
-      "dependencies": {
-        "@sindresorhus/merge-streams": "^4.0.0",
-        "cross-spawn": "^7.0.6",
-        "figures": "^6.1.0",
-        "get-stream": "^9.0.0",
-        "human-signals": "^8.0.1",
-        "is-plain-obj": "^4.1.0",
-        "is-stream": "^4.0.1",
-        "npm-run-path": "^6.0.0",
-        "pretty-ms": "^9.2.0",
-        "signal-exit": "^4.1.0",
-        "strip-final-newline": "^4.0.0",
-        "yoctocolors": "^2.1.1"
-      },
-      "engines": {
-        "node": "^18.19.0 || >=20.5.0"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/@nuxt/cli/node_modules/get-stream": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-9.0.1.tgz",
-      "integrity": "sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==",
-      "license": "MIT",
-      "dependencies": {
-        "@sec-ant/readable-stream": "^0.4.1",
-        "is-stream": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@nuxt/cli/node_modules/human-signals": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-8.0.1.tgz",
-      "integrity": "sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=18.18.0"
-      }
-    },
-    "node_modules/@nuxt/cli/node_modules/is-stream": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-4.0.1.tgz",
-      "integrity": "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@nuxt/cli/node_modules/npm-run-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz",
-      "integrity": "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==",
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^4.0.0",
-        "unicorn-magic": "^0.3.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@nuxt/cli/node_modules/ohash": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
       "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
       "license": "MIT"
     },
-    "node_modules/@nuxt/cli/node_modules/path-key": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
-      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@nuxt/cli/node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
       "license": "MIT"
     },
-    "node_modules/@nuxt/cli/node_modules/strip-final-newline": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-4.0.0.tgz",
-      "integrity": "sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@nuxt/content": {
       "version": "2.13.4",
       "resolved": "https://registry.npmjs.org/@nuxt/content/-/content-2.13.4.tgz",
@@ -1987,17 +1864,17 @@
       "license": "MIT"
     },
     "node_modules/@nuxt/devtools": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/devtools/-/devtools-2.7.0.tgz",
-      "integrity": "sha512-BtIklVYny14Ykek4SHeexAHoa28MEV9kz223ZzvoNYqE0f+YVV+cJP69ovZHf+HUVpxaAMJfWKLHXinWXiCZ4Q==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools/-/devtools-3.1.0.tgz",
+      "integrity": "sha512-aPH5V3j6h8bprMTR7oDqJ1AfHl0FL2JHcGlbrCA5DXLLhLL+D4L8pLgiJLEvYMo3Onk56TT7aXgPX54g/eDetg==",
       "license": "MIT",
       "dependencies": {
-        "@nuxt/devtools-kit": "2.7.0",
-        "@nuxt/devtools-wizard": "2.7.0",
-        "@nuxt/kit": "^3.19.3",
-        "@vue/devtools-core": "^7.7.7",
-        "@vue/devtools-kit": "^7.7.7",
-        "birpc": "^2.6.1",
+        "@nuxt/devtools-kit": "3.1.0",
+        "@nuxt/devtools-wizard": "3.1.0",
+        "@nuxt/kit": "^4.2.1",
+        "@vue/devtools-core": "^8.0.3",
+        "@vue/devtools-kit": "^8.0.3",
+        "birpc": "^2.7.0",
         "consola": "^3.4.2",
         "destr": "^2.0.5",
         "error-stack-parser-es": "^1.0.5",
@@ -2007,21 +1884,21 @@
         "hookable": "^5.5.3",
         "image-meta": "^0.2.2",
         "is-installed-globally": "^1.0.0",
-        "launch-editor": "^2.11.1",
+        "launch-editor": "^2.12.0",
         "local-pkg": "^1.1.2",
-        "magicast": "^0.3.5",
+        "magicast": "^0.5.1",
         "nypm": "^0.6.2",
         "ohash": "^2.0.11",
         "pathe": "^2.0.3",
-        "perfect-debounce": "^1.0.0",
+        "perfect-debounce": "^2.0.0",
         "pkg-types": "^2.3.0",
         "semver": "^7.7.3",
-        "simple-git": "^3.28.0",
+        "simple-git": "^3.30.0",
         "sirv": "^3.0.2",
         "structured-clone-es": "^1.0.0",
         "tinyglobby": "^0.2.15",
         "vite-plugin-inspect": "^11.3.3",
-        "vite-plugin-vue-tracer": "^1.0.1",
+        "vite-plugin-vue-tracer": "^1.1.1",
         "which": "^5.0.0",
         "ws": "^8.18.3"
       },
@@ -2029,16 +1906,22 @@
         "devtools": "cli.mjs"
       },
       "peerDependencies": {
+        "@vitejs/devtools": "*",
         "vite": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vitejs/devtools": {
+          "optional": true
+        }
       }
     },
     "node_modules/@nuxt/devtools-kit": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-3.0.0.tgz",
-      "integrity": "sha512-/X8GLPYydj/Lbmti7M+HGPeeBCfzzZnAXtERjnbUqQsPNUmRMDt1nOSPHYN4NL6TaH3ECHt3HYqJt/O+Hw2kDg==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-3.1.0.tgz",
+      "integrity": "sha512-1AEZS6ge8G9X3sJauw6hTWqTpUIVqs5Uq9d7Z9cjUAinXjE+pGliVQ+i8xWCNnGLaZCCSqX/I/M/EByD3v2JIA==",
       "license": "MIT",
       "dependencies": {
-        "@nuxt/kit": "^4.2.0",
+        "@nuxt/kit": "^4.2.1",
         "execa": "^8.0.1"
       },
       "peerDependencies": {
@@ -2046,9 +1929,9 @@
       }
     },
     "node_modules/@nuxt/devtools-kit/node_modules/@nuxt/kit": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.0.tgz",
-      "integrity": "sha512-1yN3LL6RDN5GjkNLPUYCbNRkaYnat6hqejPyfIBBVzrWOrpiQeNMGxQM/IcVdaSuBJXAnu0sUvTKXpXkmPhljg==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.1.tgz",
+      "integrity": "sha512-lLt8KLHyl7IClc3RqRpRikz15eCfTRlAWL9leVzPyg5N87FfKE/7EWgWvpiL/z4Tf3dQCIqQb88TmHE0JTIDvA==",
       "license": "MIT",
       "dependencies": {
         "c12": "^3.3.1",
@@ -2089,15 +1972,15 @@
       "license": "MIT"
     },
     "node_modules/@nuxt/devtools-wizard": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/devtools-wizard/-/devtools-wizard-2.7.0.tgz",
-      "integrity": "sha512-iWuWR0U6BRpF7D6xrgq9ZkQ6ajsw2EA/gVmbU9V5JPKRUtV6DVpCPi+h34VFNeQ104Sf531XgvT0sl3h93AjXA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools-wizard/-/devtools-wizard-3.1.0.tgz",
+      "integrity": "sha512-XYYWnG6SAvALCdXbM+xklqv7sEiVZbKgGparv8jFE5Tt6l8sg80Eb+vM40+Xpdu2KE3VlFKj4F4oFwDXMvAkgA==",
       "license": "MIT",
       "dependencies": {
         "consola": "^3.4.2",
         "diff": "^8.0.2",
         "execa": "^8.0.1",
-        "magicast": "^0.3.5",
+        "magicast": "^0.5.1",
         "pathe": "^2.0.3",
         "pkg-types": "^2.3.0",
         "prompts": "^2.4.2",
@@ -2113,17 +1996,35 @@
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
       "license": "MIT"
     },
-    "node_modules/@nuxt/devtools/node_modules/@nuxt/devtools-kit": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-2.7.0.tgz",
-      "integrity": "sha512-MIJdah6CF6YOW2GhfKnb8Sivu6HpcQheqdjOlZqShBr+1DyjtKQbAKSCAyKPaoIzZP4QOo2SmTFV6aN8jBeEIQ==",
+    "node_modules/@nuxt/devtools/node_modules/@nuxt/kit": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.1.tgz",
+      "integrity": "sha512-lLt8KLHyl7IClc3RqRpRikz15eCfTRlAWL9leVzPyg5N87FfKE/7EWgWvpiL/z4Tf3dQCIqQb88TmHE0JTIDvA==",
       "license": "MIT",
       "dependencies": {
-        "@nuxt/kit": "^3.19.3",
-        "execa": "^8.0.1"
+        "c12": "^3.3.1",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.6.1",
+        "klona": "^2.0.6",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "rc9": "^2.1.2",
+        "scule": "^1.3.0",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "untyped": "^2.0.0"
       },
-      "peerDependencies": {
-        "vite": ">=6.0"
+      "engines": {
+        "node": ">=18.12.0"
       }
     },
     "node_modules/@nuxt/devtools/node_modules/isexe": {
@@ -2147,12 +2048,6 @@
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
       "license": "MIT"
     },
-    "node_modules/@nuxt/devtools/node_modules/perfect-debounce": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
-      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
-      "license": "MIT"
-    },
     "node_modules/@nuxt/devtools/node_modules/which": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/which/-/which-5.0.0.tgz",
@@ -2260,9 +2155,9 @@
       }
     },
     "node_modules/@nuxt/eslint/node_modules/@nuxt/kit": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.0.tgz",
-      "integrity": "sha512-1yN3LL6RDN5GjkNLPUYCbNRkaYnat6hqejPyfIBBVzrWOrpiQeNMGxQM/IcVdaSuBJXAnu0sUvTKXpXkmPhljg==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.1.tgz",
+      "integrity": "sha512-lLt8KLHyl7IClc3RqRpRikz15eCfTRlAWL9leVzPyg5N87FfKE/7EWgWvpiL/z4Tf3dQCIqQb88TmHE0JTIDvA==",
       "license": "MIT",
       "dependencies": {
         "c12": "^3.3.1",
@@ -2439,12 +2334,12 @@
       "license": "MIT"
     },
     "node_modules/@nuxt/kit": {
-      "version": "3.20.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.20.0.tgz",
-      "integrity": "sha512-EoF1Gf0SPj9vxgAIcGEH+a4PRLC7Dwsy21K6f5+POzylT8DgssN8zL5pwXC+X7OcfzBrwYFh7mM7phvh7ubgeg==",
+      "version": "3.20.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.20.1.tgz",
+      "integrity": "sha512-TIslaylfI5kd3AxX5qts0qyrIQ9Uq3HAA1bgIIJ+c+zpDfK338YS+YrCWxBBzDMECRCbAS58mqAd2MtJfG1ENA==",
       "license": "MIT",
       "dependencies": {
-        "c12": "^3.3.0",
+        "c12": "^3.3.1",
         "consola": "^3.4.2",
         "defu": "^6.1.4",
         "destr": "^2.0.5",
@@ -2483,19 +2378,19 @@
       "license": "MIT"
     },
     "node_modules/@nuxt/nitro-server": {
-      "version": "3.20.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/nitro-server/-/nitro-server-3.20.0.tgz",
-      "integrity": "sha512-Yf4UHARskkUcg0PYHGOVmN5cIgCTYtgsBvWiTq0E558uZWtuneh94tSKO+plYZdvQu0yjoSHOYcRLcoPKAPILg==",
+      "version": "3.20.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/nitro-server/-/nitro-server-3.20.1.tgz",
+      "integrity": "sha512-8fNLbfDCVdNaa6wjnmXt9OD/5iyxjGOzU/zLIBW0O+4OCY8H9LQEPFh2gdEAmaze4dfzde/0v87cAcGeDwfomQ==",
       "license": "MIT",
       "dependencies": {
         "@nuxt/devalue": "^2.0.2",
-        "@nuxt/kit": "3.20.0",
-        "@unhead/vue": "^2.0.14",
-        "@vue/shared": "^3.5.22",
+        "@nuxt/kit": "3.20.1",
+        "@unhead/vue": "^2.0.19",
+        "@vue/shared": "^3.5.23",
         "consola": "^3.4.2",
         "defu": "^6.1.4",
         "destr": "^2.0.5",
-        "devalue": "^5.3.2",
+        "devalue": "^5.4.2",
         "errx": "^0.1.0",
         "escape-string-regexp": "^5.0.0",
         "exsolve": "^1.0.7",
@@ -2503,15 +2398,15 @@
         "impound": "^1.0.0",
         "klona": "^2.0.6",
         "mocked-exports": "^0.1.1",
-        "nitropack": "^2.12.8",
+        "nitropack": "^2.12.9",
         "pathe": "^2.0.3",
         "pkg-types": "^2.3.0",
         "radix3": "^1.1.2",
-        "std-env": "^3.9.0",
+        "std-env": "^3.10.0",
         "ufo": "^1.6.1",
         "unctx": "^2.4.1",
-        "unstorage": "^1.17.1",
-        "vue": "^3.5.22",
+        "unstorage": "^1.17.2",
+        "vue": "^3.5.23",
         "vue-bundle-renderer": "^2.2.0",
         "vue-devtools-stub": "^0.1.0"
       },
@@ -2519,7 +2414,7 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
-        "nuxt": "^3.20.0"
+        "nuxt": "^3.20.1"
       }
     },
     "node_modules/@nuxt/nitro-server/node_modules/escape-string-regexp": {
@@ -2541,12 +2436,12 @@
       "license": "MIT"
     },
     "node_modules/@nuxt/schema": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-4.2.0.tgz",
-      "integrity": "sha512-YMbgpEyPokgOYME6BvY8Okk7GAIwhEFYzrkkkoU9IVgu0tKWetYRrjUwbd0eICqPm9EWDBQl5tTTNJ8xCndVbw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-4.2.1.tgz",
+      "integrity": "sha512-kSuma7UztDVyw8eAmN3rKFoaWjNRkJE9+kqwEurpuxG7nCwFPS7sUPSGzovzaofP+xV30tl6wveBEcDRWyQvgA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "^3.5.22",
+        "@vue/shared": "^3.5.23",
         "defu": "^6.1.4",
         "pathe": "^2.0.3",
         "pkg-types": "^2.3.0",
@@ -2608,9 +2503,9 @@
       }
     },
     "node_modules/@nuxt/scripts/node_modules/@nuxt/kit": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.0.tgz",
-      "integrity": "sha512-1yN3LL6RDN5GjkNLPUYCbNRkaYnat6hqejPyfIBBVzrWOrpiQeNMGxQM/IcVdaSuBJXAnu0sUvTKXpXkmPhljg==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.1.tgz",
+      "integrity": "sha512-lLt8KLHyl7IClc3RqRpRikz15eCfTRlAWL9leVzPyg5N87FfKE/7EWgWvpiL/z4Tf3dQCIqQb88TmHE0JTIDvA==",
       "license": "MIT",
       "dependencies": {
         "c12": "^3.3.1",
@@ -2817,9 +2712,9 @@
       }
     },
     "node_modules/@nuxt/test-utils/node_modules/@nuxt/kit": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.0.tgz",
-      "integrity": "sha512-1yN3LL6RDN5GjkNLPUYCbNRkaYnat6hqejPyfIBBVzrWOrpiQeNMGxQM/IcVdaSuBJXAnu0sUvTKXpXkmPhljg==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.1.tgz",
+      "integrity": "sha512-lLt8KLHyl7IClc3RqRpRikz15eCfTRlAWL9leVzPyg5N87FfKE/7EWgWvpiL/z4Tf3dQCIqQb88TmHE0JTIDvA==",
       "license": "MIT",
       "dependencies": {
         "c12": "^3.3.1",
@@ -2947,9 +2842,9 @@
       }
     },
     "node_modules/@nuxt/ui/node_modules/@nuxt/kit": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.0.tgz",
-      "integrity": "sha512-1yN3LL6RDN5GjkNLPUYCbNRkaYnat6hqejPyfIBBVzrWOrpiQeNMGxQM/IcVdaSuBJXAnu0sUvTKXpXkmPhljg==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.1.tgz",
+      "integrity": "sha512-lLt8KLHyl7IClc3RqRpRikz15eCfTRlAWL9leVzPyg5N87FfKE/7EWgWvpiL/z4Tf3dQCIqQb88TmHE0JTIDvA==",
       "license": "MIT",
       "dependencies": {
         "c12": "^3.3.1",
@@ -3082,20 +2977,20 @@
       }
     },
     "node_modules/@nuxt/vite-builder": {
-      "version": "3.20.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/vite-builder/-/vite-builder-3.20.0.tgz",
-      "integrity": "sha512-A2QPyx+O8GZLK9biscH0IYXZCNR0FU8r8imvmAPVAIyZsYi1Y4hJGc4TbsAhSJzVxhk3aCRl46iQMbHJJw+VPg==",
+      "version": "3.20.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/vite-builder/-/vite-builder-3.20.1.tgz",
+      "integrity": "sha512-S/l/Njgp55vhytN+fCdapOKjka+mwz56HlQ7/z9fX/nJVrw5HfTFpl6WNb0RdqmFBUILbGilWRyIQzzIhKpbHg==",
       "license": "MIT",
       "dependencies": {
-        "@nuxt/kit": "3.20.0",
-        "@rollup/plugin-replace": "^6.0.2",
+        "@nuxt/kit": "3.20.1",
+        "@rollup/plugin-replace": "^6.0.3",
         "@vitejs/plugin-vue": "^6.0.1",
         "@vitejs/plugin-vue-jsx": "^5.1.1",
         "autoprefixer": "^10.4.21",
         "consola": "^3.4.2",
-        "cssnano": "^7.1.1",
+        "cssnano": "^7.1.2",
         "defu": "^6.1.4",
-        "esbuild": "^0.25.10",
+        "esbuild": "^0.25.12",
         "escape-string-regexp": "^5.0.0",
         "exsolve": "^1.0.7",
         "externality": "^1.0.2",
@@ -3103,7 +2998,7 @@
         "h3": "^1.15.4",
         "jiti": "^2.6.1",
         "knitwork": "^1.2.0",
-        "magic-string": "^0.30.19",
+        "magic-string": "^0.30.21",
         "mlly": "^1.8.0",
         "mocked-exports": "^0.1.1",
         "ohash": "^2.0.11",
@@ -3111,13 +3006,13 @@
         "perfect-debounce": "^2.0.0",
         "pkg-types": "^2.3.0",
         "postcss": "^8.5.6",
-        "rollup-plugin-visualizer": "^6.0.4",
+        "rollup-plugin-visualizer": "^6.0.5",
         "seroval": "^1.3.2",
-        "std-env": "^3.9.0",
+        "std-env": "^3.10.0",
         "ufo": "^1.6.1",
-        "unenv": "^2.0.0-rc.21",
-        "vite": "^7.1.9",
-        "vite-node": "^3.2.4",
+        "unenv": "^2.0.0-rc.24",
+        "vite": "^7.2.1",
+        "vite-node": "^5.0.0",
         "vite-plugin-checker": "^0.11.0",
         "vue-bundle-renderer": "^2.2.0"
       },
@@ -3125,7 +3020,7 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
-        "nuxt": "3.20.0",
+        "nuxt": "3.20.1",
         "rolldown": "^1.0.0-beta.38",
         "vue": "^3.3.4"
       },
@@ -3251,9 +3146,9 @@
       }
     },
     "node_modules/@oxc-minify/binding-android-arm64": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-android-arm64/-/binding-android-arm64-0.94.0.tgz",
-      "integrity": "sha512-7VEBFFFAi4cYqlW/ziVs5XmNM/0IqAp7duBuTM/zus/EOc3Q2zhS9ApJo0zIwbRUZMlIm1RHe8Hths//xE7K1A==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-android-arm64/-/binding-android-arm64-0.96.0.tgz",
+      "integrity": "sha512-lzeIEMu/v6Y+La5JSesq4hvyKtKBq84cgQpKYTYM/yGuNk2tfd5Ha31hnC+mTh48lp/5vZH+WBfjVUjjINCfug==",
       "cpu": [
         "arm64"
       ],
@@ -3267,9 +3162,9 @@
       }
     },
     "node_modules/@oxc-minify/binding-darwin-arm64": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-darwin-arm64/-/binding-darwin-arm64-0.94.0.tgz",
-      "integrity": "sha512-T0k3pG/izIutpl8cQl9Xeb0TikBILGd3rglCgRhhG5G5xsk/AAAp/qsSdzBm/8yMXksfRWqE0teh7XDWKmzOXw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-darwin-arm64/-/binding-darwin-arm64-0.96.0.tgz",
+      "integrity": "sha512-i0LkJAUXb4BeBFrJQbMKQPoxf8+cFEffDyLSb7NEzzKuPcH8qrVsnEItoOzeAdYam8Sr6qCHVwmBNEQzl7PWpw==",
       "cpu": [
         "arm64"
       ],
@@ -3283,9 +3178,9 @@
       }
     },
     "node_modules/@oxc-minify/binding-darwin-x64": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-darwin-x64/-/binding-darwin-x64-0.94.0.tgz",
-      "integrity": "sha512-1gJeYcQf0Mmnu9Gxld2dLJGXTm9EzOQKRAjCVT2xGciKrNeekkJntDb+NdzxcSNPTjchkvbDwY6lCGZbcJx2lg==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-darwin-x64/-/binding-darwin-x64-0.96.0.tgz",
+      "integrity": "sha512-C5vI0WPR+KPIFAD5LMOJk2J8iiT+Nv65vDXmemzXEXouzfEOLYNqnW+u6NSsccpuZHHWAiLyPFkYvKFduveAUQ==",
       "cpu": [
         "x64"
       ],
@@ -3299,9 +3194,9 @@
       }
     },
     "node_modules/@oxc-minify/binding-freebsd-x64": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-freebsd-x64/-/binding-freebsd-x64-0.94.0.tgz",
-      "integrity": "sha512-LvaxVkEVLgBNQO2RUYwbmRC0cLpq5WHPsM7B4xsojwqpJNsK5l2VnTAuExvPthC1gKWlsoQsVoT03Ex/SZ4FOw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-freebsd-x64/-/binding-freebsd-x64-0.96.0.tgz",
+      "integrity": "sha512-3//5DNx+xUjVBMLLk2sl6hfe4fwfENJtjVQUBXjxzwPuv8xgZUqASG4cRG3WqG5Qe8dV6SbCI4EgKQFjO4KCZA==",
       "cpu": [
         "x64"
       ],
@@ -3315,9 +3210,9 @@
       }
     },
     "node_modules/@oxc-minify/binding-linux-arm-gnueabihf": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.94.0.tgz",
-      "integrity": "sha512-o/IEdJKl7Y78fIvIRPeA4ccgmOAzeMS8tsjpO7XlENWPzS3cA/6Iy4BqMqYyqUZewgt0a2ggw0zAioIwKPiDmw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.96.0.tgz",
+      "integrity": "sha512-WXChFKV7VdDk1NePDK1J31cpSvxACAVztJ7f7lJVYBTkH+iz5D0lCqPcE7a9eb7nC3xvz4yk7DM6dA9wlUQkQg==",
       "cpu": [
         "arm"
       ],
@@ -3331,9 +3226,9 @@
       }
     },
     "node_modules/@oxc-minify/binding-linux-arm-musleabihf": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.94.0.tgz",
-      "integrity": "sha512-hFCeIV/eCASCW/F2t/DR4JUKUNxn2pr4hAIBEBYDaGPvdOVMlMh+eMbg401ZiaQLwM26Dj53b5XWALwit0mGAw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.96.0.tgz",
+      "integrity": "sha512-7B18glYMX4Z/YoqgE3VRLs/2YhVLxlxNKSgrtsRpuR8xv58xca+hEhiFwZN1Rn+NSMZ29Z33LWD7iYWnqYFvRA==",
       "cpu": [
         "arm"
       ],
@@ -3347,9 +3242,9 @@
       }
     },
     "node_modules/@oxc-minify/binding-linux-arm64-gnu": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.94.0.tgz",
-      "integrity": "sha512-so/XF1XdJdpWVUkyz45F3iNJgzoXgeNBoYfmDTuLFIXE2U7vAtE8DHkA87LlbC6Ry7KIM4Ehw7hP4Z4h7M51fA==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.96.0.tgz",
+      "integrity": "sha512-Yl+KcTldsEJNcaYxxonwAXZ2q3gxIzn3kXYQWgKWdaGIpNhOCWqF+KE5WLsldoh5Ro5SHtomvb8GM6cXrIBMog==",
       "cpu": [
         "arm64"
       ],
@@ -3363,9 +3258,9 @@
       }
     },
     "node_modules/@oxc-minify/binding-linux-arm64-musl": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.94.0.tgz",
-      "integrity": "sha512-IMi2Sq3Z3xvA06Otit/D6Vo2BATZJcDHu6dHcaznBwnpO0z0+N9i3TKprIVizBHW77wq8QBLIbQaWQn4go1WwQ==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.96.0.tgz",
+      "integrity": "sha512-rNqoFWOWaxwMmUY5fspd/h5HfvgUlA3sv9CUdA2MpnHFiyoJNovR7WU8tGh+Yn0qOAs0SNH0a05gIthHig14IA==",
       "cpu": [
         "arm64"
       ],
@@ -3379,9 +3274,9 @@
       }
     },
     "node_modules/@oxc-minify/binding-linux-riscv64-gnu": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.94.0.tgz",
-      "integrity": "sha512-1QWSK1CcmGwlJZBWCF+NpzpQ5c3WybtgVqeQX8FRIhlApBtvMsifZe4tz1FIoBoQeCKwCQzyvpIA71cpCpY/xg==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.96.0.tgz",
+      "integrity": "sha512-3paajIuzGnukHwSI3YBjYVqbd72pZd8NJxaayaNFR0AByIm8rmIT5RqFXbq8j2uhtpmNdZRXiu0em1zOmIScWA==",
       "cpu": [
         "riscv64"
       ],
@@ -3395,9 +3290,9 @@
       }
     },
     "node_modules/@oxc-minify/binding-linux-s390x-gnu": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.94.0.tgz",
-      "integrity": "sha512-UfIuYWcs1tb/vwGwZPPVaO38OubKfi+MkySl2ZP/3Vk4InxtQ+BxxgNqiQbhyvx14GZtkFphH3I2FZaDUsvfYg==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.96.0.tgz",
+      "integrity": "sha512-9ESrpkB2XG0lQ89JlsxlZa86iQCOs+jkDZLl6O+u5wb7ynUy21bpJJ1joauCOSYIOUlSy3+LbtJLiqi7oSQt5Q==",
       "cpu": [
         "s390x"
       ],
@@ -3411,9 +3306,9 @@
       }
     },
     "node_modules/@oxc-minify/binding-linux-x64-gnu": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.94.0.tgz",
-      "integrity": "sha512-Iokd1dfneOcNHBJH8o5cMgDkII8R7dzOFSaMrZiSZkLr+woT3Ed7uLqTKwleNKq52z5+XwmgcvO00c6ywStCpA==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.96.0.tgz",
+      "integrity": "sha512-UMM1jkns+p+WwwmdjC5giI3SfR2BCTga18x3C0cAu6vDVf4W37uTZeTtSIGmwatTBbgiq++Te24/DE0oCdm1iQ==",
       "cpu": [
         "x64"
       ],
@@ -3427,9 +3322,9 @@
       }
     },
     "node_modules/@oxc-minify/binding-linux-x64-musl": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-x64-musl/-/binding-linux-x64-musl-0.94.0.tgz",
-      "integrity": "sha512-W4hFq/e21o2cOKx9xltJuVo/xgXnn4SsUioo/86pk5vCmUXg++J0PMML/oOZTSbevlklg/Vxo8slRUSU4/0PzA==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-x64-musl/-/binding-linux-x64-musl-0.96.0.tgz",
+      "integrity": "sha512-8b1naiC7MdP7xeMi7cQ5tb9W1rZAP9Qz/jBRqp1Y5EOZ1yhSGnf1QWuZ/0pCc+XiB9vEHXEY3Aki/H+86m2eOg==",
       "cpu": [
         "x64"
       ],
@@ -3443,25 +3338,25 @@
       }
     },
     "node_modules/@oxc-minify/binding-wasm32-wasi": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-wasm32-wasi/-/binding-wasm32-wasi-0.94.0.tgz",
-      "integrity": "sha512-0bOaEuh7QX8MfqyrRjNPOWhcsYl0IGoHX1nPtFIFGm0f/AJsJ+3wbyI9WvkAOXZmRgI9DMKGbDJdU6J59JxA7w==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-wasm32-wasi/-/binding-wasm32-wasi-0.96.0.tgz",
+      "integrity": "sha512-bjGDjkGzo3GWU9Vg2qiFUrfoo5QxojPNV/2RHTlbIB5FWkkV4ExVjsfyqihFiAuj0NXIZqd2SAiEq9htVd3RFw==",
       "cpu": [
         "wasm32"
       ],
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@napi-rs/wasm-runtime": "^1.0.6"
+        "@napi-rs/wasm-runtime": "^1.0.7"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@oxc-minify/binding-win32-arm64-msvc": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.94.0.tgz",
-      "integrity": "sha512-qXuSuUmLn7v79R0noaRlJES7m0BLfBWwPAmPjzu553eJObvKS15TfHH4uxr0h31Bmy4jqWX2r+oirz/Pg+hSEg==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.96.0.tgz",
+      "integrity": "sha512-4L4DlHUT47qMWQuTyUghpncR3NZHWtxvd0G1KgSjVgXf+cXzFdWQCWZZtCU0yrmOoVCNUf4S04IFCJyAe+Ie7A==",
       "cpu": [
         "arm64"
       ],
@@ -3475,9 +3370,9 @@
       }
     },
     "node_modules/@oxc-minify/binding-win32-x64-msvc": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.94.0.tgz",
-      "integrity": "sha512-DtnN623PGZlNLRyyWtUQPEATeiGVnv9l8TMV9wCdd3AFNA9bmeFzmojcpwBFj/a5DOY5mds7cwC+Z+rjTPn+OQ==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.96.0.tgz",
+      "integrity": "sha512-T2ijfqZLpV2bgGGocXV4SXTuMoouqN0asYTIm+7jVOLvT5XgDogf3ZvCmiEnSWmxl21+r5wHcs8voU2iUROXAg==",
       "cpu": [
         "x64"
       ],
@@ -3491,9 +3386,9 @@
       }
     },
     "node_modules/@oxc-parser/binding-android-arm64": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-android-arm64/-/binding-android-arm64-0.94.0.tgz",
-      "integrity": "sha512-Ficqj6MggRGFkemU4pVFTyth3jWVL/zpIWjGMTXaPU81l46ZDcYVFWp9ia6nfE5mm8UdVSI2trvmK+BpNUim7g==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-android-arm64/-/binding-android-arm64-0.96.0.tgz",
+      "integrity": "sha512-CofbPOiW1PG+hi8bgElJPK0ioHfw8nt4Vw9d+Q9JuMhygS6LbQyu1W6tIFZ1OPFofeFRdWus3vD29FBx+tvFOA==",
       "cpu": [
         "arm64"
       ],
@@ -3507,9 +3402,9 @@
       }
     },
     "node_modules/@oxc-parser/binding-darwin-arm64": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-arm64/-/binding-darwin-arm64-0.94.0.tgz",
-      "integrity": "sha512-uYyeMH9vMfb0JAdm6ZwHTgcTv53030elQKMnUbux9K5rxOCWbHUyeVACEv86V+E/Ft6RtkvWDIqUY4sYZRmcuQ==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-arm64/-/binding-darwin-arm64-0.96.0.tgz",
+      "integrity": "sha512-+HZ2L1a/1BsUXYik8XqQwT2Tl5Z3jRQ/RRQiPV9UsB2skKyd91NLDlQlMpdhjLGs9Qe7Y42unFjRg2iHjIiwnw==",
       "cpu": [
         "arm64"
       ],
@@ -3523,9 +3418,9 @@
       }
     },
     "node_modules/@oxc-parser/binding-darwin-x64": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-x64/-/binding-darwin-x64-0.94.0.tgz",
-      "integrity": "sha512-Ek1fh8dw6b+/hzLo5jjPuxkshRxekjtTfhfWZ4RehMYiApT8Rj4k+7kcQ+zV1ZaF+1+yLgNqNja2RMRqx3MHzQ==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-x64/-/binding-darwin-x64-0.96.0.tgz",
+      "integrity": "sha512-GC8wH1W0XaCLyTeGsmyaMdnItiYQkqfTcn9Ygc55AWI+m11lCjQeoKDIsDCm/QwrKLCN07u3WWWsuPs5ubfXpA==",
       "cpu": [
         "x64"
       ],
@@ -3539,9 +3434,9 @@
       }
     },
     "node_modules/@oxc-parser/binding-freebsd-x64": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-freebsd-x64/-/binding-freebsd-x64-0.94.0.tgz",
-      "integrity": "sha512-81bE/8F252Ew179uVo9FU67dmRc+n8QSMhj6mmMxisdI3ao5MjCI5jDL19mH3UeQ9uRUBSPFILmHBDQYNZ9oKw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-freebsd-x64/-/binding-freebsd-x64-0.96.0.tgz",
+      "integrity": "sha512-8SeXi2FmlN15uPY5oM03cua5RXBDYmY34Uewongv6RUiAaU/kWxLvzuijpyNC+yQ1r4fC2LbWJhAsKpX5qkA6g==",
       "cpu": [
         "x64"
       ],
@@ -3555,9 +3450,9 @@
       }
     },
     "node_modules/@oxc-parser/binding-linux-arm-gnueabihf": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.94.0.tgz",
-      "integrity": "sha512-aGOU8IYXVYGN2aRrvcU5+UdM7BzIVlm4m0REQzjpblQKRdZfWFtDBRJez+fK/F10g0H1AU5DQVgbW5aeko49Jw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.96.0.tgz",
+      "integrity": "sha512-UEs+Zf6T2/FwQlLgv7gfZsKmY19sl3hK57r2BQVc2eCmCmF/deeqDcWyFjzkNLgdDDucY60PoNhNGClDm605uQ==",
       "cpu": [
         "arm"
       ],
@@ -3571,9 +3466,9 @@
       }
     },
     "node_modules/@oxc-parser/binding-linux-arm-musleabihf": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.94.0.tgz",
-      "integrity": "sha512-69/ZuYSZ4dd7UWoEOyf+pXYPtvUZguDQqjhxMx8fI0J30sEEqs1d/DBLLnog/afHmaapPEIEr6rp9jF6bYcgNw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.96.0.tgz",
+      "integrity": "sha512-1kuWvjR2+ORJMoyxt9LSbLcDhXZnL25XOuv9VmH6NmSPvLgewzuubSlm++W03x+U7SzWFilBsdwIHtD/0mjERw==",
       "cpu": [
         "arm"
       ],
@@ -3587,9 +3482,9 @@
       }
     },
     "node_modules/@oxc-parser/binding-linux-arm64-gnu": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.94.0.tgz",
-      "integrity": "sha512-u55PGVVfZF/frpEcv/vowfuqsCd5VKz3wta8KZ3MBxboat7XxgRIMS8VQEBiJ3aYE80taACu5EfPN1y9DhiU0Q==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.96.0.tgz",
+      "integrity": "sha512-PHH4ETR1t0fymxuhpQNj3Z9t/78/zZa2Lj3Z3I0ZOd+/Ex+gtdhGoB5xYyy7lcYGAPMfZ+Gmr+dTCr1GYNZ3BA==",
       "cpu": [
         "arm64"
       ],
@@ -3603,9 +3498,9 @@
       }
     },
     "node_modules/@oxc-parser/binding-linux-arm64-musl": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.94.0.tgz",
-      "integrity": "sha512-Qm2SEU7/f2b2Rg76Pj49BdMFF7Vv7+2qLPxaae4aH1515kzVv6nZW0bqCo4fPDDyiE4bryF7Jr+WKhllBxvXPw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.96.0.tgz",
+      "integrity": "sha512-fjDPbZjkqaDSTBe0FM8nZ9zBw4B/NF/I0gH7CfvNDwIj9smISaNFypYeomkvubORpnbX9ORhvhYwg3TxQ60OGA==",
       "cpu": [
         "arm64"
       ],
@@ -3619,9 +3514,9 @@
       }
     },
     "node_modules/@oxc-parser/binding-linux-riscv64-gnu": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.94.0.tgz",
-      "integrity": "sha512-bZO3QAt0lsZjk351mVM85obMivbXG+tDiah5XmmOaGO8k4vEYmoiKr2YHJoA2eNpKhPJF8dNyIS7U+XAvirr9g==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.96.0.tgz",
+      "integrity": "sha512-59KAHd/6/LmjkdSAuJn0piKmwSavMasWNUKuYLX/UnqI5KkGIp14+LBwwaBG6KzOtIq1NrRCnmlL4XSEaNkzTg==",
       "cpu": [
         "riscv64"
       ],
@@ -3635,9 +3530,9 @@
       }
     },
     "node_modules/@oxc-parser/binding-linux-s390x-gnu": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.94.0.tgz",
-      "integrity": "sha512-IdbJ/rwsaEPQx11mQwGoClqhAmVaAF9+3VmDRYVmfsYsrhX1Ue1HvBdVHDvtHzJDuumC/X/codkVId9Ss+7fVg==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.96.0.tgz",
+      "integrity": "sha512-VtupojtgahY8XmLwpVpM3C1WQEgMD1JxpB8lzUtdSLwosWaaz1EAl+VXWNuxTTZusNuLBtmR+F0qql22ISi/9g==",
       "cpu": [
         "s390x"
       ],
@@ -3651,9 +3546,9 @@
       }
     },
     "node_modules/@oxc-parser/binding-linux-x64-gnu": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.94.0.tgz",
-      "integrity": "sha512-TbtpRdViF3aPCQBKuEo+TcucwW3KFa6bMHVakgaJu12RZrFpO4h1IWppBbuuBQ9X7SfvpgC1YgCDGve9q6fpEA==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.96.0.tgz",
+      "integrity": "sha512-8XSY9aUYY+5I4I1mhSEWmYqdUrJi3J5cCAInvEVHyTnDAPkhb+tnLGVZD696TpW+lFOLrTFF2V5GMWJVafqIUA==",
       "cpu": [
         "x64"
       ],
@@ -3667,9 +3562,9 @@
       }
     },
     "node_modules/@oxc-parser/binding-linux-x64-musl": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-musl/-/binding-linux-x64-musl-0.94.0.tgz",
-      "integrity": "sha512-hlfoDmWvgSbexoJ9u3KwAJwpeu91FfJR6++fQjeYXD2InK4gZow9o3DRoTpN/kslZwzUNpiRURqxey/RvWh8JQ==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-musl/-/binding-linux-x64-musl-0.96.0.tgz",
+      "integrity": "sha512-IIVNtqhA0uxKkD8Y6aZinKO/sOD5O62VlduE54FnUU2rzZEszrZQLL8nMGVZhTdPaKW5M1aeLmjcdnOs6er1Jg==",
       "cpu": [
         "x64"
       ],
@@ -3683,25 +3578,25 @@
       }
     },
     "node_modules/@oxc-parser/binding-wasm32-wasi": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-wasm32-wasi/-/binding-wasm32-wasi-0.94.0.tgz",
-      "integrity": "sha512-VoCtQZIsRZN8mszbdizh+5MwzbgbMxsPgT2hOzzILQLNY2o2OXG3xSiFNFakVhbWc9qSTaZ/MRDsqR+IM3fLFw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-wasm32-wasi/-/binding-wasm32-wasi-0.96.0.tgz",
+      "integrity": "sha512-TJ/sNPbVD4u6kUwm7sDKa5iRDEB8vd7ZIMjYqFrrAo9US1RGYOSvt6Ie9sDRekUL9fZhNsykvSrpmIj6dg/C2w==",
       "cpu": [
         "wasm32"
       ],
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@napi-rs/wasm-runtime": "^1.0.6"
+        "@napi-rs/wasm-runtime": "^1.0.7"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@oxc-parser/binding-win32-arm64-msvc": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.94.0.tgz",
-      "integrity": "sha512-3wsbMqV8V7WaLdiQ2oawdgKkCgMHXJ7VDuo6uIcXauU3wK6CG0QyDXRV9bPWzorGLRBUHndu/2VB1+9dgT9fvg==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.96.0.tgz",
+      "integrity": "sha512-zCOhRB7MYVIHLj+2QYoTuLyaipiD8JG/ggUjfsMUaupRPpvwQNhsxINLIcTcb0AS+OsT7/OREhydjO74STqQzQ==",
       "cpu": [
         "arm64"
       ],
@@ -3715,9 +3610,9 @@
       }
     },
     "node_modules/@oxc-parser/binding-win32-x64-msvc": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.94.0.tgz",
-      "integrity": "sha512-UTQQ1576Nzhh4jr/YmvzqnuwTPOauB/TPzsnWzT+w8InHxL5JA1fmy01wB1F2BWT9AD6YV4BTB1ozRICYdAgjw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.96.0.tgz",
+      "integrity": "sha512-J6zfx9TE0oS+TrqBUjMVMOi/d/j3HMj69Pip263pETOEPm788N0HXKPsc2X2jUfSTHzD9vmdjq0QFymbf2LhWg==",
       "cpu": [
         "x64"
       ],
@@ -3731,18 +3626,18 @@
       }
     },
     "node_modules/@oxc-project/types": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.94.0.tgz",
-      "integrity": "sha512-+UgQT/4o59cZfH6Cp7G0hwmqEQ0wE+AdIwhikdwnhWI9Dp8CgSY081+Q3O67/wq3VJu8mgUEB93J9EHHn70fOw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.96.0.tgz",
+      "integrity": "sha512-r/xkmoXA0xEpU6UGtn18CNVjXH6erU3KCpCDbpLmbVxBFor1U9MqN5Z2uMmCHJuXjJzlnDR+hWY+yPoLo8oHDw==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/Boshen"
       }
     },
     "node_modules/@oxc-transform/binding-android-arm64": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-android-arm64/-/binding-android-arm64-0.94.0.tgz",
-      "integrity": "sha512-abxgEoomc5HNbDQaGhBWguR+W4cdrcEIwV8xIQ2qpUuhEUoHy6nQLfN/gREAZMdkyIaKwk12FckB9aNxVTte2w==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-android-arm64/-/binding-android-arm64-0.96.0.tgz",
+      "integrity": "sha512-wOm+ZsqFvyZ7B9RefUMsj0zcXw77Z2pXA51nbSQyPXqr+g0/pDGxriZWP8Sdpz/e4AEaKPA9DvrwyOZxu7GRDQ==",
       "cpu": [
         "arm64"
       ],
@@ -3756,9 +3651,9 @@
       }
     },
     "node_modules/@oxc-transform/binding-darwin-arm64": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-darwin-arm64/-/binding-darwin-arm64-0.94.0.tgz",
-      "integrity": "sha512-HbnmwC1pZ9M/nXqA36TpwF7vcXk+PgLMxDvvza5C9CCivfi3MUfqCvFMvRI0snlVm2PK2GAwWJjBtng1fR8LJw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-darwin-arm64/-/binding-darwin-arm64-0.96.0.tgz",
+      "integrity": "sha512-td1sbcvzsyuoNRiNdIRodPXRtFFwxzPpC/6/yIUtRRhKn30XQcizxupIvQQVpJWWchxkphbBDh6UN+u+2CJ8Zw==",
       "cpu": [
         "arm64"
       ],
@@ -3772,9 +3667,9 @@
       }
     },
     "node_modules/@oxc-transform/binding-darwin-x64": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-darwin-x64/-/binding-darwin-x64-0.94.0.tgz",
-      "integrity": "sha512-GADv5xcClQpYj5d6GLdPF6Qz/3OSn0d/LKhDklpW/5S42RQsGxI+83iXF1e61KITd4yp4VAvjEiuDM52zb4xYQ==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-darwin-x64/-/binding-darwin-x64-0.96.0.tgz",
+      "integrity": "sha512-xgqxnqhPYH2NYkgbqtnCJfhbXvxIf/pnhF/ig5UBK8PYpCEWIP/cfLpQRQ9DcQnRfuxi7RMIF6LdmB1AiS6Fkg==",
       "cpu": [
         "x64"
       ],
@@ -3788,9 +3683,9 @@
       }
     },
     "node_modules/@oxc-transform/binding-freebsd-x64": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-freebsd-x64/-/binding-freebsd-x64-0.94.0.tgz",
-      "integrity": "sha512-5H5V+H1CZoRQwbgAt/wLrN8oZwuYGP6xdXTuGUW2C2ON1DynMyxC4Padf8vjPcKbQph5GnLAuoaTafxokE2Z/Q==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-freebsd-x64/-/binding-freebsd-x64-0.96.0.tgz",
+      "integrity": "sha512-1i67OXdl/rvSkcTXqDlh6qGRXYseEmf0rl/R+/i88scZ/o3A+FzlX56sThuaPzSSv9eVgesnoYUjIBJELFc1oA==",
       "cpu": [
         "x64"
       ],
@@ -3804,9 +3699,9 @@
       }
     },
     "node_modules/@oxc-transform/binding-linux-arm-gnueabihf": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.94.0.tgz",
-      "integrity": "sha512-BoWVkKUqgmUs4hDvGPgCSUkIeEMBVvHU/mO348Dhp7XT9ijdnSBmRzY6hFaqRSq768Hn6KblM0NM1QV7jEvKOw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.96.0.tgz",
+      "integrity": "sha512-9MJBs0SWODsqyzO3eAnacXgJ/sZu1xqinjEwBzkcZ3tQI8nKhMADOzu2NzbVWDWujeoC8DESXaO08tujvUru+Q==",
       "cpu": [
         "arm"
       ],
@@ -3820,9 +3715,9 @@
       }
     },
     "node_modules/@oxc-transform/binding-linux-arm-musleabihf": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.94.0.tgz",
-      "integrity": "sha512-XUAyt2EtSDycljMKfgDVg/T5C3aF5dR1mfMJAZUCPQkfJjXZwA/C0DTTC/xPlPm68WA4uRtVNLqExTHJ3JOPwg==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.96.0.tgz",
+      "integrity": "sha512-BQom57I2ScccixljNYh2Wy+5oVZtF1LXiiUPxSLtDHbsanpEvV/+kzCagQpTjk1BVzSQzOxfEUWjvL7mY53pRQ==",
       "cpu": [
         "arm"
       ],
@@ -3836,9 +3731,9 @@
       }
     },
     "node_modules/@oxc-transform/binding-linux-arm64-gnu": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.94.0.tgz",
-      "integrity": "sha512-5Y7FI2FgawingojBEo3df4sI/Sq73UhVZy3DlT9o94Pgu8o+ujlKPD20kFmOJ1jQNEJ4ScKr5vh6pemHSZjUgA==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.96.0.tgz",
+      "integrity": "sha512-kaqvUzNu8LL4aBSXqcqGVLFG13GmJEplRI2+yqzkgAItxoP/LfFMdEIErlTWLGyBwd0OLiNMHrOvkcCQRWadVg==",
       "cpu": [
         "arm64"
       ],
@@ -3852,9 +3747,9 @@
       }
     },
     "node_modules/@oxc-transform/binding-linux-arm64-musl": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.94.0.tgz",
-      "integrity": "sha512-QiyHubpKo7upYPfwB+8bjaTczd60PJdL2zJrMKgL+CDlmP6HZlnWXZkeVTA3S6QXnbulRlrtERmqS2DePszG0g==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.96.0.tgz",
+      "integrity": "sha512-EiG/L3wEkPgTm4p906ufptyblBgtiQWTubGg/JEw82f8uLRroayr5zhbUqx40EgH037a3SfJthIyLZi7XPRFJw==",
       "cpu": [
         "arm64"
       ],
@@ -3868,9 +3763,9 @@
       }
     },
     "node_modules/@oxc-transform/binding-linux-riscv64-gnu": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.94.0.tgz",
-      "integrity": "sha512-vh3PZGmoUCbfkqVGuB7fweuqthYxzAAGqhiAJAn8x4V+R86W5esCtxbm+PTyVawBT/eoq1cU8HhNVqE0rQlChg==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.96.0.tgz",
+      "integrity": "sha512-r01CY6OxKGtVeYnvH4mGmtkQMlLkXdPWWNXwo5o7fE2s/fgZPMpqh8bAuXEhuMXipZRJrjxTk1+ZQ4KCHpMn3Q==",
       "cpu": [
         "riscv64"
       ],
@@ -3884,9 +3779,9 @@
       }
     },
     "node_modules/@oxc-transform/binding-linux-s390x-gnu": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.94.0.tgz",
-      "integrity": "sha512-DT3m7cF612RdHBmYK3Ave6OVT1iSvlbKo8T+81n6ZcFXO+L8vDJHzwMwMOXfeOLQ15zr0WmSHqBOZ14tHKNidw==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.96.0.tgz",
+      "integrity": "sha512-4djg2vYLGbVeS8YiA2K4RPPpZE4fxTGCX5g/bOMbCYyirDbmBAIop4eOAj8vOA9i1CcWbDtmp+PVJ1dSw7f3IQ==",
       "cpu": [
         "s390x"
       ],
@@ -3900,9 +3795,9 @@
       }
     },
     "node_modules/@oxc-transform/binding-linux-x64-gnu": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.94.0.tgz",
-      "integrity": "sha512-kK5dt8wfxUD3MGXnLHWxv57oYinIwoRFcjw2oJD5DCoGTeXCmrFk4D0eGPAlZKOm7uvWMs9yNI8rg1KY5nEs1w==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.96.0.tgz",
+      "integrity": "sha512-f6pcWVz57Y8jXa2OS7cz3aRNuks34Q3j61+3nQ4xTE8H1KbalcEvHNmM92OEddaJ8QLs9YcE0kUC6eDTbY34+A==",
       "cpu": [
         "x64"
       ],
@@ -3916,9 +3811,9 @@
       }
     },
     "node_modules/@oxc-transform/binding-linux-x64-musl": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-x64-musl/-/binding-linux-x64-musl-0.94.0.tgz",
-      "integrity": "sha512-+zfNBO2qEPcSPTHVUxsiG3Hm0vxWzuL+DZX0wbbtjKwwhH2Jr1Eo26R+Dwc1SfbvoWen36NitKkd2arkpMW8KQ==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-x64-musl/-/binding-linux-x64-musl-0.96.0.tgz",
+      "integrity": "sha512-NSiRtFvR7Pbhv3mWyPMkTK38czIjcnK0+K5STo3CuzZRVbX1TM17zGdHzKBUHZu7v6IQ6/XsQ3ELa1BlEHPGWQ==",
       "cpu": [
         "x64"
       ],
@@ -3932,25 +3827,25 @@
       }
     },
     "node_modules/@oxc-transform/binding-wasm32-wasi": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-wasm32-wasi/-/binding-wasm32-wasi-0.94.0.tgz",
-      "integrity": "sha512-rn3c2wGT3ha6j0VLykYOkXU5YyQYIeGXRsDPP7xyiZHVTVssoM0X1BuheFlgxmC1POXMT+dAAcVOFG5MdW1bnQ==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-wasm32-wasi/-/binding-wasm32-wasi-0.96.0.tgz",
+      "integrity": "sha512-A91ARLiuZHGN4hBds9s7bW3czUuLuHLsV+cz44iF9j8e1zX9m2hNGXf/acQRbg/zcFUXmjz5nmk8EkZyob876w==",
       "cpu": [
         "wasm32"
       ],
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@napi-rs/wasm-runtime": "^1.0.6"
+        "@napi-rs/wasm-runtime": "^1.0.7"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@oxc-transform/binding-win32-arm64-msvc": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.94.0.tgz",
-      "integrity": "sha512-An/Dd+I8dH0b+VLEdfTrZP53S4Fha3w/aD71d1uZB14aU02hBt3ZwU8IE3RGZIJPxub9OZmCmJN66uTqkT6oXg==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.96.0.tgz",
+      "integrity": "sha512-IedJf40djKgDObomhYjdRAlmSYUEdfqX3A3M9KfUltl9AghTBBLkTzUMA7O09oo71vYf5TEhbFM7+Vn5vqw7AQ==",
       "cpu": [
         "arm64"
       ],
@@ -3964,9 +3859,9 @@
       }
     },
     "node_modules/@oxc-transform/binding-win32-x64-msvc": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.94.0.tgz",
-      "integrity": "sha512-HEE/8x6H67jPlkCDDB3xl74eR86zY6nLAql6onmidF5JPNXt9v2XGB6xEwr4brUIaMLPkl90plbdCy9jWhEjdQ==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.96.0.tgz",
+      "integrity": "sha512-0fI0P0W7bSO/GCP/N5dkmtB9vBqCA4ggo1WmXTnxNJVmFFOtcA1vYm1I9jl8fxo+sucW2WnlpnI4fjKdo3JKxA==",
       "cpu": [
         "x64"
       ],
@@ -4313,20 +4208,63 @@
       }
     },
     "node_modules/@pinia/nuxt": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.2.tgz",
-      "integrity": "sha512-CgvSWpbktxxWBV7ModhAcsExsQZqpPq6vMYEe9DexmmY6959ev8ukL4iFhr/qov2Nb9cQAWd7niFDnaWkN+FHg==",
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.3.tgz",
+      "integrity": "sha512-7WVNHpWx4qAEzOlnyrRC88kYrwnlR/PrThWT0XI1dSNyUAXu/KBv9oR37uCgYkZroqP5jn8DfzbkNF3BtKvE9w==",
       "license": "MIT",
       "dependencies": {
-        "@nuxt/kit": "^3.9.0"
+        "@nuxt/kit": "^4.2.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
       },
       "peerDependencies": {
-        "pinia": "^3.0.3"
+        "pinia": "^3.0.4"
       }
     },
+    "node_modules/@pinia/nuxt/node_modules/@nuxt/kit": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.1.tgz",
+      "integrity": "sha512-lLt8KLHyl7IClc3RqRpRikz15eCfTRlAWL9leVzPyg5N87FfKE/7EWgWvpiL/z4Tf3dQCIqQb88TmHE0JTIDvA==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.3.1",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.6.1",
+        "klona": "^2.0.6",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "rc9": "^2.1.2",
+        "scule": "^1.3.0",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@pinia/nuxt/node_modules/ohash": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
+      "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
+      "license": "MIT"
+    },
+    "node_modules/@pinia/nuxt/node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT"
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -4362,9 +4300,9 @@
       }
     },
     "node_modules/@poppinss/dumper": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/@poppinss/dumper/-/dumper-0.6.4.tgz",
-      "integrity": "sha512-iG0TIdqv8xJ3Lt9O8DrPRxw1MRLjNpoqiSGU03P/wNLP/s0ra0udPJ1J2Tx5M0J3H/cVyEgpbn8xUKRY9j59kQ==",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@poppinss/dumper/-/dumper-0.6.5.tgz",
+      "integrity": "sha512-NBdYIb90J7LfOI32dOewKI1r7wnkiH6m920puQ3qHUeZkxNkQiFnXVWoE6YtFSv6QOiPPf7ys6i+HWWecDz7sw==",
       "license": "MIT",
       "dependencies": {
         "@poppinss/colors": "^4.1.5",
@@ -4373,9 +4311,9 @@
       }
     },
     "node_modules/@poppinss/dumper/node_modules/@sindresorhus/is": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-7.1.0.tgz",
-      "integrity": "sha512-7F/yz2IphV39hiS2zB4QYVkivrptHHh0K8qJJd9HhuWSdvf8AN7NpebW3CcDZDBQsUPMoDKWsY2WWgW7bqOcfA==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-7.1.1.tgz",
+      "integrity": "sha512-rO92VvpgMc3kfiTjGT52LEtJ8Yc5kCWhZjLQ3LwlA4pSgPpQO7bVpYXParOD8Jwf+cVQECJo3yP/4I8aZtUQTQ==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -4530,9 +4468,9 @@
       }
     },
     "node_modules/@rollup/plugin-replace": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-6.0.2.tgz",
-      "integrity": "sha512-7QaYCf8bqF04dOy7w/eHmJeNExxTYwvKAmlSAH/EaWWUzbT0h5sbF6bktFoX/0F/0qwng5/dWFMyf3gzaM8DsQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-6.0.3.tgz",
+      "integrity": "sha512-J4RZarRvQAm5IF0/LwUUg+obsm+xZhYnbMXmXROyoSE1ATJe3oXSb9L5MMppdxP2ylNSjv6zFBwKYjcKMucVfA==",
       "license": "MIT",
       "dependencies": {
         "@rollup/pluginutils": "^5.0.1",
@@ -4601,9 +4539,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.5.tgz",
-      "integrity": "sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.2.tgz",
+      "integrity": "sha512-yDPzwsgiFO26RJA4nZo8I+xqzh7sJTZIWQOxn+/XOdPE31lAvLIYCKqjV+lNH/vxE2L2iH3plKxDCRK6i+CwhA==",
       "cpu": [
         "arm"
       ],
@@ -4614,9 +4552,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.5.tgz",
-      "integrity": "sha512-mQGfsIEFcu21mvqkEKKu2dYmtuSZOBMmAl5CFlPGLY94Vlcm+zWApK7F/eocsNzp8tKmbeBP8yXyAbx0XHsFNA==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.2.tgz",
+      "integrity": "sha512-k8FontTxIE7b0/OGKeSN5B6j25EuppBcWM33Z19JoVT7UTXFSo3D9CdU39wGTeb29NO3XxpMNauh09B+Ibw+9g==",
       "cpu": [
         "arm64"
       ],
@@ -4627,9 +4565,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.5.tgz",
-      "integrity": "sha512-takF3CR71mCAGA+v794QUZ0b6ZSrgJkArC+gUiG6LB6TQty9T0Mqh3m2ImRBOxS2IeYBo4lKWIieSvnEk2OQWA==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.2.tgz",
+      "integrity": "sha512-A6s4gJpomNBtJ2yioj8bflM2oogDwzUiMl2yNJ2v9E7++sHrSrsQ29fOfn5DM/iCzpWcebNYEdXpaK4tr2RhfQ==",
       "cpu": [
         "arm64"
       ],
@@ -4640,9 +4578,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.5.tgz",
-      "integrity": "sha512-W901Pla8Ya95WpxDn//VF9K9u2JbocwV/v75TE0YIHNTbhqUTv9w4VuQ9MaWlNOkkEfFwkdNhXgcLqPSmHy0fA==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.2.tgz",
+      "integrity": "sha512-e6XqVmXlHrBlG56obu9gDRPW3O3hLxpwHpLsBJvuI8qqnsrtSZ9ERoWUXtPOkY8c78WghyPHZdmPhHLWNdAGEw==",
       "cpu": [
         "x64"
       ],
@@ -4653,9 +4591,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.5.tgz",
-      "integrity": "sha512-QofO7i7JycsYOWxe0GFqhLmF6l1TqBswJMvICnRUjqCx8b47MTo46W8AoeQwiokAx3zVryVnxtBMcGcnX12LvA==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.2.tgz",
+      "integrity": "sha512-v0E9lJW8VsrwPux5Qe5CwmH/CF/2mQs6xU1MF3nmUxmZUCHazCjLgYvToOk+YuuUqLQBio1qkkREhxhc656ViA==",
       "cpu": [
         "arm64"
       ],
@@ -4666,9 +4604,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.5.tgz",
-      "integrity": "sha512-jr21b/99ew8ujZubPo9skbrItHEIE50WdV86cdSoRkKtmWa+DDr6fu2c/xyRT0F/WazZpam6kk7IHBerSL7LDQ==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.2.tgz",
+      "integrity": "sha512-ClAmAPx3ZCHtp6ysl4XEhWU69GUB1D+s7G9YjHGhIGCSrsg00nEGRRZHmINYxkdoJehde8VIsDC5t9C0gb6yqA==",
       "cpu": [
         "x64"
       ],
@@ -4679,9 +4617,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.5.tgz",
-      "integrity": "sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.2.tgz",
+      "integrity": "sha512-EPlb95nUsz6Dd9Qy13fI5kUPXNSljaG9FiJ4YUGU1O/Q77i5DYFW5KR8g1OzTcdZUqQQ1KdDqsTohdFVwCwjqg==",
       "cpu": [
         "arm"
       ],
@@ -4692,9 +4630,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.5.tgz",
-      "integrity": "sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.2.tgz",
+      "integrity": "sha512-BOmnVW+khAUX+YZvNfa0tGTEMVVEerOxN0pDk2E6N6DsEIa2Ctj48FOMfNDdrwinocKaC7YXUZ1pHlKpnkja/Q==",
       "cpu": [
         "arm"
       ],
@@ -4705,9 +4643,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.5.tgz",
-      "integrity": "sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.2.tgz",
+      "integrity": "sha512-Xt2byDZ+6OVNuREgBXr4+CZDJtrVso5woFtpKdGPhpTPHcNG7D8YXeQzpNbFRxzTVqJf7kvPMCub/pcGUWgBjA==",
       "cpu": [
         "arm64"
       ],
@@ -4718,9 +4656,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.5.tgz",
-      "integrity": "sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.2.tgz",
+      "integrity": "sha512-+LdZSldy/I9N8+klim/Y1HsKbJ3BbInHav5qE9Iy77dtHC/pibw1SR/fXlWyAk0ThnpRKoODwnAuSjqxFRDHUQ==",
       "cpu": [
         "arm64"
       ],
@@ -4731,9 +4669,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.5.tgz",
-      "integrity": "sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.2.tgz",
+      "integrity": "sha512-8ms8sjmyc1jWJS6WdNSA23rEfdjWB30LH8Wqj0Cqvv7qSHnvw6kgMMXRdop6hkmGPlyYBdRPkjJnj3KCUHV/uQ==",
       "cpu": [
         "loong64"
       ],
@@ -4744,9 +4682,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.5.tgz",
-      "integrity": "sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.2.tgz",
+      "integrity": "sha512-3HRQLUQbpBDMmzoxPJYd3W6vrVHOo2cVW8RUo87Xz0JPJcBLBr5kZ1pGcQAhdZgX9VV7NbGNipah1omKKe23/g==",
       "cpu": [
         "ppc64"
       ],
@@ -4757,9 +4695,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.5.tgz",
-      "integrity": "sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.2.tgz",
+      "integrity": "sha512-fMjKi+ojnmIvhk34gZP94vjogXNNUKMEYs+EDaB/5TG/wUkoeua7p7VCHnE6T2Tx+iaghAqQX8teQzcvrYpaQA==",
       "cpu": [
         "riscv64"
       ],
@@ -4770,9 +4708,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.5.tgz",
-      "integrity": "sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.2.tgz",
+      "integrity": "sha512-XuGFGU+VwUUV5kLvoAdi0Wz5Xbh2SrjIxCtZj6Wq8MDp4bflb/+ThZsVxokM7n0pcbkEr2h5/pzqzDYI7cCgLQ==",
       "cpu": [
         "riscv64"
       ],
@@ -4783,9 +4721,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.5.tgz",
-      "integrity": "sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.2.tgz",
+      "integrity": "sha512-w6yjZF0P+NGzWR3AXWX9zc0DNEGdtvykB03uhonSHMRa+oWA6novflo2WaJr6JZakG2ucsyb+rvhrKac6NIy+w==",
       "cpu": [
         "s390x"
       ],
@@ -4796,9 +4734,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.5.tgz",
-      "integrity": "sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.2.tgz",
+      "integrity": "sha512-yo8d6tdfdeBArzC7T/PnHd7OypfI9cbuZzPnzLJIyKYFhAQ8SvlkKtKBMbXDxe1h03Rcr7u++nFS7tqXz87Gtw==",
       "cpu": [
         "x64"
       ],
@@ -4809,9 +4747,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.5.tgz",
-      "integrity": "sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.2.tgz",
+      "integrity": "sha512-ah59c1YkCxKExPP8O9PwOvs+XRLKwh/mV+3YdKqQ5AMQ0r4M4ZDuOrpWkUaqO7fzAHdINzV9tEVu8vNw48z0lA==",
       "cpu": [
         "x64"
       ],
@@ -4822,9 +4760,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.5.tgz",
-      "integrity": "sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.2.tgz",
+      "integrity": "sha512-4VEd19Wmhr+Zy7hbUsFZ6YXEiP48hE//KPLCSVNY5RMGX2/7HZ+QkN55a3atM1C/BZCGIgqN+xrVgtdak2S9+A==",
       "cpu": [
         "arm64"
       ],
@@ -4835,9 +4773,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.5.tgz",
-      "integrity": "sha512-w0cDWVR6MlTstla1cIfOGyl8+qb93FlAVutcor14Gf5Md5ap5ySfQ7R9S/NjNaMLSFdUnKGEasmVnu3lCMqB7w==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.2.tgz",
+      "integrity": "sha512-IlbHFYc/pQCgew/d5fslcy1KEaYVCJ44G8pajugd8VoOEI8ODhtb/j8XMhLpwHCMB3yk2J07ctup10gpw2nyMA==",
       "cpu": [
         "arm64"
       ],
@@ -4848,9 +4786,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.5.tgz",
-      "integrity": "sha512-Aufdpzp7DpOTULJCuvzqcItSGDH73pF3ko/f+ckJhxQyHtp67rHw3HMNxoIdDMUITJESNE6a8uh4Lo4SLouOUg==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.2.tgz",
+      "integrity": "sha512-lNlPEGgdUfSzdCWU176ku/dQRnA7W+Gp8d+cWv73jYrb8uT7HTVVxq62DUYxjbaByuf1Yk0RIIAbDzp+CnOTFg==",
       "cpu": [
         "ia32"
       ],
@@ -4861,9 +4799,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.5.tgz",
-      "integrity": "sha512-UGBUGPFp1vkj6p8wCRraqNhqwX/4kNQPS57BCFc8wYh0g94iVIW33wJtQAx3G7vrjjNtRaxiMUylM0ktp/TRSQ==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.2.tgz",
+      "integrity": "sha512-S6YojNVrHybQis2lYov1sd+uj7K0Q05NxHcGktuMMdIQ2VixGwAfbJ23NnlvvVV1bdpR2m5MsNBViHJKcA4ADw==",
       "cpu": [
         "x64"
       ],
@@ -4874,9 +4812,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.5.tgz",
-      "integrity": "sha512-TAcgQh2sSkykPRWLrdyy2AiceMckNf5loITqXxFI5VuQjS5tSuw3WlwdN8qv8vzjLAUTvYaH/mVjSFpbkFbpTg==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.2.tgz",
+      "integrity": "sha512-k+/Rkcyx//P6fetPoLMb8pBeqJBNGx81uuf7iljX9++yNBVRDQgD04L+SVXmXmh5ZP4/WOp4mWF0kmi06PW2tA==",
       "cpu": [
         "x64"
       ],
@@ -4886,12 +4824,6 @@
         "win32"
       ]
     },
-    "node_modules/@sec-ant/readable-stream": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@sec-ant/readable-stream/-/readable-stream-0.4.1.tgz",
-      "integrity": "sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==",
-      "license": "MIT"
-    },
     "node_modules/@shikijs/core": {
       "version": "1.29.2",
       "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.29.2.tgz",
@@ -5014,9 +4946,9 @@
       "license": "MIT"
     },
     "node_modules/@speed-highlight/core": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@speed-highlight/core/-/core-1.2.8.tgz",
-      "integrity": "sha512-IGytNtnUnPIobIbOq5Y6LIlqiHNX+vnToQIS7lj6L5819C+rA8TXRDkkG8vePsiBOGcoW9R6i+dp2YBUKdB09Q==",
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@speed-highlight/core/-/core-1.2.12.tgz",
+      "integrity": "sha512-uilwrK0Ygyri5dToHYdZSjcvpS2ZwX0w5aSt3GCEN9hrjxWCoeV4Z2DTXuxjwbntaLQIEEAlCeNQss5SoHvAEA==",
       "license": "CC0-1.0"
     },
     "node_modules/@standard-schema/spec": {
@@ -5055,47 +4987,47 @@
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.16.tgz",
-      "integrity": "sha512-BX5iaSsloNuvKNHRN3k2RcCuTEgASTo77mofW0vmeHkfrDWaoFAFvNHpEgtu0eqyypcyiBkDWzSMxJhp3AUVcw==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
+      "integrity": "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "enhanced-resolve": "^5.18.3",
         "jiti": "^2.6.1",
         "lightningcss": "1.30.2",
-        "magic-string": "^0.30.19",
+        "magic-string": "^0.30.21",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.16"
+        "tailwindcss": "4.1.17"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.16.tgz",
-      "integrity": "sha512-2OSv52FRuhdlgyOQqgtQHuCgXnS8nFSYRp2tJ+4WZXKgTxqPy7SMSls8c3mPT5pkZ17SBToGM5LHEJBO7miEdg==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.17.tgz",
+      "integrity": "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==",
       "license": "MIT",
       "engines": {
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.16",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.16",
-        "@tailwindcss/oxide-darwin-x64": "4.1.16",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.16",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.16",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.16",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.16",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.16",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.16",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.16",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.16",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.16"
+        "@tailwindcss/oxide-android-arm64": "4.1.17",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.17",
+        "@tailwindcss/oxide-darwin-x64": "4.1.17",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.17",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.17",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.17",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.17",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.17",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.17"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.16.tgz",
-      "integrity": "sha512-8+ctzkjHgwDJ5caq9IqRSgsP70xhdhJvm+oueS/yhD5ixLhqTw9fSL1OurzMUhBwE5zK26FXLCz2f/RtkISqHA==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.17.tgz",
+      "integrity": "sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==",
       "cpu": [
         "arm64"
       ],
@@ -5109,9 +5041,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.16.tgz",
-      "integrity": "sha512-C3oZy5042v2FOALBZtY0JTDnGNdS6w7DxL/odvSny17ORUnaRKhyTse8xYi3yKGyfnTUOdavRCdmc8QqJYwFKA==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.17.tgz",
+      "integrity": "sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==",
       "cpu": [
         "arm64"
       ],
@@ -5125,9 +5057,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.16.tgz",
-      "integrity": "sha512-vjrl/1Ub9+JwU6BP0emgipGjowzYZMjbWCDqwA2Z4vCa+HBSpP4v6U2ddejcHsolsYxwL5r4bPNoamlV0xDdLg==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.17.tgz",
+      "integrity": "sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==",
       "cpu": [
         "x64"
       ],
@@ -5141,9 +5073,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.16.tgz",
-      "integrity": "sha512-TSMpPYpQLm+aR1wW5rKuUuEruc/oOX3C7H0BTnPDn7W/eMw8W+MRMpiypKMkXZfwH8wqPIRKppuZoedTtNj2tg==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.17.tgz",
+      "integrity": "sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==",
       "cpu": [
         "x64"
       ],
@@ -5157,9 +5089,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.16.tgz",
-      "integrity": "sha512-p0GGfRg/w0sdsFKBjMYvvKIiKy/LNWLWgV/plR4lUgrsxFAoQBFrXkZ4C0w8IOXfslB9vHK/JGASWD2IefIpvw==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.17.tgz",
+      "integrity": "sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==",
       "cpu": [
         "arm"
       ],
@@ -5173,9 +5105,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.16.tgz",
-      "integrity": "sha512-DoixyMmTNO19rwRPdqviTrG1rYzpxgyYJl8RgQvdAQUzxC1ToLRqtNJpU/ATURSKgIg6uerPw2feW0aS8SNr/w==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.17.tgz",
+      "integrity": "sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==",
       "cpu": [
         "arm64"
       ],
@@ -5189,9 +5121,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.16.tgz",
-      "integrity": "sha512-H81UXMa9hJhWhaAUca6bU2wm5RRFpuHImrwXBUvPbYb+3jo32I9VIwpOX6hms0fPmA6f2pGVlybO6qU8pF4fzQ==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.17.tgz",
+      "integrity": "sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==",
       "cpu": [
         "arm64"
       ],
@@ -5205,9 +5137,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.16.tgz",
-      "integrity": "sha512-ZGHQxDtFC2/ruo7t99Qo2TTIvOERULPl5l0K1g0oK6b5PGqjYMga+FcY1wIUnrUxY56h28FxybtDEla+ICOyew==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.17.tgz",
+      "integrity": "sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==",
       "cpu": [
         "x64"
       ],
@@ -5221,9 +5153,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.16.tgz",
-      "integrity": "sha512-Oi1tAaa0rcKf1Og9MzKeINZzMLPbhxvm7rno5/zuP1WYmpiG0bEHq4AcRUiG2165/WUzvxkW4XDYCscZWbTLZw==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.17.tgz",
+      "integrity": "sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==",
       "cpu": [
         "x64"
       ],
@@ -5237,9 +5169,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.16.tgz",
-      "integrity": "sha512-B01u/b8LteGRwucIBmCQ07FVXLzImWESAIMcUU6nvFt/tYsQ6IHz8DmZ5KtvmwxD+iTYBtM1xwoGXswnlu9v0Q==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.17.tgz",
+      "integrity": "sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -5254,8 +5186,8 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.5.0",
-        "@emnapi/runtime": "^1.5.0",
+        "@emnapi/core": "^1.6.0",
+        "@emnapi/runtime": "^1.6.0",
         "@emnapi/wasi-threads": "^1.1.0",
         "@napi-rs/wasm-runtime": "^1.0.7",
         "@tybys/wasm-util": "^0.10.1",
@@ -5266,9 +5198,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.16.tgz",
-      "integrity": "sha512-zX+Q8sSkGj6HKRTMJXuPvOcP8XfYON24zJBRPlszcH1Np7xuHXhWn8qfFjIujVzvH3BHU+16jBXwgpl20i+v9A==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.17.tgz",
+      "integrity": "sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==",
       "cpu": [
         "arm64"
       ],
@@ -5282,9 +5214,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.16.tgz",
-      "integrity": "sha512-m5dDFJUEejbFqP+UXVstd4W/wnxA4F61q8SoL+mqTypId2T2ZpuxosNSgowiCnLp2+Z+rivdU0AqpfgiD7yCBg==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.17.tgz",
+      "integrity": "sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==",
       "cpu": [
         "x64"
       ],
@@ -5298,27 +5230,27 @@
       }
     },
     "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.16.tgz",
-      "integrity": "sha512-Qn3SFGPXYQMKR/UtqS+dqvPrzEeBZHrFA92maT4zijCVggdsXnDBMsPFJo1eArX3J+O+Gi+8pV4PkqjLCNBk3A==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.17.tgz",
+      "integrity": "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==",
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.16",
-        "@tailwindcss/oxide": "4.1.16",
+        "@tailwindcss/node": "4.1.17",
+        "@tailwindcss/oxide": "4.1.17",
         "postcss": "^8.4.41",
-        "tailwindcss": "4.1.16"
+        "tailwindcss": "4.1.17"
       }
     },
     "node_modules/@tailwindcss/vite": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.16.tgz",
-      "integrity": "sha512-bbguNBcDxsRmi9nnlWJxhfDWamY3lmcyACHcdO1crxfzuLpOhHLLtEIN/nCbbAtj5rchUgQD17QVAKi1f7IsKg==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.17.tgz",
+      "integrity": "sha512-4+9w8ZHOiGnpcGI6z1TVVfWaX/koK7fKeSYF3qlYg2xpBtbteP2ddBxiarL+HVgfSJGeK5RIxRQmKm4rTJJAwA==",
       "license": "MIT",
       "dependencies": {
-        "@tailwindcss/node": "4.1.16",
-        "@tailwindcss/oxide": "4.1.16",
-        "tailwindcss": "4.1.16"
+        "@tailwindcss/node": "4.1.17",
+        "@tailwindcss/oxide": "4.1.17",
+        "tailwindcss": "4.1.17"
       },
       "peerDependencies": {
         "vite": "^5.2.0 || ^6 || ^7"
@@ -5460,9 +5392,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "24.9.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.9.2.tgz",
-      "integrity": "sha512-uWN8YqxXxqFMX2RqGOrumsKeti4LlmIMIyV0lgut4jx7KQBcBiW6vkDtIBvHnHIquwNfJhk8v2OtmO8zXWHfPA==",
+      "version": "24.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
+      "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -5494,16 +5426,16 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.46.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.2.tgz",
-      "integrity": "sha512-ZGBMToy857/NIPaaCucIUQgqueOiq7HeAKkhlvqVV4lm089zUFW6ikRySx2v+cAhKeUCPuWVHeimyk6Dw1iY3w==",
+      "version": "8.46.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.4.tgz",
+      "integrity": "sha512-R48VhmTJqplNyDxCyqqVkFSZIx1qX6PzwqgcXn1olLrzxcSBDlOsbtcnQuQhNtnNiJ4Xe5gREI1foajYaYU2Vg==",
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.46.2",
-        "@typescript-eslint/type-utils": "8.46.2",
-        "@typescript-eslint/utils": "8.46.2",
-        "@typescript-eslint/visitor-keys": "8.46.2",
+        "@typescript-eslint/scope-manager": "8.46.4",
+        "@typescript-eslint/type-utils": "8.46.4",
+        "@typescript-eslint/utils": "8.46.4",
+        "@typescript-eslint/visitor-keys": "8.46.4",
         "graphemer": "^1.4.0",
         "ignore": "^7.0.0",
         "natural-compare": "^1.4.0",
@@ -5517,21 +5449,21 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.46.2",
+        "@typescript-eslint/parser": "^8.46.4",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.46.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.46.2.tgz",
-      "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
+      "version": "8.46.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.46.4.tgz",
+      "integrity": "sha512-tK3GPFWbirvNgsNKto+UmB/cRtn6TZfyw0D6IKrW55n6Vbs7KJoZtI//kpTKzE/DUmmnAFD8/Ca46s7Obs92/w==",
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.46.2",
-        "@typescript-eslint/types": "8.46.2",
-        "@typescript-eslint/typescript-estree": "8.46.2",
-        "@typescript-eslint/visitor-keys": "8.46.2",
+        "@typescript-eslint/scope-manager": "8.46.4",
+        "@typescript-eslint/types": "8.46.4",
+        "@typescript-eslint/typescript-estree": "8.46.4",
+        "@typescript-eslint/visitor-keys": "8.46.4",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -5547,13 +5479,13 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.46.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.46.2.tgz",
-      "integrity": "sha512-PULOLZ9iqwI7hXcmL4fVfIsBi6AN9YxRc0frbvmg8f+4hQAjQ5GYNKK0DIArNo+rOKmR/iBYwkpBmnIwin4wBg==",
+      "version": "8.46.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.46.4.tgz",
+      "integrity": "sha512-nPiRSKuvtTN+no/2N1kt2tUh/HoFzeEgOm9fQ6XQk4/ApGqjx0zFIIaLJ6wooR1HIoozvj2j6vTi/1fgAz7UYQ==",
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.46.2",
-        "@typescript-eslint/types": "^8.46.2",
+        "@typescript-eslint/tsconfig-utils": "^8.46.4",
+        "@typescript-eslint/types": "^8.46.4",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -5568,13 +5500,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.46.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.46.2.tgz",
-      "integrity": "sha512-LF4b/NmGvdWEHD2H4MsHD8ny6JpiVNDzrSZr3CsckEgCbAGZbYM4Cqxvi9L+WqDMT+51Ozy7lt2M+d0JLEuBqA==",
+      "version": "8.46.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.46.4.tgz",
+      "integrity": "sha512-tMDbLGXb1wC+McN1M6QeDx7P7c0UWO5z9CXqp7J8E+xGcJuUuevWKxuG8j41FoweS3+L41SkyKKkia16jpX7CA==",
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.46.2",
-        "@typescript-eslint/visitor-keys": "8.46.2"
+        "@typescript-eslint/types": "8.46.4",
+        "@typescript-eslint/visitor-keys": "8.46.4"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5585,9 +5517,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.46.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.2.tgz",
-      "integrity": "sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==",
+      "version": "8.46.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.4.tgz",
+      "integrity": "sha512-+/XqaZPIAk6Cjg7NWgSGe27X4zMGqrFqZ8atJsX3CWxH/jACqWnrWI68h7nHQld0y+k9eTTjb9r+KU4twLoo9A==",
       "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5601,14 +5533,14 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.46.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.46.2.tgz",
-      "integrity": "sha512-HbPM4LbaAAt/DjxXaG9yiS9brOOz6fabal4uvUmaUYe6l3K1phQDMQKBRUrr06BQkxkvIZVVHttqiybM9nJsLA==",
+      "version": "8.46.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.46.4.tgz",
+      "integrity": "sha512-V4QC8h3fdT5Wro6vANk6eojqfbv5bpwHuMsBcJUJkqs2z5XnYhJzyz9Y02eUmF9u3PgXEUiOt4w4KHR3P+z0PQ==",
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.46.2",
-        "@typescript-eslint/typescript-estree": "8.46.2",
-        "@typescript-eslint/utils": "8.46.2",
+        "@typescript-eslint/types": "8.46.4",
+        "@typescript-eslint/typescript-estree": "8.46.4",
+        "@typescript-eslint/utils": "8.46.4",
         "debug": "^4.3.4",
         "ts-api-utils": "^2.1.0"
       },
@@ -5625,9 +5557,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.46.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.2.tgz",
-      "integrity": "sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==",
+      "version": "8.46.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.4.tgz",
+      "integrity": "sha512-USjyxm3gQEePdUwJBFjjGNG18xY9A2grDVGuk7/9AkjIF1L+ZrVnwR5VAU5JXtUnBL/Nwt3H31KlRDaksnM7/w==",
       "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5638,15 +5570,15 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.46.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.2.tgz",
-      "integrity": "sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==",
+      "version": "8.46.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.4.tgz",
+      "integrity": "sha512-7oV2qEOr1d4NWNmpXLR35LvCfOkTNymY9oyW+lUHkmCno7aOmIf/hMaydnJBUTBMRCOGZh8YjkFOc8dadEoNGA==",
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.46.2",
-        "@typescript-eslint/tsconfig-utils": "8.46.2",
-        "@typescript-eslint/types": "8.46.2",
-        "@typescript-eslint/visitor-keys": "8.46.2",
+        "@typescript-eslint/project-service": "8.46.4",
+        "@typescript-eslint/tsconfig-utils": "8.46.4",
+        "@typescript-eslint/types": "8.46.4",
+        "@typescript-eslint/visitor-keys": "8.46.4",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -5666,15 +5598,15 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.46.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.46.2.tgz",
-      "integrity": "sha512-sExxzucx0Tud5tE0XqR0lT0psBQvEpnpiul9XbGUB1QwpWJJAps1O/Z7hJxLGiZLBKMCutjTzDgmd1muEhBnVg==",
+      "version": "8.46.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.46.4.tgz",
+      "integrity": "sha512-AbSv11fklGXV6T28dp2Me04Uw90R2iJ30g2bgLz529Koehrmkbs1r7paFqr1vPCZi7hHwYxYtxfyQMRC8QaVSg==",
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.7.0",
-        "@typescript-eslint/scope-manager": "8.46.2",
-        "@typescript-eslint/types": "8.46.2",
-        "@typescript-eslint/typescript-estree": "8.46.2"
+        "@typescript-eslint/scope-manager": "8.46.4",
+        "@typescript-eslint/types": "8.46.4",
+        "@typescript-eslint/typescript-estree": "8.46.4"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5689,12 +5621,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.46.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.46.2.tgz",
-      "integrity": "sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==",
+      "version": "8.46.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.46.4.tgz",
+      "integrity": "sha512-/++5CYLQqsO9HFGLI7APrxBJYo+5OCMpViuhV8q5/Qa3o5mMrF//eQHks+PXcsAVaLdn817fMuS7zqoXNNZGaw==",
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/types": "8.46.4",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -6119,9 +6051,9 @@
       }
     },
     "node_modules/@vitejs/plugin-vue-jsx/node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.45",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.45.tgz",
-      "integrity": "sha512-Le9ulGCrD8ggInzWw/k2J8QcbPz7eGIOWqfJ2L+1R0Opm7n6J37s2hiDWlh6LJN0Lk9L5sUzMvRHKW7UxBZsQA==",
+      "version": "1.0.0-beta.50",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.50.tgz",
+      "integrity": "sha512-5e76wQiQVeL1ICOZVUg4LSOVYg9jyhGCin+icYozhsUzM+fHE7kddi1bdiE0jwVqTfkjba3jUFbEkoC9WkdvyA==",
       "license": "MIT"
     },
     "node_modules/@volar/language-core": {
@@ -6239,13 +6171,13 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.22.tgz",
-      "integrity": "sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==",
+      "version": "3.5.24",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.24.tgz",
+      "integrity": "sha512-eDl5H57AOpNakGNAkFDH+y7kTqrQpJkZFXhWZQGyx/5Wh7B1uQYvcWkvZi11BDhscPgj8N7XV3oRwiPnx1Vrig==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.4",
-        "@vue/shared": "3.5.22",
+        "@babel/parser": "^7.28.5",
+        "@vue/shared": "3.5.24",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
@@ -6258,28 +6190,28 @@
       "license": "MIT"
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.22.tgz",
-      "integrity": "sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==",
+      "version": "3.5.24",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.24.tgz",
+      "integrity": "sha512-1QHGAvs53gXkWdd3ZMGYuvQFXHW4ksKWPG8HP8/2BscrbZ0brw183q2oNWjMrSWImYLHxHrx1ItBQr50I/q2zw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.22",
-        "@vue/shared": "3.5.22"
+        "@vue/compiler-core": "3.5.24",
+        "@vue/shared": "3.5.24"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.22.tgz",
-      "integrity": "sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==",
+      "version": "3.5.24",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.24.tgz",
+      "integrity": "sha512-8EG5YPRgmTB+YxYBM3VXy8zHD9SWHUJLIGPhDovo3Z8VOgvP+O7UP5vl0J4BBPWYD9vxtBabzW1EuEZ+Cqs14g==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.4",
-        "@vue/compiler-core": "3.5.22",
-        "@vue/compiler-dom": "3.5.22",
-        "@vue/compiler-ssr": "3.5.22",
-        "@vue/shared": "3.5.22",
+        "@babel/parser": "^7.28.5",
+        "@vue/compiler-core": "3.5.24",
+        "@vue/compiler-dom": "3.5.24",
+        "@vue/compiler-ssr": "3.5.24",
+        "@vue/shared": "3.5.24",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.19",
+        "magic-string": "^0.30.21",
         "postcss": "^8.5.6",
         "source-map-js": "^1.2.1"
       }
@@ -6291,36 +6223,66 @@
       "license": "MIT"
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.22.tgz",
-      "integrity": "sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==",
+      "version": "3.5.24",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.24.tgz",
+      "integrity": "sha512-trOvMWNBMQ/odMRHW7Ae1CdfYx+7MuiQu62Jtu36gMLXcaoqKvAyh+P73sYG9ll+6jLB6QPovqoKGGZROzkFFg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.22",
-        "@vue/shared": "3.5.22"
+        "@vue/compiler-dom": "3.5.24",
+        "@vue/shared": "3.5.24"
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "7.7.7",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.7.tgz",
-      "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==",
+      "version": "7.7.8",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.8.tgz",
+      "integrity": "sha512-BtFcAmDbtXGwurWUFf8ogIbgZyR+rcVES1TSNEI8Em80fD8Anu+qTRN1Fc3J6vdRHlVM3fzPV1qIo+B4AiqGzw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-kit": "^7.7.7"
+        "@vue/devtools-kit": "^7.7.8"
       }
     },
-    "node_modules/@vue/devtools-core": {
-      "version": "7.7.7",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.7.7.tgz",
-      "integrity": "sha512-9z9TLbfC+AjAi1PQyWX+OErjIaJmdFlbDHcD+cAMYKY6Bh5VlsAtCeGyRMrXwIlMEQPukvnWt3gZBLwTAIMKzQ==",
+    "node_modules/@vue/devtools-api/node_modules/@vue/devtools-kit": {
+      "version": "7.7.8",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.8.tgz",
+      "integrity": "sha512-4Y8op+AoxOJhB9fpcEF6d5vcJXWKgHxC3B0ytUB8zz15KbP9g9WgVzral05xluxi2fOeAy6t140rdQ943GcLRQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-kit": "^7.7.7",
-        "@vue/devtools-shared": "^7.7.7",
+        "@vue/devtools-shared": "^7.7.8",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
         "mitt": "^3.0.1",
-        "nanoid": "^5.1.0",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-api/node_modules/@vue/devtools-shared": {
+      "version": "7.7.8",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.8.tgz",
+      "integrity": "sha512-XHpO3jC5nOgYr40M9p8Z4mmKfTvUxKyRcUnpBAYg11pE78eaRFBKb0kG5yKLroMuJeeNH9LWmKp2zMU5LUc7CA==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/@vue/devtools-api/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/devtools-core": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-8.0.3.tgz",
+      "integrity": "sha512-gCEQN7aMmeaigEWJQ2Z2o3g7/CMqGTPvNS1U3n/kzpLoAZ1hkAHNgi4ml/POn/9uqGILBk65GGOUdrraHXRj5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^8.0.3",
+        "@vue/devtools-shared": "^8.0.3",
+        "mitt": "^3.0.1",
+        "nanoid": "^5.1.5",
         "pathe": "^2.0.3",
-        "vite-hot-client": "^2.0.4"
+        "vite-hot-client": "^2.1.0"
       },
       "peerDependencies": {
         "vue": "^3.0.0"
@@ -6333,39 +6295,33 @@
       "license": "MIT"
     },
     "node_modules/@vue/devtools-kit": {
-      "version": "7.7.7",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.7.tgz",
-      "integrity": "sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==",
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.0.3.tgz",
+      "integrity": "sha512-UF4YUOVGdfzXLCv5pMg2DxocB8dvXz278fpgEE+nJ/DRALQGAva7sj9ton0VWZ9hmXw+SV8yKMrxP2MpMhq9Wg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-shared": "^7.7.7",
-        "birpc": "^2.3.0",
+        "@vue/devtools-shared": "^8.0.3",
+        "birpc": "^2.6.1",
         "hookable": "^5.5.3",
         "mitt": "^3.0.1",
-        "perfect-debounce": "^1.0.0",
+        "perfect-debounce": "^2.0.0",
         "speakingurl": "^14.0.1",
         "superjson": "^2.2.2"
       }
     },
-    "node_modules/@vue/devtools-kit/node_modules/perfect-debounce": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
-      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
-      "license": "MIT"
-    },
     "node_modules/@vue/devtools-shared": {
-      "version": "7.7.7",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.7.tgz",
-      "integrity": "sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==",
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.0.3.tgz",
+      "integrity": "sha512-s/QNll7TlpbADFZrPVsaUNPCOF8NvQgtgmmB7Tip6pLf/HcOvBTly0lfLQ0Eylu9FQ4OqBhFpLyBgwykiSf8zw==",
       "license": "MIT",
       "dependencies": {
         "rfdc": "^1.4.1"
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.1.2.tgz",
-      "integrity": "sha512-PyFDCqpdfYUT+oMLqcc61oHfJlC6yjhybaefwQjRdkchIihToOEpJ2Wu/Ebq2yrnJdd1EsaAvZaXVAqcxtnDxQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.1.3.tgz",
+      "integrity": "sha512-KpR1F/eGAG9D1RZ0/T6zWJs6dh/pRLfY5WupecyYKJ1fjVmDMgTPw9wXmKv2rBjo4zCJiOSiyB8BDP1OUwpMEA==",
       "license": "MIT",
       "dependencies": {
         "@volar/language-core": "2.4.23",
@@ -6386,53 +6342,53 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.22.tgz",
-      "integrity": "sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==",
+      "version": "3.5.24",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.24.tgz",
+      "integrity": "sha512-BM8kBhtlkkbnyl4q+HiF5R5BL0ycDPfihowulm02q3WYp2vxgPcJuZO866qa/0u3idbMntKEtVNuAUp5bw4teg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.22"
+        "@vue/shared": "3.5.24"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.22.tgz",
-      "integrity": "sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==",
+      "version": "3.5.24",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.24.tgz",
+      "integrity": "sha512-RYP/byyKDgNIqfX/gNb2PB55dJmM97jc9wyF3jK7QUInYKypK2exmZMNwnjueWwGceEkP6NChd3D2ZVEp9undQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.22",
-        "@vue/shared": "3.5.22"
+        "@vue/reactivity": "3.5.24",
+        "@vue/shared": "3.5.24"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.22.tgz",
-      "integrity": "sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==",
+      "version": "3.5.24",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.24.tgz",
+      "integrity": "sha512-Z8ANhr/i0XIluonHVjbUkjvn+CyrxbXRIxR7wn7+X7xlcb7dJsfITZbkVOeJZdP8VZwfrWRsWdShH6pngMxRjw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.22",
-        "@vue/runtime-core": "3.5.22",
-        "@vue/shared": "3.5.22",
+        "@vue/reactivity": "3.5.24",
+        "@vue/runtime-core": "3.5.24",
+        "@vue/shared": "3.5.24",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.22.tgz",
-      "integrity": "sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==",
+      "version": "3.5.24",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.24.tgz",
+      "integrity": "sha512-Yh2j2Y4G/0/4z/xJ1Bad4mxaAk++C2v4kaa8oSYTMJBJ00/ndPuxCnWeot0/7/qafQFLh5pr6xeV6SdMcE/G1w==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.22",
-        "@vue/shared": "3.5.22"
+        "@vue/compiler-ssr": "3.5.24",
+        "@vue/shared": "3.5.24"
       },
       "peerDependencies": {
-        "vue": "3.5.22"
+        "vue": "3.5.24"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.22.tgz",
-      "integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==",
+      "version": "3.5.24",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.24.tgz",
+      "integrity": "sha512-9cwHL2EsJBdi8NY22pngYYWzkTDhld6fAD6jlaeloNGciNSJL6bLpbxVgXl96X00Jtc6YWQv96YA/0sxex/k1A==",
       "license": "MIT"
     },
     "node_modules/@vuetify/loader-shared": {
@@ -6856,9 +6812,9 @@
       }
     },
     "node_modules/alien-signals": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.0.3.tgz",
-      "integrity": "sha512-2JXjom6R7ZwrISpUphLhf4htUq1aKRCennTJ6u9kFfr3sLmC9+I4CxxVi+McoFnIg+p1HnVrfLT/iCt4Dlz//Q==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.1.0.tgz",
+      "integrity": "sha512-yufC6VpSy8tK3I0lO67pjumo5JvDQVQyr38+3OHqe6CHl1t2VZekKZ7EKKZSqk0cRmE7U7tfZbpXiKNzuc+ckg==",
       "license": "MIT"
     },
     "node_modules/ansi-regex": {
@@ -6998,12 +6954,12 @@
       }
     },
     "node_modules/ast-kit": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-2.1.3.tgz",
-      "integrity": "sha512-TH+b3Lv6pUjy/Nu0m6A2JULtdzLpmqF9x1Dhj00ZoEiML8qvVA9j1flkzTKNYgdEhWrjDwtWNpyyCUbfQe514g==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-2.2.0.tgz",
+      "integrity": "sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.4",
+        "@babel/parser": "^7.28.5",
         "pathe": "^2.0.3"
       },
       "engines": {
@@ -7048,9 +7004,9 @@
       "license": "MIT"
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.21",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
-      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "version": "10.4.22",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz",
+      "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==",
       "funding": [
         {
           "type": "opencollective",
@@ -7067,9 +7023,9 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.24.4",
-        "caniuse-lite": "^1.0.30001702",
-        "fraction.js": "^4.3.7",
+        "browserslist": "^4.27.0",
+        "caniuse-lite": "^1.0.30001754",
+        "fraction.js": "^5.3.4",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
@@ -7115,18 +7071,18 @@
       "license": "MIT"
     },
     "node_modules/barcode-detector": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-3.0.6.tgz",
-      "integrity": "sha512-v4xTr6B+FINl/p1RDl38qzIwF+Repfo+k/a/HlKTJKAJpNvACD6v7AH7LSPvfR4AdzXXuwai04huA4TWn02Znw==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-3.0.7.tgz",
+      "integrity": "sha512-91Pu2iuw1CS/P/Uqvbh7/tHGU2gbAr4+qRRegfKa87uonQZpVfVy7Q16HQCCqMhq7DURHdk8s3FVAkqoeBRZ3g==",
       "license": "MIT",
       "dependencies": {
-        "zxing-wasm": "2.2.2"
+        "zxing-wasm": "2.2.3"
       }
     },
     "node_modules/bare-events": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.8.1.tgz",
-      "integrity": "sha512-oxSAxTS1hRfnyit2CL5QpAOS5ixfBjj6ex3yTNvXyY/kE719jQ/IjuESJBK2w5v4wwQRAHGseVJXx9QBYOtFGQ==",
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.8.2.tgz",
+      "integrity": "sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "bare-abort-controller": "*"
@@ -7138,9 +7094,9 @@
       }
     },
     "node_modules/bare-fs": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.5.0.tgz",
-      "integrity": "sha512-GljgCjeupKZJNetTqxKaQArLK10vpmK28or0+RwWjEl5Rk+/xG3wkpmkv+WrcBm3q1BwHKlnhXzR8O37kcvkXQ==",
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.5.1.tgz",
+      "integrity": "sha512-zGUCsm3yv/ePt2PHNbVxjjn0nNB1MkIaR4wOCxJ2ig5pCf5cCVAYJXVhQg/3OhhJV6DB1ts7Hv0oUaElc2TPQg==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
@@ -7205,9 +7161,9 @@
       }
     },
     "node_modules/bare-url": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/bare-url/-/bare-url-2.3.1.tgz",
-      "integrity": "sha512-v2yl0TnaZTdEnelkKtXZGnotiV6qATBlnNuUMrHl6v9Lmmrh9mw9RYyImPU7/4RahumSwQS1k2oKXcRfXcbjJw==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/bare-url/-/bare-url-2.3.2.tgz",
+      "integrity": "sha512-ZMq4gd9ngV5aTMa5p9+UfY0b3skwhHELaDkhEHetMdX0LRkW9kzaym4oo/Eh+Ghm0CCDuMTsRIGM/ytUc1ZYmw==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
@@ -7235,9 +7191,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.20",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.20.tgz",
-      "integrity": "sha512-JMWsdF+O8Orq3EMukbUN1QfbLK9mX2CkUmQBcW2T0s8OmdAUL5LLM/6wFwSrqXzlXB13yhyK9gTKS1rIizOduQ==",
+      "version": "2.8.28",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.28.tgz",
+      "integrity": "sha512-gYjt7OIqdM0PcttNYP2aVrr2G0bMALkBaoehD4BuRGjAOtipg0b6wHg1yNL+s5zSnLZZrGHOw4IrND8CD+3oIQ==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.js"
@@ -7267,9 +7223,9 @@
       }
     },
     "node_modules/birpc": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.6.1.tgz",
-      "integrity": "sha512-LPnFhlDpdSH6FJhJyn4M0kFO7vtQ5iPw24FnG0y21q09xC7e8+1LeR31S1MAIrDAHp4m7aas4bEkTDTvMAtebQ==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.8.0.tgz",
+      "integrity": "sha512-Bz2a4qD/5GRhiHSwj30c/8kC8QGj12nNDwz3D4ErQ4Xhy35dsSDvF+RA/tWpjyU0pdGtSDiEk6B5fBGE1qNVhw==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -7381,9 +7337,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.27.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.27.0.tgz",
-      "integrity": "sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==",
+      "version": "4.28.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz",
+      "integrity": "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -7400,10 +7356,10 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.8.19",
-        "caniuse-lite": "^1.0.30001751",
-        "electron-to-chromium": "^1.5.238",
-        "node-releases": "^2.0.26",
+        "baseline-browser-mapping": "^2.8.25",
+        "caniuse-lite": "^1.0.30001754",
+        "electron-to-chromium": "^1.5.249",
+        "node-releases": "^2.0.27",
         "update-browserslist-db": "^1.1.4"
       },
       "bin": {
@@ -7502,16 +7458,16 @@
       }
     },
     "node_modules/c12": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.1.tgz",
-      "integrity": "sha512-LcWQ01LT9tkoUINHgpIOv3mMs+Abv7oVCrtpMRi1PaapVEpWoMga5WuT7/DqFTu7URP9ftbOmimNw1KNIGh9DQ==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.2.tgz",
+      "integrity": "sha512-QkikB2X5voO1okL3QsES0N690Sn/K9WokXqUsDQsWy5SnYb+psYQFGA10iy1bZHj3fjISKsI67Q90gruvWWM3A==",
       "license": "MIT",
       "dependencies": {
         "chokidar": "^4.0.3",
         "confbox": "^0.2.2",
         "defu": "^6.1.4",
         "dotenv": "^17.2.3",
-        "exsolve": "^1.0.7",
+        "exsolve": "^1.0.8",
         "giget": "^2.0.0",
         "jiti": "^2.6.1",
         "ohash": "^2.0.11",
@@ -7521,7 +7477,7 @@
         "rc9": "^2.1.2"
       },
       "peerDependencies": {
-        "magicast": "^0.3.5"
+        "magicast": "*"
       },
       "peerDependenciesMeta": {
         "magicast": {
@@ -7581,9 +7537,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001751",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001751.tgz",
-      "integrity": "sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==",
+      "version": "1.0.30001754",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz",
+      "integrity": "sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==",
       "funding": [
         {
           "type": "opencollective",
@@ -7780,17 +7736,14 @@
       }
     },
     "node_modules/cliui": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
-      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
       "license": "ISC",
       "dependencies": {
         "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.1",
-        "wrap-ansi": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
       }
     },
     "node_modules/cliui/node_modules/ansi-regex": {
@@ -7835,9 +7788,9 @@
       }
     },
     "node_modules/cliui/node_modules/wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -7845,10 +7798,7 @@
         "strip-ansi": "^6.0.0"
       },
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+        "node": ">=8"
       }
     },
     "node_modules/clone": {
@@ -8027,15 +7977,6 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "license": "MIT"
     },
-    "node_modules/cookie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/cookie-es": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-1.2.2.tgz",
@@ -8057,6 +7998,14 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/copy-paste": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/copy-paste/-/copy-paste-2.2.0.tgz",
+      "integrity": "sha512-jqSL4r9DSeiIvJZStLzY/sMLt9ToTM7RsK237lYOTG+KcbQJHGala3R1TUpa8h1p9adswVgIdV4qGbseVhL4lg==",
+      "dependencies": {
+        "iconv-lite": "^0.4.8"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.46.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.46.0.tgz",
@@ -8215,12 +8164,12 @@
       "optional": true
     },
     "node_modules/cssnano": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.1.1.tgz",
-      "integrity": "sha512-fm4D8ti0dQmFPeF8DXSAA//btEmqCOgAc/9Oa3C1LW94h5usNrJEfrON7b4FkPZgnDEn6OUs5NdxiJZmAtGOpQ==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.1.2.tgz",
+      "integrity": "sha512-HYOPBsNvoiFeR1eghKD5C3ASm64v9YVyJB4Ivnl2gqKoQYvjjN/G0rztvKQq8OxocUtC6sjqY8jwYngIB4AByA==",
       "license": "MIT",
       "dependencies": {
-        "cssnano-preset-default": "^7.0.9",
+        "cssnano-preset-default": "^7.0.10",
         "lilconfig": "^3.1.3"
       },
       "engines": {
@@ -8235,26 +8184,26 @@
       }
     },
     "node_modules/cssnano-preset-default": {
-      "version": "7.0.9",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-7.0.9.tgz",
-      "integrity": "sha512-tCD6AAFgYBOVpMBX41KjbvRh9c2uUjLXRyV7KHSIrwHiq5Z9o0TFfUCoM3TwVrRsRteN3sVXGNvjVNxYzkpTsA==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-7.0.10.tgz",
+      "integrity": "sha512-6ZBjW0Lf1K1Z+0OKUAUpEN62tSXmYChXWi2NAA0afxEVsj9a+MbcB1l5qel6BHJHmULai2fCGRthCeKSFbScpA==",
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.25.1",
+        "browserslist": "^4.27.0",
         "css-declaration-sorter": "^7.2.0",
         "cssnano-utils": "^5.0.1",
         "postcss-calc": "^10.1.1",
-        "postcss-colormin": "^7.0.4",
-        "postcss-convert-values": "^7.0.7",
-        "postcss-discard-comments": "^7.0.4",
+        "postcss-colormin": "^7.0.5",
+        "postcss-convert-values": "^7.0.8",
+        "postcss-discard-comments": "^7.0.5",
         "postcss-discard-duplicates": "^7.0.2",
         "postcss-discard-empty": "^7.0.1",
         "postcss-discard-overridden": "^7.0.1",
         "postcss-merge-longhand": "^7.0.5",
-        "postcss-merge-rules": "^7.0.6",
+        "postcss-merge-rules": "^7.0.7",
         "postcss-minify-font-values": "^7.0.1",
         "postcss-minify-gradients": "^7.0.1",
-        "postcss-minify-params": "^7.0.4",
+        "postcss-minify-params": "^7.0.5",
         "postcss-minify-selectors": "^7.0.5",
         "postcss-normalize-charset": "^7.0.1",
         "postcss-normalize-display-values": "^7.0.1",
@@ -8262,11 +8211,11 @@
         "postcss-normalize-repeat-style": "^7.0.1",
         "postcss-normalize-string": "^7.0.1",
         "postcss-normalize-timing-functions": "^7.0.1",
-        "postcss-normalize-unicode": "^7.0.4",
+        "postcss-normalize-unicode": "^7.0.5",
         "postcss-normalize-url": "^7.0.1",
         "postcss-normalize-whitespace": "^7.0.1",
         "postcss-ordered-values": "^7.0.2",
-        "postcss-reduce-initial": "^7.0.4",
+        "postcss-reduce-initial": "^7.0.5",
         "postcss-reduce-transforms": "^7.0.1",
         "postcss-svgo": "^7.1.0",
         "postcss-unique-selectors": "^7.0.4"
@@ -8330,9 +8279,9 @@
       "license": "MIT"
     },
     "node_modules/dayjs": {
-      "version": "1.11.18",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.18.tgz",
-      "integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==",
+      "version": "1.11.19",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
       "license": "MIT"
     },
     "node_modules/db0": {
@@ -8448,9 +8397,9 @@
       }
     },
     "node_modules/default-browser": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.2.1.tgz",
-      "integrity": "sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.3.0.tgz",
+      "integrity": "sha512-Qq68+VkJlc8tjnPV1i7HtbIn7ohmjZa88qUvHMIK0ZKUXMCuV45cT7cEXALPUmeXCe0q1DWQkQTemHVaLIFSrg==",
       "license": "MIT",
       "dependencies": {
         "bundle-name": "^4.1.0",
@@ -8546,9 +8495,9 @@
       }
     },
     "node_modules/devalue": {
-      "version": "5.4.2",
-      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.4.2.tgz",
-      "integrity": "sha512-MwPZTKEPK2k8Qgfmqrd48ZKVvzSQjgW0lXLxiIBA8dQjtf/6mw6pggHNLcyDKyf+fI6eXxlQwPsfaCMTU5U+Bw==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.5.0.tgz",
+      "integrity": "sha512-69sM5yrHfFLJt0AZ9QqZXGCPfJ7fQjvpln3Rq5+PS03LD32Ost1Q9N+eEnaQwGRIriKkMImXD56ocjQmfjbV3w==",
       "license": "MIT"
     },
     "node_modules/devlop": {
@@ -8686,9 +8635,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.241",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.241.tgz",
-      "integrity": "sha512-ILMvKX/ZV5WIJzzdtuHg8xquk2y0BOGlFOxBVwTpbiXqWIH0hamG45ddU4R3PQ0gYu+xgo0vdHXHli9sHIGb4w==",
+      "version": "1.5.250",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.250.tgz",
+      "integrity": "sha512-/5UMj9IiGDMOFBnN4i7/Ry5onJrAGSbOGo3s9FEKmwobGq6xw832ccET0CE3CkkMBZ8GJSlUIesZofpyurqDXw==",
       "license": "ISC"
     },
     "node_modules/embla-carousel": {
@@ -8932,9 +8881,9 @@
       "license": "MIT"
     },
     "node_modules/esbuild": {
-      "version": "0.25.11",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.11.tgz",
-      "integrity": "sha512-KohQwyzrKTQmhXDW1PjCv3Tyspn9n5GcY2RTDqeORIdIJY8yKIF7sTSopFmn/wpMPW4rdPXI0UE5LJLuq3bx0Q==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -8944,32 +8893,32 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.11",
-        "@esbuild/android-arm": "0.25.11",
-        "@esbuild/android-arm64": "0.25.11",
-        "@esbuild/android-x64": "0.25.11",
-        "@esbuild/darwin-arm64": "0.25.11",
-        "@esbuild/darwin-x64": "0.25.11",
-        "@esbuild/freebsd-arm64": "0.25.11",
-        "@esbuild/freebsd-x64": "0.25.11",
-        "@esbuild/linux-arm": "0.25.11",
-        "@esbuild/linux-arm64": "0.25.11",
-        "@esbuild/linux-ia32": "0.25.11",
-        "@esbuild/linux-loong64": "0.25.11",
-        "@esbuild/linux-mips64el": "0.25.11",
-        "@esbuild/linux-ppc64": "0.25.11",
-        "@esbuild/linux-riscv64": "0.25.11",
-        "@esbuild/linux-s390x": "0.25.11",
-        "@esbuild/linux-x64": "0.25.11",
-        "@esbuild/netbsd-arm64": "0.25.11",
-        "@esbuild/netbsd-x64": "0.25.11",
-        "@esbuild/openbsd-arm64": "0.25.11",
-        "@esbuild/openbsd-x64": "0.25.11",
-        "@esbuild/openharmony-arm64": "0.25.11",
-        "@esbuild/sunos-x64": "0.25.11",
-        "@esbuild/win32-arm64": "0.25.11",
-        "@esbuild/win32-ia32": "0.25.11",
-        "@esbuild/win32-x64": "0.25.11"
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
       }
     },
     "node_modules/escalade": {
@@ -9000,19 +8949,19 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.38.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.38.0.tgz",
-      "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
+      "version": "9.39.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
+      "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
         "@eslint/config-array": "^0.21.1",
-        "@eslint/config-helpers": "^0.4.1",
-        "@eslint/core": "^0.16.0",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.38.0",
-        "@eslint/plugin-kit": "^0.4.0",
+        "@eslint/js": "9.39.1",
+        "@eslint/plugin-kit": "^0.4.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.2",
@@ -9186,9 +9135,9 @@
       }
     },
     "node_modules/eslint-plugin-jsdoc": {
-      "version": "61.1.10",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-61.1.10.tgz",
-      "integrity": "sha512-ACsczYGax1Iu9zRBiG176I66cgL2nRt1TbMgE9TAzxoGKfBD9PjhA//K/JKk3uBk25RsYHj3TqMaAiy913IpEA==",
+      "version": "61.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-61.2.1.tgz",
+      "integrity": "sha512-Htacti3dbkNm4rlp/Bk9lqhv+gi6US9jyN22yaJ42G6wbteiTbNLChQwi25jr/BN+NOzDWhZHvCDdrhX0F8dXQ==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@es-joy/jsdoccomment": "~0.76.0",
@@ -9622,9 +9571,9 @@
       }
     },
     "node_modules/exsolve": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
-      "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
+      "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
       "license": "MIT"
     },
     "node_modules/extend": {
@@ -9646,9 +9595,9 @@
       }
     },
     "node_modules/fake-indexeddb": {
-      "version": "6.2.4",
-      "resolved": "https://registry.npmjs.org/fake-indexeddb/-/fake-indexeddb-6.2.4.tgz",
-      "integrity": "sha512-INKeIKEtSViN4yVtEWEUqbsqmaIy7Ls+MfU0yxQVXg67pOJ/sH1ZxcVrP8XrKULUFohcPD9gnmym+qBfEybACw==",
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/fake-indexeddb/-/fake-indexeddb-6.2.5.tgz",
+      "integrity": "sha512-CGnyrvbhPlWYMngksqrSSUT1BAVP49dZocrHuK0SvtR0D5TMs5wP0o3j7jexDJW01KSadjBp1M/71o/KR3nD1w==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=18"
@@ -9776,21 +9725,6 @@
         }
       }
     },
-    "node_modules/figures": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-6.1.0.tgz",
-      "integrity": "sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==",
-      "license": "MIT",
-      "dependencies": {
-        "is-unicode-supported": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -9936,15 +9870,15 @@
       }
     },
     "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
       "license": "MIT",
       "engines": {
         "node": "*"
       },
       "funding": {
-        "type": "patreon",
+        "type": "github",
         "url": "https://github.com/sponsors/rawify"
       }
     },
@@ -10145,9 +10079,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "16.4.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-16.4.0.tgz",
-      "integrity": "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==",
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.5.0.tgz",
+      "integrity": "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -10548,6 +10482,18 @@
         "node": ">=16.17.0"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -10963,30 +10909,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-unicode-supported": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.1.0.tgz",
-      "integrity": "sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-wayland": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/is-wayland/-/is-wayland-0.1.0.tgz",
-      "integrity": "sha512-QkbMsWkIfkrzOPxenwye0h56iAXirZYHG9eHVPb22fO9y+wPbaX/CHacOWBa/I++4ohTcByimhM1/nyCsH8KNA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-what": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
@@ -11072,9 +10994,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -11675,14 +11597,14 @@
       }
     },
     "node_modules/magicast": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.3.5.tgz",
-      "integrity": "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.1.tgz",
+      "integrity": "sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.25.4",
-        "@babel/types": "^7.25.4",
-        "source-map-js": "^1.2.0"
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "source-map-js": "^1.2.1"
       }
     },
     "node_modules/markdown-table": {
@@ -12879,17 +12801,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/nitropack/node_modules/magicast": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.0.tgz",
-      "integrity": "sha512-D0cxqnb8DpO66P4LkD9ME6a4AhRK6A+xprXksD5vtsJN6G4zbzdI10vDaWCIyj3eLwjNZrQxUYB20FDhKrMEKQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.28.5",
-        "@babel/types": "^7.28.5",
-        "source-map-js": "^1.2.1"
-      }
-    },
     "node_modules/nitropack/node_modules/ohash": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
@@ -12919,9 +12830,9 @@
       }
     },
     "node_modules/node-abi": {
-      "version": "3.79.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.79.0.tgz",
-      "integrity": "sha512-Pr/5KdBQGG8TirdkS0qN3B+f3eo8zTOfZQWAxHoJqopMz2/uvRnG+S4fWu/6AZxKei2CP2p/psdQ5HFC2Ap5BA==",
+      "version": "3.85.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.85.0.tgz",
+      "integrity": "sha512-zsFhmbkAzwhTft6nd3VxcG0cvJsT70rL+BIGHWVq5fi6MwGrHwzqKaxXE+Hl2GmnGItnDKPPkO5/LQqjVkIdFg==",
       "license": "MIT",
       "dependencies": {
         "semver": "^7.3.5"
@@ -13004,9 +12915,9 @@
       "license": "MIT"
     },
     "node_modules/node-releases": {
-      "version": "2.0.26",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.26.tgz",
-      "integrity": "sha512-S2M9YimhSjBSvYnlr5/+umAnPHE++ODwt5e2Ij6FoX45HA/s4vHdkDx1eax2pAPeAOqu4s9b7ppahsyEFdVqQA==",
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
       "license": "MIT"
     },
     "node_modules/nopt": {
@@ -13082,29 +12993,29 @@
       }
     },
     "node_modules/nuxt": {
-      "version": "3.20.0",
-      "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-3.20.0.tgz",
-      "integrity": "sha512-JjrKlbsJyK/OO7eF70Q/ay0tJALSMMeu2t4Ocu1aFJ6qS5aDkhYRAvOstcU+ojTLY4wOvOUrGBmVnfE+hgsfvw==",
+      "version": "3.20.1",
+      "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-3.20.1.tgz",
+      "integrity": "sha512-1d0tBndWdC3DQ/8s6cZqD6jc7DmFG4hIswjK2sYfYNsPzVe3WiM+svuXd9ixUGe6E13StaepJLDubz2GLyU+XQ==",
       "license": "MIT",
       "dependencies": {
-        "@dxup/nuxt": "^0.1.0",
-        "@nuxt/cli": "^3.29.3",
-        "@nuxt/devtools": "^2.6.5",
-        "@nuxt/kit": "3.20.0",
-        "@nuxt/nitro-server": "3.20.0",
-        "@nuxt/schema": "3.20.0",
+        "@dxup/nuxt": "^0.2.1",
+        "@nuxt/cli": "^3.30.0",
+        "@nuxt/devtools": "^3.0.1",
+        "@nuxt/kit": "3.20.1",
+        "@nuxt/nitro-server": "3.20.1",
+        "@nuxt/schema": "3.20.1",
         "@nuxt/telemetry": "^2.6.6",
-        "@nuxt/vite-builder": "3.20.0",
-        "@unhead/vue": "^2.0.14",
-        "@vue/shared": "^3.5.22",
-        "c12": "^3.3.0",
+        "@nuxt/vite-builder": "3.20.1",
+        "@unhead/vue": "^2.0.19",
+        "@vue/shared": "^3.5.23",
+        "c12": "^3.3.1",
         "chokidar": "^4.0.3",
         "compatx": "^0.2.0",
         "consola": "^3.4.2",
         "cookie-es": "^2.0.0",
         "defu": "^6.1.4",
         "destr": "^2.0.5",
-        "devalue": "^5.3.2",
+        "devalue": "^5.4.2",
         "errx": "^0.1.0",
         "escape-string-regexp": "^5.0.0",
         "exsolve": "^1.0.7",
@@ -13115,16 +13026,16 @@
         "jiti": "^2.6.1",
         "klona": "^2.0.6",
         "knitwork": "^1.2.0",
-        "magic-string": "^0.30.19",
+        "magic-string": "^0.30.21",
         "mlly": "^1.8.0",
         "nanotar": "^0.2.0",
         "nypm": "^0.6.2",
-        "ofetch": "^1.4.1",
+        "ofetch": "^1.5.1",
         "ohash": "^2.0.11",
-        "on-change": "^6.0.0",
-        "oxc-minify": "^0.94.0",
-        "oxc-parser": "^0.94.0",
-        "oxc-transform": "^0.94.0",
+        "on-change": "^6.0.1",
+        "oxc-minify": "^0.96.0",
+        "oxc-parser": "^0.96.0",
+        "oxc-transform": "^0.96.0",
         "oxc-walker": "^0.5.2",
         "pathe": "^2.0.3",
         "perfect-debounce": "^2.0.0",
@@ -13132,17 +13043,17 @@
         "radix3": "^1.1.2",
         "scule": "^1.3.0",
         "semver": "^7.7.3",
-        "std-env": "^3.9.0",
+        "std-env": "^3.10.0",
         "tinyglobby": "^0.2.15",
         "ufo": "^1.6.1",
         "ultrahtml": "^1.6.0",
         "uncrypto": "^0.1.3",
         "unctx": "^2.4.1",
-        "unimport": "^5.4.1",
+        "unimport": "^5.5.0",
         "unplugin": "^2.3.10",
-        "unplugin-vue-router": "^0.16.0",
+        "unplugin-vue-router": "^0.16.1",
         "untyped": "^2.0.0",
-        "vue": "^3.5.22",
+        "vue": "^3.5.23",
         "vue-router": "^4.6.3"
       },
       "bin": {
@@ -13180,9 +13091,9 @@
       }
     },
     "node_modules/nuxt-qrcode/node_modules/@nuxt/kit": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.0.tgz",
-      "integrity": "sha512-1yN3LL6RDN5GjkNLPUYCbNRkaYnat6hqejPyfIBBVzrWOrpiQeNMGxQM/IcVdaSuBJXAnu0sUvTKXpXkmPhljg==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.1.tgz",
+      "integrity": "sha512-lLt8KLHyl7IClc3RqRpRikz15eCfTRlAWL9leVzPyg5N87FfKE/7EWgWvpiL/z4Tf3dQCIqQb88TmHE0JTIDvA==",
       "license": "MIT",
       "dependencies": {
         "c12": "^3.3.1",
@@ -13267,16 +13178,16 @@
       "license": "MIT"
     },
     "node_modules/nuxt/node_modules/@nuxt/schema": {
-      "version": "3.20.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.20.0.tgz",
-      "integrity": "sha512-qYs+GyNSZqUwg49mj0QtCp77agZo6LtXcgB7zfe7gTvu1WPoEku2dpbH6DQKoOonx1uaFhf5Tp3e5xuB5NwDVA==",
+      "version": "3.20.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.20.1.tgz",
+      "integrity": "sha512-ll3C+NsHR6fjBV9AvEZwmypokj0ULp5jb+yqbyl9kuUb6gGUYel5DBx1pZwdI2Oa1wpiMycwtYd/rAxhrZ3w4Q==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "^3.5.22",
+        "@vue/shared": "^3.5.23",
         "defu": "^6.1.4",
         "pathe": "^2.0.3",
         "pkg-types": "^2.3.0",
-        "std-env": "^3.9.0"
+        "std-env": "^3.10.0"
       },
       "engines": {
         "node": "^14.18.0 || >=16.10.0"
@@ -13344,9 +13255,9 @@
       "license": "MIT"
     },
     "node_modules/ofetch": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.5.0.tgz",
-      "integrity": "sha512-A7llJ7eZyziA5xq9//3ZurA8OhFqtS99K5/V1sLBJ5j137CM/OAjlbA/TEJXBuOWwOfLqih+oH5U3ran4za1FQ==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.5.1.tgz",
+      "integrity": "sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==",
       "license": "MIT",
       "dependencies": {
         "destr": "^2.0.5",
@@ -13455,9 +13366,9 @@
       }
     },
     "node_modules/oxc-minify": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/oxc-minify/-/oxc-minify-0.94.0.tgz",
-      "integrity": "sha512-7+9iyxwpzfjuiEnSqNJYzTsC1Oud742PPkr/4S1bGY930U4tApdLEK8zmgbT57c1/56cfNOndqZaeQZiAfnJ5A==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/oxc-minify/-/oxc-minify-0.96.0.tgz",
+      "integrity": "sha512-dXeeGrfPJJ4rMdw+NrqiCRtbzVX2ogq//R0Xns08zql2HjV3Zi2SBJ65saqfDaJzd2bcHqvGWH+M44EQCHPAcA==",
       "license": "MIT",
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
@@ -13466,30 +13377,30 @@
         "url": "https://github.com/sponsors/Boshen"
       },
       "optionalDependencies": {
-        "@oxc-minify/binding-android-arm64": "0.94.0",
-        "@oxc-minify/binding-darwin-arm64": "0.94.0",
-        "@oxc-minify/binding-darwin-x64": "0.94.0",
-        "@oxc-minify/binding-freebsd-x64": "0.94.0",
-        "@oxc-minify/binding-linux-arm-gnueabihf": "0.94.0",
-        "@oxc-minify/binding-linux-arm-musleabihf": "0.94.0",
-        "@oxc-minify/binding-linux-arm64-gnu": "0.94.0",
-        "@oxc-minify/binding-linux-arm64-musl": "0.94.0",
-        "@oxc-minify/binding-linux-riscv64-gnu": "0.94.0",
-        "@oxc-minify/binding-linux-s390x-gnu": "0.94.0",
-        "@oxc-minify/binding-linux-x64-gnu": "0.94.0",
-        "@oxc-minify/binding-linux-x64-musl": "0.94.0",
-        "@oxc-minify/binding-wasm32-wasi": "0.94.0",
-        "@oxc-minify/binding-win32-arm64-msvc": "0.94.0",
-        "@oxc-minify/binding-win32-x64-msvc": "0.94.0"
+        "@oxc-minify/binding-android-arm64": "0.96.0",
+        "@oxc-minify/binding-darwin-arm64": "0.96.0",
+        "@oxc-minify/binding-darwin-x64": "0.96.0",
+        "@oxc-minify/binding-freebsd-x64": "0.96.0",
+        "@oxc-minify/binding-linux-arm-gnueabihf": "0.96.0",
+        "@oxc-minify/binding-linux-arm-musleabihf": "0.96.0",
+        "@oxc-minify/binding-linux-arm64-gnu": "0.96.0",
+        "@oxc-minify/binding-linux-arm64-musl": "0.96.0",
+        "@oxc-minify/binding-linux-riscv64-gnu": "0.96.0",
+        "@oxc-minify/binding-linux-s390x-gnu": "0.96.0",
+        "@oxc-minify/binding-linux-x64-gnu": "0.96.0",
+        "@oxc-minify/binding-linux-x64-musl": "0.96.0",
+        "@oxc-minify/binding-wasm32-wasi": "0.96.0",
+        "@oxc-minify/binding-win32-arm64-msvc": "0.96.0",
+        "@oxc-minify/binding-win32-x64-msvc": "0.96.0"
       }
     },
     "node_modules/oxc-parser": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.94.0.tgz",
-      "integrity": "sha512-refms9HQoAlTYIazONYkuX5A3rFGPddbD6Otyc+A0/pj1WTttR8TsZRlMzQxCfhexxfrbinqd7ebkEoYNuCmLQ==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.96.0.tgz",
+      "integrity": "sha512-ucs6niJ5mZlYP3oTl4AK2eD2m7WLoSaljswnSFVYWrXzme5PtM97S7Ve1Tjx+/TKjanmEZuSt1f1qYi6SZvntw==",
       "license": "MIT",
       "dependencies": {
-        "@oxc-project/types": "^0.94.0"
+        "@oxc-project/types": "^0.96.0"
       },
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
@@ -13498,27 +13409,27 @@
         "url": "https://github.com/sponsors/Boshen"
       },
       "optionalDependencies": {
-        "@oxc-parser/binding-android-arm64": "0.94.0",
-        "@oxc-parser/binding-darwin-arm64": "0.94.0",
-        "@oxc-parser/binding-darwin-x64": "0.94.0",
-        "@oxc-parser/binding-freebsd-x64": "0.94.0",
-        "@oxc-parser/binding-linux-arm-gnueabihf": "0.94.0",
-        "@oxc-parser/binding-linux-arm-musleabihf": "0.94.0",
-        "@oxc-parser/binding-linux-arm64-gnu": "0.94.0",
-        "@oxc-parser/binding-linux-arm64-musl": "0.94.0",
-        "@oxc-parser/binding-linux-riscv64-gnu": "0.94.0",
-        "@oxc-parser/binding-linux-s390x-gnu": "0.94.0",
-        "@oxc-parser/binding-linux-x64-gnu": "0.94.0",
-        "@oxc-parser/binding-linux-x64-musl": "0.94.0",
-        "@oxc-parser/binding-wasm32-wasi": "0.94.0",
-        "@oxc-parser/binding-win32-arm64-msvc": "0.94.0",
-        "@oxc-parser/binding-win32-x64-msvc": "0.94.0"
+        "@oxc-parser/binding-android-arm64": "0.96.0",
+        "@oxc-parser/binding-darwin-arm64": "0.96.0",
+        "@oxc-parser/binding-darwin-x64": "0.96.0",
+        "@oxc-parser/binding-freebsd-x64": "0.96.0",
+        "@oxc-parser/binding-linux-arm-gnueabihf": "0.96.0",
+        "@oxc-parser/binding-linux-arm-musleabihf": "0.96.0",
+        "@oxc-parser/binding-linux-arm64-gnu": "0.96.0",
+        "@oxc-parser/binding-linux-arm64-musl": "0.96.0",
+        "@oxc-parser/binding-linux-riscv64-gnu": "0.96.0",
+        "@oxc-parser/binding-linux-s390x-gnu": "0.96.0",
+        "@oxc-parser/binding-linux-x64-gnu": "0.96.0",
+        "@oxc-parser/binding-linux-x64-musl": "0.96.0",
+        "@oxc-parser/binding-wasm32-wasi": "0.96.0",
+        "@oxc-parser/binding-win32-arm64-msvc": "0.96.0",
+        "@oxc-parser/binding-win32-x64-msvc": "0.96.0"
       }
     },
     "node_modules/oxc-transform": {
-      "version": "0.94.0",
-      "resolved": "https://registry.npmjs.org/oxc-transform/-/oxc-transform-0.94.0.tgz",
-      "integrity": "sha512-nHFFyPVWNNe7WLsAiQ6iwfsuTW/1esT+BJg+9rlvcSa0mfcZTpNo3TlBfj9IerLdDmYHJnSYsx8jjFZhoGfZ1w==",
+      "version": "0.96.0",
+      "resolved": "https://registry.npmjs.org/oxc-transform/-/oxc-transform-0.96.0.tgz",
+      "integrity": "sha512-dQPNIF+gHpSkmC0+Vg9IktNyhcn28Y8R3eTLyzn52UNymkasLicl3sFAtz7oEVuFmCpgGjaUTKkwk+jW2cHpDQ==",
       "license": "MIT",
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
@@ -13527,21 +13438,21 @@
         "url": "https://github.com/sponsors/Boshen"
       },
       "optionalDependencies": {
-        "@oxc-transform/binding-android-arm64": "0.94.0",
-        "@oxc-transform/binding-darwin-arm64": "0.94.0",
-        "@oxc-transform/binding-darwin-x64": "0.94.0",
-        "@oxc-transform/binding-freebsd-x64": "0.94.0",
-        "@oxc-transform/binding-linux-arm-gnueabihf": "0.94.0",
-        "@oxc-transform/binding-linux-arm-musleabihf": "0.94.0",
-        "@oxc-transform/binding-linux-arm64-gnu": "0.94.0",
-        "@oxc-transform/binding-linux-arm64-musl": "0.94.0",
-        "@oxc-transform/binding-linux-riscv64-gnu": "0.94.0",
-        "@oxc-transform/binding-linux-s390x-gnu": "0.94.0",
-        "@oxc-transform/binding-linux-x64-gnu": "0.94.0",
-        "@oxc-transform/binding-linux-x64-musl": "0.94.0",
-        "@oxc-transform/binding-wasm32-wasi": "0.94.0",
-        "@oxc-transform/binding-win32-arm64-msvc": "0.94.0",
-        "@oxc-transform/binding-win32-x64-msvc": "0.94.0"
+        "@oxc-transform/binding-android-arm64": "0.96.0",
+        "@oxc-transform/binding-darwin-arm64": "0.96.0",
+        "@oxc-transform/binding-darwin-x64": "0.96.0",
+        "@oxc-transform/binding-freebsd-x64": "0.96.0",
+        "@oxc-transform/binding-linux-arm-gnueabihf": "0.96.0",
+        "@oxc-transform/binding-linux-arm-musleabihf": "0.96.0",
+        "@oxc-transform/binding-linux-arm64-gnu": "0.96.0",
+        "@oxc-transform/binding-linux-arm64-musl": "0.96.0",
+        "@oxc-transform/binding-linux-riscv64-gnu": "0.96.0",
+        "@oxc-transform/binding-linux-s390x-gnu": "0.96.0",
+        "@oxc-transform/binding-linux-x64-gnu": "0.96.0",
+        "@oxc-transform/binding-linux-x64-musl": "0.96.0",
+        "@oxc-transform/binding-wasm32-wasi": "0.96.0",
+        "@oxc-transform/binding-win32-arm64-msvc": "0.96.0",
+        "@oxc-transform/binding-win32-x64-msvc": "0.96.0"
       }
     },
     "node_modules/oxc-walker": {
@@ -13668,18 +13579,6 @@
         "parse-statements": "1.0.11"
       }
     },
-    "node_modules/parse-ms": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz",
-      "integrity": "sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/parse-path": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/parse-path/-/parse-path-7.1.0.tgz",
@@ -13836,19 +13735,19 @@
       }
     },
     "node_modules/pinia": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.3.tgz",
-      "integrity": "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-api": "^7.7.2"
+        "@vue/devtools-api": "^7.7.7"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
       },
       "peerDependencies": {
-        "typescript": ">=4.4.4",
-        "vue": "^2.7.0 || ^3.5.11"
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -13949,12 +13848,12 @@
       }
     },
     "node_modules/postcss-colormin": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-7.0.4.tgz",
-      "integrity": "sha512-ziQuVzQZBROpKpfeDwmrG+Vvlr0YWmY/ZAk99XD+mGEBuEojoFekL41NCsdhyNUtZI7DPOoIWIR7vQQK9xwluw==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-7.0.5.tgz",
+      "integrity": "sha512-ekIBP/nwzRWhEMmIxHHbXHcMdzd1HIUzBECaj5KEdLz9DVP2HzT065sEhvOx1dkLjYW7jyD0CngThx6bpFi2fA==",
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.25.1",
+        "browserslist": "^4.27.0",
         "caniuse-api": "^3.0.0",
         "colord": "^2.9.3",
         "postcss-value-parser": "^4.2.0"
@@ -13967,12 +13866,12 @@
       }
     },
     "node_modules/postcss-convert-values": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-7.0.7.tgz",
-      "integrity": "sha512-HR9DZLN04Xbe6xugRH6lS4ZQH2zm/bFh/ZyRkpedZozhvh+awAfbA0P36InO4fZfDhvYfNJeNvlTf1sjwGbw/A==",
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-7.0.8.tgz",
+      "integrity": "sha512-+XNKuPfkHTCEo499VzLMYn94TiL3r9YqRE3Ty+jP7UX4qjewUONey1t7CG21lrlTLN07GtGM8MqFVp86D4uKJg==",
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.25.1",
+        "browserslist": "^4.27.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
@@ -13983,9 +13882,9 @@
       }
     },
     "node_modules/postcss-discard-comments": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-7.0.4.tgz",
-      "integrity": "sha512-6tCUoql/ipWwKtVP/xYiFf1U9QgJ0PUvxN7pTcsQ8Ns3Fnwq1pU5D5s1MhT/XySeLq6GXNvn37U46Ded0TckWg==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-7.0.5.tgz",
+      "integrity": "sha512-IR2Eja8WfYgN5n32vEGSctVQ1+JARfu4UH8M7bgGh1bC+xI/obsPJXaBpQF7MAByvgwZinhpHpdrmXtvVVlKcQ==",
       "license": "MIT",
       "dependencies": {
         "postcss-selector-parser": "^7.1.0"
@@ -14063,12 +13962,12 @@
       }
     },
     "node_modules/postcss-merge-rules": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-7.0.6.tgz",
-      "integrity": "sha512-2jIPT4Tzs8K87tvgCpSukRQ2jjd+hH6Bb8rEEOUDmmhOeTcqDg5fEFK8uKIu+Pvc3//sm3Uu6FRqfyv7YF7+BQ==",
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-7.0.7.tgz",
+      "integrity": "sha512-njWJrd/Ms6XViwowaaCc+/vqhPG3SmXn725AGrnl+BgTuRPEacjiLEaGq16J6XirMJbtKkTwnt67SS+e2WGoew==",
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.25.1",
+        "browserslist": "^4.27.0",
         "caniuse-api": "^3.0.0",
         "cssnano-utils": "^5.0.1",
         "postcss-selector-parser": "^7.1.0"
@@ -14126,12 +14025,12 @@
       }
     },
     "node_modules/postcss-minify-params": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-7.0.4.tgz",
-      "integrity": "sha512-3OqqUddfH8c2e7M35W6zIwv7jssM/3miF9cbCSb1iJiWvtguQjlxZGIHK9JRmc8XAKmE2PFGtHSM7g/VcW97sw==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-7.0.5.tgz",
+      "integrity": "sha512-FGK9ky02h6Ighn3UihsyeAH5XmLEE2MSGH5Tc4tXMFtEDx7B+zTG6hD/+/cT+fbF7PbYojsmmWjyTwFwW1JKQQ==",
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.25.1",
+        "browserslist": "^4.27.0",
         "cssnano-utils": "^5.0.1",
         "postcss-value-parser": "^4.2.0"
       },
@@ -14259,12 +14158,12 @@
       }
     },
     "node_modules/postcss-normalize-unicode": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-7.0.4.tgz",
-      "integrity": "sha512-LvIURTi1sQoZqj8mEIE8R15yvM+OhbR1avynMtI9bUzj5gGKR/gfZFd8O7VMj0QgJaIFzxDwxGl/ASMYAkqO8g==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-7.0.5.tgz",
+      "integrity": "sha512-X6BBwiRxVaFHrb2WyBMddIeB5HBjJcAaUHyhLrM2FsxSq5TFqcHSsK7Zu1otag+o0ZphQGJewGH1tAyrD0zX1Q==",
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.25.1",
+        "browserslist": "^4.27.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
@@ -14321,12 +14220,12 @@
       }
     },
     "node_modules/postcss-reduce-initial": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-7.0.4.tgz",
-      "integrity": "sha512-rdIC9IlMBn7zJo6puim58Xd++0HdbvHeHaPgXsimMfG1ijC5A9ULvNLSE0rUKVJOvNMcwewW4Ga21ngyJjY/+Q==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-7.0.5.tgz",
+      "integrity": "sha512-RHagHLidG8hTZcnr4FpyMB2jtgd/OcyAazjMhoy5qmWJOx1uxKh4ntk0Pb46ajKM0rkf32lRH4C8c9qQiPR6IA==",
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.25.1",
+        "browserslist": "^4.27.0",
         "caniuse-api": "^3.0.0"
       },
       "engines": {
@@ -14513,21 +14412,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/pretty-ms": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.3.0.tgz",
-      "integrity": "sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==",
-      "license": "MIT",
-      "dependencies": {
-        "parse-ms": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -14617,174 +14501,6 @@
         "vue": "^3.0.0"
       }
     },
-    "node_modules/qrcode/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/cliui": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^6.2.0"
-      }
-    },
-    "node_modules/qrcode/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT"
-    },
-    "node_modules/qrcode/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "license": "MIT",
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "license": "MIT",
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "license": "MIT",
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/qrcode/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "license": "MIT",
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/wrap-ansi": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/y18n": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-      "license": "ISC"
-    },
-    "node_modules/qrcode/node_modules/yargs": {
-      "version": "15.4.1",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
-      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
-      "license": "MIT",
-      "dependencies": {
-        "cliui": "^6.0.0",
-        "decamelize": "^1.2.0",
-        "find-up": "^4.1.0",
-        "get-caller-file": "^2.0.1",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^4.2.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^18.1.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/yargs-parser": {
-      "version": "18.1.3",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-      "license": "ISC",
-      "dependencies": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/quansync": {
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
@@ -15210,9 +14926,9 @@
       }
     },
     "node_modules/remark-mdc": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/remark-mdc/-/remark-mdc-3.7.0.tgz",
-      "integrity": "sha512-6XmnEYc4u3lgBf79M6I73nmKhwJCXn5J53BkzIplqjUK/29GubdpYBCF+oH2WQFvNy/70wuf365xwOSUxt397g==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/remark-mdc/-/remark-mdc-3.8.1.tgz",
+      "integrity": "sha512-TGFY61OhgziAITAomenbw4THQvEHC7MxZI1kO1YL/VuWQTHZ0RG20G6GGATIFeGnq65IUe7dngiQVcVIeFdB/g==",
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.4",
@@ -15231,7 +14947,7 @@
         "stringify-entities": "^4.0.4",
         "unified": "^11.0.5",
         "unist-util-visit": "^5.0.0",
-        "unist-util-visit-parents": "^6.0.1",
+        "unist-util-visit-parents": "^6.0.2",
         "yaml": "^2.8.1"
       }
     },
@@ -15371,9 +15087,9 @@
       "license": "MIT"
     },
     "node_modules/rollup": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.5.tgz",
-      "integrity": "sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==",
+      "version": "4.53.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.2.tgz",
+      "integrity": "sha512-MHngMYwGJVi6Fmnk6ISmnk7JAHRNF0UkuucA0CUW3N3a4KnONPEZz+vUanQP/ZC/iY1Qkf3bwPWzyY84wEks1g==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -15386,28 +15102,28 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.52.5",
-        "@rollup/rollup-android-arm64": "4.52.5",
-        "@rollup/rollup-darwin-arm64": "4.52.5",
-        "@rollup/rollup-darwin-x64": "4.52.5",
-        "@rollup/rollup-freebsd-arm64": "4.52.5",
-        "@rollup/rollup-freebsd-x64": "4.52.5",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.52.5",
-        "@rollup/rollup-linux-arm-musleabihf": "4.52.5",
-        "@rollup/rollup-linux-arm64-gnu": "4.52.5",
-        "@rollup/rollup-linux-arm64-musl": "4.52.5",
-        "@rollup/rollup-linux-loong64-gnu": "4.52.5",
-        "@rollup/rollup-linux-ppc64-gnu": "4.52.5",
-        "@rollup/rollup-linux-riscv64-gnu": "4.52.5",
-        "@rollup/rollup-linux-riscv64-musl": "4.52.5",
-        "@rollup/rollup-linux-s390x-gnu": "4.52.5",
-        "@rollup/rollup-linux-x64-gnu": "4.52.5",
-        "@rollup/rollup-linux-x64-musl": "4.52.5",
-        "@rollup/rollup-openharmony-arm64": "4.52.5",
-        "@rollup/rollup-win32-arm64-msvc": "4.52.5",
-        "@rollup/rollup-win32-ia32-msvc": "4.52.5",
-        "@rollup/rollup-win32-x64-gnu": "4.52.5",
-        "@rollup/rollup-win32-x64-msvc": "4.52.5",
+        "@rollup/rollup-android-arm-eabi": "4.53.2",
+        "@rollup/rollup-android-arm64": "4.53.2",
+        "@rollup/rollup-darwin-arm64": "4.53.2",
+        "@rollup/rollup-darwin-x64": "4.53.2",
+        "@rollup/rollup-freebsd-arm64": "4.53.2",
+        "@rollup/rollup-freebsd-x64": "4.53.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.53.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.53.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.53.2",
+        "@rollup/rollup-linux-arm64-musl": "4.53.2",
+        "@rollup/rollup-linux-loong64-gnu": "4.53.2",
+        "@rollup/rollup-linux-ppc64-gnu": "4.53.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.53.2",
+        "@rollup/rollup-linux-riscv64-musl": "4.53.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.53.2",
+        "@rollup/rollup-linux-x64-gnu": "4.53.2",
+        "@rollup/rollup-linux-x64-musl": "4.53.2",
+        "@rollup/rollup-openharmony-arm64": "4.53.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.53.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.53.2",
+        "@rollup/rollup-win32-x64-gnu": "4.53.2",
+        "@rollup/rollup-win32-x64-msvc": "4.53.2",
         "fsevents": "~2.3.2"
       }
     },
@@ -15441,6 +15157,29 @@
         }
       }
     },
+    "node_modules/rollup-plugin-visualizer/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/rollup-plugin-visualizer/node_modules/define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -15450,6 +15189,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/rollup-plugin-visualizer/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/rollup-plugin-visualizer/node_modules/is-docker": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -15494,6 +15239,85 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/rollup-plugin-visualizer/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/run-applescript": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
@@ -15559,10 +15383,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
     "node_modules/sass": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.3.tgz",
-      "integrity": "sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==",
+      "version": "1.94.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.0.tgz",
+      "integrity": "sha512-Dqh7SiYcaFtdv5Wvku6QgS5IGPm281L+ZtVD1U2FJa7Q0EFRlq8Z3sjYtz6gYObsYThUOz9ArwFqPZx+1azILQ==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -15581,9 +15411,9 @@
       }
     },
     "node_modules/sass-embedded": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.93.2.tgz",
-      "integrity": "sha512-FvQdkn2dZ8DGiLgi0Uf4zsj7r/BsiLImNa5QJ10eZalY6NfZyjrmWGFcuCN5jNwlDlXFJnftauv+UtvBKLvepQ==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.93.3.tgz",
+      "integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -15603,30 +15433,30 @@
         "node": ">=16.0.0"
       },
       "optionalDependencies": {
-        "sass-embedded-all-unknown": "1.93.2",
-        "sass-embedded-android-arm": "1.93.2",
-        "sass-embedded-android-arm64": "1.93.2",
-        "sass-embedded-android-riscv64": "1.93.2",
-        "sass-embedded-android-x64": "1.93.2",
-        "sass-embedded-darwin-arm64": "1.93.2",
-        "sass-embedded-darwin-x64": "1.93.2",
-        "sass-embedded-linux-arm": "1.93.2",
-        "sass-embedded-linux-arm64": "1.93.2",
-        "sass-embedded-linux-musl-arm": "1.93.2",
-        "sass-embedded-linux-musl-arm64": "1.93.2",
-        "sass-embedded-linux-musl-riscv64": "1.93.2",
-        "sass-embedded-linux-musl-x64": "1.93.2",
-        "sass-embedded-linux-riscv64": "1.93.2",
-        "sass-embedded-linux-x64": "1.93.2",
-        "sass-embedded-unknown-all": "1.93.2",
-        "sass-embedded-win32-arm64": "1.93.2",
-        "sass-embedded-win32-x64": "1.93.2"
+        "sass-embedded-all-unknown": "1.93.3",
+        "sass-embedded-android-arm": "1.93.3",
+        "sass-embedded-android-arm64": "1.93.3",
+        "sass-embedded-android-riscv64": "1.93.3",
+        "sass-embedded-android-x64": "1.93.3",
+        "sass-embedded-darwin-arm64": "1.93.3",
+        "sass-embedded-darwin-x64": "1.93.3",
+        "sass-embedded-linux-arm": "1.93.3",
+        "sass-embedded-linux-arm64": "1.93.3",
+        "sass-embedded-linux-musl-arm": "1.93.3",
+        "sass-embedded-linux-musl-arm64": "1.93.3",
+        "sass-embedded-linux-musl-riscv64": "1.93.3",
+        "sass-embedded-linux-musl-x64": "1.93.3",
+        "sass-embedded-linux-riscv64": "1.93.3",
+        "sass-embedded-linux-x64": "1.93.3",
+        "sass-embedded-unknown-all": "1.93.3",
+        "sass-embedded-win32-arm64": "1.93.3",
+        "sass-embedded-win32-x64": "1.93.3"
       }
     },
     "node_modules/sass-embedded-all-unknown": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.93.2.tgz",
-      "integrity": "sha512-GdEuPXIzmhRS5J7UKAwEvtk8YyHQuFZRcpnEnkA3rwRUI27kwjyXkNeIj38XjUQ3DzrfMe8HcKFaqWGHvblS7Q==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.93.3.tgz",
+      "integrity": "sha512-3okGgnE41eg+CPLtAPletu6nQ4N0ij7AeW+Sl5Km4j29XcmqZQeFwYjHe1AlKTEgLi/UAONk1O8i8/lupeKMbw==",
       "cpu": [
         "!arm",
         "!arm64",
@@ -15636,13 +15466,13 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "sass": "1.93.2"
+        "sass": "1.93.3"
       }
     },
     "node_modules/sass-embedded-all-unknown/node_modules/sass": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz",
-      "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.3.tgz",
+      "integrity": "sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -15661,9 +15491,9 @@
       }
     },
     "node_modules/sass-embedded-android-arm": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.93.2.tgz",
-      "integrity": "sha512-I8bpO8meZNo5FvFx5FIiE7DGPVOYft0WjuwcCCdeJ6duwfkl6tZdatex1GrSigvTsuz9L0m4ngDcX/Tj/8yMow==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.93.3.tgz",
+      "integrity": "sha512-8xOw9bywfOD6Wv24BgCmgjkk6tMrsOTTHcb28KDxeJtFtoxiUyMbxo0vChpPAfp2Hyg2tFFKS60s0s4JYk+Raw==",
       "cpu": [
         "arm"
       ],
@@ -15677,9 +15507,9 @@
       }
     },
     "node_modules/sass-embedded-android-arm64": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.93.2.tgz",
-      "integrity": "sha512-346f4iVGAPGcNP6V6IOOFkN5qnArAoXNTPr5eA/rmNpeGwomdb7kJyQ717r9rbJXxOG8OAAUado6J0qLsjnjXQ==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.93.3.tgz",
+      "integrity": "sha512-uqUl3Kt1IqdGVAcAdbmC+NwuUJy8tM+2ZnB7/zrt6WxWVShVCRdFnWR9LT8HJr7eJN7AU8kSXxaVX/gedanPsg==",
       "cpu": [
         "arm64"
       ],
@@ -15693,9 +15523,9 @@
       }
     },
     "node_modules/sass-embedded-android-riscv64": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.93.2.tgz",
-      "integrity": "sha512-hSMW1s4yJf5guT9mrdkumluqrwh7BjbZ4MbBW9tmi1DRDdlw1Wh9Oy1HnnmOG8x9XcI1qkojtPL6LUuEJmsiDg==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.93.3.tgz",
+      "integrity": "sha512-2jNJDmo+3qLocjWqYbXiBDnfgwrUeZgZFHJIwAefU7Fn66Ot7rsXl+XPwlokaCbTpj7eMFIqsRAZ/uDueXNCJg==",
       "cpu": [
         "riscv64"
       ],
@@ -15709,9 +15539,9 @@
       }
     },
     "node_modules/sass-embedded-android-x64": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.93.2.tgz",
-      "integrity": "sha512-JqktiHZduvn+ldGBosE40ALgQ//tGCVNAObgcQ6UIZznEJbsHegqStqhRo8UW3x2cgOO2XYJcrInH6cc7wdKbw==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.93.3.tgz",
+      "integrity": "sha512-y0RoAU6ZenQFcjM9PjQd3cRqRTjqwSbtWLL/p68y2oFyh0QGN0+LQ826fc0ZvU/AbqCsAizkqjzOn6cRZJxTTQ==",
       "cpu": [
         "x64"
       ],
@@ -15725,9 +15555,9 @@
       }
     },
     "node_modules/sass-embedded-darwin-arm64": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.93.2.tgz",
-      "integrity": "sha512-qI1X16qKNeBJp+M/5BNW7v/JHCDYWr1/mdoJ7+UMHmP0b5AVudIZtimtK0hnjrLnBECURifd6IkulybR+h+4UA==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.93.3.tgz",
+      "integrity": "sha512-7zb/hpdMOdKteK17BOyyypemglVURd1Hdz6QGsggy60aUFfptTLQftLRg8r/xh1RbQAUKWFbYTNaM47J9yPxYg==",
       "cpu": [
         "arm64"
       ],
@@ -15741,9 +15571,9 @@
       }
     },
     "node_modules/sass-embedded-darwin-x64": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.93.2.tgz",
-      "integrity": "sha512-4KeAvlkQ0m0enKUnDGQJZwpovYw99iiMb8CTZRSsQm8Eh7halbJZVmx67f4heFY/zISgVOCcxNg19GrM5NTwtA==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.93.3.tgz",
+      "integrity": "sha512-Ek1Vp8ZDQEe327Lz0b7h3hjvWH3u9XjJiQzveq74RPpJQ2q6d9LfWpjiRRohM4qK6o4XOHw1X10OMWPXJtdtWg==",
       "cpu": [
         "x64"
       ],
@@ -15757,9 +15587,9 @@
       }
     },
     "node_modules/sass-embedded-linux-arm": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.93.2.tgz",
-      "integrity": "sha512-N3+D/ToHtzwLDO+lSH05Wo6/KRxFBPnbjVHASOlHzqJnK+g5cqex7IFAp6ozzlRStySk61Rp6d+YGrqZ6/P0PA==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.93.3.tgz",
+      "integrity": "sha512-yeiv2y+dp8B4wNpd3+JsHYD0mvpXSfov7IGyQ1tMIR40qv+ROkRqYiqQvAOXf76Qwh4Y9OaYZtLpnsPjfeq6mA==",
       "cpu": [
         "arm"
       ],
@@ -15773,9 +15603,9 @@
       }
     },
     "node_modules/sass-embedded-linux-arm64": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.93.2.tgz",
-      "integrity": "sha512-9ftX6nd5CsShJqJ2WRg+ptaYvUW+spqZfJ88FbcKQBNFQm6L87luj3UI1rB6cP5EWrLwHA754OKxRJyzWiaN6g==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.93.3.tgz",
+      "integrity": "sha512-RBrHWgfd8Dd8w4fbmdRVXRrhh8oBAPyeWDTKAWw8ZEmuXfVl4ytjDuyxaVilh6rR1xTRTNpbaA/YWApBlLrrNw==",
       "cpu": [
         "arm64"
       ],
@@ -15789,9 +15619,9 @@
       }
     },
     "node_modules/sass-embedded-linux-musl-arm": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.93.2.tgz",
-      "integrity": "sha512-XBTvx66yRenvEsp3VaJCb3HQSyqCsUh7R+pbxcN5TuzueybZi0LXvn9zneksdXcmjACMlMpIVXi6LyHPQkYc8A==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.93.3.tgz",
+      "integrity": "sha512-fU0fwAwbp7sBE3h5DVU5UPzvaLg7a4yONfFWkkcCp6ZrOiPuGRHXXYriWQ0TUnWy4wE+svsVuWhwWgvlb/tkKg==",
       "cpu": [
         "arm"
       ],
@@ -15805,9 +15635,9 @@
       }
     },
     "node_modules/sass-embedded-linux-musl-arm64": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.93.2.tgz",
-      "integrity": "sha512-+3EHuDPkMiAX5kytsjEC1bKZCawB9J6pm2eBIzzLMPWbf5xdx++vO1DpT7hD4bm4ZGn0eVHgSOKIfP6CVz6tVg==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.93.3.tgz",
+      "integrity": "sha512-PS829l+eUng+9W4PFclXGb4uA2+965NHV3/Sa5U7qTywjeeUUYTZg70dJHSqvhrBEfCc2XJABeW3adLJbyQYkw==",
       "cpu": [
         "arm64"
       ],
@@ -15821,9 +15651,9 @@
       }
     },
     "node_modules/sass-embedded-linux-musl-riscv64": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.93.2.tgz",
-      "integrity": "sha512-0sB5kmVZDKTYzmCSlTUnjh6mzOhzmQiW/NNI5g8JS4JiHw2sDNTvt1dsFTuqFkUHyEOY3ESTsfHHBQV8Ip4bEA==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.93.3.tgz",
+      "integrity": "sha512-cK1oBY+FWQquaIGEeQ5H74KTO8cWsSWwXb/WaildOO9U6wmUypTgUYKQ0o5o/29nZbWWlM1PHuwVYTSnT23Jjg==",
       "cpu": [
         "riscv64"
       ],
@@ -15837,9 +15667,9 @@
       }
     },
     "node_modules/sass-embedded-linux-musl-x64": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.93.2.tgz",
-      "integrity": "sha512-t3ejQ+1LEVuHy7JHBI2tWHhoMfhedUNDjGJR2FKaLgrtJntGnyD1RyX0xb3nuqL/UXiEAtmTmZY+Uh3SLUe1Hg==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.93.3.tgz",
+      "integrity": "sha512-A7wkrsHu2/I4Zpa0NMuPGkWDVV7QGGytxGyUq3opSXgAexHo/vBPlGoDXoRlSdex0cV+aTMRPjoGIfdmNlHwyg==",
       "cpu": [
         "x64"
       ],
@@ -15853,9 +15683,9 @@
       }
     },
     "node_modules/sass-embedded-linux-riscv64": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.93.2.tgz",
-      "integrity": "sha512-e7AndEwAbFtXaLy6on4BfNGTr3wtGZQmypUgYpSNVcYDO+CWxatKVY4cxbehMPhxG9g5ru+eaMfynvhZt7fLaA==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.93.3.tgz",
+      "integrity": "sha512-vWkW1+HTF5qcaHa6hO80gx/QfB6GGjJUP0xLbnAoY4pwEnw5ulGv6RM8qYr8IDhWfVt/KH+lhJ2ZFxnJareisQ==",
       "cpu": [
         "riscv64"
       ],
@@ -15869,9 +15699,9 @@
       }
     },
     "node_modules/sass-embedded-linux-x64": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.93.2.tgz",
-      "integrity": "sha512-U3EIUZQL11DU0xDDHXexd4PYPHQaSQa2hzc4EzmhHqrAj+TyfYO94htjWOd+DdTPtSwmLp+9cTWwPZBODzC96w==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.93.3.tgz",
+      "integrity": "sha512-k6uFxs+e5jSuk1Y0niCwuq42F9ZC5UEP7P+RIOurIm8w/5QFa0+YqeW+BPWEW5M1FqVOsNZH3qGn4ahqvAEjPA==",
       "cpu": [
         "x64"
       ],
@@ -15885,9 +15715,9 @@
       }
     },
     "node_modules/sass-embedded-unknown-all": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.93.2.tgz",
-      "integrity": "sha512-7VnaOmyewcXohiuoFagJ3SK5ddP9yXpU0rzz+pZQmS1/+5O6vzyFCUoEt3HDRaLctH4GT3nUGoK1jg0ae62IfQ==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.93.3.tgz",
+      "integrity": "sha512-o5wj2rLpXH0C+GJKt/VpWp6AnMsCCbfFmnMAttcrsa+U3yrs/guhZ3x55KAqqUsE8F47e3frbsDL+1OuQM5DAA==",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -15897,13 +15727,13 @@
         "!win32"
       ],
       "dependencies": {
-        "sass": "1.93.2"
+        "sass": "1.93.3"
       }
     },
     "node_modules/sass-embedded-unknown-all/node_modules/sass": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz",
-      "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.3.tgz",
+      "integrity": "sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -15922,9 +15752,9 @@
       }
     },
     "node_modules/sass-embedded-win32-arm64": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.93.2.tgz",
-      "integrity": "sha512-Y90DZDbQvtv4Bt0GTXKlcT9pn4pz8AObEjFF8eyul+/boXwyptPZ/A1EyziAeNaIEIfxyy87z78PUgCeGHsx3Q==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.93.3.tgz",
+      "integrity": "sha512-0dOfT9moy9YmBolodwYYXtLwNr4jL4HQC9rBfv6mVrD7ud8ue2kDbn+GVzj1hEJxvEexVSmDCf7MHUTLcGs9xQ==",
       "cpu": [
         "arm64"
       ],
@@ -15938,9 +15768,9 @@
       }
     },
     "node_modules/sass-embedded-win32-x64": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.93.2.tgz",
-      "integrity": "sha512-BbSucRP6PVRZGIwlEBkp+6VQl2GWdkWFMN+9EuOTPrLxCJZoq+yhzmbjspd3PeM8+7WJ7AdFu/uRYdO8tor1iQ==",
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.93.3.tgz",
+      "integrity": "sha512-wHFVfxiS9hU/sNk7KReD+lJWRp3R0SLQEX4zfOnRP2zlvI2X4IQR5aZr9GNcuMP6TmNpX0nQPZTegS8+h9RrEg==",
       "cpu": [
         "x64"
       ],
@@ -15970,10 +15800,10 @@
       }
     },
     "node_modules/sax": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
-      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
-      "license": "ISC"
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.3.tgz",
+      "integrity": "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==",
+      "license": "BlueOak-1.0.0"
     },
     "node_modules/scslre": {
       "version": "0.3.0",
@@ -16242,9 +16072,9 @@
       }
     },
     "node_modules/simple-git": {
-      "version": "3.28.0",
-      "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.28.0.tgz",
-      "integrity": "sha512-Rs/vQRwsn1ILH1oBUy8NucJlXmnnLeLCfcvbSehkPzbv3wwoFWIdtfd6Ndo6ZPhlPsCZ60CPI4rxurnwAa+a2w==",
+      "version": "3.30.0",
+      "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.30.0.tgz",
+      "integrity": "sha512-q6lxyDsCmEal/MEGhP1aVyQ3oxnagGlBDOVSIB4XUVLl1iZh0Pah6ebC9V4xBap/RfgP2WlI8EKs0WS0rMEJHg==",
       "license": "MIT",
       "dependencies": {
         "@kwsites/file-exists": "^1.1.1",
@@ -16473,9 +16303,9 @@
       }
     },
     "node_modules/srvx": {
-      "version": "0.8.16",
-      "resolved": "https://registry.npmjs.org/srvx/-/srvx-0.8.16.tgz",
-      "integrity": "sha512-hmcGW4CgroeSmzgF1Ihwgl+Ths0JqAJ7HwjP2X7e3JzY7u4IydLMcdnlqGQiQGUswz+PO9oh/KtCpOISIvs9QQ==",
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/srvx/-/srvx-0.9.6.tgz",
+      "integrity": "sha512-5L4rT6qQqqb+xcoDoklUgCNdmzqJ6vbcDRwPVGRXewF55IJH0pqh0lQlrJ266ZWTKJ4mfeioqHQJeAYesS+RrQ==",
       "license": "MIT",
       "bin": {
         "srvx": "bin/srvx.mjs"
@@ -16705,12 +16535,12 @@
       "license": "ISC"
     },
     "node_modules/stylehacks": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-7.0.6.tgz",
-      "integrity": "sha512-iitguKivmsueOmTO0wmxURXBP8uqOO+zikLGZ7Mm9e/94R4w5T999Js2taS/KBOnQ/wdC3jN3vNSrkGDrlnqQg==",
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-7.0.7.tgz",
+      "integrity": "sha512-bJkD0JkEtbRrMFtwgpJyBbFIwfDDONQ1Ov3sDLZQP8HuJ73kBOyx66H4bOcAbVWmnfLdvQ0AJwXxOMkpujcO6g==",
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.25.1",
+        "browserslist": "^4.27.0",
         "postcss-selector-parser": "^7.1.0"
       },
       "engines": {
@@ -16864,9 +16694,9 @@
       }
     },
     "node_modules/tailwind-merge": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
-      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -16893,9 +16723,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
-      "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
+      "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
       "license": "MIT"
     },
     "node_modules/tapable": {
@@ -16912,10 +16742,10 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
-      "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
-      "license": "ISC",
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.2.tgz",
+      "integrity": "sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",
         "chownr": "^3.0.0",
@@ -16996,9 +16826,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.44.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.44.0.tgz",
-      "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
+      "version": "5.44.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.44.1.tgz",
+      "integrity": "sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -17041,10 +16871,13 @@
       "license": "MIT"
     },
     "node_modules/tinyexec": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.1.tgz",
-      "integrity": "sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==",
-      "license": "MIT"
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
+      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
@@ -17177,9 +17010,9 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.1.0.tgz",
-      "integrity": "sha512-wQ531tuWvB6oK+pchHIu5lHe5f5wpSCqB8Kf4dWQRbOYc9HTge7JL0G4Qd44bh6QuJCccIzL3bugb8GI0MwHrg==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.2.0.tgz",
+      "integrity": "sha512-xxCJm+Bckc6kQBknN7i9fnP/xobQRsRQxR01CztFkp/h++yfVxUUcmMgfR2HttJx/dpWjS9ubVuyspJv24Q9DA==",
       "license": "(MIT OR CC0-1.0)",
       "dependencies": {
         "tagged-tag": "^1.0.0"
@@ -17240,15 +17073,6 @@
         "unplugin": "^2.1.0"
       }
     },
-    "node_modules/undici": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-7.16.0.tgz",
-      "integrity": "sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=20.18.1"
-      }
-    },
     "node_modules/undici-types": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
@@ -17257,9 +17081,9 @@
       "license": "MIT"
     },
     "node_modules/unenv": {
-      "version": "2.0.0-rc.23",
-      "resolved": "https://registry.npmjs.org/unenv/-/unenv-2.0.0-rc.23.tgz",
-      "integrity": "sha512-NeOb/HbW2OwOzYaV21MewVQYfzlSwG0kVUB74RyV0gEIP44M5DsYTK9e7jDcekB/3YU+pfNWniZj+r4M/aejyQ==",
+      "version": "2.0.0-rc.24",
+      "resolved": "https://registry.npmjs.org/unenv/-/unenv-2.0.0-rc.24.tgz",
+      "integrity": "sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw==",
       "license": "MIT",
       "dependencies": {
         "pathe": "^2.0.3"
@@ -17594,19 +17418,19 @@
       }
     },
     "node_modules/unplugin-vue-router": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/unplugin-vue-router/-/unplugin-vue-router-0.16.0.tgz",
-      "integrity": "sha512-yFmUQoN07KABkbxMSaNvfjnflwSi3nkSVKi7v6FTwXlzXyRDSx63vQ8Se4ho0T9Ao9I8U5FJB12fzmrGxFB0CA==",
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-router/-/unplugin-vue-router-0.16.1.tgz",
+      "integrity": "sha512-7A7gUVzLIYMBrBPKk8l4lZoZXDOrO8+etw6/RTrqG3OzpLUUZEXJFUW7+OyMIpQK93sEbdkR2z9ZNNl/r32FMw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/generator": "^7.28.3",
+        "@babel/generator": "^7.28.5",
         "@vue-macros/common": "^3.1.1",
-        "@vue/language-core": "^3.1.0",
-        "ast-walker-scope": "^0.8.2",
+        "@vue/language-core": "^3.1.2",
+        "ast-walker-scope": "^0.8.3",
         "chokidar": "^4.0.3",
         "json5": "^2.2.3",
         "local-pkg": "^1.1.2",
-        "magic-string": "^0.30.19",
+        "magic-string": "^0.30.21",
         "mlly": "^1.8.0",
         "muggle-string": "^0.4.1",
         "pathe": "^2.0.3",
@@ -17614,7 +17438,7 @@
         "scule": "^1.3.0",
         "tinyglobby": "^0.2.15",
         "unplugin": "^2.3.10",
-        "unplugin-utils": "^0.3.0",
+        "unplugin-utils": "^0.3.1",
         "yaml": "^2.8.1"
       },
       "peerDependencies": {
@@ -17684,9 +17508,9 @@
       }
     },
     "node_modules/unstorage": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.17.1.tgz",
-      "integrity": "sha512-KKGwRTT0iVBCErKemkJCLs7JdxNVfqTPc/85ae1XES0+bsHbc/sFBfVi5kJp156cc51BHinIH2l3k0EZ24vOBQ==",
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.17.2.tgz",
+      "integrity": "sha512-cKEsD6iBWJgOMJ6vW1ID/SYuqNf8oN4yqRk8OYqaVQ3nnkJXOT1PSpaMh2QfzLs78UN5kSNRD2c/mgjT8tX7+w==",
       "license": "MIT",
       "dependencies": {
         "anymatch": "^3.1.3",
@@ -17695,7 +17519,7 @@
         "h3": "^1.15.4",
         "lru-cache": "^10.4.3",
         "node-fetch-native": "^1.6.7",
-        "ofetch": "^1.4.1",
+        "ofetch": "^1.5.0",
         "ufo": "^1.6.1"
       },
       "peerDependencies": {
@@ -18063,9 +17887,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.1.12",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
-      "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
+      "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -18165,25 +17989,25 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
-      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-5.0.0.tgz",
+      "integrity": "sha512-nJINVH7lHBKoyDFYnwrXbNUrmTJ2ssBHTd/mXVZfLq/O5K7ksv4CayQOA5KkbOSrsgSQg8antcVPgQmzBWWn/w==",
       "license": "MIT",
       "dependencies": {
         "cac": "^6.7.14",
-        "debug": "^4.4.1",
+        "debug": "^4.4.3",
         "es-module-lexer": "^1.7.0",
         "pathe": "^2.0.3",
-        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+        "vite": "^7.2.0"
       },
       "bin": {
-        "vite-node": "vite-node.mjs"
+        "vite-node": "vite-node.js"
       },
       "engines": {
         "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/vitest"
+        "url": "https://opencollective.com/antfu"
       }
     },
     "node_modules/vite-node/node_modules/pathe": {
@@ -18344,14 +18168,14 @@
       }
     },
     "node_modules/vite-plugin-vue-tracer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/vite-plugin-vue-tracer/-/vite-plugin-vue-tracer-1.0.1.tgz",
-      "integrity": "sha512-L5/vAhT6oYbH4RSQYGLN9VfHexWe7SGzca1pJ7oPkL6KtxWA1jbGeb3Ri1JptKzqtd42HinOq4uEYqzhVWrzig==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-tracer/-/vite-plugin-vue-tracer-1.1.3.tgz",
+      "integrity": "sha512-fM7hfHELZvbPnSn8EKZwHfzxm5EfYFQIclz8rwcNXfodNbRkwNvh0AGMtaBfMxQ9HC5KVa3KitwHnmE4ezDemw==",
       "license": "MIT",
       "dependencies": {
         "estree-walker": "^3.0.3",
         "exsolve": "^1.0.7",
-        "magic-string": "^0.30.19",
+        "magic-string": "^0.30.21",
         "pathe": "^2.0.3",
         "source-map-js": "^1.2.1"
       },
@@ -18405,16 +18229,16 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz",
-      "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
+      "version": "3.5.24",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.24.tgz",
+      "integrity": "sha512-uTHDOpVQTMjcGgrqFPSb8iO2m1DUvo+WbGqoXQz8Y1CeBYQ0FXf2z1gLRaBtHjlRz7zZUBHxjVB5VTLzYkvftg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.22",
-        "@vue/compiler-sfc": "3.5.22",
-        "@vue/runtime-dom": "3.5.22",
-        "@vue/server-renderer": "3.5.22",
-        "@vue/shared": "3.5.22"
+        "@vue/compiler-dom": "3.5.24",
+        "@vue/compiler-sfc": "3.5.24",
+        "@vue/runtime-dom": "3.5.24",
+        "@vue/server-renderer": "3.5.24",
+        "@vue/shared": "3.5.24"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -18435,9 +18259,9 @@
       }
     },
     "node_modules/vue-chartjs": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
-      "integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.3.tgz",
+      "integrity": "sha512-jqxtL8KZ6YJ5NTv6XzrzLS7osyegOi28UGNZW0h9OkDL7Sh1396ht4Dorh04aKrl2LiSalQ84WtqiG0RIJb0tA==",
       "license": "MIT",
       "peerDependencies": {
         "chart.js": "^4.1.1",
@@ -18445,9 +18269,9 @@
       }
     },
     "node_modules/vue-component-type-helpers": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-3.1.2.tgz",
-      "integrity": "sha512-ch3/SKBtxdZq18vsEntiGCdSszCRNfhX5QaTxjSacCAXLlNQRXfXo+ANjoQEYJMsJOJy1/vHF6Tkc4s85MS+zw==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-3.1.3.tgz",
+      "integrity": "sha512-V1dOD8XYfstOKCnXbWyEJIrhTBMwSyNjv271L1Jlx9ExpNlCSuqOs3OdWrGJ0V544zXufKbcYabi/o+gK8lyfQ==",
       "license": "MIT"
     },
     "node_modules/vue-devtools-stub": {
@@ -18543,9 +18367,9 @@
       "license": "MIT"
     },
     "node_modules/vuetify": {
-      "version": "3.10.7",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.10.7.tgz",
-      "integrity": "sha512-I7eyv5hkJbaWpUT97aDtf17VQXIEnGfEWyNRD/6nqVfYIbVAUNVUiXCtoPnuSH/mxpA3Z/duxOr/94KPn2Rf8g==",
+      "version": "3.10.11",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.10.11.tgz",
+      "integrity": "sha512-hfllXT0/C3O5nZyIRalaDU7ClMIrKrKAbjH0T8xbSUb7FcJrHOqPZfEkSXwrKxajv6EA1rwEOvCZoLDhunnjrQ==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -18826,13 +18650,10 @@
       "optional": true
     },
     "node_modules/y18n": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=10"
-      }
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
     },
     "node_modules/yallist": {
       "version": "3.1.1",
@@ -18853,30 +18674,38 @@
       }
     },
     "node_modules/yargs": {
-      "version": "17.7.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
-      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
       "license": "MIT",
       "dependencies": {
-        "cliui": "^8.0.1",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
         "require-directory": "^2.1.1",
-        "string-width": "^4.2.3",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^21.1.1"
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=8"
       }
     },
     "node_modules/yargs-parser": {
-      "version": "21.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
       "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=6"
       }
     },
     "node_modules/yargs/node_modules/ansi-regex": {
@@ -18894,6 +18723,67 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "license": "MIT"
     },
+    "node_modules/yargs/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yargs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -18921,9 +18811,9 @@
       }
     },
     "node_modules/yocto-queue": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.1.tgz",
-      "integrity": "sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.2.tgz",
+      "integrity": "sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==",
       "license": "MIT",
       "engines": {
         "node": ">=12.20"
@@ -18932,28 +18822,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/yoctocolors": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.1.2.tgz",
-      "integrity": "sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/youch": {
-      "version": "4.1.0-beta.11",
-      "resolved": "https://registry.npmjs.org/youch/-/youch-4.1.0-beta.11.tgz",
-      "integrity": "sha512-sQi6PERyO/mT8w564ojOVeAlYTtVQmC2GaktQAf+IdI75/GKIggosBuvyVXvEV+FATAT6RbLdIjFoiIId4ozoQ==",
+      "version": "4.1.0-beta.12",
+      "resolved": "https://registry.npmjs.org/youch/-/youch-4.1.0-beta.12.tgz",
+      "integrity": "sha512-X+AQ2EdigcZb2h1XQmBMm19TrrfKXxEXWpnf8ThbARwiiSf/pA7MvRTCj5VHCI9z3vjJBsDeqWWyvaI9Bfp9Pg==",
       "license": "MIT",
       "dependencies": {
         "@poppinss/colors": "^4.1.5",
-        "@poppinss/dumper": "^0.6.4",
-        "@speed-highlight/core": "^1.2.7",
-        "cookie": "^1.0.2",
+        "@poppinss/dumper": "^0.6.5",
+        "@speed-highlight/core": "^1.2.9",
+        "cookie-es": "^2.0.0",
         "youch-core": "^0.3.3"
       }
     },
@@ -18967,6 +18845,12 @@
         "error-stack-parser-es": "^1.0.5"
       }
     },
+    "node_modules/youch/node_modules/cookie-es": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-2.0.0.tgz",
+      "integrity": "sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==",
+      "license": "MIT"
+    },
     "node_modules/zhead": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz",
@@ -19001,13 +18885,13 @@
       }
     },
     "node_modules/zxing-wasm": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-2.2.2.tgz",
-      "integrity": "sha512-Q9/B9whEwAUABvr7ScHl36wVZTBWVHAaumx45uGQLl2GGRp5ZRtDtwbz5scOwl/xzL07fximIqoQqqmzf9eJJA==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-2.2.3.tgz",
+      "integrity": "sha512-fz0WwsJi6sNZtfqmHb4cCNzih0Fvz+RIh7jL5wAwQEt+S+GCr6pV+PRDLNYKWgrAtR0y2hKQCLSbZDRk8hfehA==",
       "license": "MIT",
       "dependencies": {
-        "@types/emscripten": "^1.41.2",
-        "type-fest": "^5.0.1"
+        "@types/emscripten": "^1.41.5",
+        "type-fest": "^5.2.0"
       },
       "peerDependencies": {
         "@types/emscripten": ">=1.39.6"
diff --git a/pages/AdminKlinik.vue b/pages/AdminKlinik.vue
index 5fc1f8c..c708386 100644
--- a/pages/AdminKlinik.vue
+++ b/pages/AdminKlinik.vue
@@ -1,346 +1,229 @@
-<!-- pages/AdminKlinik.vue -->
+
 <template>
   <div class="loket-container">
-    <!-- Header Section -->
+    <!-- Compact Header -->
     <div class="page-header">
       <div class="header-content">
         <div class="header-left">
-          <div class="header-icon">
-            <v-icon size="32" color="white">mdi-hospital-building</v-icon>
-          </div>
+          <v-icon size="28" color="white">mdi-hospital-building</v-icon>
           <div class="header-text">
             <h1 class="page-title">Admin Klinik</h1>
-            <!-- <p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p> -->
+            <p class="page-subtitle">{{ currentDate }}</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">
-            Max 150 Pasien
-          </v-chip>
-        </div> -->
       </div>
     </div>
 
-    <!-- Control Section -->
-    <v-row class="mb-4">
-      <!-- Left Side: Current Processing -->
-      <v-col cols="12" lg="6">
-        <!-- Current Patient Processing Card -->
-        <v-card class="current-processing-card" elevation="2">
+    <!-- Main Content Grid -->
+    <v-row class="content-grid" dense>
+      <!-- Left Column: Current Patient -->
+      <v-col cols="12" md="5">
+        <v-card class="current-patient-card" elevation="0">
           <v-card-text class="pa-4">
-            <div
-              v-if="currentProcessingPatient"
-              class="d-flex align-center justify-space-between"
-            >
-              <div class="patient-info">
-                <v-chip color="primary" variant="flat" class="mb-2">
-                  <v-icon start>mdi-account-clock</v-icon>
-                  SEDANG DIPROSES
-                </v-chip>
-                <div class="text-h5 font-weight-bold mb-1">
-                  {{ currentProcessingPatient.noAntrian.split(" |")[0] }}
-                </div>
-                <div class="text-subtitle-1 text-grey-darken-1">
-                  {{ currentProcessingPatient.barcode }} |
-                  {{ currentProcessingPatient.klinik }}
-                </div>
-                <div class="patient-meta">
-                  Jenis Pembayaran: {{ currentProcessingPatient.pembayaran }}
-                </div>
+            <div class="section-label mb-3">SEDANG DIPROSES</div>
+            
+            <div v-if="currentProcessingPatient" class="patient-details">
+              <div class="patient-number mb-2">{{ currentProcessingPatient.noAntrian.split(" |")[0] }}</div>
+              <div class="patient-info-text mb-3">
+                <div>{{ currentProcessingPatient.barcode }}</div>
+                <div>{{ currentProcessingPatient.klinik }} | {{ currentProcessingPatient.pembayaran }}</div>
               </div>
-              <div class="action-buttons d-flex flex-column">
-                <v-btn
-                  color="success"
-                  variant="flat"
-                  class="mb-2"
-                  width="120"
-                  @click="processPatient(currentProcessingPatient, 'check-in')"
-                >
-                  <v-icon start>mdi-check-circle</v-icon>
+              
+              <div class="action-grid">
+                <v-btn color="#10b981" variant="flat" block size="large" @click="processPatient(currentProcessingPatient, 'check-in')">
+                  <v-icon start size="20">mdi-check</v-icon>
                   Selesai
                 </v-btn>
-                <v-btn
-                  color="warning"
-                  variant="flat"
-                  class="mb-2"
-                  width="120"
-                  @click="processPatient(currentProcessingPatient, 'terlambat')"
-                >
-                  <v-icon start>mdi-clock-alert</v-icon>
+                <v-btn color="#f59e0b" variant="flat" block size="large" @click="processPatient(currentProcessingPatient, 'terlambat')">
+                  <v-icon start size="20">mdi-clock-alert</v-icon>
                   Terlambat
                 </v-btn>
-                <v-btn
-                  color="error"
-                  variant="flat"
-                  class="mb-2"
-                  width="120"
-                  @click="processPatient(currentProcessingPatient, 'pending')"
-                >
-                  <v-icon start>mdi-pause-circle</v-icon>
+                <v-btn color="#ef4444" variant="flat" block size="large" @click="processPatient(currentProcessingPatient, 'pending')">
+                  <v-icon start size="20">mdi-pause</v-icon>
                   Pending
                 </v-btn>
-                <v-btn
-                  color="info"
-                  variant="flat"
-                  width="120"
-                  @click="showChangeKlinikDialog = true"
-                >
-                  <v-icon start>mdi-swap-horizontal</v-icon>
+                <v-btn color="#3b82f6" variant="flat" block size="large" @click="showChangeKlinikDialog = true">
+                  <v-icon start size="20">mdi-swap-horizontal</v-icon>
                   Ubah Klinik
                 </v-btn>
               </div>
             </div>
-
-            <!-- Empty state (tidak ada pasien) -->
-            <div v-else class="text-center pa-6">
-              <v-icon size="64" color="grey-lighten-1" class="mb-3">
-                mdi-account-off-outline
-              </v-icon>
-              <div class="text-h6 text-grey-darken-1 mb-2">
-                Tidak Ada Pasien yang Diproses
-              </div>
-              <div class="text-body-2 text-grey">
-                Pasien akan muncul otomatis saat check-in dari loket atau buat
-                antrean klinik baru
-              </div>
+            
+            <div v-else class="empty-state">
+              <v-icon size="48" color="grey-lighten-2">mdi-account-off-outline</v-icon>
+              <div class="empty-text">Tidak ada pasien yang diproses</div>
             </div>
           </v-card-text>
         </v-card>
-      </v-col>
 
-      <!-- Right Side: Queue Info and Call Controls -->
-      <v-col cols="12" lg="6">
-        <v-card class="quota-call-card" elevation="2">
+        <!-- Queue Actions -->
+        <v-card class="queue-actions-card mt-3" elevation="0">
           <v-card-text class="pa-4">
-            <div class="d-flex align-center justify-center mb-3">
-              <v-chip color="success" variant="flat" size="large">
-                <v-icon start>mdi-account-arrow-right</v-icon>
-                PANGGIL ANTREAN KLINIK
-              </v-chip>
+            <div class="section-label mb-3">PANGGIL ANTREAN</div>
+            
+            <div class="quota-info mb-3">
+              <div class="quota-item">
+                <span class="quota-label">Kuota</span>
+                <span class="quota-value">150</span>
+              </div>
+              <div class="quota-item">
+                <span class="quota-label">Tersedia</span>
+                <span class="quota-value quota-available">{{ 150 - quotaUsed }}</span>
+              </div>
+              <div class="quota-item full-width">
+                <v-progress-linear :model-value="(quotaUsed / 150) * 100" color="#10b981" height="6" rounded class="mt-1"></v-progress-linear>
+                <span class="quota-used">Terpakai: {{ quotaUsed }}</span>
+              </div>
             </div>
 
-            <v-row class="mb-3">
-              <v-col cols="6" class="text-center">
-                <div class="quota-label">Kuota</div>
-                <div class="quota-number">150</div>
-              </v-col>
-              <v-col cols="6" class="text-center">
-                <div class="quota-label">Tersedia</div>
-                <div class="quota-number quota-available">
-                  {{ 150 - quotaUsed }}
-                </div>
-              </v-col>
-            </v-row>
-
-            <div class="text-center mb-3">
-              <div class="quota-used-text">
-                Total Quota Terpakai: {{ quotaUsed }}
-              </div>
-              <v-progress-linear
-                :model-value="(quotaUsed / 150) * 100"
-                color="success"
-                height="6"
-                rounded
-                class="mt-2"
-              ></v-progress-linear>
-            </div>
-
-            <v-divider class="my-3"></v-divider>
-
-            <div class="call-controls">
-              <div class="call-label mb-2">Kumulatif Panggil Antrean</div>
-              <div class="call-buttons">
-                <v-btn
-                  color="success"
-                  variant="outlined"
-                  class="call-btn"
-                  @click="callNext"
-                  :disabled="!nextPatient"
-                >
-                  <span class="call-btn-text">1</span>
-                </v-btn>
-                <v-btn
-                  color="info"
-                  variant="outlined"
-                  class="call-btn"
-                  @click="callMultiplePatients(5)"
-                >
-                  <span class="call-btn-text">5</span>
-                </v-btn>
-                <v-btn
-                  color="warning"
-                  variant="outlined"
-                  class="call-btn"
-                  @click="callMultiplePatients(10)"
-                >
-                  <span class="call-btn-text">10</span>
-                </v-btn>
-                <v-btn
-                  color="error"
-                  variant="outlined"
-                  class="call-btn"
-                  @click="callMultiplePatients(20)"
-                >
-                  <span class="call-btn-text">20</span>
-                </v-btn>
-              </div>
+            <div class="call-buttons">
+              <v-btn color="#10b981" variant="outlined" @click="callNext" :disabled="!nextPatient">1</v-btn>
+              <v-btn color="#3b82f6" variant="outlined" @click="callMultiplePatients(5)">5</v-btn>
+              <v-btn color="#f59e0b" variant="outlined" @click="callMultiplePatients(10)">10</v-btn>
+              <v-btn color="#ef4444" variant="outlined" @click="callMultiplePatients(20)">20</v-btn>
             </div>
           </v-card-text>
         </v-card>
-      </v-col>
-    </v-row>
 
-    <v-row class="mb-4">
-      <v-col cols="12">
-        <div class="d-flex justify-center gap-2">
-          <v-btn
-            size="large"
-            color="#FF9B1B"
-            variant="flat"
-            class="text-white"
-            @click="showKlinikDialog = true"
-          >
-            <v-icon start>mdi-hospital-building</v-icon>
-            Buat Antrean Klinik Ruang
+        <!-- Create Queue Buttons -->
+        <div class="create-buttons mt-3">
+          <v-btn color="#f59e0b" variant="flat" block size="large" class="mb-2" @click="showKlinikDialog = true">
+            <v-icon start size="20">mdi-hospital-building</v-icon>
+            Buat Antrean Klinik
           </v-btn>
-          <v-btn
-            size="large"
-            color="#32A3FF"
-            variant="flat"
-            class="text-white"
-            @click="openPenunjangDialog()"
-          >
-            <v-icon start>mdi-clipboard-pulse</v-icon>
+          <v-btn color="#3b82f6" variant="flat" block size="large" @click="openPenunjangDialog()">
+            <v-icon start size="20">mdi-clipboard-pulse</v-icon>
             Buat Antrean Penunjang
           </v-btn>
         </div>
       </v-col>
+
+      <!-- Right Column: Patient Table -->
+      <v-col cols="12" md="7">
+        <v-card class="patient-table-card" elevation="0">
+          <v-card-text class="pa-4">
+            <!-- Table Header with Filters -->
+            <div class="table-header mb-4">
+              <div class="section-label">DATA PASIEN</div>
+              
+              <div class="filters">
+                <v-chip-group v-model="selectedStatus" mandatory class="status-filter">
+                  <v-chip value="all" :class="{ 'active-chip': selectedStatus === 'all' }">
+                    Semua ({{ allPatients.length }})
+                  </v-chip>
+                  <v-chip value="diloket" :class="{ 'active-chip': selectedStatus === 'diloket' }">
+                    Di Klinik ({{ (diLoketPatients || []).length }})
+                  </v-chip>
+                  <v-chip value="terlambat" :class="{ 'active-chip': selectedStatus === 'terlambat' }">
+                    Terlambat ({{ (terlambatPatients || []).length }})
+                  </v-chip>
+                  <v-chip value="pending" :class="{ 'active-chip': selectedStatus === 'pending' }">
+                    Pending ({{ (pendingPatients || []).length }})
+                  </v-chip>
+                </v-chip-group>
+
+                <v-text-field
+                  v-model="searchQuery"
+                  placeholder="Cari barcode, nomor antrian..."
+                  density="compact"
+                  hide-details
+                  class="search-field"
+                  prepend-inner-icon="mdi-magnify"
+                ></v-text-field>
+              </div>
+            </div>
+
+            <!-- Data Table -->
+            <v-data-table
+              :headers="tableHeaders"
+              :items="filteredPatients"
+              :search="searchQuery"
+              class="patient-table"
+              :items-per-page="10"
+              density="comfortable"
+            >
+              <template #item.noAntrian="{ item }">
+                <div class="queue-number">{{ item.noAntrian.split(" |")[0] }}</div>
+              </template>
+
+              <template #item.status="{ item }">
+                <v-chip
+                  :color="getStatusColor(item.status)"
+                  size="small"
+                  class="status-chip"
+                >
+                  {{ getStatusLabel(item.status) }}
+                </v-chip>
+              </template>
+
+              <template #item.klinik="{ item }">
+                <v-chip size="small" variant="outlined" class="klinik-chip">
+                  {{ item.klinik }}
+                </v-chip>
+              </template>
+
+              <template #item.aksi="{ item }">
+                <div class="action-buttons-table">
+                  <v-btn
+                    v-if="item.status === 'diloket'"
+                    size="small"
+                    color="#10b981"
+                    variant="flat"
+                    @click="processPatient(item, 'proses')"
+                  >
+                    Proses
+                  </v-btn>
+                  <v-btn
+                    v-else-if="item.status === 'terlambat'"
+                    size="small"
+                    color="#10b981"
+                    variant="flat"
+                    @click="processPatient(item, 'aktifkan')"
+                  >
+                    Aktifkan
+                  </v-btn>
+                  <v-btn
+                    v-else-if="item.status === 'pending'"
+                    size="small"
+                    color="#10b981"
+                    variant="flat"
+                    @click="processPatient(item, 'proses')"
+                  >
+                    Proses
+                  </v-btn>
+                </div>
+              </template>
+            </v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
     </v-row>
 
-    <!-- Di Loket Patients Table -->
-    <v-card class="main-table-card mb-4" elevation="2">
-      <TabelData
-        :headers="diLoketHeaders"
-        :items="diLoketPatients"
-        title="DATA PASIEN - DI KLINIK"
-      >
-        <template #actions="{ item }">
-          <div class="d-flex gap-1">
-            <!-- <v-btn
-              size="small"
-              color="info"
-              variant="flat"
-              @click="processPatient(item, 'aktifkan')"
-            >
-              Aktifkan
-            </v-btn> -->
-            <v-btn
-              size="small"
-              color="success"
-              variant="flat"
-              @click="processPatient(item, 'proses')"
-            >
-              Proses
-            </v-btn>
-          </div>
-        </template>
-      </TabelData>
-    </v-card>
-
-    <!-- Tabel Pasien Terlambat -->
-    <v-card
-      class="late-table-card mb-4"
-      elevation="2"
-      v-if="terlambatPatients.length > 0"
-    >
-      <TabelData
-        :headers="terlambatHeaders"
-        :items="terlambatPatients"
-        title="INFO PASIEN LAPOR TERLAMBAT"
-      >
-        <template #actions="{ item }">
-          <div class="d-flex gap-1">
-            <v-btn
-              size="small"
-              color="success"
-              variant="flat"
-              @click="processPatient(item, 'aktifkan')"
-            >
-              Aktifkan
-            </v-btn>
-          </div>
-        </template>
-      </TabelData>
-    </v-card>
-
-    <!-- Tabel Pasien Pending -->
-    <v-card
-      class="pending-table-card mb-4"
-      elevation="2"
-      v-if="pendingPatients.length > 0"
-    >
-      <TabelData
-        :headers="pendingHeaders"
-        :items="pendingPatients"
-        title="INFO PASIEN PENDING"
-      >
-        <template #actions="{ item }">
-          <div class="d-flex gap-1">
-            <v-btn
-              size="small"
-              color="success"
-              variant="flat"
-              @click="processPatient(item, 'proses')"
-            >
-              Proses
-            </v-btn>
-          </div>
-        </template>
-      </TabelData>
-    </v-card>
-
     <!-- Klinik Dialog -->
-    <v-dialog v-model="showKlinikDialog" max-width="900px">
+    <v-dialog v-model="showKlinikDialog" max-width="800px">
       <v-card>
-        <v-card-title class="d-flex align-center pa-4 bg-primary text-white">
-          <v-btn icon @click="showKlinikDialog = false" class="mr-2">
-            <v-icon color="white">mdi-arrow-left</v-icon>
+        <v-card-title class="dialog-header">
+          <v-btn icon size="small" @click="showKlinikDialog = false">
+            <v-icon>mdi-close</v-icon>
           </v-btn>
-          <span class="text-h6">Buat Antrean Klinik Ruang</span>
+          <span>Pilih Klinik</span>
         </v-card-title>
 
-        <v-card-subtitle class="pa-4 text-center">
-          <h3 class="text-h6 mb-3">Pilih Klinik</h3>
-          <div class="d-flex justify-end gap-2">
-            <v-text-field
-              v-model="klinikSearch"
-              placeholder="Pencarian"
-              density="compact"
-              hide-details
-              style="max-width: 200px"
-            ></v-text-field>
-          </div>
-        </v-card-subtitle>
-
         <v-card-text class="pa-4">
-          <v-row>
-            <v-col
-              v-for="klinik in filteredKliniks"
-              :key="klinik.id"
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <v-card
-                class="klinik-card"
-                elevation="1"
-                @click="selectKlinik(klinik)"
-              >
-                <v-card-text class="text-center pa-4">
-                  <div class="text-h6 font-weight-bold">{{ klinik.name }}</div>
+          <v-text-field
+            v-model="klinikSearch"
+            placeholder="Cari klinik..."
+            density="compact"
+            hide-details
+            class="mb-4"
+            prepend-inner-icon="mdi-magnify"
+          ></v-text-field>
+
+          <v-row dense>
+            <v-col v-for="klinik in filteredKliniks" :key="klinik.id" cols="6" sm="4">
+              <v-card class="klinik-card" @click="selectKlinik(klinik)" elevation="0">
+                <v-card-text class="text-center pa-3">
+                  <div class="klinik-name">{{ klinik.name }}</div>
                 </v-card-text>
               </v-card>
             </v-col>
@@ -350,46 +233,30 @@
     </v-dialog>
 
     <!-- Penunjang Dialog -->
-    <v-dialog v-model="showPenunjangDialog" max-width="900px">
+    <v-dialog v-model="showPenunjangDialog" max-width="800px">
       <v-card>
-        <v-card-title class="d-flex align-center pa-4 bg-secondary text-white">
-          <v-btn icon @click="showPenunjangDialog = false" class="mr-2">
-            <v-icon color="white">mdi-arrow-left</v-icon>
+        <v-card-title class="dialog-header">
+          <v-btn icon size="small" @click="showPenunjangDialog = false">
+            <v-icon>mdi-close</v-icon>
           </v-btn>
-          <span class="text-h6">Buat Antrean Penunjang</span>
+          <span>Pilih Penunjang</span>
         </v-card-title>
 
-        <v-card-subtitle class="pa-4">
-          <h3 class="text-h6 mb-3 text-center">Pilih Ruang</h3>
-          <div class="d-flex justify-end gap-2">
-            <v-text-field
-              v-model="penunjangSearch"
-              placeholder="Pencarian"
-              density="compact"
-              hide-details
-              style="max-width: 200px"
-            ></v-text-field>
-          </div>
-        </v-card-subtitle>
-
         <v-card-text class="pa-4">
-          <v-row>
-            <v-col
-              v-for="penunjang in filteredPenunjangs"
-              :key="penunjang.id"
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <v-card
-                class="penunjang-card"
-                elevation="1"
-                @click="selectPenunjang(penunjang)"
-              >
-                <v-card-text class="text-center pa-4">
-                  <div class="text-h6 font-weight-bold">
-                    {{ penunjang.name }}
-                  </div>
+          <v-text-field
+            v-model="penunjangSearch"
+            placeholder="Cari penunjang..."
+            density="compact"
+            hide-details
+            class="mb-4"
+            prepend-inner-icon="mdi-magnify"
+          ></v-text-field>
+
+          <v-row dense>
+            <v-col v-for="penunjang in filteredPenunjangs" :key="penunjang.id" cols="6" sm="4">
+              <v-card class="penunjang-card" @click="selectPenunjang(penunjang)" elevation="0">
+                <v-card-text class="text-center pa-3">
+                  <div class="penunjang-name">{{ penunjang.name }}</div>
                 </v-card-text>
               </v-card>
             </v-col>
@@ -399,44 +266,30 @@
     </v-dialog>
 
     <!-- Change Klinik Dialog -->
-    <v-dialog v-model="showChangeKlinikDialog" max-width="900px">
+    <v-dialog v-model="showChangeKlinikDialog" max-width="800px">
       <v-card>
-        <v-card-title class="d-flex align-center pa-4 bg-info text-white">
-          <v-btn icon @click="showChangeKlinikDialog = false" class="mr-2">
-            <v-icon color="white">mdi-arrow-left</v-icon>
+        <v-card-title class="dialog-header">
+          <v-btn icon size="small" @click="showChangeKlinikDialog = false">
+            <v-icon>mdi-close</v-icon>
           </v-btn>
-          <span class="text-h6">Ubah Klinik</span>
+          <span>Ubah Klinik</span>
         </v-card-title>
 
-        <v-card-subtitle class="pa-4">
-          <h3 class="text-h6 mb-3 text-center">Pilih Klinik Baru</h3>
-          <div class="d-flex justify-end gap-2">
-            <v-text-field
-              v-model="changeKlinikSearch"
-              placeholder="Pencarian"
-              density="compact"
-              hide-details
-              style="max-width: 200px"
-            ></v-text-field>
-          </div>
-        </v-card-subtitle>
-
         <v-card-text class="pa-4">
-          <v-row>
-            <v-col
-              v-for="klinik in filteredChangeKliniks"
-              :key="klinik.id"
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <v-card
-                class="klinik-card"
-                elevation="1"
-                @click="changeKlinik(klinik)"
-              >
-                <v-card-text class="text-center pa-4">
-                  <div class="text-h6 font-weight-bold">{{ klinik.name }}</div>
+          <v-text-field
+            v-model="changeKlinikSearch"
+            placeholder="Cari klinik..."
+            density="compact"
+            hide-details
+            class="mb-4"
+            prepend-inner-icon="mdi-magnify"
+          ></v-text-field>
+
+          <v-row dense>
+            <v-col v-for="klinik in filteredChangeKliniks" :key="klinik.id" cols="6" sm="4">
+              <v-card class="klinik-card" @click="changeKlinik(klinik)" elevation="0">
+                <v-card-text class="text-center pa-3">
+                  <div class="klinik-name">{{ klinik.name }}</div>
                 </v-card-text>
               </v-card>
             </v-col>
@@ -446,15 +299,10 @@
     </v-dialog>
 
     <!-- Snackbar -->
-    <v-snackbar
-      v-model="snackbar"
-      :color="snackbarColor"
-      :timeout="3000"
-      location="top right"
-    >
+    <v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="3000" location="top right">
       {{ snackbarText }}
       <template v-slot:actions>
-        <v-btn icon @click="snackbar = false">
+        <v-btn icon size="small" @click="snackbar = false">
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </template>
@@ -463,8 +311,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-import TabelData from "../components/TabelData.vue";
+import { ref, computed } from "vue";
 import { useQueue } from "../composables/useQueue";
 
 const {
@@ -482,7 +329,6 @@ const {
   terlambatPatients,
   pendingPatients,
   nextPatient,
-  totalPasien,
   quotaUsed,
   filteredKliniks,
   filteredPenunjangs,
@@ -496,169 +342,334 @@ const {
   changeKlinik,
 } = useQueue("klinik");
 
-const diLoketHeaders = ref([
-  { title: "No", value: "no", sortable: false, width: "60px" },
-  { title: "Jam Panggil", value: "jamPanggil", sortable: true, width: "100px" },
-  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
-  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
-  { title: "Shift", value: "shift", sortable: true, width: "80px" },
-  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
-  { title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
-  { title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
-  { title: "Aksi", value: "aksi", sortable: false, width: "200px" },
+const currentDate = ref(
+  new Date().toLocaleDateString("id-ID", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  })
+);
+
+const selectedStatus = ref("all");
+const searchQuery = ref("");
+
+// Combine all patients with status - Fixed to prevent infinite loop
+const allPatients = computed(() => {
+  try {
+    // Safely access reactive values
+    const diLoketList = diLoketPatients.value || [];
+    const terlambatList = terlambatPatients.value || [];
+    const pendingList = pendingPatients.value || [];
+    
+    // Map with status
+    const diLoket = diLoketList.map(p => ({ ...p, status: 'diloket' }));
+    const terlambat = terlambatList.map(p => ({ ...p, status: 'terlambat' }));
+    const pending = pendingList.map(p => ({ ...p, status: 'pending' }));
+    
+    return [...diLoket, ...terlambat, ...pending];
+  } catch (error) {
+    console.error('Error in allPatients computed:', error);
+    return [];
+  }
+});
+
+// Filter patients based on selected status
+const filteredPatients = computed(() => {
+  try {
+    const all = allPatients.value;
+    if (selectedStatus.value === "all") return all;
+    return all.filter(p => p.status === selectedStatus.value);
+  } catch (error) {
+    console.error('Error in filteredPatients computed:', error);
+    return [];
+  }
+});
+
+const tableHeaders = ref([
+  { title: "No", value: "no", width: "60px", sortable: false },
+  { title: "Jam Panggil", value: "jamPanggil", width: "100px" },
+  { title: "Barcode", value: "barcode", width: "130px" },
+  { title: "No Antrian", value: "noAntrian", width: "140px" },
+  { title: "Klinik", value: "klinik", width: "100px" },
+  { title: "Fast Track", value: "fastTrack", width: "100px" },
+  { title: "Pembayaran", value: "pembayaran", width: "100px" },
+  { title: "Status", value: "status", width: "100px" },
+  { title: "Aksi", value: "aksi", width: "100px", sortable: false },
 ]);
 
-const terlambatHeaders = ref([
-  { title: "No", value: "no", sortable: false, width: "60px" },
-  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
-  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
-  { title: "Shift", value: "shift", sortable: true, width: "80px" },
-  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
-  { title: "Aksi", value: "aksi", sortable: false, width: "100px" },
-]);
+const getStatusColor = (status) => {
+  const colors = {
+    diloket: "#3b82f6",
+    terlambat: "#f59e0b",
+    pending: "#ef4444"
+  };
+  return colors[status] || "#6b7280";
+};
 
-const pendingHeaders = ref([
-  { title: "#", value: "no", sortable: false, width: "60px" },
-  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
-  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
-  { title: "Shift", value: "shift", sortable: true, width: "80px" },
-  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
-  { title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
-  { title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
-  { title: "Aksi", value: "aksi", sortable: false, width: "100px" },
-]);
+const getStatusLabel = (status) => {
+  const labels = {
+    diloket: "Di Klinik",
+    terlambat: "Terlambat",
+    pending: "Pending"
+  };
+  return labels[status] || status;
+};
 </script>
 
 <style scoped>
 .loket-container {
-  background: #f5f7fa;
+  background: #f8fafc;
   min-height: 100vh;
-  padding: 20px;
+  padding: 16px;
 }
 
 .page-header {
-  background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 8px 32px rgba(245, 124, 0, 0.3);
+  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
+  border-radius: 12px;
+  margin-bottom: 16px;
+  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
 }
 
 .header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 32px;
-  color: white;
+  padding: 20px 24px;
 }
 
 .header-left {
   display: flex;
   align-items: center;
+  gap: 16px;
 }
 
-.header-icon {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 16px;
-  padding: 16px;
-  margin-right: 20px;
-  backdrop-filter: blur(10px);
+.header-text {
+  color: white;
 }
 
 .page-title {
-  font-size: 32px;
+  font-size: 24px;
   font-weight: 700;
   margin: 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  line-height: 1.2;
 }
 
 .page-subtitle {
+  font-size: 14px;
   margin: 4px 0 0 0;
   opacity: 0.9;
-  font-size: 16px;
 }
 
-.header-right {
-  display: flex;
-  align-items: center;
+.content-grid {
+  margin: 0 -8px;
 }
 
-.current-processing-card,
-.quota-call-card,
-.main-table-card,
-.late-table-card,
-.pending-table-card {
-  border-radius: 16px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
+.content-grid > .v-col {
+  padding: 8px;
 }
 
-.current-processing-card {
-  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
-  border: 2px solid rgba(255, 152, 0, 0.2);
+.current-patient-card,
+.queue-actions-card,
+.patient-table-card {
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  background: white;
 }
 
-.quota-call-card {
-  background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%);
-  border: 2px solid rgba(33, 150, 243, 0.2);
-}
-
-.patient-info .text-h5 {
-  color: #1976d2;
-}
-
-.action-buttons {
-  display: flex;
-  align-items: center;
-}
-
-.quota-label {
-  font-size: 13px;
-  color: #6b7280;
-  font-weight: 500;
-  margin-bottom: 4px;
-}
-
-.quota-number {
-  font-size: 32px;
+.section-label {
+  font-size: 11px;
   font-weight: 700;
-  color: #1f2937;
+  letter-spacing: 0.5px;
+  color: #64748b;
+  text-transform: uppercase;
+}
+
+.patient-details {
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.patient-number {
+  font-size: 28px;
+  font-weight: 800;
+  color: #1e293b;
   line-height: 1;
 }
 
-.quota-available {
-  color: #4caf50;
-}
-
-.quota-used-text {
+.patient-info-text {
   font-size: 13px;
-  color: #6b7280;
-  font-weight: 500;
+  color: #475569;
+  line-height: 1.5;
 }
 
-.call-controls {
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 32px 16px;
+}
+
+.empty-text {
+  font-size: 13px;
+  color: #94a3b8;
+  margin-top: 8px;
+}
+
+.quota-info {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.quota-item {
+  background: #f1f5f9;
+  border-radius: 8px;
+  padding: 12px;
   text-align: center;
 }
 
-.call-label {
-  font-size: 14px;
+.quota-item.full-width {
+  grid-column: 1 / -1;
+}
+
+.quota-label {
+  display: block;
+  font-size: 11px;
+  color: #64748b;
+  margin-bottom: 4px;
   font-weight: 600;
-  color: #374151;
-  text-align: center;
+}
+
+.quota-value {
+  display: block;
+  font-size: 24px;
+  font-weight: 800;
+  color: #1e293b;
+}
+
+.quota-available {
+  color: #10b981;
+}
+
+.quota-used {
+  display: block;
+  font-size: 11px;
+  color: #64748b;
+  margin-top: 4px;
 }
 
 .call-buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.call-buttons .v-btn {
+  font-size: 16px;
+  font-weight: 700;
+  height: 44px;
+}
+
+.create-buttons .v-btn {
+  text-transform: none;
+  font-weight: 600;
+}
+
+.table-header {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   gap: 12px;
+}
+
+.filters {
+  display: flex;
+  gap: 12px;
+  align-items: center;
   flex-wrap: wrap;
 }
 
-.call-btn {
-  min-width: 80px;
-  height: 48px;
+.status-filter {
+  flex: 1;
+}
+
+.status-filter .v-chip {
+  font-size: 12px;
+  font-weight: 600;
+  height: 32px;
+  border: 1px solid #e2e8f0;
+  background: white;
+  color: #64748b;
+}
+
+.status-filter .v-chip.active-chip {
+  background: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.search-field {
+  max-width: 250px;
+}
+
+:deep(.patient-table) {
   border-radius: 8px;
 }
 
-.call-btn-text {
+:deep(.patient-table .v-data-table__thead) {
+  background: #f8fafc;
+}
+
+:deep(.patient-table th) {
+  font-size: 11px !important;
+  font-weight: 700 !important;
+  color: #64748b !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 12px 8px !important;
+}
+
+:deep(.patient-table td) {
+  font-size: 13px !important;
+  padding: 10px 8px !important;
+  border-bottom: 1px solid #f1f5f9 !important;
+}
+
+:deep(.patient-table tbody tr:hover) {
+  background: #f8fafc !important;
+}
+
+.queue-number {
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.status-chip {
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.klinik-chip {
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.action-buttons-table .v-btn {
+  text-transform: none;
+  font-weight: 600;
+  font-size: 12px;
+  height: 32px;
+}
+
+.dialog-header {
+  background: #f8fafc;
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
   font-size: 18px;
   font-weight: 700;
 }
@@ -666,82 +677,49 @@ const pendingHeaders = ref([
 .klinik-card,
 .penunjang-card {
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.2s;
+  border: 2px solid #e2e8f0;
+  background: white;
 }
 
 .klinik-card:hover,
 .penunjang-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-color: #3b82f6;
+  background: #eff6ff;
+}
+
+.klinik-name,
+.penunjang-name {
+  font-size: 13px;
+  font-weight: 700;
+  color: #1e293b;
 }
 
 .v-btn {
   text-transform: none !important;
+  letter-spacing: 0 !important;
 }
 
-.v-btn--size-small {
-  height: 32px;
-  padding: 0 12px;
-}
-
-.text-success {
-  color: #4caf50 !important;
-}
-
-@media (max-width: 1024px) {
-  .header-content {
-    flex-direction: column;
-    gap: 20px;
-    text-align: center;
-  }
-
-  .header-left {
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .page-title {
-    font-size: 28px;
-  }
-
-  .action-buttons {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 8px;
-    width: 100%;
-  }
-
-  .action-buttons .v-btn {
-    flex: 1;
-    min-width: 120px;
-  }
-}
-
-@media (max-width: 768px) {
+@media (max-width: 960px) {
   .loket-container {
-    padding: 16px;
+    padding: 12px;
   }
 
-  .header-content {
-    padding: 24px 20px;
-  }
-
-  .page-title {
-    font-size: 24px;
-  }
-
-  .action-buttons {
+  .filters {
     flex-direction: column;
-    width: 100%;
+    align-items: stretch;
   }
 
-  .action-buttons .v-btn {
-    width: 100%;
-    margin: 4px 0;
+  .search-field {
+    max-width: 100%;
   }
 
-  .quota-number {
-    font-size: 28px;
+  .action-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .call-buttons {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/AdminLoket.vue b/pages/AdminLoket.vue
index 18e7060..86199de 100644
--- a/pages/AdminLoket.vue
+++ b/pages/AdminLoket.vue
@@ -1,362 +1,228 @@
-<!-- pages/LoketAdmin.vue -->
 <template>
   <div class="loket-container">
-    <!-- Header Section -->
+    <!-- Compact Header -->
     <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>
+          <v-icon size="28" color="white">mdi-view-dashboard</v-icon>
           <div class="header-text">
             <h1 class="page-title">Admin Loket</h1>
             <p class="page-subtitle">{{ currentDate }}</p>
-            <!-- <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">
-            Max 150 Pasien
-          </v-chip>
-        </div> -->
       </div>
     </div>
 
-    <!-- Combined Control Section -->
-    <v-row class="mb-4">
-      <!-- Left Side: Current Processing -->
-      <v-col cols="12" lg="6">
-        <!-- Current Patient Processing Card -->
-        <v-card
-          v-if="currentProcessingPatient"
-          class="current-processing-card"
-          elevation="2"
-        >
-          <v-card-text class="pa-4 d-flex flex-column">
-            <div
-              class="d-flex align-center justify-space-between"
-              
-            >
-              <div class="patient-info">
-                <v-chip
-                  color="primary"
-                  variant="flat"
-                  class="mb-2"
-                  
-                >
-                  <v-icon start>mdi-account-clock</v-icon>
-                  SEDANG DIPROSES
-                </v-chip>
-                <div class="text-h5 font-weight-bold mb-1">
-                  {{ currentProcessingPatient.noAntrian.split(" |")[0] }}
-                </div>
-                <div class="text-subtitle-1 text-grey-darken-1">
-                  {{ currentProcessingPatient.barcode }} |
-                  {{ currentProcessingPatient.klinik }}
-                </div>
-                <div class="patient-meta">
-                  Jenis Pembayaran: {{ currentProcessingPatient.pembayaran }}
-                </div>
+    <!-- Main Content Grid -->
+    <v-row class="content-grid" dense>
+      <!-- Left Column: Current Patient -->
+      <v-col cols="12" md="5">
+        <v-card class="current-patient-card" elevation="0">
+          <v-card-text class="pa-4">
+            <div class="section-label mb-3">SEDANG DIPROSES</div>
+            
+            <div v-if="currentProcessingPatient" class="patient-details">
+              <div class="patient-number mb-2">{{ currentProcessingPatient.noAntrian.split(" |")[0] }}</div>
+              <div class="patient-info-text mb-3">
+                <div>{{ currentProcessingPatient.barcode }}</div>
+                <div>{{ currentProcessingPatient.klinik }} | {{ currentProcessingPatient.pembayaran }}</div>
               </div>
-              <div class="action-buttons d-flex flex-column">
-                <v-btn
-                  color="success"
-                  variant="flat"
-                  class="mb-2"
-                  width="120"
-                  @click="processPatient(currentProcessingPatient, 'check-in')"
-                >
-                  <v-icon start>mdi-check-circle</v-icon>
+              
+              <div class="action-grid">
+                <v-btn color="success-600" variant="flat" block size="large" @click="processPatient(currentProcessingPatient, 'check-in')">
+                  <v-icon start size="20">mdi-check</v-icon>
                   Selesai
                 </v-btn>
-                <v-btn
-                  color="warning"
-                  variant="flat"
-                  class="mb-2"
-                  width="120"
-                  @click="processPatient(currentProcessingPatient, 'terlambat')"
-                >
-                  <v-icon start>mdi-clock-alert</v-icon>
+                <v-btn color="primary-600" variant="flat" block size="large" @click="processPatient(currentProcessingPatient, 'terlambat')">
+                  <v-icon start size="20">mdi-clock-alert</v-icon>
                   Terlambat
                 </v-btn>
-                <v-btn
-                  color="error"
-                  variant="flat"
-                  class="mb-2"
-                  width="120"
-                  @click="processPatient(currentProcessingPatient, 'pending')"
-                >
-                  <v-icon start>mdi-pause-circle</v-icon>
+                <v-btn color="danger-600" variant="flat" block size="large" @click="processPatient(currentProcessingPatient, 'pending')">
+                  <v-icon start size="20">mdi-pause</v-icon>
                   Pending
                 </v-btn>
-                <v-btn
-                  color="info"
-                  variant="flat"
-                  width="120"
-                  @click="showChangeKlinikDialog = true"
-                >
-                  <v-icon start>mdi-swap-horizontal</v-icon>
+                <v-btn color="secondary-600" variant="flat" block size="large" @click="showChangeKlinikDialog = true">
+                  <v-icon start size="20">mdi-swap-horizontal</v-icon>
                   Ubah Klinik
                 </v-btn>
               </div>
             </div>
-          </v-card-text>
-        </v-card>
-
-        <!-- Empty State -->
-        <v-card
-          v-else
-          class="current-processing-card d-flex flex-column align-center justify-center"
-          elevation="2"
-        >
-          <v-card-text class="pa-6 text-center" >
-            <v-icon size="64" color="grey-lighten-1" class="mb-3">
-              mdi-account-off-outline
-            </v-icon>
-            <div class="text-h6 text-grey-darken-1 mb-2">
-              Tidak Ada Pasien yang Diproses
-            </div>
-            <div class="text-body-2 text-grey">
-              Pilih pasien dari tabel "Di Loket" untuk memproses
+            
+            <div v-else class="empty-state">
+              <v-icon size="48" color="grey-lighten-2">mdi-account-off-outline</v-icon>
+              <div class="empty-text">Tidak ada pasien yang diproses</div>
             </div>
           </v-card-text>
         </v-card>
-      </v-col>
 
-      <!-- Right Side: Queue Info and Call Controls -->
-      <v-col cols="12" lg="6">
-        <v-card class="quota-call-card" elevation="2">
+        <!-- Queue Actions -->
+        <v-card class="queue-actions-card mt-3" elevation="0">
           <v-card-text class="pa-4">
-            <div class="d-flex align-center justify-center mb-3">
-              <v-chip color="success" variant="flat" size="large">
-                <v-icon start>mdi-account-arrow-right</v-icon>
-                PANGGIL ANTREAN ANJUNGAN
-              </v-chip>
+            <div class="section-label mb-3">PANGGIL ANTREAN</div>
+            
+            <div class="quota-info mb-3">
+              <div class="quota-item">
+                <span class="quota-label">Kuota</span>
+                <span class="quota-value">150</span>
+              </div>
+              <div class="quota-item">
+                <span class="quota-label">Tersedia</span>
+                <span class="quota-value quota-available">{{ 150 - quotaUsed }}</span>
+              </div>
+              <div class="quota-item full-width">
+                <v-progress-linear :model-value="(quotaUsed / 150) * 100" color="success-600" height="6" rounded class="mt-1"></v-progress-linear>
+                <span class="quota-used">Terpakai: {{ quotaUsed }}</span>
+              </div>
             </div>
 
-            <v-row class="mb-3">
-              <v-col cols="6" class="text-center">
-                <div class="quota-label">Kuota</div>
-                <div class="quota-number">150</div>
-              </v-col>
-              <v-col cols="6" class="text-center">
-                <div class="quota-label">Tersedia</div>
-                <div class="quota-number quota-available">
-                  {{ 150 - quotaUsed }}
-                </div>
-              </v-col>
-            </v-row>
-
-            <div class="text-center mb-3">
-              <div class="quota-used-text">
-                Total Quota Terpakai: {{ quotaUsed }}
-              </div>
-              <v-progress-linear
-                :model-value="(quotaUsed / 150) * 100"
-                color="success"
-                height="6"
-                rounded
-                class="mt-2"
-              ></v-progress-linear>
-            </div>
-
-            <v-divider class="my-3"></v-divider>
-
-            <div class="call-controls">
-              <div class="call-label mb-2">Kumulatif Panggil Antrean</div>
-              <div class="call-buttons">
-                <v-btn
-                  color="success"
-                  variant="outlined"
-                  class="call-btn"
-                  @click="callNext"
-                  :disabled="!nextPatient"
-                >
-                  <span class="call-btn-text">1</span>
-                </v-btn>
-                <v-btn
-                  color="info"
-                  variant="outlined"
-                  class="call-btn"
-                  @click="callMultiplePatients(5)"
-                >
-                  <span class="call-btn-text">5</span>
-                </v-btn>
-                <v-btn
-                  color="warning"
-                  variant="outlined"
-                  class="call-btn"
-                  @click="callMultiplePatients(10)"
-                >
-                  <span class="call-btn-text">10</span>
-                </v-btn>
-                <v-btn
-                  color="error"
-                  variant="outlined"
-                  class="call-btn"
-                  @click="callMultiplePatients(20)"
-                >
-                  <span class="call-btn-text">20</span>
-                </v-btn>
-              </div>
+            <div class="call-buttons">
+              <v-btn color="success-600" variant="outlined" @click="callNext" :disabled="!nextPatient">1</v-btn>
+              <v-btn color="secondary-600" variant="outlined" @click="callMultiplePatients(5)">5</v-btn>
+              <v-btn color="primary-600" variant="outlined" @click="callMultiplePatients(10)">10</v-btn>
+              <v-btn color="danger-600" variant="outlined" @click="callMultiplePatients(20)">20</v-btn>
             </div>
           </v-card-text>
         </v-card>
-      </v-col>
-    </v-row>
 
-    <v-row class="mb-4">
-      <v-col cols="12">
-        <div class="d-flex justify-center mx-4">
-          <v-btn
-            size="large"
-            color="#FF9B1B"
-            variant="flat"
-            class="text-white"
-            @click="showKlinikDialog = true"
-          >
-            <v-icon start>mdi-hospital-building</v-icon>
-            Buat Antrean Klinik Ruang
+        <!-- Create Queue Buttons -->
+        <div class="create-buttons mt-3">
+          <v-btn color="primary-600" variant="flat" block size="large" class="mb-2" @click="showKlinikDialog = true">
+            <v-icon start size="20">mdi-hospital-building</v-icon>
+            Buat Antrean Klinik
           </v-btn>
-          <v-btn
-            size="large"
-            color="#32A3FF"
-            variant="flat"
-            class="text-white"
-            @click="openPenunjangDialog()"
-          >
-            <v-icon start>mdi-clipboard-pulse</v-icon>
+          <v-btn color="secondary-600" variant="flat" block size="large" @click="openPenunjangDialog()">
+            <v-icon start size="20">mdi-clipboard-pulse</v-icon>
             Buat Antrean Penunjang
           </v-btn>
         </div>
       </v-col>
+
+      <!-- Right Column: Patient Table -->
+      <v-col cols="12" md="7">
+        <v-card class="patient-table-card" elevation="0">
+          <v-card-text class="pa-4">
+            <!-- Table Header with Filters -->
+            <div class="table-header mb-4">
+              <div class="section-label">DATA PASIEN</div>
+              
+              <div class="filters">
+                <v-chip-group v-model="selectedStatus" mandatory class="status-filter">
+                  <v-chip value="all" :class="{ 'active-chip': selectedStatus === 'all' }">
+                    Semua ({{ allPatients.length }})
+                  </v-chip>
+                  <v-chip value="diloket" :class="{ 'active-chip': selectedStatus === 'diloket' }">
+                    Di Loket ({{ (diLoketPatients || []).length }})
+                  </v-chip>
+                  <v-chip value="terlambat" :class="{ 'active-chip': selectedStatus === 'terlambat' }">
+                    Terlambat ({{ (terlambatPatients || []).length }})
+                  </v-chip>
+                  <v-chip value="pending" :class="{ 'active-chip': selectedStatus === 'pending' }">
+                    Pending ({{ (pendingPatients || []).length }})
+                  </v-chip>
+                </v-chip-group>
+
+                <v-text-field
+                  v-model="searchQuery"
+                  placeholder="Cari barcode, nomor antrian..."
+                  density="compact"
+                  hide-details
+                  class="search-field"
+                  prepend-inner-icon="mdi-magnify"
+                ></v-text-field>
+              </div>
+            </div>
+
+            <!-- Data Table -->
+            <v-data-table
+              :headers="tableHeaders"
+              :items="filteredPatients"
+              :search="searchQuery"
+              class="patient-table"
+              :items-per-page="10"
+              density="comfortable"
+            >
+              <template #item.noAntrian="{ item }">
+                <div class="queue-number">{{ item.noAntrian.split(" |")[0] }}</div>
+              </template>
+
+              <template #item.status="{ item }">
+                <v-chip
+                  :color="getStatusColor(item.status)"
+                  size="small"
+                  class="status-chip"
+                >
+                  {{ getStatusLabel(item.status) }}
+                </v-chip>
+              </template>
+
+              <template #item.klinik="{ item }">
+                <v-chip size="small" variant="outlined" class="klinik-chip">
+                  {{ item.klinik }}
+                </v-chip>
+              </template>
+
+              <template #item.aksi="{ item }">
+                <div class="action-buttons-table">
+                  <v-btn
+                    v-if="item.status === 'diloket'"
+                    size="small"
+                    color="primary-600"
+                    variant="flat"
+                    @click="processPatient(item, 'proses')"
+                  >
+                    Proses
+                  </v-btn>
+                  <v-btn
+                    v-else-if="item.status === 'terlambat'"
+                    size="small"
+                    color="success-600"
+                    variant="flat"
+                    @click="processPatient(item, 'aktifkan')"
+                  >
+                    Aktifkan
+                  </v-btn>
+                  <v-btn
+                    v-else-if="item.status === 'pending'"
+                    size="small"
+                    color="success-600"
+                    variant="flat"
+                    @click="processPatient(item, 'proses')"
+                  >
+                    Proses
+                  </v-btn>
+                </div>
+              </template>
+            </v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
     </v-row>
 
-    <!-- Di Loket Patients Table -->
-    <v-card class="main-table-card mb-4" elevation="2">
-      <TabelData
-        :headers="diLoketHeaders"
-        :items="diLoketPatients"
-        title="DATA PASIEN - DI LOKET"
-      >
-        <template #actions="{ item }">
-          <div class="d-flex gap-1">
-            <!-- <v-btn
-              size="small"
-              color="info"
-              variant="flat"
-              @click="processPatient(item, 'aktifkan')"
-            >
-              Aktifkan
-            </v-btn> -->
-            <v-btn
-              size="small"
-              color="#FF9B1B"
-              variant="flat"
-              class="text-white"
-              @click="processPatient(item, 'proses')"
-            >
-              Proses
-            </v-btn>
-          </div>
-        </template>
-      </TabelData>
-    </v-card>
-
-    <!-- Terlambat Patients Table -->
-    <v-card
-      class="late-table-card mb-4"
-      elevation="2"
-      v-if="terlambatPatients.length > 0"
-    >
-      <TabelData
-        :headers="terlambatHeaders"
-        :items="terlambatPatients"
-        title="INFO PASIEN LAPOR TERLAMBAT"
-      >
-        <template #actions="{ item }">
-          <div class="d-flex gap-1">
-            <v-btn
-              size="small"
-              color="success"
-              variant="flat"
-              @click="processPatient(item, 'aktifkan')"
-            >
-              Aktifkan
-            </v-btn>
-          </div>
-        </template>
-      </TabelData>
-    </v-card>
-
-    <!-- Pending Patients Table -->
-    <v-card
-      class="pending-table-card mb-4"
-      elevation="2"
-      v-if="pendingPatients.length > 0"
-    >
-      <TabelData
-        :headers="pendingHeaders"
-        :items="pendingPatients"
-        title="INFO PASIEN PENDING"
-      >
-        <template #actions="{ item }">
-          <div class="d-flex gap-1">
-            <v-btn
-              size="small"
-              color="success"
-              variant="flat"
-              @click="processPatient(item, 'proses')"
-            >
-              Proses
-            </v-btn>
-          </div>
-        </template>
-      </TabelData>
-    </v-card>
-
     <!-- Klinik Dialog -->
-    <v-dialog v-model="showKlinikDialog" max-width="900px">
+    <v-dialog v-model="showKlinikDialog" max-width="800px">
       <v-card>
-        <v-card-title class="d-flex align-center pa-4 bg-primary text-white">
-          <v-btn icon @click="showKlinikDialog = false" class="mr-2">
-            <v-icon color="white">mdi-arrow-left</v-icon>
+        <v-card-title class="dialog-header">
+          <v-btn icon size="small" @click="showKlinikDialog = false">
+            <v-icon>mdi-close</v-icon>
           </v-btn>
-          <span class="text-h6">Buat Antrean Klinik Ruang</span>
+          <span>Pilih Klinik</span>
         </v-card-title>
 
-        <v-card-subtitle class="pa-4 text-center">
-          <h3 class="text-h6 mb-3">Pilih Klinik</h3>
-          <div class="d-flex justify-end gap-2">
-            <v-text-field
-              v-model="klinikSearch"
-              placeholder="Pencarian"
-              density="compact"
-              hide-details
-              style="max-width: 200px"
-            ></v-text-field>
-          </div>
-        </v-card-subtitle>
-
         <v-card-text class="pa-4">
-          <v-row>
-            <v-col
-              v-for="klinik in filteredKliniks"
-              :key="klinik.id"
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <v-card
-                class="klinik-card"
-                elevation="1"
-                @click="selectKlinik(klinik)"
-              >
-                <v-card-text class="text-center pa-4">
-                  <div class="text-h6 font-weight-bold">{{ klinik.name }}</div>
+          <v-text-field
+            v-model="klinikSearch"
+            placeholder="Cari klinik..."
+            density="compact"
+            hide-details
+            class="mb-4"
+            prepend-inner-icon="mdi-magnify"
+          ></v-text-field>
+
+          <v-row dense>
+            <v-col v-for="klinik in filteredKliniks" :key="klinik.id" cols="6" sm="4">
+              <v-card class="klinik-card" @click="selectKlinik(klinik)" elevation="0">
+                <v-card-text class="text-center pa-3">
+                  <div class="klinik-name">{{ klinik.name }}</div>
                 </v-card-text>
               </v-card>
             </v-col>
@@ -366,46 +232,30 @@
     </v-dialog>
 
     <!-- Penunjang Dialog -->
-    <v-dialog v-model="showPenunjangDialog" max-width="900px">
+    <v-dialog v-model="showPenunjangDialog" max-width="800px">
       <v-card>
-        <v-card-title class="d-flex align-center pa-4 bg-secondary text-white">
-          <v-btn icon @click="showPenunjangDialog = false" class="mr-2">
-            <v-icon color="white">mdi-arrow-left</v-icon>
+        <v-card-title class="dialog-header">
+          <v-btn icon size="small" @click="showPenunjangDialog = false">
+            <v-icon>mdi-close</v-icon>
           </v-btn>
-          <span class="text-h6">Buat Antrean Penunjang</span>
+          <span>Pilih Penunjang</span>
         </v-card-title>
 
-        <v-card-subtitle class="pa-4">
-          <h3 class="text-h6 mb-3 text-center">Pilih Ruang</h3>
-          <div class="d-flex justify-end gap-2">
-            <v-text-field
-              v-model="penunjangSearch"
-              placeholder="Pencarian"
-              density="compact"
-              hide-details
-              style="max-width: 200px"
-            ></v-text-field>
-          </div>
-        </v-card-subtitle>
-
         <v-card-text class="pa-4">
-          <v-row>
-            <v-col
-              v-for="penunjang in filteredPenunjangs"
-              :key="penunjang.id"
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <v-card
-                class="penunjang-card"
-                elevation="1"
-                @click="selectPenunjang(penunjang)"
-              >
-                <v-card-text class="text-center pa-4">
-                  <div class="text-h6 font-weight-bold">
-                    {{ penunjang.name }}
-                  </div>
+          <v-text-field
+            v-model="penunjangSearch"
+            placeholder="Cari penunjang..."
+            density="compact"
+            hide-details
+            class="mb-4"
+            prepend-inner-icon="mdi-magnify"
+          ></v-text-field>
+
+          <v-row dense>
+            <v-col v-for="penunjang in filteredPenunjangs" :key="penunjang.id" cols="6" sm="4">
+              <v-card class="penunjang-card" @click="selectPenunjang(penunjang)" elevation="0">
+                <v-card-text class="text-center pa-3">
+                  <div class="penunjang-name">{{ penunjang.name }}</div>
                 </v-card-text>
               </v-card>
             </v-col>
@@ -415,44 +265,30 @@
     </v-dialog>
 
     <!-- Change Klinik Dialog -->
-    <v-dialog v-model="showChangeKlinikDialog" max-width="900px">
+    <v-dialog v-model="showChangeKlinikDialog" max-width="800px">
       <v-card>
-        <v-card-title class="d-flex align-center pa-4 bg-info text-white">
-          <v-btn icon @click="showChangeKlinikDialog = false" class="mr-2">
-            <v-icon color="white">mdi-arrow-left</v-icon>
+        <v-card-title class="dialog-header">
+          <v-btn icon size="small" @click="showChangeKlinikDialog = false">
+            <v-icon>mdi-close</v-icon>
           </v-btn>
-          <span class="text-h6">Ubah Klinik</span>
+          <span>Ubah Klinik</span>
         </v-card-title>
 
-        <v-card-subtitle class="pa-4">
-          <h3 class="text-h6 mb-3 text-center">Pilih Klinik Baru</h3>
-          <div class="d-flex justify-end gap-2">
-            <v-text-field
-              v-model="changeKlinikSearch"
-              placeholder="Pencarian"
-              density="compact"
-              hide-details
-              style="max-width: 200px"
-            ></v-text-field>
-          </div>
-        </v-card-subtitle>
-
         <v-card-text class="pa-4">
-          <v-row>
-            <v-col
-              v-for="klinik in filteredChangeKliniks"
-              :key="klinik.id"
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <v-card
-                class="klinik-card"
-                elevation="1"
-                @click="changeKlinik(klinik)"
-              >
-                <v-card-text class="text-center pa-4">
-                  <div class="text-h6 font-weight-bold">{{ klinik.name }}</div>
+          <v-text-field
+            v-model="changeKlinikSearch"
+            placeholder="Cari klinik..."
+            density="compact"
+            hide-details
+            class="mb-4"
+            prepend-inner-icon="mdi-magnify"
+          ></v-text-field>
+
+          <v-row dense>
+            <v-col v-for="klinik in filteredChangeKliniks" :key="klinik.id" cols="6" sm="4">
+              <v-card class="klinik-card" @click="changeKlinik(klinik)" elevation="0">
+                <v-card-text class="text-center pa-3">
+                  <div class="klinik-name">{{ klinik.name }}</div>
                 </v-card-text>
               </v-card>
             </v-col>
@@ -462,15 +298,10 @@
     </v-dialog>
 
     <!-- Snackbar -->
-    <v-snackbar
-      v-model="snackbar"
-      :color="snackbarColor"
-      :timeout="3000"
-      location="top right"
-    >
+    <v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="3000" location="top right">
       {{ snackbarText }}
       <template v-slot:actions>
-        <v-btn icon @click="snackbar = false">
+        <v-btn icon size="small" @click="snackbar = false">
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </template>
@@ -479,11 +310,9 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-import TabelData from "../components/TabelData.vue";
+import { ref, computed } from "vue";
 import { useQueue } from "../composables/useQueue";
 
-// Use queue composable with 'loket' admin type
 const {
   snackbar,
   snackbarText,
@@ -499,7 +328,6 @@ const {
   terlambatPatients,
   pendingPatients,
   nextPatient,
-  totalPasien,
   quotaUsed,
   filteredKliniks,
   filteredPenunjangs,
@@ -512,6 +340,7 @@ const {
   openPenunjangDialog,
   changeKlinik,
 } = useQueue("loket");
+
 const currentDate = ref(
   new Date().toLocaleDateString("id-ID", {
     weekday: "long",
@@ -520,252 +349,366 @@ const currentDate = ref(
     year: "numeric",
   })
 );
-// Headers for different tables
-const diLoketHeaders = ref([
-  { title: "No", value: "no", sortable: false, width: "60px" },
-  { title: "Jam Panggil", value: "jamPanggil", sortable: true, width: "100px" },
-  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
-  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
-  { title: "Shift", value: "shift", sortable: true, width: "80px" },
-  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
-  { title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
-  { title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
-  { title: "Aksi", value: "aksi", sortable: false, width: "200px" },
+
+const selectedStatus = ref("all");
+const searchQuery = ref("");
+
+// Combine all patients with status
+const allPatients = computed(() => {
+  const diLoket = (diLoketPatients.value || []).map(p => ({ ...p, status: 'diloket' }));
+  const terlambat = (terlambatPatients.value || []).map(p => ({ ...p, status: 'terlambat' }));
+  const pending = (pendingPatients.value || []).map(p => ({ ...p, status: 'pending' }));
+  
+  console.log('Di Loket:', diLoket.length);
+  console.log('Terlambat:', terlambat.length);
+  console.log('Pending:', pending.length);
+  
+  return [...diLoket, ...terlambat, ...pending];
+});
+
+// Filter patients based on selected status
+const filteredPatients = computed(() => {
+  if (selectedStatus.value === "all") return allPatients.value;
+  return allPatients.value.filter(p => p.status === selectedStatus.value);
+});
+
+const tableHeaders = ref([
+  { title: "No", value: "no", width: "60px", sortable: false },
+  { title: "Jam Panggil", value: "jamPanggil", width: "100px" },
+  { title: "Barcode", value: "barcode", width: "130px" },
+  { title: "No Antrian", value: "noAntrian", width: "140px" },
+  { title: "Klinik", value: "klinik", width: "100px" },
+  { title: "Fast Track", value: "fastTrack", width: "100px" },
+  { title: "Pembayaran", value: "pembayaran", width: "100px" },
+  { title: "Status", value: "status", width: "100px" },
+  { title: "Aksi", value: "aksi", width: "100px", sortable: false },
 ]);
 
-const terlambatHeaders = ref([
-  { title: "No", value: "no", sortable: false, width: "60px" },
-  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
-  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
-  { title: "Shift", value: "shift", sortable: true, width: "80px" },
-  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
-  { title: "Aksi", value: "aksi", sortable: false, width: "100px" },
-]);
+const getStatusColor = (status) => {
+  const colors = {
+    diloket: "var(--color-secondary-600)",
+    terlambat: "var(--color-primary-600)",
+    pending: "var(--color-danger-600)"
+  };
+  return colors[status] || "var(--color-neutral-600)";
+};
 
-const pendingHeaders = ref([
-  { title: "#", value: "no", sortable: false, width: "60px" },
-  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
-  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
-  { title: "Shift", value: "shift", sortable: true, width: "80px" },
-  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
-  { title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
-  { title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
-  { title: "Aksi", value: "aksi", sortable: false, width: "100px" },
-]);
+const getStatusLabel = (status) => {
+  const labels = {
+    diloket: "Di Loket",
+    terlambat: "Terlambat",
+    pending: "Pending"
+  };
+  return labels[status] || status;
+};
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .loket-container {
-  background: #f5f7fa;
+  background: var(--color-neutral-300);
   min-height: 100vh;
-  padding: 20px;
+  padding: 16px;
 }
 
 .page-header {
-  background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 8px 32px rgba(126, 126, 126, 0.3);
+  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
+  border-radius: 12px;
+  margin-bottom: 16px;
+  box-shadow: 0 4px 12px rgba(255, 155, 27, 0.2);
 }
 
 .header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 32px;
-  color: white;
+  padding: 20px 24px;
 }
 
 .header-left {
   display: flex;
   align-items: center;
+  gap: 16px;
 }
 
-.header-icon {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 16px;
-  padding: 16px;
-  margin-right: 20px;
-  backdrop-filter: blur(10px);
+.header-text {
+  color: var(--color-neutral-100);
 }
 
 .page-title {
-  font-size: 32px;
+  font-size: 24px;
   font-weight: 700;
   margin: 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  line-height: 1.2;
+  color: var(--color-neutral-100);
 }
 
 .page-subtitle {
+  font-size: 14px;
   margin: 4px 0 0 0;
   opacity: 0.9;
-  font-size: 16px;
+  color: var(--color-neutral-100);
 }
 
-.header-right {
-  display: flex;
-  align-items: center;
+.content-grid {
+  margin: 0 -8px;
 }
 
-.main-table-card,
-.late-table-card,
-.pending-table-card {
-  border-radius: 16px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
+.content-grid > .v-col {
+  padding: 8px;
 }
 
-.current-processing-card {
-  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
-  border: 2px solid rgba(255, 152, 0, 0.2);
-  
+.current-patient-card,
+.queue-actions-card,
+.patient-table-card {
+  border-radius: 12px;
+  border: 1px solid var(--color-neutral-500);
+  background: var(--color-neutral-100);
 }
 
-.quota-call-card {
-  background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%);
-  border: 2px solid rgba(33, 150, 243, 0.2);
-}
-
-.patient-info .text-h5 {
-  color: #1976d2;
-}
-
-.action-buttons {
-  display: flex;
-  align-items: center;
-}
-
-.quota-label {
-  font-size: 13px;
-  color: #6b7280;
-  font-weight: 500;
-  margin-bottom: 4px;
-}
-
-.quota-number {
-  font-size: 32px;
+.section-label {
+  font-size: 11px;
   font-weight: 700;
-  color: #1f2937;
+  letter-spacing: 0.5px;
+  color: var(--color-neutral-600);
+  text-transform: uppercase;
+}
+
+.patient-details {
+  background: linear-gradient(135deg, var(--color-primary-200) 0%, var(--color-primary-300) 100%);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.patient-number {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--color-neutral-900);
   line-height: 1;
 }
 
-.quota-available {
-  color: #4caf50;
-}
-
-.quota-used-text {
+.patient-info-text {
   font-size: 13px;
-  color: #6b7280;
-  font-weight: 500;
+  color: var(--color-neutral-700);
+  line-height: 1.5;
 }
 
-.call-controls {
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 32px 16px;
+}
+
+.empty-text {
+  font-size: 13px;
+  color: var(--color-neutral-600);
+  margin-top: 8px;
+}
+
+.quota-info {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.quota-item {
+  background: var(--color-neutral-300);
+  border-radius: 8px;
+  padding: 12px;
   text-align: center;
 }
 
-.call-label {
-  font-size: 14px;
+.quota-item.full-width {
+  grid-column: 1 / -1;
+}
+
+.quota-label {
+  display: block;
+  font-size: 11px;
+  color: var(--color-neutral-600);
+  margin-bottom: 4px;
   font-weight: 600;
-  color: #374151;
-  text-align: center;
+}
+
+.quota-value {
+  display: block;
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--color-neutral-900);
+}
+
+.quota-available {
+  color: var(--color-success-600);
+}
+
+.quota-used {
+  display: block;
+  font-size: 11px;
+  color: var(--color-neutral-600);
+  margin-top: 4px;
 }
 
 .call-buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.call-buttons .v-btn {
+  font-size: 16px;
+  font-weight: 700;
+  height: 44px;
+}
+
+.create-buttons .v-btn {
+  text-transform: none;
+  font-weight: 600;
+}
+
+.table-header {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   gap: 12px;
+}
+
+.filters {
+  display: flex;
+  gap: 12px;
+  align-items: center;
   flex-wrap: wrap;
 }
 
-.call-btn {
-  min-width: 80px;
-  height: 48px;
+.status-filter {
+  flex: 1;
+}
+
+.status-filter .v-chip {
+  font-size: 12px;
+  font-weight: 600;
+  height: 32px;
+  border: 1px solid var(--color-neutral-500);
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-600);
+}
+
+.status-filter .v-chip.active-chip {
+  background: var(--color-secondary-600);
+  color: var(--color-neutral-100);
+  border-color: var(--color-secondary-600);
+}
+
+.search-field {
+  max-width: 250px;
+}
+
+:deep(.patient-table) {
   border-radius: 8px;
 }
 
-.call-btn-text {
+:deep(.patient-table .v-data-table__thead) {
+  background: var(--color-neutral-300);
+}
+
+:deep(.patient-table th) {
+  font-size: 11px !important;
+  font-weight: 700 !important;
+  color: var(--color-neutral-600) !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 12px 8px !important;
+}
+
+:deep(.patient-table td) {
+  font-size: 13px !important;
+  padding: 10px 8px !important;
+  border-bottom: 1px solid var(--color-neutral-400) !important;
+}
+
+:deep(.patient-table tbody tr:hover) {
+  background: var(--color-neutral-300) !important;
+}
+
+.queue-number {
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+
+.status-chip {
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.klinik-chip {
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.action-buttons-table .v-btn {
+  text-transform: none;
+  font-weight: 600;
+  font-size: 12px;
+  height: 32px;
+}
+
+.dialog-header {
+  background: var(--color-neutral-300);
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
   font-size: 18px;
   font-weight: 700;
+  color: var(--color-neutral-900);
 }
 
 .klinik-card,
 .penunjang-card {
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.2s;
+  border: 2px solid var(--color-neutral-500);
+  background: var(--color-neutral-100);
 }
 
 .klinik-card:hover,
 .penunjang-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-color: var(--color-secondary-600);
+  background: var(--color-secondary-200);
+}
+
+.klinik-name,
+.penunjang-name {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--color-neutral-900);
 }
 
 .v-btn {
   text-transform: none !important;
+  letter-spacing: 0 !important;
 }
 
-.v-btn--size-small {
-  height: 32px;
-  padding: 0 12px;
-}
-
-.text-success {
-  color: #4caf50 !important;
-}
-
-@media (max-width: 1024px) {
-  .header-content {
-    flex-direction: column;
-    gap: 20px;
-    text-align: center;
-  }
-
-  .header-left {
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .page-title {
-    font-size: 28px;
-  }
-
-  .action-buttons {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 8px;
-    width: 100%;
-  }
-
-  .action-buttons .v-btn {
-    flex: 1;
-    min-width: 120px;
-  }
-}
-
-@media (max-width: 768px) {
+@media (max-width: 960px) {
   .loket-container {
-    padding: 16px;
+    padding: 12px;
   }
 
-  .header-content {
-    padding: 24px 20px;
-  }
-
-  .page-title {
-    font-size: 24px;
-  }
-
-  .action-buttons {
+  .filters {
     flex-direction: column;
-    width: 100%;
+    align-items: stretch;
   }
 
-  .action-buttons .v-btn {
-    width: 100%;
-    margin: 4px 0;
+  .search-field {
+    max-width: 100%;
   }
 
-  .quota-number {
-    font-size: 28px;
+  .action-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .call-buttons {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/AdminPenunjang.vue b/pages/AdminPenunjang.vue
index 9785a61..c160a87 100644
--- a/pages/AdminPenunjang.vue
+++ b/pages/AdminPenunjang.vue
@@ -1,338 +1,225 @@
 <!-- pages/AdminPenunjang.vue -->
 <template>
   <div class="loket-container">
-    <!-- Header Section -->
+    <!-- Compact Header -->
     <div class="page-header">
       <div class="header-content">
         <div class="header-left">
-          <div class="header-icon">
-            <v-icon size="32" color="white">mdi-clipboard-pulse</v-icon>
-          </div>
+          <v-icon size="28" color="white">mdi-clipboard-pulse</v-icon>
           <div class="header-text">
             <h1 class="page-title">Admin Penunjang</h1>
-            <!-- <p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p> -->
+            <p class="page-subtitle">{{ currentDate }}</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">
-            Max 150 Pasien
-          </v-chip>
-        </div> -->
       </div>
     </div>
 
-    <!-- Combined Control Section -->
-    <v-row class="mb-4">
-      <!-- Left Side: Current Processing -->
-      <v-col cols="12" lg="6">
-        <!-- Current Patient Processing Card -->
-        <v-card class="current-processing-card" elevation="2">
+    <!-- Main Content Grid -->
+    <v-row class="content-grid" dense>
+      <!-- Left Column: Current Patient -->
+      <v-col cols="12" md="5">
+        <v-card class="current-patient-card" elevation="0">
           <v-card-text class="pa-4">
-            <!-- Empty State (Tidak ada pasien yg diproses) -->
-            <div
-              v-if="currentProcessingPatient"
-              class="d-flex align-center justify-space-between"
-            >
-              <div class="patient-info">
-                <v-chip color="primary" variant="flat" class="mb-2">
-                  <v-icon start>mdi-account-clock</v-icon>
-                  SEDANG DIPROSES
-                </v-chip>
-                <div class="text-h5 font-weight-bold mb-1">
-                  {{ currentProcessingPatient.noAntrian.split(" |")[0] }}
-                </div>
-                <div class="text-subtitle-1 text-grey-darken-1">
-                  {{ currentProcessingPatient.barcode }} |
-                  {{ currentProcessingPatient.klinik }}
-                </div>
-                <div class="patient-meta">
-                  Jenis Pembayaran: {{ currentProcessingPatient.pembayaran }}
-                </div>
+            <div class="section-label mb-3">SEDANG DIPROSES</div>
+            
+            <div v-if="currentProcessingPatient" class="patient-details">
+              <div class="patient-number mb-2">{{ currentProcessingPatient.noAntrian.split(" |")[0] }}</div>
+              <div class="patient-info-text mb-3">
+                <div>{{ currentProcessingPatient.barcode }}</div>
+                <div>{{ currentProcessingPatient.klinik }} | {{ currentProcessingPatient.pembayaran }}</div>
               </div>
-              <div class="action-buttons d-flex flex-column">
-                <v-btn
-                  color="success"
-                  variant="flat"
-                  class="mb-2"
-                  width="120"
-                  @click="processPatient(currentProcessingPatient, 'check-in')"
-                >
-                  <v-icon start>mdi-check-circle</v-icon>
+              
+              <div class="action-grid">
+                <v-btn color="#10b981" variant="flat" block size="large" @click="processPatient(currentProcessingPatient, 'check-in')">
+                  <v-icon start size="20">mdi-check</v-icon>
                   Selesai
                 </v-btn>
-                <v-btn
-                  color="warning"
-                  variant="flat"
-                  class="mb-2"
-                  width="120"
-                  @click="processPatient(currentProcessingPatient, 'terlambat')"
-                >
-                  <v-icon start>mdi-clock-alert</v-icon>
+                <v-btn color="#f59e0b" variant="flat" block size="large" @click="processPatient(currentProcessingPatient, 'terlambat')">
+                  <v-icon start size="20">mdi-clock-alert</v-icon>
                   Terlambat
                 </v-btn>
-                <v-btn
-                  color="error"
-                  variant="flat"
-                  class="mb-2"
-                  width="120"
-                  @click="processPatient(currentProcessingPatient, 'pending')"
-                >
-                  <v-icon start>mdi-pause-circle</v-icon>
+                <v-btn color="#ef4444" variant="flat" block size="large" @click="processPatient(currentProcessingPatient, 'pending')">
+                  <v-icon start size="20">mdi-pause</v-icon>
                   Pending
                 </v-btn>
-                <v-btn
-                  color="error"
-                  variant="flat"
-                  width="120"
-                  @click="showChangeKlinikDialog = true"
-                >
-                  <v-icon start>mdi-swap-horizontal</v-icon>
-                  Ubah Klinik
+                <v-btn color="#3b82f6" variant="flat" block size="large" @click="showChangeKlinikDialog = true">
+                  <v-icon start size="20">mdi-swap-horizontal</v-icon>
+                  Ubah Ruang
                 </v-btn>
               </div>
             </div>
-
-            <!-- Empty state when no patient is being processed -->
-            <div v-else class="text-center pa-6">
-              <v-icon size="64" color="grey-lighten-1" class="mb-3">
-                mdi-account-off-outline
-              </v-icon>
-              <div class="text-h6 text-grey-darken-1 mb-2">
-                Tidak Ada Pasien yang Diproses
-              </div>
-              <div class="text-body-2 text-grey">
-                Pilih pasien dari tabel "Di Loket" untuk memproses
-              </div>
+            
+            <div v-else class="empty-state">
+              <v-icon size="48" color="grey-lighten-2">mdi-account-off-outline</v-icon>
+              <div class="empty-text">Tidak ada pasien yang diproses</div>
             </div>
           </v-card-text>
         </v-card>
-      </v-col>
 
-      <!-- Right Side: Queue Info and Call Controls -->
-      <v-col cols="12" lg="6">
-        <v-card class="quota-call-card" elevation="2">
+        <!-- Queue Actions -->
+        <v-card class="queue-actions-card mt-3" elevation="0">
           <v-card-text class="pa-4">
-            <div class="d-flex align-center justify-center mb-3">
-              <v-chip color="success" variant="flat" size="large">
-                <v-icon start>mdi-account-arrow-right</v-icon>
-                PANGGIL ANTREAN ANJUNGAN
-              </v-chip>
+            <div class="section-label mb-3">PANGGIL ANTREAN</div>
+            
+            <div class="quota-info mb-3">
+              <div class="quota-item">
+                <span class="quota-label">Kuota</span>
+                <span class="quota-value">150</span>
+              </div>
+              <div class="quota-item">
+                <span class="quota-label">Tersedia</span>
+                <span class="quota-value quota-available">{{ 150 - quotaUsed }}</span>
+              </div>
+              <div class="quota-item full-width">
+                <v-progress-linear :model-value="(quotaUsed / 150) * 100" color="#10b981" height="6" rounded class="mt-1"></v-progress-linear>
+                <span class="quota-used">Terpakai: {{ quotaUsed }}</span>
+              </div>
             </div>
 
-            <v-row class="mb-3">
-              <v-col cols="6" class="text-center">
-                <div class="quota-label">Kuota</div>
-                <div class="quota-number">150</div>
-              </v-col>
-              <v-col cols="6" class="text-center">
-                <div class="quota-label">Tersedia</div>
-                <div class="quota-number quota-available">
-                  {{ 150 - quotaUsed }}
-                </div>
-              </v-col>
-            </v-row>
-
-            <div class="text-center mb-3">
-              <div class="quota-used-text">
-                Total Quota Terpakai: {{ quotaUsed }}
-              </div>
-              <v-progress-linear
-                :model-value="(quotaUsed / 150) * 100"
-                color="success"
-                height="6"
-                rounded
-                class="mt-2"
-              ></v-progress-linear>
-            </div>
-
-            <v-divider class="my-3"></v-divider>
-
-            <div class="call-controls">
-              <div class="call-label mb-2">Kumulatif Panggil Antrean</div>
-              <div class="call-buttons">
-                <v-btn
-                  color="success"
-                  variant="outlined"
-                  class="call-btn"
-                  @click="callNext"
-                  :disabled="!nextPatient"
-                >
-                  <span class="call-btn-text">1</span>
-                </v-btn>
-                <v-btn
-                  color="info"
-                  variant="outlined"
-                  class="call-btn"
-                  @click="callMultiplePatients(5)"
-                >
-                  <span class="call-btn-text">5</span>
-                </v-btn>
-                <v-btn
-                  color="warning"
-                  variant="outlined"
-                  class="call-btn"
-                  @click="callMultiplePatients(10)"
-                >
-                  <span class="call-btn-text">10</span>
-                </v-btn>
-                <v-btn
-                  color="error"
-                  variant="outlined"
-                  class="call-btn"
-                  @click="callMultiplePatients(20)"
-                >
-                  <span class="call-btn-text">20</span>
-                </v-btn>
-              </div>
+            <div class="call-buttons">
+              <v-btn color="#10b981" variant="outlined" @click="callNext" :disabled="!nextPatient">1</v-btn>
+              <v-btn color="#3b82f6" variant="outlined" @click="callMultiplePatients(5)">5</v-btn>
+              <v-btn color="#f59e0b" variant="outlined" @click="callMultiplePatients(10)">10</v-btn>
+              <v-btn color="#ef4444" variant="outlined" @click="callMultiplePatients(20)">20</v-btn>
             </div>
           </v-card-text>
         </v-card>
-      </v-col>
-    </v-row>
 
-    <v-row class="mb-4">
-      <v-col cols="12">
-        <div class="d-flex justify-center">
-          <v-btn
-            color="#32A3FF"
-            variant="flat"
-            size="large"
-            @click="showPenunjangDialog = true"
-            class="mx-2"
-          >
-            <v-icon start>mdi-clipboard-pulse</v-icon>
+        <!-- Create Queue Button -->
+        <div class="create-buttons mt-3">
+          <v-btn color="#3b82f6" variant="flat" block size="large" @click="showPenunjangDialog = true">
+            <v-icon start size="20">mdi-clipboard-pulse</v-icon>
             Buat Antrean Penunjang
           </v-btn>
         </div>
       </v-col>
+
+      <!-- Right Column: Patient Table -->
+      <v-col cols="12" md="7">
+        <v-card class="patient-table-card" elevation="0">
+          <v-card-text class="pa-4">
+            <!-- Table Header with Filters -->
+            <div class="table-header mb-4">
+              <div class="section-label">DATA PASIEN</div>
+              
+              <div class="filters">
+                <v-chip-group v-model="selectedStatus" mandatory class="status-filter">
+                  <v-chip value="all" :class="{ 'active-chip': selectedStatus === 'all' }">
+                    Semua ({{ allPatients.length }})
+                  </v-chip>
+                  <v-chip value="diloket" :class="{ 'active-chip': selectedStatus === 'diloket' }">
+                    Di Penunjang ({{ (diLoketPatients || []).length }})
+                  </v-chip>
+                  <v-chip value="terlambat" :class="{ 'active-chip': selectedStatus === 'terlambat' }">
+                    Terlambat ({{ (terlambatPatients || []).length }})
+                  </v-chip>
+                  <v-chip value="pending" :class="{ 'active-chip': selectedStatus === 'pending' }">
+                    Pending ({{ (pendingPatients || []).length }})
+                  </v-chip>
+                </v-chip-group>
+
+                <v-text-field
+                  v-model="searchQuery"
+                  placeholder="Cari barcode, nomor antrian..."
+                  density="compact"
+                  hide-details
+                  class="search-field"
+                  prepend-inner-icon="mdi-magnify"
+                ></v-text-field>
+              </div>
+            </div>
+
+            <!-- Data Table -->
+            <v-data-table
+              :headers="tableHeaders"
+              :items="filteredPatients"
+              :search="searchQuery"
+              class="patient-table"
+              :items-per-page="10"
+              density="comfortable"
+            >
+              <template #item.noAntrian="{ item }">
+                <div class="queue-number">{{ item.noAntrian.split(" |")[0] }}</div>
+              </template>
+
+              <template #item.status="{ item }">
+                <v-chip
+                  :color="getStatusColor(item.status)"
+                  size="small"
+                  class="status-chip"
+                >
+                  {{ getStatusLabel(item.status) }}
+                </v-chip>
+              </template>
+
+              <template #item.klinik="{ item }">
+                <v-chip size="small" variant="outlined" class="klinik-chip">
+                  {{ item.klinik }}
+                </v-chip>
+              </template>
+
+              <template #item.aksi="{ item }">
+                <div class="action-buttons-table">
+                  <v-btn
+                    v-if="item.status === 'diloket'"
+                    size="small"
+                    color="#10b981"
+                    variant="flat"
+                    @click="processPatient(item, 'proses')"
+                  >
+                    Proses
+                  </v-btn>
+                  <v-btn
+                    v-else-if="item.status === 'terlambat'"
+                    size="small"
+                    color="#10b981"
+                    variant="flat"
+                    @click="processPatient(item, 'aktifkan')"
+                  >
+                    Aktifkan
+                  </v-btn>
+                  <v-btn
+                    v-else-if="item.status === 'pending'"
+                    size="small"
+                    color="#10b981"
+                    variant="flat"
+                    @click="processPatient(item, 'proses')"
+                  >
+                    Proses
+                  </v-btn>
+                </div>
+              </template>
+            </v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
     </v-row>
 
-    <!-- Di Loket Patients Table -->
-    <v-card class="main-table-card mb-4" elevation="2">
-      <TabelData
-        :headers="diLoketHeaders"
-        :items="diLoketPatients"
-        title="DATA PASIEN - DI LOKET"
-      >
-        <template #actions="{ item }">
-          <div class="d-flex gap-1">
-            <!-- <v-btn
-              size="small"
-              color="info"
-              variant="flat"
-              @click="processPatient(item, 'aktifkan')"
-            >
-              Aktifkan
-            </v-btn> -->
-            <v-btn
-              size="small"
-              color="success"
-              variant="flat"
-              @click="processPatient(item, 'proses')"
-            >
-              Proses
-            </v-btn>
-          </div>
-        </template>
-      </TabelData>
-    </v-card>
-
-    <!-- Terlambat Patients Table -->
-    <v-card
-      class="late-table-card mb-4"
-      elevation="2"
-      v-if="terlambatPatients.length > 0"
-    >
-      <TabelData
-        :headers="terlambatHeaders"
-        :items="terlambatPatients"
-        title="INFO PASIEN LAPOR TERLAMBAT"
-      >
-        <template #actions="{ item }">
-          <div class="d-flex gap-1">
-            <v-btn
-              size="small"
-              color="success"
-              variant="flat"
-              @click="processPatient(item, 'aktifkan')"
-            >
-              Aktifkan
-            </v-btn>
-          </div>
-        </template>
-      </TabelData>
-    </v-card>
-
-    <!-- Pending Patients Table -->
-    <v-card
-      class="pending-table-card mb-4"
-      elevation="2"
-      v-if="pendingPatients.length > 0"
-    >
-      <TabelData
-        :headers="pendingHeaders"
-        :items="pendingPatients"
-        title="INFO PASIEN PENDING"
-      >
-        <template #actions="{ item }">
-          <div class="d-flex gap-1">
-            <v-btn
-              size="small"
-              color="success"
-              variant="flat"
-              @click="processPatient(item, 'proses')"
-            >
-              Proses
-            </v-btn>
-          </div>
-        </template>
-      </TabelData>
-    </v-card>
-
     <!-- Penunjang Dialog -->
-    <v-dialog v-model="showPenunjangDialog" max-width="900px">
+    <v-dialog v-model="showPenunjangDialog" max-width="800px">
       <v-card>
-        <v-card-title class="d-flex align-center pa-4 bg-secondary text-white">
-          <v-btn icon @click="showPenunjangDialog = false" class="mr-2">
-            <v-icon color="white">mdi-arrow-left</v-icon>
+        <v-card-title class="dialog-header">
+          <v-btn icon size="small" @click="showPenunjangDialog = false">
+            <v-icon>mdi-close</v-icon>
           </v-btn>
-          <span class="text-h6">Buat Antrean Penunjang</span>
+          <span>Pilih Ruang Penunjang</span>
         </v-card-title>
 
-        <v-card-subtitle class="pa-4">
-          <h3 class="text-h6 mb-3 text-center">Pilih Ruang</h3>
-          <div class="d-flex justify-end gap-2">
-            <v-text-field
-              v-model="penunjangSearch"
-              placeholder="Pencarian"
-              density="compact"
-              hide-details
-              style="max-width: 200px"
-            ></v-text-field>
-          </div>
-        </v-card-subtitle>
-
         <v-card-text class="pa-4">
-          <v-row>
-            <v-col
-              v-for="penunjang in filteredPenunjangs"
-              :key="penunjang.id"
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <v-card
-                class="penunjang-card"
-                elevation="1"
-                @click="selectPenunjang(penunjang)"
-              >
-                <v-card-text class="text-center pa-4">
-                  <div class="text-h6 font-weight-bold">
-                    {{ penunjang.name }}
-                  </div>
+          <v-text-field
+            v-model="penunjangSearch"
+            placeholder="Cari penunjang..."
+            density="compact"
+            hide-details
+            class="mb-4"
+            prepend-inner-icon="mdi-magnify"
+          ></v-text-field>
+
+          <v-row dense>
+            <v-col v-for="penunjang in filteredPenunjangs" :key="penunjang.id" cols="6" sm="4">
+              <v-card class="penunjang-card" @click="selectPenunjang(penunjang)" elevation="0">
+                <v-card-text class="text-center pa-3">
+                  <div class="penunjang-name">{{ penunjang.name }}</div>
                 </v-card-text>
               </v-card>
             </v-col>
@@ -341,45 +228,31 @@
       </v-card>
     </v-dialog>
 
-    <!-- Change Klinik Dialog -->
-    <v-dialog v-model="showChangeKlinikDialog" max-width="900px">
+    <!-- Change Ruang Dialog -->
+    <v-dialog v-model="showChangeKlinikDialog" max-width="800px">
       <v-card>
-        <v-card-title class="d-flex align-center pa-4 bg-info text-white">
-          <v-btn icon @click="showChangeKlinikDialog = false" class="mr-2">
-            <v-icon color="white">mdi-arrow-left</v-icon>
+        <v-card-title class="dialog-header">
+          <v-btn icon size="small" @click="showChangeKlinikDialog = false">
+            <v-icon>mdi-close</v-icon>
           </v-btn>
-          <span class="text-h6">Ubah Klinik</span>
+          <span>Ubah Ruang Penunjang</span>
         </v-card-title>
 
-        <v-card-subtitle class="pa-4">
-          <h3 class="text-h6 mb-3 text-center">Pilih Klinik Baru</h3>
-          <div class="d-flex justify-end gap-2">
-            <v-text-field
-              v-model="changeKlinikSearch"
-              placeholder="Pencarian"
-              density="compact"
-              hide-details
-              style="max-width: 200px"
-            ></v-text-field>
-          </div>
-        </v-card-subtitle>
-
         <v-card-text class="pa-4">
-          <v-row>
-            <v-col
-              v-for="klinik in filteredChangeKliniks"
-              :key="klinik.id"
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <v-card
-                class="klinik-card"
-                elevation="1"
-                @click="changeKlinik(klinik)"
-              >
-                <v-card-text class="text-center pa-4">
-                  <div class="text-h6 font-weight-bold">{{ klinik.name }}</div>
+          <v-text-field
+            v-model="changeKlinikSearch"
+            placeholder="Cari ruang..."
+            density="compact"
+            hide-details
+            class="mb-4"
+            prepend-inner-icon="mdi-magnify"
+          ></v-text-field>
+
+          <v-row dense>
+            <v-col v-for="klinik in filteredChangeKliniks" :key="klinik.id" cols="6" sm="4">
+              <v-card class="klinik-card" @click="changeKlinik(klinik)" elevation="0">
+                <v-card-text class="text-center pa-3">
+                  <div class="klinik-name">{{ klinik.name }}</div>
                 </v-card-text>
               </v-card>
             </v-col>
@@ -389,15 +262,10 @@
     </v-dialog>
 
     <!-- Snackbar -->
-    <v-snackbar
-      v-model="snackbar"
-      :color="snackbarColor"
-      :timeout="3000"
-      location="top right"
-    >
+    <v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="3000" location="top right">
       {{ snackbarText }}
       <template v-slot:actions>
-        <v-btn icon @click="snackbar = false">
+        <v-btn icon size="small" @click="snackbar = false">
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </template>
@@ -406,11 +274,9 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-import TabelData from "../components/TabelData.vue";
+import { ref, computed } from "vue";
 import { useQueue } from "../composables/useQueue";
 
-// Use queue composable with 'penunjang' admin type
 const {
   snackbar,
   snackbarText,
@@ -424,7 +290,6 @@ const {
   terlambatPatients,
   pendingPatients,
   nextPatient,
-  totalPasien,
   quotaUsed,
   filteredPenunjangs,
   filteredChangeKliniks,
@@ -433,262 +298,386 @@ const {
   processPatient,
   selectPenunjang,
   changeKlinik,
-} = useQueue('penunjang');
+} = useQueue("penunjang");
 
-const diLoketHeaders = ref([
-  { title: "No", value: "no", sortable: false, width: "60px" },
-  { title: "Jam Panggil", value: "jamPanggil", sortable: true, width: "100px" },
-  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
-  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
-  { title: "Shift", value: "shift", sortable: true, width: "80px" },
-  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
-  { title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
-  { title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
-  { title: "Aksi", value: "aksi", sortable: false, width: "200px" },
+const currentDate = ref(
+  new Date().toLocaleDateString("id-ID", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  })
+);
+
+const selectedStatus = ref("all");
+const searchQuery = ref("");
+
+// Combine all patients with status - Fixed to prevent infinite loop
+const allPatients = computed(() => {
+  try {
+    // Safely access reactive values
+    const diLoketList = diLoketPatients.value || [];
+    const terlambatList = terlambatPatients.value || [];
+    const pendingList = pendingPatients.value || [];
+    
+    // Map with status
+    const diLoket = diLoketList.map(p => ({ ...p, status: 'diloket' }));
+    const terlambat = terlambatList.map(p => ({ ...p, status: 'terlambat' }));
+    const pending = pendingList.map(p => ({ ...p, status: 'pending' }));
+    
+    return [...diLoket, ...terlambat, ...pending];
+  } catch (error) {
+    console.error('Error in allPatients computed:', error);
+    return [];
+  }
+});
+
+// Filter patients based on selected status
+const filteredPatients = computed(() => {
+  try {
+    const all = allPatients.value;
+    if (selectedStatus.value === "all") return all;
+    return all.filter(p => p.status === selectedStatus.value);
+  } catch (error) {
+    console.error('Error in filteredPatients computed:', error);
+    return [];
+  }
+});
+
+const tableHeaders = ref([
+  { title: "No", value: "no", width: "60px", sortable: false },
+  { title: "Jam Panggil", value: "jamPanggil", width: "100px" },
+  { title: "Barcode", value: "barcode", width: "130px" },
+  { title: "No Antrian", value: "noAntrian", width: "140px" },
+  { title: "Klinik", value: "klinik", width: "100px" },
+  { title: "Fast Track", value: "fastTrack", width: "100px" },
+  { title: "Pembayaran", value: "pembayaran", width: "100px" },
+  { title: "Status", value: "status", width: "100px" },
+  { title: "Aksi", value: "aksi", width: "100px", sortable: false },
 ]);
 
-const terlambatHeaders = ref([
-  { title: "No", value: "no", sortable: false, width: "60px" },
-  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
-  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
-  { title: "Shift", value: "shift", sortable: true, width: "80px" },
-  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
-  { title: "Aksi", value: "aksi", sortable: false, width: "100px" },
-]);
+const getStatusColor = (status) => {
+  const colors = {
+    diloket: "#3b82f6",
+    terlambat: "#f59e0b",
+    pending: "#ef4444"
+  };
+  return colors[status] || "#6b7280";
+};
 
-const pendingHeaders = ref([
-  { title: "#", value: "no", sortable: false, width: "60px" },
-  { title: "Barcode", value: "barcode", sortable: true, width: "140px" },
-  { title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
-  { title: "Shift", value: "shift", sortable: true, width: "80px" },
-  { title: "Klinik", value: "klinik", sortable: true, width: "120px" },
-  { title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
-  { title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
-  { title: "Aksi", value: "aksi", sortable: false, width: "100px" },
-]);
+const getStatusLabel = (status) => {
+  const labels = {
+    diloket: "Di Penunjang",
+    terlambat: "Terlambat",
+    pending: "Pending"
+  };
+  return labels[status] || status;
+};
 </script>
 
 <style scoped>
 .loket-container {
-  background: #f5f7fa;
+  background: #f8fafc;
   min-height: 100vh;
-  padding: 20px;
+  padding: 16px;
 }
 
 .page-header {
-  background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 8px 32px rgba(156, 39, 176, 0.3);
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  border-radius: 12px;
+  margin-bottom: 16px;
+  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
 }
 
 .header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 32px;
-  color: white;
+  padding: 20px 24px;
 }
 
 .header-left {
   display: flex;
   align-items: center;
+  gap: 16px;
 }
 
-.header-icon {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 16px;
-  padding: 16px;
-  margin-right: 20px;
-  backdrop-filter: blur(10px);
+.header-text {
+  color: white;
 }
 
 .page-title {
-  font-size: 32px;
+  font-size: 24px;
   font-weight: 700;
   margin: 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  line-height: 1.2;
 }
 
 .page-subtitle {
+  font-size: 14px;
   margin: 4px 0 0 0;
   opacity: 0.9;
-  font-size: 16px;
 }
 
-.header-right {
-  display: flex;
-  align-items: center;
+.content-grid {
+  margin: 0 -8px;
 }
 
-.current-processing-card,
-.quota-call-card,
-.main-table-card,
-.late-table-card,
-.pending-table-card {
-  border-radius: 16px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
+.content-grid > .v-col {
+  padding: 8px;
 }
 
-.current-processing-card {
-  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
-  border: 2px solid rgba(255, 152, 0, 0.2);
+.current-patient-card,
+.queue-actions-card,
+.patient-table-card {
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  background: white;
 }
 
-.quota-call-card {
-  background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%);
-  border: 2px solid rgba(33, 150, 243, 0.2);
-}
-
-.patient-info .text-h5 {
-  color: #1976d2;
-}
-
-.action-buttons {
-  display: flex;
-  align-items: center;
-}
-
-.quota-label {
-  font-size: 13px;
-  color: #6b7280;
-  font-weight: 500;
-  margin-bottom: 4px;
-}
-
-.quota-number {
-  font-size: 32px;
+.section-label {
+  font-size: 11px;
   font-weight: 700;
-  color: #1f2937;
+  letter-spacing: 0.5px;
+  color: #64748b;
+  text-transform: uppercase;
+}
+
+.patient-details {
+  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.patient-number {
+  font-size: 28px;
+  font-weight: 800;
+  color: #1e293b;
   line-height: 1;
 }
 
-.quota-available {
-  color: #4caf50;
-}
-
-.quota-used-text {
+.patient-info-text {
   font-size: 13px;
-  color: #6b7280;
-  font-weight: 500;
+  color: #475569;
+  line-height: 1.5;
 }
 
-.call-controls {
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 32px 16px;
+}
+
+.empty-text {
+  font-size: 13px;
+  color: #94a3b8;
+  margin-top: 8px;
+}
+
+.quota-info {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.quota-item {
+  background: #f1f5f9;
+  border-radius: 8px;
+  padding: 12px;
   text-align: center;
 }
 
-.call-label {
-  font-size: 14px;
+.quota-item.full-width {
+  grid-column: 1 / -1;
+}
+
+.quota-label {
+  display: block;
+  font-size: 11px;
+  color: #64748b;
+  margin-bottom: 4px;
   font-weight: 600;
-  color: #374151;
-  text-align: center;
+}
+
+.quota-value {
+  display: block;
+  font-size: 24px;
+  font-weight: 800;
+  color: #1e293b;
+}
+
+.quota-available {
+  color: #10b981;
+}
+
+.quota-used {
+  display: block;
+  font-size: 11px;
+  color: #64748b;
+  margin-top: 4px;
 }
 
 .call-buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.call-buttons .v-btn {
+  font-size: 16px;
+  font-weight: 700;
+  height: 44px;
+}
+
+.create-buttons .v-btn {
+  text-transform: none;
+  font-weight: 600;
+}
+
+.table-header {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   gap: 12px;
+}
+
+.filters {
+  display: flex;
+  gap: 12px;
+  align-items: center;
   flex-wrap: wrap;
 }
 
-.call-btn {
-  min-width: 80px;
-  height: 48px;
+.status-filter {
+  flex: 1;
+}
+
+.status-filter .v-chip {
+  font-size: 12px;
+  font-weight: 600;
+  height: 32px;
+  border: 1px solid #e2e8f0;
+  background: white;
+  color: #64748b;
+}
+
+.status-filter .v-chip.active-chip {
+  background: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.search-field {
+  max-width: 250px;
+}
+
+:deep(.patient-table) {
   border-radius: 8px;
 }
 
-.call-btn-text {
+:deep(.patient-table .v-data-table__thead) {
+  background: #f8fafc;
+}
+
+:deep(.patient-table th) {
+  font-size: 11px !important;
+  font-weight: 700 !important;
+  color: #64748b !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 12px 8px !important;
+}
+
+:deep(.patient-table td) {
+  font-size: 13px !important;
+  padding: 10px 8px !important;
+  border-bottom: 1px solid #f1f5f9 !important;
+}
+
+:deep(.patient-table tbody tr:hover) {
+  background: #f8fafc !important;
+}
+
+.queue-number {
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.status-chip {
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.klinik-chip {
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.action-buttons-table .v-btn {
+  text-transform: none;
+  font-weight: 600;
+  font-size: 12px;
+  height: 32px;
+}
+
+.dialog-header {
+  background: #f8fafc;
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
   font-size: 18px;
   font-weight: 700;
 }
 
-.v-btn {
-  text-transform: none !important;
-}
-
-.v-btn--size-small {
-  height: 32px;
-  padding: 0 12px;
-}
-
-.text-success {
-  color: #4caf50 !important;
-}
-
+.klinik-card,
 .penunjang-card {
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.2s;
+  border: 2px solid #e2e8f0;
+  background: white;
 }
 
+.klinik-card:hover,
 .penunjang-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-color: #8b5cf6;
+  background: #f5f3ff;
 }
 
-.klinik-card {
-  cursor: pointer;
-  transition: all 0.3s ease;
+.klinik-name,
+.penunjang-name {
+  font-size: 13px;
+  font-weight: 700;
+  color: #1e293b;
 }
 
-.klinik-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+.v-btn {
+  text-transform: none !important;
+  letter-spacing: 0 !important;
 }
 
-@media (max-width: 1024px) {
-  .header-content {
-    flex-direction: column;
-    gap: 20px;
-    text-align: center;
-  }
-
-  .header-left {
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .page-title {
-    font-size: 28px;
-  }
-
-  .action-buttons {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 8px;
-    width: 100%;
-  }
-
-  .action-buttons .v-btn {
-    flex: 1;
-    min-width: 120px;
-  }
-}
-
-@media (max-width: 768px) {
+@media (max-width: 960px) {
   .loket-container {
-    padding: 16px;
+    padding: 12px;
   }
 
-  .header-content {
-    padding: 24px 20px;
-  }
-
-  .page-title {
-    font-size: 24px;
-  }
-
-  .action-buttons {
+  .filters {
     flex-direction: column;
-    width: 100%;
+    align-items: stretch;
   }
 
-  .action-buttons .v-btn {
-    width: 100%;
-    margin: 4px 0;
+  .search-field {
+    max-width: 100%;
   }
 
-  .quota-number {
-    font-size: 28px;
+  .action-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .call-buttons {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 </style>
\ No newline at end of file
diff --git a/pages/Anjungan/Anjungan.vue b/pages/Anjungan/Anjungan.vue
index 06a25f7..1f51995 100644
--- a/pages/Anjungan/Anjungan.vue
+++ b/pages/Anjungan/Anjungan.vue
@@ -43,7 +43,7 @@
               elevation="2"
             >
               <v-card-text class="text-center pa-4">
-                <div class="mb-6">
+                <!-- <div class="mb-6">
                   <v-chip
                     :color="clinic.available ? 'success' : 'error'"
                     size="small"
@@ -59,7 +59,7 @@
                   >
                     {{ clinic.shift }}
                   </v-chip>
-                </div>
+                </div> -->
 
                 <div class="clinic-icon-wrapper mb-6">
                   <v-icon
diff --git a/pages/Anjungan/AntrianKlinikRuang.vue b/pages/Anjungan/AntrianKlinikRuang.vue
index 15358b8..dc2eeaa 100644
--- a/pages/Anjungan/AntrianKlinikRuang.vue
+++ b/pages/Anjungan/AntrianKlinikRuang.vue
@@ -1,4 +1,3 @@
-<!-- pages/AntrianKlinikRuang.vue -->
 <template>
   <div class="antrian-display-container">
     <!-- Header -->
@@ -27,45 +26,45 @@
         NOMOR ANTRIAN YANG DIPANGGIL
       </div>
       <div class="call-number">{{ currentCalledQueue.noAntrian.split(' |')[0] }}</div>
-      <div class="call-clinic">{{ currentCalledQueue.klinik }}</div>
+      <div class="call-clinic">{{ currentCalledQueue.klinik }} - {{ currentCalledQueue.ruang }}</div>
     </div>
 
-    <!-- Main Grid - 3x3 Clinics -->
+    <!-- Main Grid - Display Ruang -->
     <div class="clinics-grid">
       <div
-        v-for="clinic in displayedClinics"
-        :key="clinic.name"
+        v-for="ruang in displayedRuang"
+        :key="`${ruang.kodeKlinik}-${ruang.nomorRuang}`"
         class="clinic-box"
       >
         <!-- Clinic Header -->
-        <div class="clinic-header-bar" style="background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);">
-          <span class="clinic-title">{{ clinic.name }}</span>
+        <div class="clinic-header-bar">
+          <span class="clinic-title">{{ ruang.namaKlinik }} - {{ ruang.namaRuang }}</span>
           <v-chip
-            :color="clinic.totalQueues > 0 ? '#FF9800' : '#89939E'"
+            :color="ruang.totalQueues > 0 ? '#FF9800' : '#89939E'"
             size="small"
             class="clinic-count"
           >
             <v-icon size="16" class="mr-1">mdi-account-multiple</v-icon>
-            {{ clinic.totalQueues }}
+            {{ ruang.totalQueues }}
           </v-chip>
         </div>
 
         <!-- Queue Content -->
         <div class="clinic-content">
           <!-- Current Queue -->
-          <div v-if="clinic.currentQueue" class="current-section">
+          <div v-if="ruang.currentQueue" class="current-section">
             <div class="current-label">SEKARANG</div>
             <div class="current-number">
-              {{ clinic.currentQueue.noAntrian.split(' |')[0] }}
+              {{ ruang.currentQueue.noAntrian.split(' |')[0] }}
             </div>
           </div>
 
           <!-- Next Queues -->
-          <div v-if="clinic.nextQueues.length > 0" class="next-section">
+          <div v-if="ruang.nextQueues.length > 0" class="next-section">
             <div class="next-label">SELANJUTNYA</div>
             <div class="next-numbers">
               <div
-                v-for="queue in clinic.nextQueues.slice(0, 3)"
+                v-for="queue in ruang.nextQueues.slice(0, 3)"
                 :key="queue.no"
                 class="next-item"
               >
@@ -75,7 +74,7 @@
           </div>
 
           <!-- Empty State -->
-          <div v-if="!clinic.currentQueue && clinic.nextQueues.length === 0" class="empty-state">
+          <div v-if="!ruang.currentQueue && ruang.nextQueues.length === 0" class="empty-state">
             <v-icon size="56" color="#F5F7FA">mdi-clock-outline</v-icon>
             <p class="empty-text">Tidak Ada Antrian</p>
           </div>
@@ -130,26 +129,39 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useQueueStore } from '../stores/queueStore'
+import { useMasterStore } from '../stores/masterStore'
 
 definePageMeta({
   layout: false,
 });
 
 const queueStore = useQueueStore()
+const masterStore = useMasterStore()
+
 const currentTime = ref('')
 const currentDate = ref('')
 let timeInterval = null
 
+// Get patients from klinik stage
 const klinikPatients = computed(() => {
   return queueStore.getPatientsByStage('klinik').value.all
 })
 
-const displayedClinics = computed(() => {
-  const allKliniks = queueStore.kliniks.slice(0, 9)
+// Get all ruang from master store
+const allRuangList = computed(() => {
+  return masterStore.getAllRuangList || []
+})
 
-  return allKliniks.map(klinik => {
+// Display ruang with queue data
+const displayedRuang = computed(() => {
+  // Ambil max 9 ruang pertama untuk display
+  const ruangToDisplay = (allRuangList.value || []).slice(0, 9)
+
+  return ruangToDisplay.map(ruang => {
+    // Filter pasien berdasarkan klinik dan ruang (jika ada field ruang di patient data)
+    // Untuk sementara, kita filter berdasarkan klinik saja
     const queues = klinikPatients.value
-      .filter(p => p.klinik === klinik.name)
+      .filter(p => p.klinik === ruang.namaKlinik)
       .sort((a, b) => {
         const statusPriority = {
           'di-loket': 1,
@@ -175,8 +187,12 @@ const displayedClinics = computed(() => {
     )
 
     return {
-      name: klinik.name,
-      currentQueue: currentQueue,
+      kodeKlinik: ruang.kodeKlinik,
+      namaKlinik: ruang.namaKlinik,
+      nomorRuang: ruang.nomorRuang,
+      namaRuang: ruang.namaRuang,
+      nomorScreen: ruang.nomorScreen,
+      currentQueue: currentQueue ? { ...currentQueue, ruang: ruang.namaRuang } : null,
       nextQueues: nextQueues,
       totalQueues: queues.length
     }
@@ -188,7 +204,17 @@ const currentCalledQueue = computed(() => {
     .filter(p => p.status === 'di-loket')
     .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
   
-  return calledQueues[0] || null
+  if (calledQueues.length > 0) {
+    // Find ruang for this patient
+    const patient = calledQueues[0]
+    const ruang = (allRuangList.value || []).find(r => r.namaKlinik === patient.klinik)
+    return {
+      ...patient,
+      ruang: ruang ? ruang.namaRuang : 'Ruang 1'
+    }
+  }
+  
+  return null
 })
 
 const statistics = computed(() => {
@@ -225,14 +251,43 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped>
-.antrian-display-container {
-  background: #FFFFFF;
-  min-height: 100vh;
-  padding: 24px;
-  font-family: 'Roboto', sans-serif;
+<style scoped lang="scss">
+// Colors from Design System
+$neutral-900: #212121;
+$neutral-800: #4D4D4D;
+$neutral-700: #717171;
+$neutral-600: #89939E;
+$neutral-300: #F5F7FA;
+$neutral-100: #FFFFFF;
+
+$primary-600: #FFA532;
+
+$success-600: #009262;
+
+$danger-700: #E01507;
+$danger-600: #E02B1D;
+
+// Font Family & Weights
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+// Apply font family
+* {
+  font-family: $font-family-base;
 }
 
+.antrian-display-container {
+  background: $neutral-100;
+  min-height: 100vh;
+  padding: 24px;
+}
+
+// ============================================
+// HEADER
+// ============================================
 .display-header {
   display: flex;
   justify-content: space-between;
@@ -263,8 +318,9 @@ onUnmounted(() => {
 
 .hospital-name {
   font-size: 42px;
-  font-weight: 900;
-  color: #FFFFFF;
+  line-height: 1.2;
+  font-weight: $font-weight-bold;
+  color: $neutral-100;
   margin: 0;
   letter-spacing: 1px;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
@@ -272,30 +328,35 @@ onUnmounted(() => {
 
 .display-subtitle {
   font-size: 22px;
-  font-weight: 500;
-  color: #FFFFFF;
+  line-height: 1.3;
+  font-weight: $font-weight-medium;
+  color: $neutral-100;
   margin: 0;
   opacity: 0.95;
 }
 
 .time-large {
   font-size: 56px;
-  font-weight: 800;
-  color: #FFFFFF;
   line-height: 1;
+  font-weight: $font-weight-bold;
+  color: $neutral-100;
   letter-spacing: 2px;
 }
 
 .date-small {
   font-size: 18px;
-  color: #FFFFFF;
+  line-height: 1.3;
+  color: $neutral-100;
   margin-top: 8px;
-  font-weight: 400;
+  font-weight: $font-weight-regular;
   opacity: 0.95;
 }
 
+// ============================================
+// HERO CALL SECTION
+// ============================================
 .hero-call-section {
-  background: linear-gradient(135deg, #E01507 0%, #E02B1D 100%);
+  background: linear-gradient(135deg, $danger-700 0%, $danger-600 100%);
   border-radius: 20px;
   padding: 32px;
   margin-bottom: 24px;
@@ -306,8 +367,9 @@ onUnmounted(() => {
 
 .call-label {
   font-size: 28px;
-  font-weight: 700;
-  color: #FFFFFF;
+  line-height: 1.3;
+  font-weight: $font-weight-bold;
+  color: $neutral-100;
   letter-spacing: 2px;
   margin-bottom: 12px;
   display: flex;
@@ -317,9 +379,9 @@ onUnmounted(() => {
 
 .call-number {
   font-size: 110px;
-  font-weight: 900;
-  color: #FFFFFF;
   line-height: 1;
+  font-weight: $font-weight-bold;
+  color: $neutral-100;
   margin: 16px 0;
   letter-spacing: 4px;
   text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
@@ -327,8 +389,9 @@ onUnmounted(() => {
 
 .call-clinic {
   font-size: 38px;
-  font-weight: 700;
-  color: #FFFFFF;
+  line-height: 1.2;
+  font-weight: $font-weight-bold;
+  color: $neutral-100;
   letter-spacing: 1px;
 }
 
@@ -341,6 +404,9 @@ onUnmounted(() => {
   }
 }
 
+// ============================================
+// CLINICS GRID
+// ============================================
 .clinics-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -349,7 +415,7 @@ onUnmounted(() => {
 }
 
 .clinic-box {
-  background: #FFFFFF;
+  background: $neutral-100;
   border: 2px solid #FFF3E0;
   border-radius: 16px;
   overflow: hidden;
@@ -374,18 +440,20 @@ onUnmounted(() => {
 }
 
 .clinic-title {
-  font-size: 26px;
-  font-weight: 800;
-  color: #FFFFFF;
+  font-size: 22px;
+  line-height: 1.3;
+  font-weight: $font-weight-bold;
+  color: $neutral-100;
   letter-spacing: 0.5px;
   text-transform: uppercase;
 }
 
 .clinic-count {
   background: rgba(255, 255, 255, 0.2) !important;
-  color: #FFFFFF !important;
-  font-weight: 700;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-bold;
   font-size: 16px;
+  line-height: 1.2;
   backdrop-filter: blur(10px);
 }
 
@@ -405,17 +473,18 @@ onUnmounted(() => {
 
 .current-label {
   font-size: 16px;
-  font-weight: 700;
-  color: #18B653;
+  line-height: 1.2;
+  font-weight: $font-weight-bold;
+  color: $success-600;
   margin-bottom: 8px;
   letter-spacing: 1px;
 }
 
 .current-number {
   font-size: 68px;
-  font-weight: 900;
-  color: #212121;
   line-height: 1;
+  font-weight: $font-weight-bold;
+  color: $neutral-900;
   letter-spacing: 2px;
 }
 
@@ -425,8 +494,9 @@ onUnmounted(() => {
 
 .next-label {
   font-size: 13px;
-  font-weight: 700;
-  color: #717171;
+  line-height: 1.2;
+  font-weight: $font-weight-bold;
+  color: $neutral-700;
   margin-bottom: 10px;
   letter-spacing: 1px;
   text-transform: uppercase;
@@ -441,11 +511,12 @@ onUnmounted(() => {
 
 .next-item {
   background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
-  color: #FFFFFF;
+  color: $neutral-100;
   padding: 8px 18px;
   border-radius: 10px;
   font-size: 22px;
-  font-weight: 700;
+  line-height: 1.3;
+  font-weight: $font-weight-bold;
   box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
   letter-spacing: 1px;
 }
@@ -457,13 +528,17 @@ onUnmounted(() => {
 
 .empty-text {
   font-size: 18px;
-  color: #89939E;
+  line-height: 1.3;
+  color: $neutral-600;
   margin-top: 12px;
-  font-weight: 600;
+  font-weight: $font-weight-semibold;
 }
 
+// ============================================
+// FOOTER STATS
+// ============================================
 .footer-stats-bar {
-  background: #FFFFFF;
+  background: $neutral-100;
   border: 2px solid #FFF3E0;
   border-radius: 20px;
   padding: 24px 40px;
@@ -490,15 +565,16 @@ onUnmounted(() => {
 
 .stat-value {
   font-size: 42px;
-  font-weight: 900;
-  color: #212121;
   line-height: 1;
+  font-weight: $font-weight-bold;
+  color: $neutral-900;
 }
 
 .stat-label {
   font-size: 15px;
-  color: #717171;
-  font-weight: 600;
+  line-height: 1.3;
+  color: $neutral-700;
+  font-weight: $font-weight-semibold;
   margin-top: 4px;
 }
 
@@ -512,8 +588,9 @@ onUnmounted(() => {
   flex: 1;
   text-align: right;
   font-size: 20px;
-  font-weight: 600;
-  color: #4D4D4D;
+  line-height: 1.3;
+  font-weight: $font-weight-semibold;
+  color: $neutral-800;
   display: flex;
   align-items: center;
   justify-content: flex-end;
diff --git a/pages/Setting/MasterKlinik.vue b/pages/Setting/MasterKlinik.vue
index b3c144c..dd1732d 100644
--- a/pages/Setting/MasterKlinik.vue
+++ b/pages/Setting/MasterKlinik.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/valid-v-slot -->
 <template>
   <v-container>
     <v-card>
@@ -9,15 +10,15 @@
               <v-icon size="32" color="white">mdi-hospital-building</v-icon>
             </div>
             <div class="header-text">
-              <h1 class="page-title">Master Klinik</h1>
+              <h2 class="page-title">Master Klinik</h2>
               <p class="page-subtitle">Rabu, 13 Agustus 2025 - Manajemen Klinik</p>
             </div>
           </div>
           <v-btn 
             color="white" 
-            @click="openTambahDialog"
             elevation="0"
             class="add-btn"
+            @click="openTambahDialog"
           >
             <v-icon left size="20">mdi-plus-circle</v-icon>
             Tambah Klinik
@@ -29,36 +30,35 @@
       <v-card-text>
         <v-data-table
           :headers="headers"
-          :items="klinikData"
+          :items="masterStore.klinikData"
           :items-per-page="10"
-          class="elevation-0"
+          class="elevation-0 data-table"
         >
-          <template v-slot:item.shift="{ item }">
-            <v-chip size="small" color="primary" variant="flat">
+          <template #item.shift="{ item }">
+            <v-chip size="small" class="chip-secondary">
               {{ item.shift }}
             </v-chip>
           </template>
           
-          <template v-slot:item.totalQuota="{ item }">
-            <span class="font-weight-bold">{{ item.totalQuota }}</span>
+          <template #item.totalQuota="{ item }">
+            <span class="body-2 text-semibold">{{ item.totalQuota }}</span>
           </template>
           
-          <template v-slot:item.aksi="{ item }">
+          <template #item.aksi="{ item }">
             <v-btn
               size="small"
-              color="#"
-              @click="openEditDialog(item)"
-              class="mr-2 text-white"
+              class="btn-edit mr-2"
               variant="flat"
+              @click="openEditDialog(item)"
             >
               <v-icon size="16" left>mdi-pencil</v-icon>
               Edit
             </v-btn>
             <v-btn
               size="small"
-              color="#E51A08"
-              @click="deleteKlinik(item)"
+              class="btn-delete"
               variant="outlined"
+              @click="handleDelete(item)"
             >
               <v-icon size="16" left>mdi-delete</v-icon>
               Delete
@@ -69,218 +69,227 @@
     </v-card>
 
     <!-- Dialog Tambah/Edit -->
-    <v-dialog v-model="dialog" max-width="1000px" persistent>
-      <v-card>
+    <v-dialog v-model="dialog" max-width="900px" persistent scrollable>
+      <v-card class="dialog-card">
         <v-card-title class="dialog-header">
-          <span class="dialog-title">{{ isEdit ? 'Edit Klinik' : 'Tambah Klinik' }}</span>
-          <v-btn icon variant="text" @click="closeDialog" size="small">
+          <span class="headline-4">{{ isEdit ? 'Edit Klinik' : 'Tambah Klinik' }}</span>
+          <v-btn icon variant="text" size="small" class="btn-close" @click="closeDialog">
             <v-icon>mdi-close</v-icon>
           </v-btn>
         </v-card-title>
 
-        <v-divider></v-divider>
+        <v-divider/>
 
         <v-card-text class="dialog-content">
           <v-form ref="formRef">
-            <v-row>
-              <!-- Kode -->
-              <v-col cols="12" md="4">
-                <v-text-field
-                  label="Kode"
-                  v-model="formData.kode"
-                  variant="outlined"
-                  density="comfortable"
-                  :rules="[v => !!v || 'Kode harus diisi']"
-                  required
-                  hide-details="auto"
-                  placeholder="Masukkan kode klinik (2 huruf)"
-                ></v-text-field>
-                <small class="text-grey">Masukan Kode Klinik 2 Huruf</small>
-              </v-col>
+            <!-- Informasi Dasar -->
+            <div class="field-group">
+              <div class="group-label">
+                <span>Informasi Dasar</span>
+              </div>
+              
+              <v-row dense>
+                <v-col cols="4">
+                  <v-text-field
+                    v-model="formData.kode"
+                    label="Kode"
+                    variant="outlined"
+                    density="compact"
+                    :rules="[v => !!v || 'Kode harus diisi']"
+                    hide-details="auto"
+                    placeholder="AN"
+                    class="mb-3 input-field"
+                  />
+                  <small class="caption-2">2 Huruf</small>
+                </v-col>
+                <v-col cols="4">
+                  <v-text-field
+                    v-model="formData.nama"
+                    label="Nama"
+                    variant="outlined"
+                    density="compact"
+                    :rules="[v => !!v || 'Nama harus diisi']"
+                    hide-details="auto"
+                    placeholder="Gigi dan Mulut"
+                    class="mb-3 input-field"
+                  />
+                </v-col>
+                <v-col cols="4">
+                  <v-text-field
+                    v-model.number="formData.shift"
+                    label="Jumlah Shift"
+                    type="number"
+                    variant="outlined"
+                    density="compact"
+                    :rules="[v => !!v || 'Shift harus diisi', v => v > 0 || 'Minimal 1']"
+                    hide-details="auto"
+                    class="mb-3 input-field"
+                    @update:model-value="updateShiftCount"
+                  />
+                </v-col>
+              </v-row>
 
-              <!-- Nama -->
-              <v-col cols="12" md="4">
-                <v-text-field
-                  label="Nama"
-                  v-model="formData.nama"
-                  variant="outlined"
-                  density="comfortable"
-                  :rules="[v => !!v || 'Nama harus diisi']"
-                  required
-                  hide-details="auto"
-                  placeholder="Gigi dan Mulut"
-                ></v-text-field>
-              </v-col>
+              <v-checkbox
+                v-model="formData.autoShift"
+                label="Auto Shift"
+                hide-details
+                color="#0671E0"
+                density="compact"
+                class="checkbox-field"
+              />
+            </div>
 
-              <!-- Shift -->
-              <v-col cols="12" md="4">
-                <v-text-field
-                  label="Jumlah Shift"
-                  v-model.number="formData.shift"
-                  type="number"
-                  variant="outlined"
-                  density="comfortable"
-                  :rules="[v => !!v || 'Shift harus diisi', v => v > 0 || 'Shift minimal 1']"
-                  required
-                  hide-details="auto"
-                  @update:model-value="updateShiftCount"
-                ></v-text-field>
-              </v-col>
+            <v-divider class="my-4 divider-section"/>
 
-              <!-- Auto Shift -->
-              <v-col cols="12" md="4">
-                <v-checkbox
-                  label="Auto Shift"
-                  v-model="formData.autoShift"
-                  hide-details
-                  color="primary"
-                ></v-checkbox>
-              </v-col>
-
-              <!-- Jam Shift Section -->
-              <v-col cols="12">
-                <div class="shift-section">
-                  <h4 class="shift-section-title">
-                    <v-icon size="20" color="primary">mdi-clock-outline</v-icon>
-                    Konfigurasi Shift & Kuota
-                  </h4>
+            <!-- Konfigurasi Shift & Kuota -->
+            <div class="field-group">
+              <div class="group-label">
+                <v-icon size="18" class="icon-label">mdi-clock-outline</v-icon>
+                <span>Konfigurasi Shift & Kuota</span>
+              </div>
+              
+              <div v-for="(shift, index) in formData.jamShiftList" :key="index" class="shift-item">
+                <v-row dense align="center">
+                  <v-col cols="2">
+                    <div class="shift-badge body-3">Shift {{ index + 1 }}</div>
+                  </v-col>
                   
-                  <div v-for="(shift, index) in formData.jamShiftList" :key="index" class="shift-item">
-                    <v-row align="center">
-                      <v-col cols="12" md="2">
-                        <div class="shift-label">
-                          <v-icon size="16" left>mdi-numeric-{{ index + 1 }}-circle</v-icon>
-                          Shift {{ index + 1 }}
-                        </div>
-                      </v-col>
-                      
-                      <v-col cols="12" md="3">
-                        <v-text-field
-                          label="Jam Mulai"
-                          v-model="shift.dari"
-                          type="time"
-                          variant="outlined"
-                          density="compact"
-                          hide-details="auto"
-                          prepend-inner-icon="mdi-clock-start"
-                        ></v-text-field>
-                      </v-col>
-                      
-                      <v-col cols="12" md="3">
-                        <v-text-field
-                          label="Jam Selesai"
-                          v-model="shift.sampai"
-                          type="time"
-                          variant="outlined"
-                          density="compact"
-                          hide-details="auto"
-                          prepend-inner-icon="mdi-clock-end"
-                        ></v-text-field>
-                      </v-col>
-                      
-                      <v-col cols="12" md="3">
-                        <v-text-field
-                          label="Kuota"
-                          v-model.number="shift.kuota"
-                          type="number"
-                          variant="outlined"
-                          density="compact"
-                          hide-details="auto"
-                          prepend-inner-icon="mdi-account-multiple"
-                          placeholder="0"
-                          :rules="[v => v >= 0 || 'Kuota minimal 0']"
-                        ></v-text-field>
-                      </v-col>
-                      
-                      <v-col cols="12" md="1" class="d-flex justify-center">
-                        <v-btn
-                          v-if="formData.jamShiftList.length > 1"
-                          icon
-                          size="small"
-                          color="error"
-                          variant="text"
-                          @click="removeShift(index)"
-                        >
-                          <v-icon>mdi-delete</v-icon>
-                        </v-btn>
-                      </v-col>
-                    </v-row>
-                  </div>
+                  <v-col cols="3">
+                    <v-text-field
+                      v-model="shift.dari"
+                      label="Mulai"
+                      type="time"
+                      variant="outlined"
+                      density="compact"
+                      hide-details
+                      class="input-field"
+                    />
+                  </v-col>
+                  
+                  <v-col cols="3">
+                    <v-text-field
+                      v-model="shift.sampai"
+                      label="Selesai"
+                      type="time"
+                      variant="outlined"
+                      density="compact"
+                      hide-details
+                      class="input-field"
+                    />
+                  </v-col>
+                  
+                  <v-col cols="3">
+                    <v-text-field
+                      v-model.number="shift.kuota"
+                      label="Kuota"
+                      type="number"
+                      variant="outlined"
+                      density="compact"
+                      hide-details
+                      placeholder="0"
+                      class="input-field"
+                    />
+                  </v-col>
+                  
+                  <v-col cols="1">
+                    <v-btn
+                      v-if="formData.jamShiftList.length > 1"
+                      icon
+                      size="small"
+                      variant="text"
+                      class="btn-delete-shift"
+                      @click="removeShift(index)"
+                    >
+                      <v-icon size="18">mdi-delete</v-icon>
+                    </v-btn>
+                  </v-col>
+                </v-row>
+              </div>
 
-                  <!-- Total Kuota -->
-                  <v-divider class="my-3"></v-divider>
-                  <div class="total-kuota">
-                    <v-icon color="success" size="20">mdi-sigma</v-icon>
-                    <span class="total-label">Total Kuota:</span>
-                    <v-chip color="success" variant="flat" size="large">
-                      {{ calculateTotalQuota() }} Pasien
-                    </v-chip>
-                  </div>
-                </div>
-              </v-col>
+              <div class="total-badge">
+                <v-icon size="18" class="icon-success">mdi-sigma</v-icon>
+                <span class="body-3 text-medium">Total Kuota:</span>
+                <v-chip size="small" variant="flat" class="chip-success">
+                  {{ calculateTotalQuota() }}
+                </v-chip>
+              </div>
+            </div>
 
-              <!-- Jadwal Klinik -->
-              <v-col cols="12">
-                <div class="jadwal-section">
-                  <label class="jadwal-title">
-                    <v-icon size="20" color="primary">mdi-calendar-check</v-icon>
-                    Jadwal Klinik
-                  </label>
-                  <v-data-table
-                    :headers="jadwalHeaders"
-                    :items="hariList"
-                    :items-per-page="-1"
-                    hide-default-footer
-                    class="elevation-0 jadwal-table"
-                  >
-                    <template v-slot:item.pilih="{ item }">
-                      <v-checkbox
-                        v-model="formData.jadwalKlinik"
-                        :value="item.hari"
-                        hide-details
-                        color="success"
-                      ></v-checkbox>
-                    </template>
-                  </v-data-table>
-                </div>
-              </v-col>
-            </v-row>
+            <v-divider class="my-4 divider-section"/>
+
+            <!-- Jadwal Klinik -->
+            <div class="field-group">
+              <div class="group-label">
+                <v-icon size="18" class="icon-label">mdi-calendar-check</v-icon>
+                <span>Jadwal Klinik</span>
+              </div>
+              
+              <div class="day-selector">
+                <v-chip
+                  v-for="hari in hariList"
+                  :key="hari.hari"
+                  class="day-chip"
+                  :class="{ 'day-chip-active': formData.jadwalKlinik.includes(hari.hari) }"
+                  label
+                  @click="toggleHari(hari.hari)"
+                >
+                  <v-icon v-if="formData.jadwalKlinik.includes(hari.hari)" left size="16">mdi-check</v-icon>
+                  {{ hari.hari }}
+                </v-chip>
+              </div>
+            </div>
           </v-form>
         </v-card-text>
 
-        <v-divider></v-divider>
+        <v-divider/>
 
         <v-card-actions class="dialog-actions">
-          <v-spacer></v-spacer>
+          <v-spacer/>
           <v-btn
-            color="grey-lighten-2"
+            variant="outlined"
+            class="btn-cancel"
             @click="closeDialog"
-            class="action-btn"
           >
             <v-icon left size="18">mdi-close</v-icon>
-            Cancel
+            Batal
           </v-btn>
           <v-btn
-            color="warning"
+            variant="flat"
+            class="btn-submit"
             @click="submitForm"
-            class="action-btn"
           >
             <v-icon left size="18">mdi-content-save</v-icon>
-            Submit
+            Simpan
           </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <!-- Snackbar -->
+    <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="3000">
+      <span class="body-3">{{ snackbar.message }}</span>
+      <template #actions>
+        <v-btn variant="text" size="small" @click="snackbar.show = false">Tutup</v-btn>
+      </template>
+    </v-snackbar>
   </v-container>
 </template>
 
 <script setup>
 import { ref } from 'vue';
+import { useMasterStore } from '@/stores/masterStore';
 
+const masterStore = useMasterStore();
 const dialog = ref(false);
 const isEdit = ref(false);
 const formRef = ref(null);
 
+const snackbar = ref({
+  show: false,
+  message: '',
+  color: 'success'
+});
+
 const headers = ref([
   { title: 'No', value: 'no', sortable: true },
   { title: 'Kode', value: 'kode', sortable: true },
@@ -290,65 +299,6 @@ const headers = ref([
   { title: 'Aksi', value: 'aksi', sortable: false },
 ]);
 
-const klinikData = ref([
-  { 
-    id: 1, no: 1, kode: 'AN', nama: 'ANAK', shift: 1, totalQuota: 1000,
-    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 1000 }] 
-  },
-  { 
-    id: 2, no: 2, kode: 'AS', nama: 'ANESTESI', shift: 2, totalQuota: 1500,
-    jamShiftList: [
-      { dari: '07:00', sampai: '11:00', kuota: 1000 }, 
-      { dari: '13:00', sampai: '16:00', kuota: 500 }
-    ] 
-  },
-  { 
-    id: 3, no: 3, kode: 'BD', nama: 'BEDAH', shift: 1, totalQuota: 800,
-    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 800 }] 
-  },
-  { 
-    id: 4, no: 4, kode: 'GR', nama: 'GERIATRI', shift: 1, totalQuota: 600,
-    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 600 }] 
-  },
-  { 
-    id: 5, no: 5, kode: 'GI', nama: 'GIGI DAN MULUT', shift: 3, totalQuota: 2100,
-    jamShiftList: [
-      { dari: '07:00', sampai: '11:00', kuota: 1000 }, 
-      { dari: '13:00', sampai: '16:00', kuota: 700 }, 
-      { dari: '18:00', sampai: '20:00', kuota: 400 }
-    ] 
-  },
-  { 
-    id: 6, no: 6, kode: 'GZ', nama: 'GIZI', shift: 1, totalQuota: 500,
-    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 500 }] 
-  },
-  { 
-    id: 7, no: 7, kode: 'HO', nama: 'HOM', shift: 1, totalQuota: 750,
-    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 750 }] 
-  },
-  { 
-    id: 8, no: 8, kode: 'IP', nama: 'IPD', shift: 1, totalQuota: 900,
-    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 900 }] 
-  },
-  { 
-    id: 9, no: 9, kode: 'JT', nama: 'JANTUNG', shift: 2, totalQuota: 1200,
-    jamShiftList: [
-      { dari: '07:00', sampai: '11:00', kuota: 800 }, 
-      { dari: '13:00', sampai: '16:00', kuota: 400 }
-    ] 
-  },
-  { 
-    id: 10, no: 10, kode: 'JW', nama: 'JIWA', shift: 1, totalQuota: 700,
-    jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 700 }] 
-  },
-]);
-
-const jadwalHeaders = ref([
-  { title: '#', value: 'no', sortable: false },
-  { title: 'Hari', value: 'hari', sortable: false },
-  { title: 'Pilih', value: 'pilih', sortable: false },
-]);
-
 const hariList = ref([
   { no: 1, hari: 'Senin' },
   { no: 2, hari: 'Selasa' },
@@ -377,18 +327,12 @@ const updateShiftCount = (newShiftCount) => {
   const currentCount = formData.value.jamShiftList.length;
   
   if (newShiftCount > currentCount) {
-    // Tambah shift baru
     for (let i = currentCount; i < newShiftCount; i++) {
-      let defaultDari = '07:00';
-      let defaultSampai = '11:00';
+      let defaultDari = '07:00', defaultSampai = '11:00';
       
-      if (i === 1) {
-        defaultDari = '13:00';
-        defaultSampai = '16:00';
-      } else if (i === 2) {
-        defaultDari = '18:00';
-        defaultSampai = '20:00';
-      } else if (i > 2) {
+      if (i === 1) { defaultDari = '13:00'; defaultSampai = '16:00'; }
+      else if (i === 2) { defaultDari = '18:00'; defaultSampai = '20:00'; }
+      else if (i > 2) {
         const prevShift = formData.value.jamShiftList[i - 1];
         const [prevHour] = prevShift.sampai.split(':');
         const nextHour = (parseInt(prevHour) + 1) % 24;
@@ -396,11 +340,7 @@ const updateShiftCount = (newShiftCount) => {
         defaultSampai = `${String((nextHour + 4) % 24).padStart(2, '0')}:00`;
       }
       
-      formData.value.jamShiftList.push({
-        dari: defaultDari,
-        sampai: defaultSampai,
-        kuota: 0
-      });
+      formData.value.jamShiftList.push({ dari: defaultDari, sampai: defaultSampai, kuota: 0 });
     }
   } else if (newShiftCount < currentCount && newShiftCount > 0) {
     formData.value.jamShiftList = formData.value.jamShiftList.slice(0, newShiftCount);
@@ -414,6 +354,15 @@ const removeShift = (index) => {
   }
 };
 
+const toggleHari = (hari) => {
+  const index = formData.value.jadwalKlinik.indexOf(hari);
+  if (index > -1) {
+    formData.value.jadwalKlinik.splice(index, 1);
+  } else {
+    formData.value.jadwalKlinik.push(hari);
+  }
+};
+
 const openTambahDialog = () => {
   isEdit.value = false;
   resetForm();
@@ -427,9 +376,9 @@ const openEditDialog = (item) => {
     kode: item.kode,
     nama: item.nama,
     shift: item.shift,
-    jamShiftList: item.jamShiftList ? JSON.parse(JSON.stringify(item.jamShiftList)) : [{ dari: '07:00', sampai: '11:00', kuota: 0 }],
+    jamShiftList: JSON.parse(JSON.stringify(item.jamShiftList)),
     autoShift: item.autoShift || false,
-    jadwalKlinik: item.jadwalKlinik || ['Senin', 'Rabu'],
+    jadwalKlinik: [...(item.jadwalKlinik || [])],
   };
   dialog.value = true;
 };
@@ -457,53 +406,83 @@ const resetForm = () => {
 const submitForm = async () => {
   const { valid } = await formRef.value.validate();
   
-  if (!valid) {
-    return;
-  }
-
-  const totalQuota = calculateTotalQuota();
+  if (!valid) return;
 
+  let result;
   if (isEdit.value) {
-    const index = klinikData.value.findIndex(k => k.id === formData.value.id);
-    if (index !== -1) {
-      klinikData.value[index] = {
-        ...klinikData.value[index],
-        ...formData.value,
-        totalQuota: totalQuota,
-      };
-    }
+    result = masterStore.updateKlinik(formData.value);
   } else {
-    const newId = Math.max(...klinikData.value.map(k => k.id)) + 1;
-    const newNo = klinikData.value.length + 1;
-    klinikData.value.push({
-      id: newId,
-      no: newNo,
-      ...formData.value,
-      totalQuota: totalQuota,
-    });
+    result = masterStore.addKlinik(formData.value);
   }
 
-  closeDialog();
+  if (result.success) {
+    snackbar.value = { show: true, message: result.message, color: 'success' };
+    closeDialog();
+  } else {
+    snackbar.value = { show: true, message: result.message, color: 'error' };
+  }
 };
 
-const deleteKlinik = (item) => {
+const handleDelete = (item) => {
   if (confirm(`Hapus klinik ${item.nama}?`)) {
-    const index = klinikData.value.findIndex(k => k.id === item.id);
-    if (index !== -1) {
-      klinikData.value.splice(index, 1);
-      klinikData.value.forEach((k, idx) => {
-        k.no = idx + 1;
-      });
-    }
+    const result = masterStore.deleteKlinik(item.id);
+    snackbar.value = {
+      show: true,
+      message: result.message,
+      color: result.success ? 'success' : 'error'
+    };
   }
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+// Import Design System SCSS Variables & Mixins
+// @import '@/assets/styles/variables';
+// @import '@/assets/styles/typography';
+
+// Colors from Design System
+$neutral-900: #212121;
+$neutral-800: #4D4D4D;
+$neutral-700: #717171;
+$neutral-600: #89939E;
+$neutral-500: #ABBED1;
+$neutral-400: #E5F7FA;
+$neutral-300: #F5F7FA;
+$neutral-100: #FFFFFF;
+
+$primary-700: #FF9B1B;
+$primary-600: #FFA532;
+
+$secondary-700: #0053AD;
+$secondary-600: #0671E0;
+$secondary-300: #DBEDFF;
+
+$success-600: #009262;
+$success-300: #84DFC1;
+$success-200: #F1FBF8;
+
+$danger-600: #E02B1D;
+$danger-400: #FF5A4F;
+
+// Font Family & Weights
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+// Apply font family globally
+* {
+  font-family: $font-family-base;
+}
+
+// ============================================
+// PAGE HEADER
+// ============================================
 .page-header {
-  background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
+  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.2);
+  box-shadow: 0 4px 16px rgba(6, 113, 224, 0.2);
 }
 
 .header-content {
@@ -511,7 +490,7 @@ const deleteKlinik = (item) => {
   align-items: center;
   justify-content: space-between;
   padding: 32px;
-  color: white;
+  color: $neutral-100;
 }
 
 .header-left {
@@ -528,9 +507,11 @@ const deleteKlinik = (item) => {
 }
 
 .page-title {
-  font-size: 32px;
-  font-weight: 700;
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: $font-weight-semibold;
   margin: 0;
+  color: $neutral-100;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
@@ -538,133 +519,251 @@ const deleteKlinik = (item) => {
   margin: 4px 0 0 0;
   opacity: 0.9;
   font-size: 16px;
+  line-height: 24px;
+  font-weight: $font-weight-regular;
+  color: $neutral-100;
 }
 
 .add-btn {
-  font-weight: 600;
+  font-weight: $font-weight-semibold;
   text-transform: none;
   letter-spacing: 0.5px;
-  padding: 0 24px !important;
-  height: 44px !important;
-  color: #1976d2 !important;
+  font-size: 16px;
+  line-height: 24px;
+  color: $secondary-600 !important;
+}
+
+// ============================================
+// DATA TABLE
+// ============================================
+.data-table {
+  font-family: $font-family-base;
+}
+
+.chip-secondary {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-medium;
+}
+
+.btn-edit {
+  background-color: $primary-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.btn-delete {
+  border-color: $danger-600 !important;
+  color: $danger-600 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+// ============================================
+// DIALOG
+// ============================================
+.dialog-card {
+  font-family: $font-family-base;
 }
 
 .dialog-header {
-  background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
-  color: white;
+  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  color: $neutral-100;
   padding: 20px 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.dialog-title {
+.headline-4 {
   font-size: 20px;
-  font-weight: 600;
+  line-height: 28px;
+  font-weight: $font-weight-semibold;
+  margin: 0;
+}
+
+.btn-close {
+  color: $neutral-100 !important;
 }
 
 .dialog-content {
   padding: 24px !important;
-  max-height: 650px;
-  overflow-y: auto;
+  background: $neutral-300;
 }
 
 .dialog-actions {
   padding: 16px 24px;
-  background: #f5f5f5;
+  background: $neutral-300;
 }
 
-.action-btn {
-  text-transform: none;
-  font-weight: 600;
-  min-width: 120px;
-}
-
-.shift-section {
-  background: #f8f9fa;
-  border: 2px solid #e3f2fd;
-  border-radius: 12px;
+// ============================================
+// FORM ELEMENTS
+// ============================================
+.field-group {
+  background: $neutral-100;
   padding: 20px;
-}
-
-.shift-section-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 16px;
-  font-weight: 600;
-  color: #1976d2;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 2px solid #e3f2fd;
-}
-
-.shift-item {
-  background: white;
-  padding: 16px;
-  border-radius: 8px;
-  margin-bottom: 12px;
-  border: 1px solid #e0e0e0;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-}
-
-.shift-item:last-child {
+  border-radius: 12px;
   margin-bottom: 0;
+  border: 1px solid $neutral-400;
 }
 
-.shift-label {
-  font-weight: 600;
-  color: #424242;
+.group-label {
   font-size: 14px;
-  text-align: center;
-  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
-  color: white;
-  padding: 10px 8px;
-  border-radius: 8px;
+  line-height: 20px;
+  font-weight: $font-weight-semibold;
+  color: $secondary-600;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 4px;
+  gap: 6px;
 }
 
-.total-kuota {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+.icon-label {
+  color: $secondary-600 !important;
+}
+
+.caption-2 {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: $font-weight-regular;
+  color: $neutral-700;
+}
+
+.body-2 {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: $font-weight-regular;
+}
+
+.body-3 {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-regular;
+}
+
+.text-semibold {
+  font-weight: $font-weight-semibold !important;
+}
+
+.text-medium {
+  font-weight: $font-weight-medium !important;
+}
+
+.input-field {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.checkbox-field {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.divider-section {
+  border-color: $neutral-400 !important;
+}
+
+// ============================================
+// SHIFT ITEMS
+// ============================================
+.shift-item {
+  background: $neutral-300;
   padding: 12px;
-  background: white;
   border-radius: 8px;
-  border: 2px solid #4caf50;
+  margin-bottom: 8px;
+  border: 1px solid $neutral-500;
 }
 
-.total-label {
-  font-weight: 600;
-  color: #424242;
-  font-size: 15px;
+.shift-badge {
+  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  color: $neutral-100;
+  padding: 8px;
+  border-radius: 6px;
+  text-align: center;
+  font-weight: $font-weight-semibold;
 }
 
-.jadwal-section {
-  background: #f8f9fa;
-  border: 2px solid #e3f2fd;
-  border-radius: 12px;
-  padding: 20px;
+.btn-delete-shift {
+  color: $danger-600 !important;
 }
 
-.jadwal-title {
+.total-badge {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 16px;
-  font-weight: 600;
-  color: #1976d2;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 2px solid #e3f2fd;
+  padding: 10px;
+  background: $success-200;
+  border-radius: 8px;
+  margin-top: 8px;
+  border: 1px solid $success-300;
 }
 
-.jadwal-table {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  overflow: hidden;
+.icon-success {
+  color: $success-600 !important;
+}
+
+.chip-success {
+  background-color: $success-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-semibold;
+}
+
+// ============================================
+// DAY SELECTOR
+// ============================================
+.day-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.day-chip {
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-medium;
+  border: 1px solid $neutral-500;
+  background-color: $neutral-100;
+  color: $neutral-800;
+  
+  &:hover {
+    background-color: $secondary-300;
+  }
+}
+
+.day-chip-active {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  border-color: $secondary-600 !important;
+}
+
+// ============================================
+// BUTTONS
+// ============================================
+.btn-cancel {
+  border-color: $neutral-600 !important;
+  color: $neutral-800 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+
+.btn-submit {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
 }
 </style>
\ No newline at end of file
diff --git a/pages/Setting/MasterKlinikRuang.vue b/pages/Setting/MasterKlinikRuang.vue
index f94a867..cdcbf67 100644
--- a/pages/Setting/MasterKlinikRuang.vue
+++ b/pages/Setting/MasterKlinikRuang.vue
@@ -1,4 +1,3 @@
-<!-- pages/MasterKlinikRuang.vue -->
 <template>
   <v-container>
     <v-card>
@@ -10,20 +9,18 @@
               <v-icon size="32" color="white">mdi-door-open</v-icon>
             </div>
             <div class="header-text">
-              <h1 class="page-title">Master Klinik Ruang</h1>
-              <p class="page-subtitle">
-                {{ currentDate }} - Manajemen Ruangan
-              </p>
+              <h2 class="page-title">Master Klinik Ruang</h2>
+              <p class="page-subtitle">Rabu, 13 Agustus 2025 - Manajemen Ruangan</p>
             </div>
           </div>
           <div class="header-stats">
-            <v-chip color="white" variant="flat" class="mr-2">
+            <v-chip color="white" variant="flat" class="stat-chip mr-2">
               <v-icon start size="16">mdi-hospital-building</v-icon>
-              {{ totalKlinikRuang }} Klinik
+              {{ masterStore.totalKlinikRuang }} Klinik
             </v-chip>
-            <v-chip color="white" variant="flat" class="mr-2">
+            <v-chip color="white" variant="flat" class="stat-chip mr-2">
               <v-icon start size="16">mdi-door</v-icon>
-              {{ totalRuangan }} Ruang
+              {{ masterStore.totalRuangan }} Ruang
             </v-chip>
             <v-btn 
               color="white" 
@@ -42,23 +39,22 @@
       <v-card-text>
         <v-data-table
           :headers="headers"
-          :items="klinikRuangList"
+          :items="masterStore.ruangData"
           :items-per-page="10"
-          class="elevation-0"
+          class="elevation-0 data-table"
         >
           <template v-slot:item.namaKlinik="{ item }">
-            <v-chip size="small" color="primary" variant="outlined">
+            <v-chip size="small" class="chip-success-outline">
               {{ item.kodeKlinik }}
             </v-chip>
-            <span class="ml-2">{{ item.namaKlinik }}</span>
+            <span class="ml-2 body-3 text-medium">{{ item.namaKlinik }}</span>
           </template>
           
           <template v-slot:item.aksi="{ item }">
             <v-btn
               size="small"
-              color="#FF9B1B"
               @click="openEditDialog(item)"
-              class="mr-2 text-white"
+              class="btn-edit mr-2"
               variant="flat"
             >
               <v-icon size="16" left>mdi-pencil</v-icon>
@@ -66,8 +62,8 @@
             </v-btn>
             <v-btn
               size="small"
-              color="#E51A08"
-              @click="deleteRuang(item)"
+              @click="handleDelete(item)"
+              class="btn-delete"
               variant="outlined"
             >
               <v-icon size="16" left>mdi-delete</v-icon>
@@ -79,11 +75,11 @@
     </v-card>
 
     <!-- Dialog Tambah/Edit -->
-    <v-dialog v-model="dialog" max-width="800px" persistent>
-      <v-card>
+    <v-dialog v-model="dialog" max-width="700px" persistent scrollable>
+      <v-card class="dialog-card">
         <v-card-title class="dialog-header">
-          <span class="dialog-title">{{ isEdit ? 'Edit Klinik Ruang' : 'Tambah Klinik Ruang' }}</span>
-          <v-btn icon variant="text" @click="closeDialog" size="small">
+          <span class="headline-4">{{ isEdit ? 'Edit Klinik Ruang' : 'Tambah Klinik Ruang' }}</span>
+          <v-btn icon variant="text" @click="closeDialog" size="small" class="btn-close">
             <v-icon>mdi-close</v-icon>
           </v-btn>
         </v-card-title>
@@ -92,153 +88,114 @@
 
         <v-card-text class="dialog-content">
           <v-form ref="formRef">
-            <!-- Klinik Selection -->
-            <v-row>
-              <v-col cols="12">
-                <div class="section-header">
-                  <v-icon color="primary" size="20">mdi-hospital-building</v-icon>
-                  <span class="section-title">Pilih Klinik</span>
-                </div>
-              </v-col>
+            <!-- Pilih Klinik -->
+            <div class="field-group">
+              <div class="group-label">
+                <v-icon size="18" class="icon-label">mdi-hospital-building</v-icon>
+                <span>Pilih Klinik</span>
+              </div>
               
-              <v-col cols="12" md="6">
-                <v-autocomplete
-                  label="Kode Klinik"
-                  v-model="formData.kodeKlinik"
-                  :items="masterKlinikList"
-                  item-title="kode"
-                  item-value="kode"
-                  variant="outlined"
-                  density="comfortable"
-                  :rules="[v => !!v || 'Kode klinik harus dipilih']"
-                  required
-                  hide-details="auto"
-                  placeholder="Masukkan Kode Klinik"
-                  @update:model-value="onKlinikChange"
-                >
-                  <template v-slot:item="{ props, item }">
-                    <v-list-item v-bind="props">
-                      <template v-slot:prepend>
-                        <v-chip size="small" color="primary">{{ item.raw.kode }}</v-chip>
-                      </template>
-                      <v-list-item-title>{{ item.raw.nama }}</v-list-item-title>
-                    </v-list-item>
-                  </template>
-                </v-autocomplete>
-                <small class="text-grey">Masukan Kode Ruang 2 Huruf</small>
-              </v-col>
+              <v-autocomplete
+                label="Kode Klinik"
+                v-model="formData.kodeKlinik"
+                :items="masterStore.klinikList"
+                item-title="nama"
+                item-value="kode"
+                variant="outlined"
+                density="compact"
+                :rules="[v => !!v || 'Kode klinik harus dipilih']"
+                hide-details="auto"
+                placeholder="Pilih Klinik"
+                @update:model-value="onKlinikChange"
+                class="mb-3 input-field"
+              >
+                <template v-slot:item="{ props, item }">
+                  <v-list-item v-bind="props">
+                    <template v-slot:prepend>
+                      <v-chip size="x-small" class="chip-success-small">{{ item.raw.kode }}</v-chip>
+                    </template>
+                    <v-list-item-title class="body-3">{{ item.raw.nama }}</v-list-item-title>
+                  </v-list-item>
+                </template>
+              </v-autocomplete>
+            </div>
 
-              <v-col cols="12" md="6">
-                <v-text-field
-                  label="Nama Klinik"
-                  v-model="formData.namaKlinik"
-                  variant="outlined"
-                  density="comfortable"
-                  readonly
-                  hide-details="auto"
-                  placeholder="Nama akan terisi otomatis"
-                  bg-color="grey-lighten-4"
-                ></v-text-field>
-              </v-col>
-            </v-row>
+            <v-divider class="my-4 divider-section"></v-divider>
 
-            <!-- Ruang Section -->
-            <v-row class="mt-4">
-              <v-col cols="12">
-                <div class="section-header">
-                  <v-icon color="primary" size="20">mdi-door</v-icon>
-                  <span class="section-title">Daftar Ruangan</span>
-                  <v-spacer></v-spacer>
-                  <v-btn
-                    size="small"
-                    color="success"
-                    variant="flat"
-                    @click="addRuang"
-                  >
-                    <v-icon size="18" left>mdi-plus</v-icon>
-                    Add Ruang
-                  </v-btn>
-                </div>
-              </v-col>
+            <!-- Daftar Ruangan -->
+            <div class="field-group">
+              <div class="group-label">
+                <v-icon size="18" class="icon-label">mdi-door</v-icon>
+                <span>Daftar Ruangan</span>
+              </div>
 
-              <v-col cols="12">
-                <div class="ruang-list">
-                  <div 
-                    v-for="(ruang, index) in formData.ruangList" 
-                    :key="index" 
-                    class="ruang-item"
-                  >
-                    <v-row align="center">
-                      <v-col cols="12" md="1">
-                        <div class="ruang-number">
-                          <v-icon size="16">mdi-numeric-{{ index + 1 }}-circle</v-icon>
-                        </div>
-                      </v-col>
+              <div v-for="(ruang, index) in formData.ruangList" :key="index" class="ruang-item">
+                <v-row dense align="center">
+                  <v-col cols="1">
+                    <div class="ruang-badge body-3">{{ index + 1 }}</div>
+                  </v-col>
+                  
+                  <v-col cols="3">
+                    <v-text-field
+                      label="No. Ruang"
+                      v-model="ruang.nomorRuang"
+                      variant="outlined"
+                      density="compact"
+                      hide-details
+                      placeholder="1"
+                      class="input-field"
+                    ></v-text-field>
+                  </v-col>
+                  
+                  <v-col cols="4">
+                    <v-text-field
+                      label="Nama Ruang"
+                      v-model="ruang.namaRuang"
+                      variant="outlined"
+                      density="compact"
+                      hide-details
+                      placeholder="Ruang Konsultasi"
+                      class="input-field"
+                    ></v-text-field>
+                  </v-col>
+                  
+                  <v-col cols="3">
+                    <v-text-field
+                      label="No. Screen"
+                      v-model="ruang.nomorScreen"
+                      variant="outlined"
+                      density="compact"
+                      hide-details
+                      placeholder="101"
+                      class="input-field"
+                    ></v-text-field>
+                  </v-col>
+                  
+                  <v-col cols="1">
+                    <v-btn
+                      v-if="formData.ruangList.length > 1"
+                      icon
+                      size="small"
+                      variant="text"
+                      @click="removeRuang(index)"
+                      class="btn-delete-ruang"
+                    >
+                      <v-icon size="18">mdi-delete</v-icon>
+                    </v-btn>
+                  </v-col>
+                </v-row>
+              </div>
 
-                      <v-col cols="12" md="3">
-                        <v-text-field
-                          label="Nomor Ruang"
-                          v-model="ruang.nomorRuang"
-                          variant="outlined"
-                          density="compact"
-                          hide-details="auto"
-                          placeholder="Masukan Nomor Ruangan"
-                          prepend-inner-icon="mdi-pound"
-                        ></v-text-field>
-                      </v-col>
-
-                      <v-col cols="12" md="4">
-                        <v-text-field
-                          label="Nama Ruang"
-                          v-model="ruang.namaRuang"
-                          variant="outlined"
-                          density="compact"
-                          hide-details="auto"
-                          placeholder="Masukan Nama Klinik Ruang"
-                          prepend-inner-icon="mdi-door-open"
-                        ></v-text-field>
-                      </v-col>
-
-                      <v-col cols="12" md="3">
-                        <v-text-field
-                          label="Nomor Screen"
-                          v-model="ruang.nomorScreen"
-                          variant="outlined"
-                          density="compact"
-                          hide-details="auto"
-                          placeholder="Screen Klinik Ruang"
-                          prepend-inner-icon="mdi-monitor"
-                        ></v-text-field>
-                        <!-- <small class="text-grey">Masukan Nomor Screen Ruang</small> -->
-                      </v-col>
-
-                      <v-col cols="12" md="1" class="d-flex justify-center">
-                        <v-btn
-                          v-if="formData.ruangList.length > 1"
-                          icon
-                          size="small"
-                          color="error"
-                          variant="text"
-                          @click="removeRuang(index)"
-                        >
-                          <v-icon>mdi-delete</v-icon>
-                        </v-btn>
-                      </v-col>
-                    </v-row>
-                  </div>
-
-                  <v-alert 
-                    v-if="formData.ruangList.length === 0"
-                    type="info"
-                    variant="tonal"
-                    class="mt-2"
-                  >
-                    <v-icon left>mdi-information</v-icon>
-                    Klik "Add Ruang" untuk menambahkan ruangan
-                  </v-alert>
-                </div>
-              </v-col>
-            </v-row>
+              <v-btn
+                variant="outlined"
+                size="small"
+                @click="addRuang"
+                class="btn-add-ruang mt-2"
+              >
+                <v-icon left size="18">mdi-plus</v-icon>
+                Tambah Ruang
+              </v-btn>
+            </div>
           </v-form>
         </v-card-text>
 
@@ -247,73 +204,50 @@
         <v-card-actions class="dialog-actions">
           <v-spacer></v-spacer>
           <v-btn
-            color="grey-lighten-2"
+            variant="outlined"
             @click="closeDialog"
-            class="action-btn"
+            class="btn-cancel"
           >
             <v-icon left size="18">mdi-close</v-icon>
-            Cancel
+            Batal
           </v-btn>
           <v-btn
-            color="warning"
+            variant="flat"
             @click="submitForm"
-            class="action-btn"
-            :loading="loading"
+            class="btn-submit"
           >
             <v-icon left size="18">mdi-content-save</v-icon>
-            Submit
+            Simpan
           </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
     <!-- Snackbar -->
-    <v-snackbar
-      v-model="snackbar"
-      :color="snackbarColor"
-      :timeout="3000"
-      location="top right"
-    >
-      {{ snackbarText }}
+    <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="3000">
+      <span class="body-3">{{ snackbar.message }}</span>
       <template v-slot:actions>
-        <v-btn icon @click="snackbar = false">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
+        <v-btn variant="text" @click="snackbar.show = false" size="small">Tutup</v-btn>
       </template>
     </v-snackbar>
   </v-container>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
-import { useKlinikRuangStore } from '../stores/klinikRuangStore';
+import { ref } from 'vue';
+import { useMasterStore } from '@/stores/masterStore';
 
-// Store
-const klinikRuangStore = useKlinikRuangStore();
-
-// Reactive data
+const masterStore = useMasterStore();
 const dialog = ref(false);
 const isEdit = ref(false);
 const formRef = ref(null);
-const loading = ref(false);
-const snackbar = ref(false);
-const snackbarText = ref('');
-const snackbarColor = ref('success');
 
-const currentDate = ref(new Date().toLocaleDateString('id-ID', {
-  weekday: 'long',
-  day: 'numeric',
-  month: 'long',
-  year: 'numeric'
-}));
+const snackbar = ref({
+  show: false,
+  message: '',
+  color: 'success'
+});
 
-// Computed from store
-const masterKlinikList = computed(() => klinikRuangStore.masterKlinikList);
-const klinikRuangList = computed(() => klinikRuangStore.klinikRuangList);
-const totalKlinikRuang = computed(() => klinikRuangStore.totalKlinikRuang);
-const totalRuangan = computed(() => klinikRuangStore.totalRuangan);
-
-// Headers
 const headers = ref([
   { title: 'No', value: 'no', sortable: true },
   { title: 'Nama Klinik', value: 'namaKlinik', sortable: true },
@@ -322,7 +256,6 @@ const headers = ref([
   { title: 'Aksi', value: 'aksi', sortable: false },
 ]);
 
-// Form data
 const formData = ref({
   id: null,
   kodeKlinik: '',
@@ -332,15 +265,8 @@ const formData = ref({
   ],
 });
 
-// Methods
-const showSnackbar = (text, color = 'success') => {
-  snackbarText.value = text;
-  snackbarColor.value = color;
-  snackbar.value = true;
-};
-
 const onKlinikChange = (kode) => {
-  const selectedKlinik = masterKlinikList.value.find(k => k.kode === kode);
+  const selectedKlinik = masterStore.getKlinikByKode(kode);
   if (selectedKlinik) {
     formData.value.namaKlinik = selectedKlinik.nama;
   }
@@ -399,58 +325,81 @@ const resetForm = () => {
 const submitForm = async () => {
   const { valid } = await formRef.value.validate();
   
-  if (!valid) {
-    showSnackbar('Mohon lengkapi form dengan benar', 'error');
-    return;
-  }
+  if (!valid) return;
 
   if (formData.value.ruangList.length === 0) {
-    showSnackbar('Tambahkan minimal 1 ruangan', 'warning');
+    snackbar.value = {
+      show: true,
+      message: 'Tambahkan minimal 1 ruangan',
+      color: 'warning'
+    };
     return;
   }
 
-  loading.value = true;
+  let result;
+  if (isEdit.value) {
+    result = masterStore.updateRuang(formData.value);
+  } else {
+    result = masterStore.addRuang(formData.value);
+  }
 
-  try {
-    let result;
-    if (isEdit.value) {
-      result = klinikRuangStore.updateKlinikRuang(formData.value.id, formData.value);
-    } else {
-      result = klinikRuangStore.createKlinikRuang(formData.value);
-    }
-
-    if (result.success) {
-      showSnackbar(result.message, 'success');
-      closeDialog();
-    } else {
-      showSnackbar(result.message, 'error');
-    }
-  } catch (error) {
-    showSnackbar('Terjadi kesalahan', 'error');
-  } finally {
-    loading.value = false;
+  if (result.success) {
+    snackbar.value = { show: true, message: result.message, color: 'success' };
+    closeDialog();
+  } else {
+    snackbar.value = { show: true, message: result.message, color: 'error' };
   }
 };
 
-const deleteRuang = (item) => {
+const handleDelete = (item) => {
   if (confirm(`Hapus ruangan ${item.namaRuang} dari klinik ${item.namaKlinik}?`)) {
-    const result = klinikRuangStore.deleteKlinikRuang(item.id);
-    
-    if (result.success) {
-      showSnackbar(result.message, 'success');
-    } else {
-      showSnackbar(result.message, 'error');
-    }
+    const result = masterStore.deleteRuang(item.id);
+    snackbar.value = {
+      show: true,
+      message: result.message,
+      color: result.success ? 'success' : 'error'
+    };
   }
 };
 </script>
 
-<style scoped>
-.page-header {
-  background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
+<style scoped lang="scss">
+// Colors from Design System
+$neutral-900: #212121;
+$neutral-800: #4D4D4D;
+$neutral-700: #717171;
+$neutral-600: #89939E;
+$neutral-500: #ABBED1;
+$neutral-400: #E5F7FA;
+$neutral-300: #F5F7FA;
+$neutral-100: #FFFFFF;
 
+$success-700: #1B6E53;
+$success-600: #009262;
+$success-400: #32C997;
+$success-300: #84DFC1;
+$success-200: #F1FBF8;
+
+$danger-600: #E02B1D;
+
+// Font Family & Weights
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+
+// Apply font family
+* {
+  font-family: $font-family-base;
+}
+
+// ============================================
+// PAGE HEADER
+// ============================================
+.page-header {
+  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.2);
+  box-shadow: 0 4px 16px rgba(0, 146, 98, 0.2);
 }
 
 .header-content {
@@ -458,7 +407,7 @@ const deleteRuang = (item) => {
   align-items: center;
   justify-content: space-between;
   padding: 32px;
-  color: white;
+  color: $neutral-100;
 }
 
 .header-left {
@@ -475,9 +424,11 @@ const deleteRuang = (item) => {
 }
 
 .page-title {
-  font-size: 32px;
-  font-weight: 700;
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: $font-weight-semibold;
   margin: 0;
+  color: $neutral-100;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
@@ -485,6 +436,9 @@ const deleteRuang = (item) => {
   margin: 4px 0 0 0;
   opacity: 0.9;
   font-size: 16px;
+  line-height: 24px;
+  font-weight: $font-weight-regular;
+  color: $neutral-100;
 }
 
 .header-stats {
@@ -493,95 +447,210 @@ const deleteRuang = (item) => {
   gap: 8px;
 }
 
+.stat-chip {
+  color: $success-600 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
 .add-btn {
-  font-weight: 600;
+  font-weight: $font-weight-semibold;
   text-transform: none;
   letter-spacing: 0.5px;
-  padding: 0 24px !important;
-  height: 44px !important;
-  color: #4caf50 !important;
+  font-size: 16px;
+  line-height: 24px;
+  color: $success-600 !important;
+}
+
+// ============================================
+// DATA TABLE
+// ============================================
+.data-table {
+  font-family: $font-family-base;
+}
+
+.chip-success-outline {
+  border: 1px solid $success-600;
+  background-color: transparent !important;
+  color: $success-600 !important;
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.btn-edit {
+  background-color: $success-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.btn-delete {
+  border-color: $danger-600 !important;
+  color: $danger-600 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+// ============================================
+// DIALOG
+// ============================================
+.dialog-card {
+  font-family: $font-family-base;
 }
 
 .dialog-header {
-  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
-  color: white;
+  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
+  color: $neutral-100;
   padding: 20px 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.dialog-title {
+.headline-4 {
   font-size: 20px;
-  font-weight: 600;
+  line-height: 28px;
+  font-weight: $font-weight-semibold;
+  margin: 0;
+}
+
+.btn-close {
+  color: $neutral-100 !important;
 }
 
 .dialog-content {
   padding: 24px !important;
-  max-height: 650px;
-  overflow-y: auto;
+  background: $neutral-300;
 }
 
 .dialog-actions {
   padding: 16px 24px;
-  background: #f5f5f5;
+  background: $neutral-300;
 }
 
-.action-btn {
-  text-transform: none;
-  font-weight: 600;
-  min-width: 120px;
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  background: #f8f9fa;
-  border-radius: 8px;
-  border-left: 4px solid #4caf50;
-  margin-bottom: 16px;
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #424242;
-}
-
-.ruang-list {
-  background: #f8f9fa;
-  border: 2px solid #e8f5e9;
+// ============================================
+// FORM ELEMENTS
+// ============================================
+.field-group {
+  background: $neutral-100;
+  padding: 20px;
   border-radius: 12px;
-  padding: 16px;
-}
-
-.ruang-item {
-  background: white;
-  padding: 16px;
-  border-radius: 8px;
-  margin-bottom: 12px;
-  border: 1px solid #e0e0e0;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-}
-
-.ruang-item:last-child {
   margin-bottom: 0;
+  border: 1px solid $neutral-400;
 }
 
-.ruang-number {
+.group-label {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-semibold;
+  color: $success-600;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
-  color: white;
-  padding: 8px;
-  border-radius: 8px;
-  font-weight: 600;
-  font-size: 14px;
+  gap: 6px;
 }
 
+.icon-label {
+  color: $success-600 !important;
+}
+
+.body-3 {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-regular;
+}
+
+.text-medium {
+  font-weight: $font-weight-medium !important;
+}
+
+.input-field {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.divider-section {
+  border-color: $neutral-400 !important;
+}
+
+// ============================================
+// CHIPS
+// ============================================
+.chip-success-small {
+  background-color: $success-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+// ============================================
+// RUANG ITEMS
+// ============================================
+.ruang-item {
+  background: $neutral-300;
+  padding: 12px;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  border: 1px solid $neutral-500;
+}
+
+.ruang-badge {
+  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
+  color: $neutral-100;
+  padding: 8px;
+  border-radius: 6px;
+  text-align: center;
+  font-weight: $font-weight-semibold;
+}
+
+.btn-delete-ruang {
+  color: $danger-600 !important;
+}
+
+.btn-add-ruang {
+  border-color: $success-600 !important;
+  color: $success-600 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+// ============================================
+// BUTTONS
+// ============================================
+.btn-cancel {
+  border-color: $neutral-600 !important;
+  color: $neutral-800 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+
+.btn-submit {
+  background-color: $success-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+
+// ============================================
+// RESPONSIVE
+// ============================================
 @media (max-width: 768px) {
   .header-content {
     flex-direction: column;
diff --git a/pages/Setting/MasterLoket.vue b/pages/Setting/MasterLoket.vue
index 7057574..e65a331 100644
--- a/pages/Setting/MasterLoket.vue
+++ b/pages/Setting/MasterLoket.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/valid-v-slot -->
 <template>
   <v-container>
     <v-card>
@@ -9,15 +10,15 @@
               <v-icon size="32" color="white">mdi-view-dashboard</v-icon>
             </div>
             <div class="header-text">
-              <h1 class="page-title">Master Loket</h1>
+              <h2 class="page-title">Master Loket</h2>
               <p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
             </div>
           </div>
           <v-btn 
             color="white" 
-            @click="openTambahDialog"
             elevation="0"
             class="add-btn"
+            @click="openTambahDialog"
           >
             <v-icon left size="20">mdi-plus-circle</v-icon>
             Tambah Loket
@@ -29,47 +30,43 @@
       <v-card-text>
         <v-data-table
           :headers="loketHeaders"
-          :items="loketData"
+          :items="masterStore.loketData"
           :items-per-page="10"
-          class="elevation-0"
+          class="elevation-0 data-table"
         >
-          <template v-slot:item.pelayanan="{ item }">
+          <template #item.pelayanan="{ item }">
             <v-chip
-              v-for="(service, idx) in item.pelayanan.slice(0, 2)"
+              v-for="(serviceKode, idx) in item.pelayanan.slice(0, 2)"
               :key="idx"
               size="small"
-              class="mr-1 mb-1"
-              color="primary"
-              variant="outlined"
+              class="mr-1 mb-1 chip-primary-outline"
             >
-              {{ service }}
+              {{ masterStore.getKlinikNameByKode(serviceKode) }}
             </v-chip>
             <v-chip
               v-if="item.pelayanan.length > 2"
               size="small"
-              color="grey"
-              variant="flat"
+              class="chip-neutral"
             >
               +{{ item.pelayanan.length - 2 }}
             </v-chip>
           </template>
 
-          <template v-slot:item.aksi="{ item }">
+          <template #item.aksi="{ item }">
             <v-btn
               size="small"
-              color="#FF9B1B"
-              @click="openEditDialog(item)"
               variant="flat"
-              class="mr-2 text-white"
+              class="btn-edit mr-2"
+              @click="openEditDialog(item)"
             >
               <v-icon size="16" left>mdi-pencil</v-icon>
               Edit
             </v-btn>
             <v-btn 
               size="small" 
-              color="#E51A08"
               variant="outlined" 
-              @click="deleteLoket(item)"
+              class="btn-delete"
+              @click="handleDelete(item)"
             >
               <v-icon size="16" left>mdi-delete</v-icon>
               Delete
@@ -80,16 +77,16 @@
     </v-card>
 
     <!-- Dialog Tambah/Edit -->
-    <v-dialog v-model="dialog" max-width="700px" persistent>
-      <v-card>
+    <v-dialog v-model="dialog" max-width="700px" persistent scrollable>
+      <v-card class="dialog-card">
         <v-card-title class="dialog-header">
-          <span class="dialog-title">{{ isEdit ? 'Edit Loket' : 'Tambah Loket Baru' }}</span>
-          <v-btn icon variant="text" @click="closeDialog" size="small">
+          <span class="headline-4">{{ isEdit ? 'Edit Loket' : 'Tambah Loket Baru' }}</span>
+          <v-btn icon variant="text" size="small" class="btn-close" @click="closeDialog">
             <v-icon>mdi-close</v-icon>
           </v-btn>
         </v-card-title>
 
-        <v-divider></v-divider>
+        <v-divider/>
 
         <v-card-text class="dialog-content">
           <v-form ref="formRef">
@@ -98,80 +95,87 @@
               <div class="group-label">Informasi Loket</div>
               
               <v-text-field
-                label="Nama Loket"
                 v-model="formData.namaLoket"
+                label="Nama Loket"
                 variant="outlined"
                 density="compact"
                 :rules="[v => !!v || 'Nama loket harus diisi']"
                 hide-details="auto"
-                class="mb-3"
-              ></v-text-field>
+                class="mb-3 input-field"
+                placeholder="Loket 1"
+              />
 
               <v-text-field
+                v-model.number="formData.kuota"
                 label="Kuota Bangku"
-                v-model="formData.kuota"
                 type="number"
                 variant="outlined"
                 density="compact"
                 :rules="[v => !!v || 'Kuota harus diisi', v => v > 0 || 'Kuota minimal 1']"
                 hide-details="auto"
-                class="mb-3"
-              ></v-text-field>
+                class="mb-3 input-field"
+                placeholder="500"
+              />
             </div>
 
-            <v-divider class="my-4"></v-divider>
+            <v-divider class="my-4 divider-section"/>
 
             <!-- Konfigurasi -->
             <div class="field-group">
               <div class="group-label">Konfigurasi</div>
               
               <v-select
+                v-model="formData.statusPelayanan"
                 label="Status Pelayanan"
                 :items="['RAWAT JALAN', 'RAWAT INAP']"
-                v-model="formData.statusPelayanan"
                 variant="outlined"
                 density="compact"
                 :rules="[v => !!v || 'Status pelayanan harus dipilih']"
                 hide-details="auto"
-                class="mb-3"
-              ></v-select>
+                class="mb-3 input-field"
+              />
 
               <v-row dense>
                 <v-col cols="6">
                   <v-select
+                    v-model="formData.pembayaran"
                     label="Pembayaran"
                     :items="['JKN', 'UMUM', 'SPM', 'JKMM', 'JAMPERSAL', 'T4', 'KARYAWAN']"
-                    v-model="formData.pembayaran"
                     variant="outlined"
                     density="compact"
                     :rules="[v => !!v || 'Pembayaran harus dipilih']"
                     hide-details="auto"
-                  ></v-select>
+                    class="input-field"
+                  />
                 </v-col>
                 <v-col cols="6">
                   <v-select
+                    v-model="formData.keterangan"
                     label="Keterangan"
                     :items="['ONLINE', 'OFFLINE']"
-                    v-model="formData.keterangan"
                     variant="outlined"
                     density="compact"
                     :rules="[v => !!v || 'Keterangan harus dipilih']"
                     hide-details="auto"
-                  ></v-select>
+                    class="input-field"
+                  />
                 </v-col>
               </v-row>
             </div>
 
-            <v-divider class="my-4"></v-divider>
+            <v-divider class="my-4 divider-section"/>
 
             <!-- Pelayanan -->
             <div class="field-group">
-              <div class="group-label">Pelayanan</div>
+              <div class="group-label">
+                <v-icon size="18" class="icon-label">mdi-hospital-box</v-icon>
+                <span>Pelayanan</span>
+              </div>
               
               <v-select
-                label="Pilih Pelayanan"
-                :items="availableServices"
                 v-model="formData.pelayanan"
+                label="Pilih Pelayanan"
+                :items="masterStore.availableServices"
                 item-title="nama"
                 item-value="id"
                 variant="outlined"
@@ -181,47 +185,53 @@
                 closable-chips
                 :rules="[v => v.length > 0 || 'Pilih minimal 1 pelayanan']"
                 hide-details="auto"
+                class="input-field"
               >
-                <template v-slot:chip="{ props, item }">
+                <template #chip="{ props, item }">
                   <v-chip
                     v-bind="props"
                     closable
                     size="small"
-                    color="primary"
+                    class="chip-primary"
                   >
                     {{ item.raw.nama }}
                   </v-chip>
                 </template>
-                <template v-slot:item="{ props, item }">
+                <template #item="{ props, item }">
                   <v-list-item v-bind="props">
-                    <template v-slot:prepend>
-                      <v-chip size="x-small" color="grey-lighten-2">{{ item.raw.id }}</v-chip>
+                    <template #prepend>
+                      <v-chip size="x-small" class="chip-primary-small">{{ item.raw.id }}</v-chip>
                     </template>
-                    <v-list-item-title>{{ item.raw.nama }}</v-list-item-title>
+                    <v-list-item-title class="body-3">{{ item.raw.nama }}</v-list-item-title>
                   </v-list-item>
                 </template>
               </v-select>
+              
+              <!-- Selected Services Preview -->
+              <div v-if="formData.pelayanan.length > 0" class="selected-preview">
+                <v-icon size="14" class="icon-success">mdi-check-circle</v-icon>
+                <small class="caption-2">{{ formData.pelayanan.length }} pelayanan dipilih</small>
+              </div>
             </div>
           </v-form>
         </v-card-text>
 
-        <v-divider></v-divider>
+        <v-divider/>
 
         <v-card-actions class="dialog-actions">
-          <v-spacer></v-spacer>
+          <v-spacer/>
           <v-btn
             variant="outlined"
+            class="btn-cancel"
             @click="closeDialog"
-            class="action-btn"
           >
             <v-icon left size="18">mdi-close</v-icon>
             Batal
           </v-btn>
           <v-btn
-            color="#FF9B1B"
             variant="flat"
+            class="btn-submit"
             @click="submitForm"
-            class="action-btn"
           >
             <v-icon left size="18">mdi-content-save</v-icon>
             Simpan
@@ -229,16 +239,32 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <!-- Snackbar -->
+    <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="3000">
+      <span class="body-3">{{ snackbar.message }}</span>
+      <template #actions>
+        <v-btn variant="text" size="small" @click="snackbar.show = false">Tutup</v-btn>
+      </template>
+    </v-snackbar>
   </v-container>
 </template>
 
 <script setup>
 import { ref } from 'vue';
+import { useMasterStore } from '@/stores/masterStore';
 
+const masterStore = useMasterStore();
 const dialog = ref(false);
 const isEdit = ref(false);
 const formRef = ref(null);
 
+const snackbar = ref({
+  show: false,
+  message: '',
+  color: 'success'
+});
+
 const loketHeaders = ref([
   { title: "No", value: "no" },
   { title: "Nama Loket", value: "namaLoket" },
@@ -249,64 +275,6 @@ const loketHeaders = ref([
   { title: "Aksi", value: "aksi", sortable: false },
 ]);
 
-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",
-  },
-]);
-
-const availableServices = ref([
-  { id: 'AN', nama: 'ANAK' },
-  { id: 'AS', nama: 'ANESTESI' },
-  { id: 'BD', nama: 'BEDAH' },
-  { id: 'GR', nama: 'GERIATRI' },
-  { id: 'GI', nama: 'GIGI DAN MULUT' },
-  { id: 'GZ', nama: 'GIZI' },
-  { id: 'HO', nama: 'HOM' },
-  { id: 'IP', nama: 'IPD' },
-  { id: 'JT', nama: 'JANTUNG' },
-  { id: 'JW', nama: 'JIWA' },
-  { id: 'KK', nama: 'KULIT KELAMIN' },
-  { id: 'PR', nama: 'PARU' },
-  { id: 'RT', nama: 'RADIOTERAPI' },
-  { id: 'RM', nama: 'REHAB MEDIK' },
-  { id: 'SR', nama: 'SARAF' },
-  { id: 'TD', nama: 'TINDAKAN' },
-]);
-
 const formData = ref({
   id: null,
   namaLoket: '',
@@ -360,52 +328,76 @@ const resetForm = () => {
 const submitForm = async () => {
   const { valid } = await formRef.value.validate();
   
-  if (!valid) {
-    return;
-  }
+  if (!valid) return;
 
+  let result;
   if (isEdit.value) {
-    // Update existing
-    const index = loketData.value.findIndex(l => l.id === formData.value.id);
-    if (index !== -1) {
-      loketData.value[index] = {
-        ...loketData.value[index],
-        ...formData.value,
-      };
-    }
+    result = masterStore.updateLoket(formData.value);
   } else {
-    // Add new
-    const newId = Math.max(...loketData.value.map(l => l.id)) + 1;
-    const newNo = loketData.value.length + 1;
-    loketData.value.push({
-      id: newId,
-      no: newNo,
-      ...formData.value,
-    });
+    result = masterStore.addLoket(formData.value);
   }
 
-  closeDialog();
+  if (result.success) {
+    snackbar.value = { show: true, message: result.message, color: 'success' };
+    closeDialog();
+  } else {
+    snackbar.value = { show: true, message: result.message, color: 'error' };
+  }
 };
 
-const deleteLoket = (item) => {
+const handleDelete = (item) => {
   if (confirm(`Hapus loket ${item.namaLoket}?`)) {
-    const index = loketData.value.findIndex(l => l.id === item.id);
-    if (index !== -1) {
-      loketData.value.splice(index, 1);
-      // Reorder no
-      loketData.value.forEach((l, idx) => {
-        l.no = idx + 1;
-      });
-    }
+    const result = masterStore.deleteLoket(item.id);
+    snackbar.value = {
+      show: true,
+      message: result.message,
+      color: result.success ? 'success' : 'error'
+    };
   }
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+// Colors from Design System
+$neutral-900: #212121;
+$neutral-800: #4D4D4D;
+$neutral-700: #717171;
+$neutral-600: #89939E;
+$neutral-500: #ABBED1;
+$neutral-400: #E5F7FA;
+$neutral-300: #F5F7FA;
+$neutral-100: #FFFFFF;
+
+$primary-700: #FF9B1B;
+$primary-600: #FFA532;
+$primary-300: #FFDCAF;
+
+$secondary-600: #0671E0;
+
+$success-600: #009262;
+$success-300: #84DFC1;
+$success-200: #F1FBF8;
+
+$danger-600: #E02B1D;
+
+// Font Family & Weights
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+
+// Apply font family
+* {
+  font-family: $font-family-base;
+}
+
+// ============================================
+// PAGE HEADER
+// ============================================
 .page-header {
-  background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
   border-radius: 16px 16px 0 0;
-  box-shadow: 0 4px 16px rgba(245, 124, 0, 0.2);
+  box-shadow: 0 4px 16px rgba(255, 165, 50, 0.2);
 }
 
 .header-content {
@@ -413,7 +405,7 @@ const deleteLoket = (item) => {
   align-items: center;
   justify-content: space-between;
   padding: 32px;
-  color: white;
+  color: $neutral-100;
 }
 
 .header-left {
@@ -430,9 +422,11 @@ const deleteLoket = (item) => {
 }
 
 .page-title {
-  font-size: 32px;
-  font-weight: 700;
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: $font-weight-semibold;
   margin: 0;
+  color: $neutral-100;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
@@ -440,56 +434,204 @@ const deleteLoket = (item) => {
   margin: 4px 0 0 0;
   opacity: 0.9;
   font-size: 16px;
+  line-height: 24px;
+  font-weight: $font-weight-regular;
+  color: $neutral-100;
 }
 
 .add-btn {
-  font-weight: 600;
+  font-weight: $font-weight-semibold;
   text-transform: none;
   letter-spacing: 0.5px;
-  padding: 0 24px !important;
-  height: 44px !important;
-  color: #f57c00 !important;
+  font-size: 16px;
+  line-height: 24px;
+  color: $primary-600 !important;
+}
+
+// ============================================
+// DATA TABLE
+// ============================================
+.data-table {
+  font-family: $font-family-base;
+}
+
+.chip-primary-outline {
+  border: 1px solid $primary-600;
+  background-color: transparent !important;
+  color: $primary-600 !important;
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.chip-neutral {
+  background-color: $neutral-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.btn-edit {
+  background-color: $primary-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.btn-delete {
+  border-color: $danger-600 !important;
+  color: $danger-600 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+// ============================================
+// DIALOG
+// ============================================
+.dialog-card {
+  font-family: $font-family-base;
 }
 
 .dialog-header {
-  background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
-  color: white;
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
+  color: $neutral-100;
   padding: 20px 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.dialog-title {
+.headline-4 {
   font-size: 20px;
-  font-weight: 600;
+  line-height: 28px;
+  font-weight: $font-weight-semibold;
+  margin: 0;
+}
+
+.btn-close {
+  color: $neutral-100 !important;
 }
 
 .dialog-content {
   padding: 24px !important;
+  background: $neutral-300;
 }
 
 .dialog-actions {
   padding: 16px 24px;
-  background: #fafafa;
-}
-
-.action-btn {
-  text-transform: none;
-  font-weight: 600;
-  min-width: 100px;
+  background: $neutral-300;
 }
 
+// ============================================
+// FORM ELEMENTS
+// ============================================
 .field-group {
+  background: $neutral-100;
+  padding: 20px;
+  border-radius: 12px;
   margin-bottom: 0;
+  border: 1px solid $neutral-400;
 }
 
 .group-label {
   font-size: 14px;
-  font-weight: 600;
-  color: #f57c00;
+  line-height: 20px;
+  font-weight: $font-weight-semibold;
+  color: $primary-600;
   margin-bottom: 12px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.icon-label {
+  color: $primary-600 !important;
+}
+
+.caption-2 {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: $font-weight-regular;
+  color: $neutral-700;
+}
+
+.body-3 {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-regular;
+}
+
+.input-field {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.divider-section {
+  border-color: $neutral-400 !important;
+}
+
+// ============================================
+// CHIPS
+// ============================================
+.chip-primary {
+  background-color: $primary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-medium;
+}
+
+.chip-primary-small {
+  background-color: $primary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+// ============================================
+// SELECTED PREVIEW
+// ============================================
+.selected-preview {
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: $success-200;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid $success-300;
+}
+
+.icon-success {
+  color: $success-600 !important;
+}
+
+// ============================================
+// BUTTONS
+// ============================================
+.btn-cancel {
+  border-color: $neutral-600 !important;
+  color: $neutral-800 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+
+.btn-submit {
+  background-color: $primary-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
 }
 </style>
\ No newline at end of file
diff --git a/pages/Setting/Screen.vue b/pages/Setting/Screen.vue
new file mode 100644
index 0000000..ec9408d
--- /dev/null
+++ b/pages/Setting/Screen.vue
@@ -0,0 +1,667 @@
+<template>
+  <v-container>
+    <v-card>
+      <!-- Header -->
+      <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">
+              <h2 class="page-title">Screen Configuration</h2>
+              <p class="page-subtitle">Rabu, 13 Agustus 2025 - Konfigurasi Layar Antrian</p>
+            </div>
+          </div>
+          <v-btn 
+            color="white" 
+            @click="openTambahDialog"
+            elevation="0"
+            class="add-btn"
+          >
+            <v-icon left size="20">mdi-plus-circle</v-icon>
+            Tambah Screen
+          </v-btn>
+        </div>
+      </div>
+
+      <!-- Table -->
+      <v-card-text>
+        <v-data-table
+          :headers="headers"
+          :items="screenItems"
+          :items-per-page="10"
+          class="elevation-0 data-table"
+        >
+          <template v-slot:item.no="{ index }">
+            {{ index + 1 }}
+          </template>
+
+          <template v-slot:item.klinik="{ item }">
+            <div class="klinik-tags">
+              <v-chip
+                v-for="(klinikKode, idx) in item.klinik.slice(0, 3)"
+                :key="idx"
+                size="small"
+                class="ma-1 chip-secondary-outline"
+              >
+                {{ masterStore.getKlinikNameByKode(klinikKode) }}
+              </v-chip>
+              <v-chip
+                v-if="item.klinik.length > 3"
+                size="small"
+                class="ma-1 chip-neutral"
+              >
+                +{{ item.klinik.length - 3 }}
+              </v-chip>
+            </div>
+          </template>
+
+          <template v-slot:item.actions="{ item }">
+            <v-btn
+              size="small"
+              @click="openEditDialog(item)"
+              variant="flat"
+              class="btn-edit mr-2"
+            >
+              <v-icon size="16" left>mdi-cog</v-icon>
+              Konfigurasi
+            </v-btn>
+            <v-btn
+              size="small"
+              @click="handleDelete(item)"
+              variant="outlined"
+              class="btn-delete"
+            >
+              <v-icon size="16" left>mdi-delete</v-icon>
+              Delete
+            </v-btn>
+          </template>
+        </v-data-table>
+      </v-card-text>
+    </v-card>
+
+    <!-- Dialog Tambah/Edit -->
+    <v-dialog v-model="dialog" max-width="700px" persistent scrollable>
+      <v-card class="dialog-card">
+        <v-card-title class="dialog-header">
+          <span class="headline-4">{{ isEdit ? 'Konfigurasi Screen' : 'Tambah Screen Baru' }}</span>
+          <v-btn icon variant="text" @click="closeDialog" size="small" class="btn-close">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+
+        <v-divider></v-divider>
+
+        <v-card-text class="dialog-content">
+          <v-form ref="formRef">
+            <!-- Informasi Screen -->
+            <div class="field-group">
+              <div class="group-label">Informasi Screen</div>
+              
+              <v-text-field
+                label="Nama Screen"
+                v-model="formData.namaScreen"
+                variant="outlined"
+                density="compact"
+                :rules="[v => !!v || 'Nama screen harus diisi']"
+                hide-details="auto"
+                class="mb-3 input-field"
+                placeholder="Layar Screen 1"
+              ></v-text-field>
+
+              <v-text-field
+                label="Nomor Screen"
+                v-model="formData.nomorScreen"
+                variant="outlined"
+                density="compact"
+                hide-details="auto"
+                class="mb-3 input-field"
+                placeholder="Screen-001"
+              ></v-text-field>
+              <small class="caption-2">Nomor identifikasi unik untuk screen</small>
+            </div>
+
+            <v-divider class="my-4 divider-section"></v-divider>
+
+            <!-- Klinik Selection -->
+            <div class="field-group">
+              <div class="group-label">
+                <v-icon size="18" class="icon-label">mdi-hospital-box</v-icon>
+                <span>Klinik yang Ditampilkan</span>
+              </div>
+              
+              <v-select
+                label="Pilih Klinik"
+                :items="masterStore.klinikList"
+                v-model="formData.klinik"
+                item-title="nama"
+                item-value="kode"
+                variant="outlined"
+                density="compact"
+                multiple
+                chips
+                closable-chips
+                :rules="[v => v.length > 0 || 'Pilih minimal 1 klinik']"
+                hide-details="auto"
+                class="input-field"
+              >
+                <template v-slot:chip="{ props, item }">
+                  <v-chip
+                    v-bind="props"
+                    closable
+                    size="small"
+                    class="chip-secondary"
+                  >
+                    {{ item.raw.nama }}
+                  </v-chip>
+                </template>
+                <template v-slot:item="{ props, item }">
+                  <v-list-item v-bind="props">
+                    <template v-slot:prepend>
+                      <v-chip size="x-small" class="chip-secondary-small">{{ item.raw.kode }}</v-chip>
+                    </template>
+                    <v-list-item-title class="body-3">{{ item.raw.nama }}</v-list-item-title>
+                  </v-list-item>
+                </template>
+              </v-select>
+              
+              <!-- Selected Preview -->
+              <div v-if="formData.klinik.length > 0" class="selected-preview">
+                <v-icon size="14" class="icon-success">mdi-check-circle</v-icon>
+                <small class="caption-2">{{ formData.klinik.length }} klinik dipilih</small>
+              </div>
+
+              <!-- Grid Preview -->
+              <div v-if="formData.klinik.length > 0" class="klinik-grid mt-4">
+                <div class="grid-label">Preview Tampilan:</div>
+                <div class="klinik-preview-grid">
+                  <v-chip
+                    v-for="kode in formData.klinik"
+                    :key="kode"
+                    size="small"
+                    class="ma-1 chip-secondary-outline"
+                  >
+                    {{ masterStore.getKlinikNameByKode(kode) }}
+                  </v-chip>
+                </div>
+              </div>
+            </div>
+          </v-form>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions class="dialog-actions">
+          <v-spacer></v-spacer>
+          <v-btn
+            variant="outlined"
+            @click="closeDialog"
+            class="btn-cancel"
+          >
+            <v-icon left size="18">mdi-close</v-icon>
+            Batal
+          </v-btn>
+          <v-btn
+            variant="flat"
+            @click="submitForm"
+            class="btn-submit"
+          >
+            <v-icon left size="18">mdi-content-save</v-icon>
+            Simpan
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Snackbar -->
+    <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="3000">
+      <span class="body-3">{{ snackbar.message }}</span>
+      <template v-slot:actions>
+        <v-btn variant="text" @click="snackbar.show = false" size="small">Tutup</v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useMasterStore } from '@/stores/masterStore';
+
+const masterStore = useMasterStore();
+const dialog = ref(false);
+const isEdit = ref(false);
+const formRef = ref(null);
+
+const snackbar = ref({
+  show: false,
+  message: '',
+  color: 'success'
+});
+
+const headers = ref([
+  { title: "No", value: "no", sortable: false, width: "80px" },
+  { title: "Nama Screen", value: "namaScreen", sortable: true },
+  { title: "Nomor Screen", value: "nomorScreen", sortable: true },
+  { title: "Klinik Ditampilkan", value: "klinik", sortable: false },
+  { title: "Actions", value: "actions", sortable: false, width: "250px" },
+]);
+
+const screenItems = ref([
+  {
+    id: 1,
+    namaScreen: "Layar Screen 1",
+    nomorScreen: "SCR-001",
+    klinik: ["AN", "AS", "BD", "GI", "GR", "GZ", "IP", "JT"],
+  },
+  {
+    id: 2,
+    namaScreen: "Layar Screen 2",
+    nomorScreen: "SCR-002",
+    klinik: ["JW", "KK", "MT", "SR", "OB", "PR"],
+  },
+  {
+    id: 3,
+    namaScreen: "Layar Screen 3",
+    nomorScreen: "SCR-003",
+    klinik: ["RT", "RM", "HO"],
+  },
+]);
+
+const formData = ref({
+  id: null,
+  namaScreen: '',
+  nomorScreen: '',
+  klinik: [],
+});
+
+const openTambahDialog = () => {
+  isEdit.value = false;
+  resetForm();
+  dialog.value = true;
+};
+
+const openEditDialog = (item) => {
+  isEdit.value = true;
+  formData.value = {
+    id: item.id,
+    namaScreen: item.namaScreen,
+    nomorScreen: item.nomorScreen,
+    klinik: [...item.klinik],
+  };
+  dialog.value = true;
+};
+
+const closeDialog = () => {
+  dialog.value = false;
+  resetForm();
+};
+
+const resetForm = () => {
+  formData.value = {
+    id: null,
+    namaScreen: '',
+    nomorScreen: '',
+    klinik: [],
+  };
+  if (formRef.value) {
+    formRef.value.reset();
+  }
+};
+
+const submitForm = async () => {
+  const { valid } = await formRef.value.validate();
+  
+  if (!valid) return;
+
+  if (isEdit.value) {
+    // Update screen
+    const index = screenItems.value.findIndex(s => s.id === formData.value.id);
+    if (index !== -1) {
+      screenItems.value[index] = {
+        ...screenItems.value[index],
+        ...formData.value,
+      };
+      snackbar.value = {
+        show: true,
+        message: `Konfigurasi ${formData.value.namaScreen} berhasil disimpan`,
+        color: 'success'
+      };
+    }
+  } else {
+    // Add new screen
+    const newId = Math.max(...screenItems.value.map(s => s.id), 0) + 1;
+    screenItems.value.push({
+      id: newId,
+      ...formData.value,
+    });
+    snackbar.value = {
+      show: true,
+      message: `Screen ${formData.value.namaScreen} berhasil ditambahkan`,
+      color: 'success'
+    };
+  }
+
+  closeDialog();
+};
+
+const handleDelete = (item) => {
+  if (confirm(`Hapus screen ${item.namaScreen}?`)) {
+    const index = screenItems.value.findIndex(s => s.id === item.id);
+    if (index !== -1) {
+      screenItems.value.splice(index, 1);
+      snackbar.value = {
+        show: true,
+        message: `Screen ${item.namaScreen} berhasil dihapus`,
+        color: 'success'
+      };
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+// Colors from Design System
+$neutral-900: #212121;
+$neutral-800: #4D4D4D;
+$neutral-700: #717171;
+$neutral-600: #89939E;
+$neutral-500: #ABBED1;
+$neutral-400: #E5F7FA;
+$neutral-300: #F5F7FA;
+$neutral-100: #FFFFFF;
+
+$secondary-700: #0053AD;
+$secondary-600: #0671E0;
+$secondary-300: #DBEDFF;
+
+$success-600: #009262;
+$success-300: #84DFC1;
+$success-200: #F1FBF8;
+
+$danger-600: #E02B1D;
+
+// Font Family & Weights
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+
+// Apply font family
+* {
+  font-family: $font-family-base;
+}
+
+// ============================================
+// PAGE HEADER
+// ============================================
+.page-header {
+  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 4px 16px rgba(6, 113, 224, 0.2);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: $neutral-100;
+}
+
+.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: 36px;
+  line-height: 44px;
+  font-weight: $font-weight-semibold;
+  margin: 0;
+  color: $neutral-100;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: $font-weight-regular;
+  color: $neutral-100;
+}
+
+.add-btn {
+  font-weight: $font-weight-semibold;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  font-size: 16px;
+  line-height: 24px;
+  color: $secondary-600 !important;
+}
+
+// ============================================
+// DATA TABLE
+// ============================================
+.data-table {
+  font-family: $font-family-base;
+}
+
+.klinik-tags {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 600px;
+}
+
+.chip-secondary-outline {
+  border: 1px solid $secondary-600;
+  background-color: transparent !important;
+  color: $secondary-600 !important;
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.chip-neutral {
+  background-color: $neutral-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.btn-edit {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.btn-delete {
+  border-color: $danger-600 !important;
+  color: $danger-600 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+// ============================================
+// DIALOG
+// ============================================
+.dialog-card {
+  font-family: $font-family-base;
+}
+
+.dialog-header {
+  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
+  color: $neutral-100;
+  padding: 20px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.headline-4 {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: $font-weight-semibold;
+  margin: 0;
+}
+
+.btn-close {
+  color: $neutral-100 !important;
+}
+
+.dialog-content {
+  padding: 24px !important;
+  background: $neutral-300;
+}
+
+.dialog-actions {
+  padding: 16px 24px;
+  background: $neutral-300;
+}
+
+// ============================================
+// FORM ELEMENTS
+// ============================================
+.field-group {
+  background: $neutral-100;
+  padding: 20px;
+  border-radius: 12px;
+  margin-bottom: 0;
+  border: 1px solid $neutral-400;
+}
+
+.group-label {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-semibold;
+  color: $secondary-600;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.icon-label {
+  color: $secondary-600 !important;
+}
+
+.caption-2 {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: $font-weight-regular;
+  color: $neutral-700;
+}
+
+.body-3 {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: $font-weight-regular;
+}
+
+.input-field {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.divider-section {
+  border-color: $neutral-400 !important;
+}
+
+// ============================================
+// CHIPS
+// ============================================
+.chip-secondary {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-medium;
+}
+
+.chip-secondary-small {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+// ============================================
+// SELECTED PREVIEW
+// ============================================
+.selected-preview {
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: $success-200;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid $success-300;
+}
+
+.icon-success {
+  color: $success-600 !important;
+}
+
+.klinik-grid {
+  background: $neutral-300;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid $neutral-400;
+}
+
+.grid-label {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: $font-weight-semibold;
+  color: $neutral-700;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.klinik-preview-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+// ============================================
+// BUTTONS
+// ============================================
+.btn-cancel {
+  border-color: $neutral-600 !important;
+  color: $neutral-800 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+
+.btn-submit {
+  background-color: $secondary-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 100px;
+}
+</style>
\ No newline at end of file
diff --git a/pages/Setting/TambahLoket.vue b/pages/Setting/TambahLoket.vue
index 6d85098..fc3ac90 100644
--- a/pages/Setting/TambahLoket.vue
+++ b/pages/Setting/TambahLoket.vue
@@ -145,7 +145,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import TabelLayanan from '../../components/TabelLayanan.vue';
+import TabelLayanan from '../../components/features/monitoring/TabelLayanan.vue';
 
 const router = useRouter();
 const formRef = ref(null);
diff --git a/stores/masterStore.js b/stores/masterStore.js
new file mode 100644
index 0000000..435f55d
--- /dev/null
+++ b/stores/masterStore.js
@@ -0,0 +1,403 @@
+// stores/masterStore.js
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const useMasterStore = defineStore('master', () => {
+  // ============================================
+  // MASTER KLINIK
+  // ============================================
+  const klinikData = ref([
+    { 
+      id: 1, 
+      no: 1, 
+      kode: 'AN', 
+      nama: 'ANAK', 
+      shift: 1, 
+      totalQuota: 1000,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 1000 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Rabu', 'Jumat'],
+    },
+    { 
+      id: 2, 
+      no: 2, 
+      kode: 'AS', 
+      nama: 'ANESTESI', 
+      shift: 2, 
+      totalQuota: 1500,
+      jamShiftList: [
+        { dari: '07:00', sampai: '11:00', kuota: 1000 }, 
+        { dari: '13:00', sampai: '16:00', kuota: 500 }
+      ],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
+    },
+    { 
+      id: 3, 
+      no: 3, 
+      kode: 'BD', 
+      nama: 'BEDAH', 
+      shift: 1, 
+      totalQuota: 800,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 800 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Rabu', 'Jumat'],
+    },
+    { 
+      id: 4, 
+      no: 4, 
+      kode: 'GI', 
+      nama: 'GIGI DAN MULUT', 
+      shift: 3, 
+      totalQuota: 2100,
+      jamShiftList: [
+        { dari: '07:00', sampai: '11:00', kuota: 1000 }, 
+        { dari: '13:00', sampai: '16:00', kuota: 700 }, 
+        { dari: '18:00', sampai: '20:00', kuota: 400 }
+      ],
+      autoShift: true,
+      jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
+    },
+    { id: 5, no: 5, kode: 'GR', nama: 'GERIATRI', shift: 1, totalQuota: 600, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 600 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu'] },
+    { id: 6, no: 6, kode: 'GZ', nama: 'GIZI', shift: 1, totalQuota: 500, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 500 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu', 'Jumat'] },
+    { id: 7, no: 7, kode: 'HO', nama: 'HOM', shift: 1, totalQuota: 750, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 750 }], autoShift: false, jadwalKlinik: ['Senin', 'Selasa', 'Rabu'] },
+    { id: 8, no: 8, kode: 'IP', nama: 'IPD', shift: 1, totalQuota: 900, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 900 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu', 'Jumat'] },
+    { id: 9, no: 9, kode: 'JT', nama: 'JANTUNG', shift: 2, totalQuota: 1200, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 800 }, { dari: '13:00', sampai: '16:00', kuota: 400 }], autoShift: false, jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'] },
+    { id: 10, no: 10, kode: 'JW', nama: 'JIWA', shift: 1, totalQuota: 700, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 700 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu'] },
+    { id: 11, no: 11, kode: 'KK', nama: 'KULIT KELAMIN', shift: 1, totalQuota: 600, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 600 }], autoShift: false, jadwalKlinik: ['Selasa', 'Kamis'] },
+    { id: 12, no: 12, kode: 'MT', nama: 'MATA', shift: 1, totalQuota: 800, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 800 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu', 'Jumat'] },
+    { id: 13, no: 13, kode: 'OB', nama: 'KANDUNGAN', shift: 2, totalQuota: 1000, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 600 }, { dari: '13:00', sampai: '16:00', kuota: 400 }], autoShift: false, jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'] },
+    { id: 14, no: 14, kode: 'PR', nama: 'PARU', shift: 1, totalQuota: 700, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 700 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu'] },
+    { id: 15, no: 15, kode: 'RT', nama: 'RADIOTERAPI', shift: 1, totalQuota: 500, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 500 }], autoShift: false, jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'] },
+    { id: 16, no: 16, kode: 'RM', nama: 'REHAB MEDIK', shift: 1, totalQuota: 600, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 600 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu', 'Jumat'] },
+    { id: 17, no: 17, kode: 'SR', nama: 'SARAF', shift: 1, totalQuota: 700, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 700 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu'] },
+  ]);
+
+  // Computed - Get klinik list for dropdowns
+  const klinikList = computed(() => 
+    klinikData.value.map(k => ({ 
+      id: k.id,
+      kode: k.kode, 
+      nama: k.nama 
+    }))
+  );
+
+  // Actions - Klinik
+  const addKlinik = (klinikPayload) => {
+    const newId = Math.max(...klinikData.value.map(k => k.id), 0) + 1;
+    const newNo = klinikData.value.length + 1;
+    
+    const totalQuota = klinikPayload.jamShiftList.reduce((total, shift) => {
+      return total + (parseInt(shift.kuota) || 0);
+    }, 0);
+
+    const newKlinik = {
+      id: newId,
+      no: newNo,
+      ...klinikPayload,
+      totalQuota: totalQuota,
+    };
+
+    klinikData.value.push(newKlinik);
+    return { success: true, message: `Klinik ${newKlinik.nama} berhasil ditambahkan`, data: newKlinik };
+  };
+
+  const updateKlinik = (klinikPayload) => {
+    const index = klinikData.value.findIndex(k => k.id === klinikPayload.id);
+    if (index !== -1) {
+      const totalQuota = klinikPayload.jamShiftList.reduce((total, shift) => {
+        return total + (parseInt(shift.kuota) || 0);
+      }, 0);
+
+      klinikData.value[index] = {
+        ...klinikData.value[index],
+        ...klinikPayload,
+        totalQuota: totalQuota,
+      };
+      return { success: true, message: `Klinik ${klinikPayload.nama} berhasil diupdate` };
+    }
+    return { success: false, message: 'Klinik tidak ditemukan' };
+  };
+
+  const deleteKlinik = (klinikId) => {
+    const index = klinikData.value.findIndex(k => k.id === klinikId);
+    if (index !== -1) {
+      const klinikName = klinikData.value[index].nama;
+      klinikData.value.splice(index, 1);
+      klinikData.value.forEach((k, idx) => {
+        k.no = idx + 1;
+      });
+      return { success: true, message: `Klinik ${klinikName} berhasil dihapus` };
+    }
+    return { success: false, message: 'Klinik tidak ditemukan' };
+  };
+
+  const getKlinikById = (id) => {
+    return klinikData.value.find(k => k.id === id);
+  };
+
+  const getKlinikByKode = (kode) => {
+    return klinikData.value.find(k => k.kode === kode);
+  };
+
+  // ============================================
+  // MASTER LOKET
+  // ============================================
+  const loketData = ref([
+    {
+      id: 1,
+      no: 1,
+      namaLoket: "Loket 1",
+      kuota: 500,
+      pelayanan: ["RT", "RM", "TD"],
+      pembayaran: "JKN",
+      keterangan: "ONLINE",
+      statusPelayanan: "RAWAT JALAN",
+    },
+    {
+      id: 2,
+      no: 2,
+      namaLoket: "Loket 2",
+      kuota: 666,
+      pelayanan: ["JW", "SR"],
+      pembayaran: "JKN",
+      keterangan: "ONLINE",
+      statusPelayanan: "RAWAT JALAN",
+    },
+    {
+      id: 3,
+      no: 3,
+      namaLoket: "Loket 3",
+      kuota: 666,
+      pelayanan: ["AS", "JT"],
+      pembayaran: "JKN",
+      keterangan: "ONLINE",
+      statusPelayanan: "RAWAT JALAN",
+    },
+    {
+      id: 4,
+      no: 4,
+      namaLoket: "Loket 4",
+      kuota: 3676,
+      pelayanan: ["KK", "PR"],
+      pembayaran: "JKN",
+      keterangan: "ONLINE",
+      statusPelayanan: "RAWAT JALAN",
+    },
+  ]);
+
+  const availableServices = computed(() => 
+    klinikData.value.map(k => ({
+      id: k.kode,
+      nama: k.nama,
+    }))
+  );
+
+  // Actions - Loket
+  const addLoket = (loketPayload) => {
+    const newId = Math.max(...loketData.value.map(l => l.id), 0) + 1;
+    const newNo = loketData.value.length + 1;
+
+    const newLoket = {
+      id: newId,
+      no: newNo,
+      ...loketPayload,
+    };
+
+    loketData.value.push(newLoket);
+    return { success: true, message: `Loket ${newLoket.namaLoket} berhasil ditambahkan`, data: newLoket };
+  };
+
+  const updateLoket = (loketPayload) => {
+    const index = loketData.value.findIndex(l => l.id === loketPayload.id);
+    if (index !== -1) {
+      loketData.value[index] = {
+        ...loketData.value[index],
+        ...loketPayload,
+      };
+      return { success: true, message: `Loket ${loketPayload.namaLoket} berhasil diupdate` };
+    }
+    return { success: false, message: 'Loket tidak ditemukan' };
+  };
+
+  const deleteLoket = (loketId) => {
+    const index = loketData.value.findIndex(l => l.id === loketId);
+    if (index !== -1) {
+      const loketName = loketData.value[index].namaLoket;
+      loketData.value.splice(index, 1);
+      loketData.value.forEach((l, idx) => {
+        l.no = idx + 1;
+      });
+      return { success: true, message: `Loket ${loketName} berhasil dihapus` };
+    }
+    return { success: false, message: 'Loket tidak ditemukan' };
+  };
+
+  const getLoketById = (id) => {
+    return loketData.value.find(l => l.id === id);
+  };
+
+  // ============================================
+  // MASTER KLINIK RUANG
+  // ============================================
+  const ruangData = ref([
+    { 
+      id: 1, 
+      no: 1, 
+      kodeKlinik: 'AN', 
+      namaKlinik: 'ANAK', 
+      namaRuang: 'R. TINDAKAN',
+      ruangList: [
+        { nomorRuang: '1', namaRuang: 'R. TINDAKAN', nomorScreen: '101' }
+      ]
+    },
+    { 
+      id: 2, 
+      no: 2, 
+      kodeKlinik: 'AS', 
+      namaKlinik: 'ANESTESI', 
+      namaRuang: 'Ruang 1, Ruang 2',
+      ruangList: [
+        { nomorRuang: '1', namaRuang: 'Ruang 1', nomorScreen: '201' },
+        { nomorRuang: '2', namaRuang: 'Ruang 2', nomorScreen: '202' }
+      ]
+    },
+    { 
+      id: 3, 
+      no: 3, 
+      kodeKlinik: 'GI', 
+      namaKlinik: 'GIGI DAN MULUT', 
+      namaRuang: 'Ruang 1, Ruang 2, Ruang 3',
+      ruangList: [
+        { nomorRuang: '1', namaRuang: 'Ruang 1', nomorScreen: '501' },
+        { nomorRuang: '2', namaRuang: 'Ruang 2', nomorScreen: '502' },
+        { nomorRuang: '3', namaRuang: 'Ruang 3', nomorScreen: '503' }
+      ]
+    },
+  ]);
+
+  // Computed
+  const totalKlinikRuang = computed(() => ruangData.value.length);
+  const totalRuangan = computed(() => {
+    return ruangData.value.reduce((total, klinik) => {
+      return total + klinik.ruangList.length;
+    }, 0);
+  });
+
+  // Actions - Ruang
+  const addRuang = (ruangPayload) => {
+    const newId = Math.max(...ruangData.value.map(r => r.id), 0) + 1;
+    const newNo = ruangData.value.length + 1;
+
+    const namaRuangDisplay = ruangPayload.ruangList
+      .map(r => r.namaRuang)
+      .filter(n => n)
+      .join(', ');
+
+    const newRuang = {
+      id: newId,
+      no: newNo,
+      ...ruangPayload,
+      namaRuang: namaRuangDisplay,
+    };
+
+    ruangData.value.push(newRuang);
+    return { success: true, message: `Ruang klinik ${newRuang.namaKlinik} berhasil ditambahkan`, data: newRuang };
+  };
+
+  const updateRuang = (ruangPayload) => {
+    const index = ruangData.value.findIndex(r => r.id === ruangPayload.id);
+    if (index !== -1) {
+      const namaRuangDisplay = ruangPayload.ruangList
+        .map(r => r.namaRuang)
+        .filter(n => n)
+        .join(', ');
+
+      ruangData.value[index] = {
+        ...ruangData.value[index],
+        ...ruangPayload,
+        namaRuang: namaRuangDisplay,
+      };
+      return { success: true, message: `Ruang klinik ${ruangPayload.namaKlinik} berhasil diupdate` };
+    }
+    return { success: false, message: 'Ruang tidak ditemukan' };
+  };
+
+  const deleteRuang = (ruangId) => {
+    const index = ruangData.value.findIndex(r => r.id === ruangId);
+    if (index !== -1) {
+      const ruangName = `${ruangData.value[index].namaKlinik} - ${ruangData.value[index].namaRuang}`;
+      ruangData.value.splice(index, 1);
+      ruangData.value.forEach((r, idx) => {
+        r.no = idx + 1;
+      });
+      return { success: true, message: `Ruang ${ruangName} berhasil dihapus` };
+    }
+    return { success: false, message: 'Ruang tidak ditemukan' };
+  };
+
+  const getRuangByKlinik = (kodeKlinik) => {
+    return ruangData.value.filter(r => r.kodeKlinik === kodeKlinik);
+  };
+
+  // Get all ruang list (for antrian display)
+  const getAllRuangList = computed(() => {
+    const allRuang = [];
+    ruangData.value.forEach(klinik => {
+      klinik.ruangList.forEach(ruang => {
+        allRuang.push({
+          kodeKlinik: klinik.kodeKlinik,
+          namaKlinik: klinik.namaKlinik,
+          ...ruang
+        });
+      });
+    });
+    return allRuang;
+  });
+
+  // ============================================
+  // UTILITY FUNCTIONS
+  // ============================================
+  const getKlinikNameByKode = (kode) => {
+    const klinik = klinikData.value.find(k => k.kode === kode);
+    return klinik ? klinik.nama : kode;
+  };
+
+  return {
+    // State - Klinik
+    klinikData,
+    klinikList,
+    
+    // Actions - Klinik
+    addKlinik,
+    updateKlinik,
+    deleteKlinik,
+    getKlinikById,
+    getKlinikByKode,
+
+    // State - Loket
+    loketData,
+    availableServices,
+
+    // Actions - Loket
+    addLoket,
+    updateLoket,
+    deleteLoket,
+    getLoketById,
+
+    // State - Ruang
+    ruangData,
+    totalKlinikRuang,
+    totalRuangan,
+    getAllRuangList,
+
+    // Actions - Ruang
+    addRuang,
+    updateRuang,
+    deleteRuang,
+    getRuangByKlinik,
+
+    // Utilities
+    getKlinikNameByKode,
+  };
+});
\ No newline at end of file
diff --git a/stores/navItems.ts b/stores/navItems.txt
similarity index 100%
rename from stores/navItems.ts
rename to stores/navItems.txt
diff --git a/stores/queueStore.js b/stores/queueStore.js
index 2482b51..02732fb 100644
--- a/stores/queueStore.js
+++ b/stores/queueStore.js
@@ -134,8 +134,13 @@ export const useQueueStore = defineStore('queue', () => {
       return { success: false, message: "Quota sudah penuh" };
     }
 
-    nextPatient.status = "di-loket";
-    currentProcessingPatient.value[adminType] = nextPatient;
+    // Update dengan cara yang Vue reactive
+    const index = allPatients.value.findIndex(p => p.no === nextPatient.no);
+    if (index !== -1) {
+      allPatients.value[index] = { ...allPatients.value[index], status: "di-loket" };
+      currentProcessingPatient.value[adminType] = allPatients.value[index];
+    }
+    
     quotaUsed.value++;
 
     return {
@@ -166,8 +171,12 @@ export const useQueueStore = defineStore('queue', () => {
       return { success: false, message: "Quota tidak mencukupi" };
     }
 
+    // Update dengan cara yang Vue reactive
     patientsToCall.forEach((patient) => {
-      patient.status = "di-loket";
+      const index = allPatients.value.findIndex(p => p.no === patient.no);
+      if (index !== -1) {
+        allPatients.value[index] = { ...allPatients.value[index], status: "di-loket" };
+      }
     });
 
     quotaUsed.value += patientsToCall.length;
@@ -181,23 +190,39 @@ export const useQueueStore = defineStore('queue', () => {
   const processPatient = (patient, action, adminType = 'loket') => {
     const patientCode = patient.noAntrian.split(" |")[0];
     let message = "";
+    
+    // Find patient index for reactive update
+    const patientIndex = allPatients.value.findIndex(p => p.no === patient.no);
+    
+    if (patientIndex === -1) {
+      return { success: false, message: "Pasien tidak ditemukan" };
+    }
 
     switch (action) {
       case "check-in":
         // Jika check-in di loket, pindahkan ke klinik dengan status di-loket
         if (adminType === 'loket') {
-          patient.status = "di-loket"; // Langsung masuk tabel Di Loket Klinik
-          patient.processStage = "klinik";
+          allPatients.value[patientIndex] = {
+            ...allPatients.value[patientIndex],
+            status: "di-loket",
+            processStage: "klinik"
+          };
           message = `Pasien ${patientCode} berhasil check in dan masuk ke Tabel Loket Klinik`;
         } 
         // Jika check-in di klinik, selesai
         else if (adminType === 'klinik') {
-          patient.status = "processed";
+          allPatients.value[patientIndex] = {
+            ...allPatients.value[patientIndex],
+            status: "processed"
+          };
           message = `Pasien ${patientCode} berhasil check in di Klinik`;
         }
         // Jika check-in di penunjang, selesai
         else if (adminType === 'penunjang') {
-          patient.status = "processed";
+          allPatients.value[patientIndex] = {
+            ...allPatients.value[patientIndex],
+            status: "processed"
+          };
           message = `Pasien ${patientCode} berhasil check in di Penunjang`;
         }
         
@@ -208,7 +233,10 @@ export const useQueueStore = defineStore('queue', () => {
         break;
 
       case "terlambat":
-        patient.status = "terlambat";
+        allPatients.value[patientIndex] = {
+          ...allPatients.value[patientIndex],
+          status: "terlambat"
+        };
         if (currentProcessingPatient.value[adminType]?.no === patient.no) {
           currentProcessingPatient.value[adminType] = null;
         }
@@ -216,7 +244,10 @@ export const useQueueStore = defineStore('queue', () => {
         break;
 
       case "pending":
-        patient.status = "pending";
+        allPatients.value[patientIndex] = {
+          ...allPatients.value[patientIndex],
+          status: "pending"
+        };
         if (currentProcessingPatient.value[adminType]?.no === patient.no) {
           currentProcessingPatient.value[adminType] = null;
         }
@@ -224,14 +255,22 @@ export const useQueueStore = defineStore('queue', () => {
         break;
 
       case "aktifkan":
-        if (patient.status === "terlambat" || patient.status === "pending") {
-          patient.status = "di-loket";
-          message = `Pasien ${patientCode} diaktifkan kembali`;
+        const currentStatus = allPatients.value[patientIndex].status;
+        if (currentStatus === "terlambat" || currentStatus === "pending") {
+          // PERBAIKAN: Update dengan cara yang Vue reactive
+          allPatients.value[patientIndex] = {
+            ...allPatients.value[patientIndex],
+            status: "di-loket"
+          };
+          message = `Pasien ${patientCode} diaktifkan kembali dan masuk ke tabel Di Loket`;
+        } else {
+          message = `Pasien ${patientCode} tidak dapat diaktifkan (status: ${currentStatus})`;
         }
         break;
 
       case "proses":
-        currentProcessingPatient.value[adminType] = patient;
+        // Ambil data terbaru dari array
+        currentProcessingPatient.value[adminType] = allPatients.value[patientIndex];
         message = `Memproses pasien ${patientCode}`;
         break;
     }
@@ -304,11 +343,18 @@ export const useQueueStore = defineStore('queue', () => {
     const patientIndex = allPatients.value.findIndex((p) => p.no === patient.no);
     
     if (patientIndex !== -1) {
-      allPatients.value[patientIndex].klinik = newKlinik.name;
+      // Update dengan cara yang Vue reactive
+      allPatients.value[patientIndex] = {
+        ...allPatients.value[patientIndex],
+        klinik: newKlinik.name
+      };
       
       // Update current processing if it's the same patient
       if (currentProcessingPatient.value[adminType]?.no === patient.no) {
-        currentProcessingPatient.value[adminType].klinik = newKlinik.name;
+        currentProcessingPatient.value[adminType] = {
+          ...currentProcessingPatient.value[adminType],
+          klinik: newKlinik.name
+        };
       }
 
       return {