web-antrean/components/verification/PatientVerificationList.vue

<template>
  <v-card-text class="pa-0 bg-white">
    <v-list lines="two" class="pa-0">
      <v-list-item
        v-for="patient in patients"
        :key="patient.rm"
        class="patient-item"
        :class="{ 'verified-item': patient.status === 'Terverifikasi' }"
      >
        <template #prepend>
          <v-avatar 
            :color="patient.status === 'Terverifikasi' ? 'secondary-600' : 'primary-600'" 
            size="64" 
            class="patient-avatar"
          >
            <v-icon size="36" color="white">
              {{ patient.status === 'Terverifikasi' ? 'mdi-check-decagram' : 'mdi-clock-alert' }}
            </v-icon>
          </v-avatar>
        </template>

        <v-list-item-title class="patient-name">
          {{ patient.nama }}
        </v-list-item-title>

        <v-list-item-subtitle class="mt-2">
          <v-row dense class="patient-info">
            <v-col cols="12" sm="3" md="2" class="py-1"> 
              <v-chip size="default" color="primary-200" class="chip-rm" variant="flat">
                <v-icon start size="18" color="secondary-600">mdi-file-document</v-icon>
                <span class="chip-rm-text">{{ patient.rm }}</span>
              </v-chip>
            </v-col>
            
            <v-col cols="12" sm="5" md="6" class="py-1 info-item"> 
              <v-icon size="18" class="mr-2" color="neutral-600">mdi-map-marker</v-icon>
              <span>{{ patient.alamat }}</span>
            </v-col>
            
            <v-col cols="12" sm="4" md="4" class="py-1 info-item"> 
              <v-icon size="18" class="mr-2" color="neutral-600">mdi-phone</v-icon>
              <span>{{ patient.telepon || 'Belum diisi' }}</span>
            </v-col>
          </v-row>
        </v-list-item-subtitle>

        <template #append>
          <v-btn
            v-if="patient.status === 'Belum Terverifikasi'"
            color="primary-600"
            size="x-large"
            @click="$emit('verify', patient)"
            prepend-icon="mdi-qrcode-scan"
            variant="flat"
            class="action-btn"
            rounded="xl"
          >
            VERIFIKASI
          </v-btn>
          
          <v-chip
            v-else
            color="secondary-600"
            size="x-large"
            variant="flat"
            class="verified-chip"
            rounded="xl"
          >
            <v-icon start size="24">mdi-shield-check</v-icon>
            VERIFIED
          </v-chip>
        </template>
      </v-list-item>
      
      <v-list-item v-if="patients.length === 0">
        <v-list-item-title class="empty-state">
          {{ emptyMessage }}
        </v-list-item-title>
      </v-list-item>
    </v-list>
  </v-card-text>
</template>

<script setup>
defineProps({
  patients: {
    type: Array,
    required: true
  },
  emptyMessage: {
    type: String,
    default: 'Tidak ada data pasien'
  }
});

defineEmits(['verify']);
</script>

<style scoped lang="scss">
$neutral-100: #FFFFFF;
$neutral-400: #E5F7FA;
$neutral-600: #89939E;
$neutral-700: #717171;
$neutral-900: #212121;
$primary-100: #FFE8CC;
$primary-200: #FFDCAF;
$primary-600: #FFA532;
$secondary-200: #EDF5FF;
$secondary-300: #DBEDFF;
$secondary-400: #B3D9FF;
$secondary-600: #0671E0;
$secondary-700: #0053AD;
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-weight-regular: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-extra-bold: 800;

.patient-item {
  border-bottom: 1px solid $neutral-400;
  padding: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-family: $font-family-base;
}

.patient-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: $primary-600;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.patient-item:hover::before {
  transform: scaleY(1);
}

.patient-item:hover {
  background: $primary-100 !important;
  transform: translateX(4px);
}

.verified-item {
  background: $secondary-200 !important;
}

.verified-item::before {
  background: $secondary-600 !important;
}

.verified-item:hover {
  background: $secondary-300 !important;
}

.patient-avatar {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 3px solid $neutral-100;
}

.patient-name {
  font-size: 24px;
  font-weight: $font-weight-extra-bold;
  color: $neutral-900;
  margin-bottom: 8px;
  font-family: $font-family-base;
}

.patient-info {
  font-size: 14px;
  font-family: $font-family-base;
}

.chip-rm {
  border: 1px solid $secondary-400;
  font-weight: $font-weight-bold;
}

.chip-rm-text {
  color: $secondary-700;
  font-weight: $font-weight-bold;
  font-family: $font-family-base;
}

.info-item {
  color: $neutral-700;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: $font-family-base;
}

.action-btn {
  text-transform: none;
  letter-spacing: 0.5px;
  font-weight: $font-weight-extra-bold;
  font-size: 16px;
  color: $neutral-100;
  padding: 12px 32px;
  box-shadow: 0 2px 8px rgba(255, 155, 27, 0.25);
  font-family: $font-family-base;
}

.verified-chip {
  font-weight: $font-weight-extra-bold;
  font-size: 16px;
  color: $neutral-100;
  padding: 12px 24px;
  font-family: $font-family-base;
}

.empty-state {
  text-align: center;
  padding: 32px 0;
  font-size: 18px;
  color: $neutral-600;
  font-weight: $font-weight-semibold;
  font-family: $font-family-base;
}

@media (max-width: 960px) {
  .patient-item {
    padding: 20px;
  }
  
  .action-btn {
    font-size: 14px;
    padding: 10px 20px;
  }
  
  .patient-avatar {
    width: 56px !important;
    height: 56px !important;
  }
  
  .patient-name {
    font-size: 20px;
  }
}
</style>