update structure component, layout page admin, konfigurasi dan layout master

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>

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>

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>