web-antrean/components/features/antrean/TabelPatientList.vue

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