update logika dan flow anjungan, master, store
This commit is contained in:
bagus-arie05
No files matched your search
@@ -1,416 +0,0 @@
|
||||
<template>
|
||||
<v-menu
|
||||
v-model="menu"
|
||||
:close-on-content-click="false"
|
||||
location="top end"
|
||||
origin="bottom right"
|
||||
transition="scale-transition"
|
||||
open-on-hover
|
||||
>
|
||||
<template v-slot:activator="{ props: menuProps }">
|
||||
<v-list-item
|
||||
v-if="!rail"
|
||||
v-bind="menuProps"
|
||||
:title="user?.name || user?.preferred_username || 'User'"
|
||||
:subtitle="user?.email || 'No email'"
|
||||
class="pa-3 ma-1 rounded-xl profile-activator"
|
||||
link
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<div class="avatar-wrapper">
|
||||
<v-avatar size="44" class="avatar-glow">
|
||||
<v-img
|
||||
:src="user?.picture || 'https://i.pravatar.cc/300?img=68'"
|
||||
:alt="`${user?.name || 'User'} Profile`"
|
||||
></v-img>
|
||||
</v-avatar>
|
||||
<div class="status-dot"></div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<v-icon size="20" class="chevron-icon">mdi-menu-down</v-icon>
|
||||
</template>
|
||||
</v-list-item>
|
||||
|
||||
<v-btn
|
||||
v-else
|
||||
icon
|
||||
v-bind="menuProps"
|
||||
size="large"
|
||||
variant="flat"
|
||||
class="avatar-btn"
|
||||
:title="user?.name || 'Profile'"
|
||||
>
|
||||
<div class="avatar-wrapper">
|
||||
<v-avatar size="44" class="avatar-glow">
|
||||
<v-img
|
||||
:src="user?.picture || 'https://i.pravatar.cc/300?img=68'"
|
||||
:alt="`${user?.name || 'User'} Profile`"
|
||||
></v-img>
|
||||
</v-avatar>
|
||||
<div class="status-dot"></div>
|
||||
</div>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-card class="profile-card rounded-xl elevation-12" width="340">
|
||||
<!-- Decorative Header -->
|
||||
<div class="card-header">
|
||||
<div class="header-pattern"></div>
|
||||
<div class="header-content pa-6 text-center">
|
||||
<div class="avatar-container mb-4">
|
||||
<v-avatar size="90" class="profile-avatar">
|
||||
<v-img
|
||||
:src="user?.picture || 'https://i.pravatar.cc/300?img=68'"
|
||||
:alt="`${user?.name || 'User'} Profile`"
|
||||
></v-img>
|
||||
</v-avatar>
|
||||
<div class="status-badge">
|
||||
<v-icon size="12" color="white">mdi-check</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-h6 font-weight-bold text-white mb-1">
|
||||
{{ user?.name || user?.preferred_username || 'User' }}
|
||||
</h3>
|
||||
<p class="text-body-2 text-white opacity-90 mb-2">
|
||||
{{ user?.email || 'No email' }}
|
||||
</p>
|
||||
<v-chip
|
||||
size="small"
|
||||
class="glass-chip"
|
||||
prepend-icon="mdi-identifier"
|
||||
>
|
||||
{{ user?.id?.substring(0, 10) }}...
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu Items -->
|
||||
<v-card-text class="pa-4">
|
||||
<div class="menu-grid">
|
||||
<div
|
||||
class="menu-tile rounded-lg pa-4 text-center cursor-pointer"
|
||||
@click="handleAction('profile')"
|
||||
>
|
||||
<div class="tile-icon-wrapper mb-2 mx-auto">
|
||||
<v-icon size="24" color="blue-darken-2">mdi-account-circle</v-icon>
|
||||
</div>
|
||||
<div class="text-caption font-weight-medium">Profil</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="menu-tile rounded-lg pa-4 text-center cursor-pointer"
|
||||
@click="handleAction('account')"
|
||||
>
|
||||
<div class="tile-icon-wrapper mb-2 mx-auto">
|
||||
<v-icon size="24" color="orange-darken-2">mdi-cog-outline</v-icon>
|
||||
</div>
|
||||
<div class="text-caption font-weight-medium">Pengaturan</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="menu-tile rounded-lg pa-4 text-center cursor-pointer"
|
||||
@click="handleAction('darkMode')"
|
||||
>
|
||||
<div class="tile-icon-wrapper mb-2 mx-auto">
|
||||
<v-icon size="24" :color="darkMode ? 'deep-purple-darken-2' : 'amber-darken-2'">
|
||||
{{ darkMode ? 'mdi-moon-waning-crescent' : 'mdi-white-balance-sunny' }}
|
||||
</v-icon>
|
||||
</div>
|
||||
<div class="text-caption font-weight-medium">
|
||||
{{ darkMode ? 'Gelap' : 'Terang' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-divider class="my-4"></v-divider>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="quick-actions">
|
||||
<v-list-item
|
||||
class="rounded-lg px-3 py-2 action-item"
|
||||
link
|
||||
@click="handleAction('notifications')"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-icon size="20" color="blue-darken-1">mdi-bell-outline</v-icon>
|
||||
</template>
|
||||
<v-list-item-title class="text-body-2 font-weight-medium">
|
||||
Notifikasi
|
||||
</v-list-item-title>
|
||||
<template v-slot:append>
|
||||
<v-badge color="orange-darken-2" content="3" inline></v-badge>
|
||||
</template>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item
|
||||
class="rounded-lg px-3 py-2 action-item"
|
||||
link
|
||||
@click="handleAction('help')"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-icon size="20" color="blue-darken-1">mdi-help-circle-outline</v-icon>
|
||||
</template>
|
||||
<v-list-item-title class="text-body-2 font-weight-medium">
|
||||
Bantuan & Dukungan
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</div>
|
||||
|
||||
<v-divider class="my-4"></v-divider>
|
||||
|
||||
<!-- Logout Button -->
|
||||
<v-btn
|
||||
block
|
||||
class="rounded-lg logout-btn"
|
||||
variant="flat"
|
||||
color="error"
|
||||
prepend-icon="mdi-logout"
|
||||
@click="signOut"
|
||||
:disabled="isLoggingOut"
|
||||
:loading="isLoggingOut"
|
||||
>
|
||||
{{ isLoggingOut ? 'Keluar...' : 'Keluar' }}
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { navigateTo } from '#app';
|
||||
|
||||
const props = defineProps({
|
||||
user: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
rail: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const menu = ref(false);
|
||||
const darkMode = ref(false);
|
||||
const isLoggingOut = ref(false);
|
||||
const emit = defineEmits(['logout']);
|
||||
|
||||
const signOut = async () => {
|
||||
if (isLoggingOut.value) return;
|
||||
isLoggingOut.value = true;
|
||||
menu.value = false;
|
||||
|
||||
try {
|
||||
emit('logout');
|
||||
} finally {
|
||||
isLoggingOut.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleAction = (action) => {
|
||||
switch(action) {
|
||||
case 'account':
|
||||
navigateTo('/Profile/Pengaturan')
|
||||
break;
|
||||
case 'profile':
|
||||
navigateTo('/Profile/Profil')
|
||||
break;
|
||||
case 'notifications':
|
||||
navigateTo('/notifications')
|
||||
break;
|
||||
case 'help':
|
||||
navigateTo('/help')
|
||||
break;
|
||||
case 'darkMode':
|
||||
darkMode.value = !darkMode.value;
|
||||
return;
|
||||
}
|
||||
|
||||
menu.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-activator {
|
||||
background: linear-gradient(135deg, rgba(25, 118, 210, 0.1) 0%, rgba(245, 124, 0, 0.1) 100%);
|
||||
border: 1px solid rgba(25, 118, 210, 0.2);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.profile-activator:hover {
|
||||
background: linear-gradient(135deg, rgba(25, 118, 210, 0.15) 0%, rgba(245, 124, 0, 0.15) 100%);
|
||||
border-color: rgba(25, 118, 210, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar-glow {
|
||||
border: 3px solid white;
|
||||
box-shadow: 0 0 20px rgba(25, 118, 210, 0.4);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.chevron-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.profile-activator:hover .chevron-icon {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
.avatar-btn {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(25, 118, 210, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #1976d2 0%, #fb8c00 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-pattern {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.glass-chip {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
color: white !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.menu-tile {
|
||||
background: linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(245, 124, 0, 0.05) 100%);
|
||||
border: 1px solid rgba(25, 118, 210, 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-tile:hover {
|
||||
background: linear-gradient(135deg, rgba(25, 118, 210, 0.1) 0%, rgba(245, 124, 0, 0.1) 100%);
|
||||
border-color: rgba(25, 118, 210, 0.3);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tile-icon-wrapper {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
transition: all 0.2s ease;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.action-item:hover {
|
||||
background: linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(245, 124, 0, 0.05) 100%);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
text-transform: none;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
box-shadow: 0 6px 20px rgba(244, 67, 54, 0.4);
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.opacity-90 {
|
||||
opacity: 0.9;
|
||||
}
|
||||
</style>
|
||||
@@ -1,106 +1,83 @@
|
||||
<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>
|
||||
<v-tooltip
|
||||
:text="isClickable ? 'Klik untuk proses pasien' : ''"
|
||||
location="top"
|
||||
:disabled="!isClickable"
|
||||
>
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<v-card
|
||||
class="patient-card"
|
||||
elevation="2"
|
||||
:class="{ 'clickable-card': isClickable }"
|
||||
@click="handleCardClick"
|
||||
v-bind="isClickable ? tooltipProps : {}"
|
||||
>
|
||||
<v-card-text class="pa-4">
|
||||
<!-- Header: Queue Number, Status & Fast Track Badge -->
|
||||
<div class="card-header">
|
||||
<div class="header-left">
|
||||
<div class="queue-number">{{ patient.noAntrian.split(" |")[0] }}</div>
|
||||
<v-icon
|
||||
v-if="patient.fastTrack === 'YA'"
|
||||
color="warning"
|
||||
size="20"
|
||||
class="fast-track-icon"
|
||||
>
|
||||
mdi-flash
|
||||
</v-icon>
|
||||
</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>
|
||||
<!-- Patient Info Grid - Simplified -->
|
||||
<div class="patient-info mt-3">
|
||||
<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">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>
|
||||
|
||||
<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>
|
||||
<!-- Action Button for non-clickable states -->
|
||||
<div v-if="!isClickable && patient.status === 'terlambat'" class="card-actions mt-3">
|
||||
<v-btn
|
||||
block
|
||||
color="success-600"
|
||||
variant="flat"
|
||||
size="small"
|
||||
class="text-white"
|
||||
@click.stop="$emit('action', patient, 'aktifkan')"
|
||||
>
|
||||
<v-icon start size="18">mdi-check-circle</v-icon>
|
||||
Aktifkan
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
patient: {
|
||||
type: Object,
|
||||
@@ -108,7 +85,17 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
defineEmits(['action', 'view-details']);
|
||||
const emit = defineEmits(['action']);
|
||||
|
||||
const isClickable = computed(() => {
|
||||
return props.patient.status === 'diloket' || props.patient.status === 'pending';
|
||||
});
|
||||
|
||||
const handleCardClick = () => {
|
||||
if (isClickable.value) {
|
||||
emit('action', props.patient, 'proses');
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
const colors = {
|
||||
@@ -137,11 +124,25 @@ const getStatusLabel = (status) => {
|
||||
background: var(--color-neutral-100);
|
||||
transition: all 0.2s ease;
|
||||
height: 100%;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&.clickable-card {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary-600);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -149,7 +150,13 @@ const getStatusLabel = (status) => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--color-neutral-400);
|
||||
border-bottom: 2px solid var(--color-neutral-400);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.queue-number {
|
||||
@@ -158,9 +165,23 @@ const getStatusLabel = (status) => {
|
||||
color: var(--color-neutral-900);
|
||||
}
|
||||
|
||||
.fast-track-icon {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.status-chip {
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.patient-info {
|
||||
@@ -174,12 +195,26 @@ const getStatusLabel = (status) => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.payment-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.fast-track-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
height: 20px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: var(--color-neutral-600);
|
||||
font-weight: 500;
|
||||
min-width: 100px;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
@@ -191,24 +226,14 @@ const getStatusLabel = (status) => {
|
||||
.klinik-chip {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
border: 1.5px solid currentColor;
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 36px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
@@ -6,6 +6,7 @@
|
||||
<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"
|
||||
@@ -17,6 +18,7 @@
|
||||
</v-chip>
|
||||
</v-chip-group>
|
||||
|
||||
<!-- Search Field -->
|
||||
<v-text-field
|
||||
v-model="searchModel"
|
||||
placeholder="Cari barcode, nomor antrian..."
|
||||
@@ -26,6 +28,123 @@
|
||||
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 -->
|
||||
@@ -41,8 +160,12 @@
|
||||
<!-- 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">Tidak ada data pasien</div>
|
||||
<div class="empty-subtext">Data akan muncul ketika ada pasien yang terdaftar</div>
|
||||
<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 -->
|
||||
@@ -105,11 +228,15 @@ const props = defineProps({
|
||||
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; // Reset to first page on filter change
|
||||
currentPage.value = 1;
|
||||
emit('update:selectedStatus', value);
|
||||
}
|
||||
});
|
||||
@@ -117,7 +244,7 @@ const selectedStatusModel = computed({
|
||||
const searchModel = computed({
|
||||
get: () => props.searchQuery,
|
||||
set: (value) => {
|
||||
currentPage.value = 1; // Reset to first page on search
|
||||
currentPage.value = 1;
|
||||
emit('update:searchQuery', value);
|
||||
}
|
||||
});
|
||||
@@ -129,20 +256,76 @@ const statusOptions = computed(() => [
|
||||
{ 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(() => {
|
||||
if (!searchModel.value) return filteredItems.value;
|
||||
|
||||
const searchLower = searchModel.value.toLowerCase();
|
||||
return filteredItems.value.filter(patient =>
|
||||
patient.barcode?.toLowerCase().includes(searchLower) ||
|
||||
patient.noAntrian?.toLowerCase().includes(searchLower) ||
|
||||
patient.klinik?.toLowerCase().includes(searchLower)
|
||||
);
|
||||
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(() =>
|
||||
@@ -190,6 +373,7 @@ const handleAction = (patient, action) => {
|
||||
|
||||
.status-filter {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.status-filter .v-chip {
|
||||
@@ -214,11 +398,43 @@ const handleAction = (patient, action) => {
|
||||
|
||||
.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(320px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@@ -260,8 +476,22 @@ const handleAction = (patient, action) => {
|
||||
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 {
|
||||
@@ -278,7 +508,7 @@ const handleAction = (patient, action) => {
|
||||
|
||||
@media (min-width: 1265px) {
|
||||
.patient-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,107 +0,0 @@
|
||||
<!-- components/AppBar.vue -->
|
||||
<template>
|
||||
<v-app-bar app color="#ff9248" dark>
|
||||
<v-app-bar-nav-icon @click="emit('toggle-rail')"></v-app-bar-nav-icon>
|
||||
<v-toolbar-title class="ml-2 font-weight-bold">
|
||||
<span class="text-blue-darken-2">Antrean</span> RSSA
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<!-- Show loading state or user info -->
|
||||
<div v-if="isLoading" class="d-flex align-center">
|
||||
<v-progress-circular indeterminate size="20" class="mr-2"></v-progress-circular>
|
||||
<span class="mr-2">Loading...</span>
|
||||
</div>
|
||||
|
||||
<template v-else-if="isAuthenticated && user">
|
||||
<ProfilePopup
|
||||
:user="user"
|
||||
@logout="handleLogout"
|
||||
/><template>
|
||||
<v-app-bar app color="blue-grey-darken-3" dark flat>
|
||||
<v-app-bar-nav-icon @click="emit('toggle-rail')"></v-app-bar-nav-icon>
|
||||
<v-toolbar-title class="ml-2 font-weight-bold">
|
||||
<span class="text-orange-darken-2">Antrian</span> RSSA
|
||||
</v-toolbar-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<div v-if="isLoading" class="d-flex align-center">
|
||||
<v-progress-circular indeterminate color="orange-darken-2" size="20" class="mr-2"></v-progress-circular>
|
||||
<span class="text-caption">Loading...</span>
|
||||
</div>
|
||||
|
||||
<template v-else-if="isAuthenticated && user">
|
||||
<v-menu offset-y>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
variant="flat"
|
||||
rounded="xl"
|
||||
color="transparent"
|
||||
class="pa-2 text-capitalize"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar color="orange-darken-2" size="36" class="mr-2">
|
||||
<span class="text-white font-weight-bold">{{ user.name?.charAt(0) || 'U' }}</span>
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-1 font-weight-bold text-white">{{ user.name || 'User' }}</span>
|
||||
<v-icon right size="20" class="ml-1">mdi-chevron-down</v-icon>
|
||||
</div>
|
||||
</v-btn>
|
||||
</template>
|
||||
<ProfilePopup
|
||||
:user="user"
|
||||
@logout="handleLogout"
|
||||
/>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<v-btn @click="redirectToLogin" color="orange-darken-2" variant="flat" rounded="lg" class="text-capitalize">
|
||||
<v-icon left>mdi-login</v-icon>
|
||||
Login
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-app-bar>
|
||||
</template>
|
||||
<span class="mr-2">{{ user.name || user.preferred_username || user.email }}</span>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<v-btn @click="redirectToLogin" color="white" text>
|
||||
Login
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-app-bar>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ProfilePopup from './ProfilePopup.vue';
|
||||
|
||||
// Emit untuk parent component
|
||||
const emit = defineEmits(['toggle-rail']);
|
||||
|
||||
// Use auth composable
|
||||
const { user, isAuthenticated, isLoading, checkAuth, logout } = useAuth()
|
||||
|
||||
// Handle logout - use the composable's logout method
|
||||
const handleLogout = async () => {
|
||||
console.log("🚪 AppBar logout initiated...")
|
||||
try {
|
||||
await logout()
|
||||
} catch (error) {
|
||||
console.error("❌ AppBar logout error:", error)
|
||||
}
|
||||
}
|
||||
|
||||
// Redirect to login if not authenticated
|
||||
const redirectToLogin = () => {
|
||||
navigateTo('/LoginPage')
|
||||
}
|
||||
|
||||
// Check authentication on mount
|
||||
onMounted(async () => {
|
||||
await checkAuth()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user