arie.bagus.2905/web-antrean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update anjungan tampilan

Browse Source
This commit is contained in:
Fanrouver
2026-02-06 10:11:31 +07:00
parent 93874d16bb
commit 329ac9c3b0
1 changed files with 71 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/Anjungan/Anjungan/[id].vue
+71 -88
View File
@@ -20,88 +20,76 @@
</div>
<div class="anjungan-container">
<v-card elevation="0" class="main-content-card">
<v-card-text class="pa-6">
<v-row>
<v-col
v-for="clinic in filteredClinics"
:key="clinic.id"
cols="12"
sm="6"
md="4"
lg="3"
class="pa-2"
>
<v-card
:class="{
'clinic-card': true,
'clinic-available': clinic.available,
'clinic-closed': !clinic.available,
}"
:disabled="!clinic.available"
@click="selectClinic(clinic)"
elevation="0"
>
<v-card-text class="clinic-content">
<h3 class="clinic-name">
{{ clinic.name }}
</h3>
<div v-if="filteredClinics.length > 0" class="clinic-grid">
<v-card
v-for="clinic in filteredClinics"
:key="clinic.id"
:class="{
'clinic-card': true,
'clinic-available': clinic.available,
'clinic-closed': !clinic.available,
}"
:disabled="!clinic.available"
@click="selectClinic(clinic)"
elevation="0"
>
<v-card-text class="clinic-content">
<h3 class="clinic-name">
{{ clinic.name }}
</h3>
<div class="doctor-info">
<v-icon
size="14"
:color="
clinic.available
? 'var(--color-primary-600)'
: 'var(--color-neutral-600)'
"
>
mdi-doctor
</v-icon>
<span>{{ getDisplayDoctorInfo(clinic) }}</span>
</div>
<div class="doctor-info">
<v-icon
size="14"
:color="
clinic.available
? 'var(--color-primary-600)'
: 'var(--color-neutral-600)'
"
>
mdi-doctor
</v-icon>
<span>{{ getDisplayDoctorInfo(clinic) }}</span>
</div>
<div class="schedule-info">
<v-icon
size="12"
:color="
clinic.available
? 'var(--color-neutral-600)'
: 'var(--color-neutral-600)'
"
>
mdi-clock-outline
</v-icon>
<span>{{ clinic.schedule || "Tidak tersedia" }}</span>
</div>
<div class="schedule-info">
<v-icon
size="12"
:color="
clinic.available
? 'var(--color-neutral-600)'
: 'var(--color-neutral-600)'
"
>
mdi-clock-outline
</v-icon>
<span>{{ clinic.schedule || "Tidak tersedia" }}</span>
</div>
<div class="clinic-icon-wrapper">
<v-icon
:icon="clinic.icon"
size="28"
:color="
clinic.available
? 'var(--color-primary-600)'
: 'var(--color-neutral-100)'
"
></v-icon>
</div>
</v-card-text>
</v-card>
</v-col>
</v-row>
<div class="clinic-icon-wrapper">
<v-icon
:icon="clinic.icon"
size="28"
:color="
clinic.available
? 'var(--color-primary-600)'
: 'var(--color-neutral-100)'
"
></v-icon>
</div>
</v-card-text>
</v-card>
</div>
<div v-if="filteredClinics.length === 0" class="empty-state">
<v-icon size="48" color="grey-lighten-1"
>mdi-hospital-marker-outline</v-icon
>
<h3 class="empty-title">Tidak ada klinik yang sesuai</h3>
<p class="empty-subtitle">
Anjungan ini belum memiliki klinik terpilih
</p>
</div>
</v-card-text>
</v-card>
<div v-if="filteredClinics.length === 0" class="empty-state">
<v-icon size="48" color="grey-lighten-1"
>mdi-hospital-marker-outline</v-icon
>
<h3 class="empty-title">Tidak ada klinik yang sesuai</h3>
<p class="empty-subtitle">
Anjungan ini belum memiliki klinik terpilih
</p>
</div>
<v-dialog
v-model="showVisitTypeDialog"
@@ -1378,16 +1366,11 @@ watch(lastRegisteredPatient, (newVal) => {
line-height: 22px;
}
.main-content-card {
border-radius: 12px;
border: 1px solid var(--color-neutral-500);
background: var(--color-neutral-100);
max-height: calc(100vh - 180px);
overflow-y: auto;
}
.main-content-card .v-card-text {
padding: 16px !important;
.clinic-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
width: 100%;
}
/* CLINIC CARD - Improved Hierarchy */