bagus-arie05
514 lines
12 KiB
Vue
514 lines
12 KiB
Vue
<template>
|
|
<v-card class="patient-data-container" elevation="0">
|
|
<v-card-text class="pa-4">
|
|
<!-- Header with Filters -->
|
|
<div class="data-header mb-4">
|
|
<div class="section-label">DATA PASIEN</div>
|
|
|
|
<div class="filters">
|
|
<!-- Status Filter -->
|
|
<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>
|
|
|
|
<!-- Search Field -->
|
|
<v-text-field
|
|
v-model="searchModel"
|
|
placeholder="Cari barcode, nomor antrian..."
|
|
density="compact"
|
|
hide-details
|
|
class="search-field"
|
|
prepend-inner-icon="mdi-magnify"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Advanced Filters -->
|
|
<div class="advanced-filters mt-3">
|
|
<v-select
|
|
v-model="selectedKlinik"
|
|
:items="klinikOptions"
|
|
label="Filter Klinik"
|
|
density="compact"
|
|
hide-details
|
|
clearable
|
|
class="filter-select"
|
|
variant="outlined"
|
|
>
|
|
<template #prepend-inner>
|
|
<v-icon size="20">mdi-hospital-building</v-icon>
|
|
</template>
|
|
</v-select>
|
|
|
|
<v-select
|
|
v-model="selectedPembayaran"
|
|
:items="pembayaranOptions"
|
|
label="Filter Pembayaran"
|
|
density="compact"
|
|
hide-details
|
|
clearable
|
|
class="filter-select"
|
|
variant="outlined"
|
|
>
|
|
<template #prepend-inner>
|
|
<v-icon size="20">mdi-cash</v-icon>
|
|
</template>
|
|
</v-select>
|
|
|
|
<v-select
|
|
v-model="selectedShift"
|
|
:items="shiftOptions"
|
|
label="Filter Shift"
|
|
density="compact"
|
|
hide-details
|
|
clearable
|
|
class="filter-select"
|
|
variant="outlined"
|
|
>
|
|
<template #prepend-inner>
|
|
<v-icon size="20">mdi-clock-outline</v-icon>
|
|
</template>
|
|
</v-select>
|
|
|
|
<v-select
|
|
v-model="selectedFastTrack"
|
|
:items="fastTrackOptions"
|
|
label="Filter Fast Track"
|
|
density="compact"
|
|
hide-details
|
|
clearable
|
|
class="filter-select"
|
|
variant="outlined"
|
|
>
|
|
<template #prepend-inner>
|
|
<v-icon size="20">mdi-flash</v-icon>
|
|
</template>
|
|
</v-select>
|
|
|
|
<v-btn
|
|
v-if="hasActiveFilters"
|
|
variant="text"
|
|
color="primary-600"
|
|
size="small"
|
|
@click="clearAllFilters"
|
|
>
|
|
<v-icon start size="18">mdi-filter-off</v-icon>
|
|
Reset Filter
|
|
</v-btn>
|
|
</div>
|
|
|
|
<!-- Active Filter Tags -->
|
|
<div v-if="hasActiveFilters" class="active-filters mt-2">
|
|
<v-chip
|
|
v-if="selectedKlinik"
|
|
size="small"
|
|
closable
|
|
@click:close="selectedKlinik = null"
|
|
>
|
|
Klinik: {{ selectedKlinik }}
|
|
</v-chip>
|
|
<v-chip
|
|
v-if="selectedPembayaran"
|
|
size="small"
|
|
closable
|
|
@click:close="selectedPembayaran = null"
|
|
>
|
|
Pembayaran: {{ selectedPembayaran }}
|
|
</v-chip>
|
|
<v-chip
|
|
v-if="selectedShift"
|
|
size="small"
|
|
closable
|
|
@click:close="selectedShift = null"
|
|
>
|
|
{{ selectedShift }}
|
|
</v-chip>
|
|
<v-chip
|
|
v-if="selectedFastTrack"
|
|
size="small"
|
|
closable
|
|
@click:close="selectedFastTrack = null"
|
|
>
|
|
Fast Track: {{ selectedFastTrack }}
|
|
</v-chip>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Info -->
|
|
<div v-if="filteredAndSearchedItems.length > 0" class="results-info mb-3">
|
|
<span class="results-text">
|
|
Menampilkan {{ paginatedItems.length }} dari {{ filteredAndSearchedItems.length }} pasien
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Patient Cards Grid -->
|
|
<div v-if="filteredAndSearchedItems.length > 0" class="patient-grid">
|
|
<PatientCard
|
|
v-for="(patient, index) in paginatedItems"
|
|
:key="`${patient.barcode}-${index}`"
|
|
:patient="patient"
|
|
@action="handleAction"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else class="empty-state">
|
|
<v-icon size="64" color="neutral-500">mdi-account-search</v-icon>
|
|
<div class="empty-text mt-3">
|
|
{{ searchModel || hasActiveFilters ? 'Tidak ada pasien yang sesuai' : 'Tidak ada data pasien' }}
|
|
</div>
|
|
<div class="empty-subtext">
|
|
{{ searchModel || hasActiveFilters ? 'Coba ubah filter atau kata kunci pencarian' : 'Data akan muncul ketika ada pasien yang terdaftar' }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div v-if="filteredAndSearchedItems.length > itemsPerPage" class="pagination-container mt-4">
|
|
<v-pagination
|
|
v-model="currentPage"
|
|
:length="totalPages"
|
|
:total-visible="7"
|
|
rounded="circle"
|
|
/>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import PatientCard from './PatientCard.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: 9
|
|
},
|
|
statusLabels: {
|
|
type: Object,
|
|
default: () => ({
|
|
all: 'Semua',
|
|
diloket: 'Di Loket',
|
|
terlambat: 'Terlambat',
|
|
pending: 'Pending'
|
|
})
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:selectedStatus', 'update:searchQuery', 'action']);
|
|
|
|
const currentPage = ref(1);
|
|
const selectedKlinik = ref(null);
|
|
const selectedPembayaran = ref(null);
|
|
const selectedShift = ref(null);
|
|
const selectedFastTrack = ref(null);
|
|
|
|
const selectedStatusModel = computed({
|
|
get: () => props.selectedStatus,
|
|
set: (value) => {
|
|
currentPage.value = 1;
|
|
emit('update:selectedStatus', value);
|
|
}
|
|
});
|
|
|
|
const searchModel = computed({
|
|
get: () => props.searchQuery,
|
|
set: (value) => {
|
|
currentPage.value = 1;
|
|
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 }
|
|
]);
|
|
|
|
// Generate filter options from items
|
|
const klinikOptions = computed(() => {
|
|
const kliniks = [...new Set(props.items.map(p => p.klinik))];
|
|
return kliniks.sort();
|
|
});
|
|
|
|
const pembayaranOptions = computed(() => {
|
|
const pembayaran = [...new Set(props.items.map(p => p.pembayaran))];
|
|
return pembayaran.sort();
|
|
});
|
|
|
|
const shiftOptions = computed(() => {
|
|
const shifts = [...new Set(props.items.map(p => p.shift))];
|
|
return shifts.sort();
|
|
});
|
|
|
|
const fastTrackOptions = computed(() => {
|
|
const normalizedValues = props.items
|
|
.map((p) => (p.fastTrack ?? "").toString().trim().toUpperCase())
|
|
.filter((v) => v.length > 0);
|
|
|
|
const uniqueTracks = [...new Set(normalizedValues)];
|
|
return uniqueTracks.sort();
|
|
});
|
|
|
|
const hasActiveFilters = computed(() => {
|
|
return !!(selectedKlinik.value || selectedPembayaran.value || selectedShift.value || selectedFastTrack.value);
|
|
});
|
|
|
|
const clearAllFilters = () => {
|
|
selectedKlinik.value = null;
|
|
selectedPembayaran.value = null;
|
|
selectedShift.value = null;
|
|
selectedFastTrack.value = null;
|
|
currentPage.value = 1;
|
|
};
|
|
|
|
const filteredItems = computed(() => {
|
|
if (selectedStatusModel.value === 'all') return props.items;
|
|
return props.items.filter(p => p.status === selectedStatusModel.value);
|
|
});
|
|
|
|
const filteredAndSearchedItems = computed(() => {
|
|
let result = filteredItems.value;
|
|
|
|
// Apply attribute filters
|
|
if (selectedKlinik.value) {
|
|
result = result.filter(p => p.klinik === selectedKlinik.value);
|
|
}
|
|
if (selectedPembayaran.value) {
|
|
result = result.filter(p => p.pembayaran === selectedPembayaran.value);
|
|
}
|
|
if (selectedShift.value) {
|
|
result = result.filter(p => p.shift === selectedShift.value);
|
|
}
|
|
if (selectedFastTrack.value) {
|
|
result = result.filter(p => p.fastTrack === selectedFastTrack.value);
|
|
}
|
|
|
|
// Apply search
|
|
if (searchModel.value) {
|
|
const searchLower = searchModel.value.toLowerCase();
|
|
result = result.filter(patient =>
|
|
patient.barcode?.toLowerCase().includes(searchLower) ||
|
|
patient.noAntrian?.toLowerCase().includes(searchLower) ||
|
|
patient.klinik?.toLowerCase().includes(searchLower)
|
|
);
|
|
}
|
|
|
|
return result;
|
|
});
|
|
|
|
const totalPages = computed(() =>
|
|
Math.ceil(filteredAndSearchedItems.value.length / props.itemsPerPage)
|
|
);
|
|
|
|
const paginatedItems = computed(() => {
|
|
const start = (currentPage.value - 1) * props.itemsPerPage;
|
|
const end = start + props.itemsPerPage;
|
|
return filteredAndSearchedItems.value.slice(start, end);
|
|
});
|
|
|
|
const handleAction = (patient, action) => {
|
|
emit('action', patient, action);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.patient-data-container {
|
|
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;
|
|
}
|
|
|
|
.data-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.filters {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.status-filter {
|
|
flex: 1;
|
|
min-width: 300px;
|
|
}
|
|
|
|
.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);
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
background: var(--color-neutral-300);
|
|
}
|
|
}
|
|
|
|
.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: 300px;
|
|
min-width: 250px;
|
|
}
|
|
|
|
.advanced-filters {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.filter-select {
|
|
min-width: 180px;
|
|
max-width: 220px;
|
|
}
|
|
|
|
.active-filters {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.results-info {
|
|
padding: 8px 12px;
|
|
background: var(--color-neutral-200);
|
|
border-radius: 8px;
|
|
border-left: 3px solid var(--color-primary-600);
|
|
}
|
|
|
|
.results-text {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--color-neutral-700);
|
|
}
|
|
|
|
.patient-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--color-neutral-700);
|
|
}
|
|
|
|
.empty-subtext {
|
|
font-size: 13px;
|
|
color: var(--color-neutral-600);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.pagination-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--color-neutral-400);
|
|
}
|
|
|
|
:deep(.v-pagination__item) {
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.filters {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.status-filter {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.search-field {
|
|
max-width: 100%;
|
|
min-width: 100%;
|
|
}
|
|
|
|
.advanced-filters {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-select {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.patient-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 961px) and (max-width: 1264px) {
|
|
.patient-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1265px) {
|
|
.patient-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
|
|
}
|
|
}
|
|
</style> |