web-antrean/components/features/queue/TabelPatientData.vue

<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>