update card, update design system, update layout anjungan

2025-12-05 10:21:16 +07:00
parent 817bf8f548
commit 9b3fd7b314
23 changed files with 5064 additions and 2991 deletions
@@ -0,0 +1,214 @@
+<template>
+  <v-card class="patient-card" elevation="0">
+    <v-card-text class="pa-4">
+      <!-- Header: Queue Number & Status -->
+      <div class="card-header">
+        <div class="queue-number">{{ patient.noAntrian.split(" |")[0] }}</div>
+        <v-chip
+          :color="getStatusColor(patient.status)"
+          size="small"
+          class="status-chip"
+        >
+          {{ getStatusLabel(patient.status) }}
+        </v-chip>
+      </div>
+
+      <!-- Patient Info Grid -->
+      <div class="patient-info mt-3">
+        <div class="info-row">
+          <span class="info-label">Barcode:</span>
+          <span class="info-value">{{ patient.barcode }}</span>
+        </div>
+        
+        <div class="info-row">
+          <span class="info-label">Jam Panggil:</span>
+          <span class="info-value">{{ patient.jamPanggil }}</span>
+        </div>
+
+        <div class="info-row">
+          <span class="info-label">Klinik:</span>
+          <v-chip size="small" variant="outlined" class="klinik-chip">
+            {{ patient.klinik }}
+          </v-chip>
+        </div>
+
+        <div class="info-row">
+          <span class="info-label">Fast Track:</span>
+          <span class="info-value">{{ patient.fastTrack }}</span>
+        </div>
+
+        <div class="info-row">
+          <span class="info-label">Pembayaran:</span>
+          <span class="info-value">{{ patient.pembayaran }}</span>
+        </div>
+      </div>
+
+      <!-- Action Button -->
+      <div class="card-actions mt-4">
+        <v-btn
+          v-if="patient.status === 'diloket'"
+          block
+          color="primary-600"
+          variant="flat"
+          @click="$emit('action', patient, 'proses')"
+        >
+          <v-icon start size="18">mdi-account-check</v-icon>
+          Proses
+        </v-btn>
+        <v-btn
+          v-else-if="patient.status === 'terlambat'"
+          block
+          color="success-600"
+          variant="flat"
+          class="text-white"
+          @click="$emit('action', patient, 'aktifkan')"
+        >
+          <v-icon start size="18">mdi-check-circle</v-icon>
+          Aktifkan
+        </v-btn>
+        <v-btn
+          v-else-if="patient.status === 'pending'"
+          block
+          color="success-600"
+          class="text-white"
+          variant="flat"
+          @click="$emit('action', patient, 'proses')"
+        >
+          <v-icon start size="18">mdi-play-circle</v-icon>
+          Proses
+        </v-btn>
+      </div>
+    </v-card-text>
+
+    <!-- Card Menu (Optional) -->
+    <v-menu location="bottom end">
+      <template #activator="{ props }">
+        <v-btn
+          icon="mdi-dots-vertical"
+          variant="text"
+          size="small"
+          class="card-menu-btn"
+          v-bind="props"
+        />
+      </template>
+      <v-list density="compact">
+        <v-list-item @click="$emit('view-details', patient)">
+          <v-list-item-title>Lihat Detail</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </v-card>
+</template>
+
+<script setup>
+const props = defineProps({
+  patient: {
+    type: Object,
+    required: true
+  }
+});
+
+defineEmits(['action', 'view-details']);
+
+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-card {
+  position: relative;
+  border-radius: 12px;
+  border: 1px solid var(--color-neutral-500);
+  background: var(--color-neutral-100);
+  transition: all 0.2s ease;
+  height: 100%;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    transform: translateY(-2px);
+  }
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--color-neutral-400);
+}
+
+.queue-number {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--color-neutral-900);
+}
+
+.status-chip {
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.patient-info {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+}
+
+.info-label {
+  color: var(--color-neutral-600);
+  font-weight: 500;
+  min-width: 100px;
+}
+
+.info-value {
+  color: var(--color-neutral-900);
+  font-weight: 600;
+  text-align: right;
+}
+
+.klinik-chip {
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.card-actions .v-btn {
+  text-transform: none;
+  font-weight: 600;
+  font-size: 13px;
+  height: 40px;
+}
+
+.card-menu-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.patient-card:hover .card-menu-btn {
+  opacity: 1;
+}
+</style>