wednesday 20 august 2025
This commit is contained in:
Fanrouver
60
components/ProfilePopup.vue
Normal file
60
components/ProfilePopup.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<v-menu
|
||||
v-model="menu"
|
||||
:close-on-content-click="false"
|
||||
location="bottom"
|
||||
origin="top right"
|
||||
transition="scale-transition"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
icon
|
||||
v-bind="props"
|
||||
class="ml-auto"
|
||||
>
|
||||
<v-icon size="40" color="#000000">mdi-account</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-card class="mx-auto" color="#FFA000" dark width="250">
|
||||
<v-list-item three-line class="py-4">
|
||||
<v-list-item-title class="text-h6 text-center font-weight-bold">
|
||||
<v-avatar color="#fff" size="60">
|
||||
<v-icon size="40" color="#4CAF50">mdi-account</v-icon>
|
||||
</v-avatar>
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle class="text-center mt-2 text-black">
|
||||
<span class="d-block font-weight-bold">Rajal Bayu Nogroho</span>
|
||||
<span class="d-block">Super Admin</span>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
|
||||
<v-card-actions class="d-flex justify-center pa-2">
|
||||
<v-btn
|
||||
color="black"
|
||||
variant="text"
|
||||
class="font-weight-bold"
|
||||
@click="signOut"
|
||||
>
|
||||
Sign out
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const menu = ref(false);
|
||||
|
||||
const signOut = () => {
|
||||
console.log("Sign out button clicked!");
|
||||
menu.value = false;
|
||||
// Implementasi logika logout di sini
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* No specific scoped styles needed for this component as Vuetify classes handle styling */
|
||||
</style>
|
||||
133
layouts/default.vue
Normal file
133
layouts/default.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-layout>
|
||||
<!-- App Bar Header -->
|
||||
<v-app-bar app color="#FFA000" dark>
|
||||
<v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
|
||||
<v-toolbar-title class="ml-2">Antrian RSSA</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<!-- Profile Popup Component -->
|
||||
<ProfilePopup />
|
||||
<span class="mr-2">Rajal Bayu Nogroho</span>
|
||||
</v-app-bar>
|
||||
|
||||
<!-- Navigation Drawer -->
|
||||
<v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
|
||||
<v-list density="compact" nav>
|
||||
<template v-for="item in items" :key="item.title">
|
||||
<v-menu
|
||||
v-if="item.children"
|
||||
open-on-hover
|
||||
location="end"
|
||||
:nudge-right="3"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:value="item.title"
|
||||
:class="{ 'v-list-item--active': item.title === currentPage }"
|
||||
>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-title class="font-weight-bold">{{
|
||||
item.title
|
||||
}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item
|
||||
v-for="child in item.children"
|
||||
:key="child.title"
|
||||
:to="child.to"
|
||||
link
|
||||
>
|
||||
<v-list-item-title>{{ child.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-tooltip
|
||||
v-else
|
||||
:disabled="!rail"
|
||||
open-on-hover
|
||||
location="end"
|
||||
:text="item.title"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:to="item.to"
|
||||
:value="item.title"
|
||||
:class="{ 'v-list-item--active': item.title === currentPage }"
|
||||
link
|
||||
></v-list-item>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<!-- Page content will be rendered here -->
|
||||
<slot />
|
||||
|
||||
</v-layout>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
// Reactive data
|
||||
const drawer = ref(true);
|
||||
const rail = ref(true);
|
||||
const currentPage = ref("Klinik Admin");
|
||||
|
||||
// Navigation items
|
||||
const items = ref([
|
||||
{ title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
|
||||
{
|
||||
title: "Setting",
|
||||
icon: "mdi-cog",
|
||||
children: [
|
||||
{ title: "Hak Akses", to: "/setting/hak-akses" },
|
||||
{ title: "User Login", to: "/setting/user-login" },
|
||||
{ title: "Master Loket", to: "/setting/master-loket" },
|
||||
{ title: "Master Klinik", to: "/setting/master-klinik" },
|
||||
{ title: "Master Klinik Ruang", to: "/setting/master-klinik-ruang" },
|
||||
{ title: "Screen", to: "/setting/screen" },
|
||||
],
|
||||
},
|
||||
{ title: "Loket Admin", icon: "mdi-account-supervisor", to: "/LoketAdmin" },
|
||||
{ title: "Ranap Admin", icon: "mdi-bed" },
|
||||
{ title: "Klinik Admin", icon: "mdi-hospital-box", to: "/KlinikAdmin" },
|
||||
{ title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
|
||||
{
|
||||
title: "Anjungan",
|
||||
icon: "mdi-account-box-multiple",
|
||||
children: [
|
||||
{ title: "Anjungan", to: "/Anjungan/Anjungan" },
|
||||
{ title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan" },
|
||||
],
|
||||
},
|
||||
{ title: "Fast Track", icon: "mdi-clock-fast", to: "/FastTrack" },
|
||||
{ title: "Data Pasien", icon: "mdi-account-multiple" },
|
||||
{ title: "Screen", icon: "mdi-monitor" },
|
||||
{ title: "List Pasien", icon: "mdi-format-list-bulleted" },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#inspire .v-navigation-drawer__content {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
#inspire .v-app-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -1,235 +1,189 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-layout>
|
||||
<!-- App Bar Header -->
|
||||
<v-app-bar app color="green darken-1" dark>
|
||||
<v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
|
||||
<v-toolbar-title class="ml-2">Antrian RSSA</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon>mdi-account-circle</v-icon>
|
||||
</v-btn>
|
||||
<span class="mr-2">Rajal Bayu Nogroho</span>
|
||||
</v-app-bar>
|
||||
<v-divider class="my-8"></v-divider>
|
||||
<v-main class="bg-grey-lighten-3">
|
||||
<!-- Konten utama dibungkus dalam div yang menyesuaikan padding kiri -->
|
||||
<div :style="contentStyle">
|
||||
<v-container fluid>
|
||||
<h1 class="text-h4">Admin Anjungan</h1>
|
||||
<v-card class="pa-5 mb-5" color="white" flat>
|
||||
<v-row align="center">
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
label="Barcode"
|
||||
placeholder="Masukkan Barcode"
|
||||
outlined
|
||||
dense
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-chip color="#B71C1C" class="text-caption">
|
||||
Tekan Enter. (Barcode depan nomor selalu ada huruf lain, Ex:
|
||||
J20073010005 "Hiraukan huruf 'J' nya")
|
||||
</v-chip>
|
||||
</v-col>
|
||||
<v-col cols="12" md="2">
|
||||
<v-btn block color="info">Pendaftaran Online</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
<!-- Navigation Drawer -->
|
||||
<v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
|
||||
<v-list density="compact" nav>
|
||||
<template v-for="item in items" :key="item.title">
|
||||
<v-menu
|
||||
v-if="item.children"
|
||||
open-on-hover
|
||||
location="end"
|
||||
:nudge-right="3"
|
||||
<v-divider class="my-5"></v-divider>
|
||||
|
||||
<v-card class="mb-5">
|
||||
<v-toolbar flat color="transparent" dense>
|
||||
<v-toolbar-title class="text-subtitle-1 font-weight-bold red--text">
|
||||
DATA PENGUNJUNG TERLAMBAT
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="searchLate"
|
||||
append-icon="mdi-magnify"
|
||||
label="Search"
|
||||
single-line
|
||||
hide-details
|
||||
dense
|
||||
class="mr-2"
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
<v-select
|
||||
:items="[10, 25, 50, 100]"
|
||||
label="Show"
|
||||
dense
|
||||
single-line
|
||||
hide-details
|
||||
class="shrink"
|
||||
variant="outlined"
|
||||
></v-select>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:headers="lateHeaders"
|
||||
:items="lateVisitors"
|
||||
:search="searchLate"
|
||||
no-data-text="No data available in table"
|
||||
hide-default-footer
|
||||
class="elevation-1"
|
||||
></v-data-table>
|
||||
<div class="d-flex justify-end pt-2">
|
||||
<v-pagination
|
||||
v-model="page"
|
||||
:length="10"
|
||||
:total-visible="5"
|
||||
></v-pagination>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-divider class="my-5"></v-divider>
|
||||
|
||||
<v-card>
|
||||
<v-toolbar flat color="transparent" dense>
|
||||
<v-toolbar-title class="text-subtitle-1 font-weight-bold red--text">
|
||||
DATA PENGUNJUNG
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="Search"
|
||||
single-line
|
||||
hide-details
|
||||
dense
|
||||
class="mr-2"
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
<v-select
|
||||
:items="[10, 25, 50, 100]"
|
||||
label="Show"
|
||||
dense
|
||||
single-line
|
||||
hide-details
|
||||
class="shrink"
|
||||
variant="outlined"
|
||||
></v-select>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="visitors"
|
||||
:search="search"
|
||||
no-data-text="No data available in table"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:value="item.title"
|
||||
:class="{ 'v-list-item--active': item.title === currentPage }"
|
||||
>
|
||||
</v-list-item>
|
||||
<template v-slot:item.aksi="{ item }">
|
||||
<div class="d-flex flex-column">
|
||||
<v-btn small color="success" class="my-1">Tiket</v-btn>
|
||||
<v-btn small color="primary" class="my-1">Tiket Pengantar</v-btn>
|
||||
<v-btn small color="warning" class="my-1">ByPass</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-title class="font-weight-bold">{{
|
||||
item.title
|
||||
}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item
|
||||
v-for="child in item.children"
|
||||
:key="child.title"
|
||||
:to="child.to"
|
||||
link
|
||||
>
|
||||
<v-list-item-title>{{ child.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-list-item
|
||||
v-else
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:to="item.to"
|
||||
:value="item.title"
|
||||
:class="{ 'v-list-item--active': item.title === currentPage }"
|
||||
link
|
||||
></v-list-item>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-main>
|
||||
<v-container fluid>
|
||||
<p>Admin Anjungan</p>
|
||||
<v-card class="pa-5 mb-5" color="white" flat>
|
||||
<v-row align="center">
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
label="Barcode"
|
||||
placeholder="Masukkan Barcode"
|
||||
outlined
|
||||
dense
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-chip color="#B71C1C" class="text-caption">
|
||||
Tekan Enter. (Barcode depan nomor selalu ada huruf lain, Ex:
|
||||
J20073010005 "Hiraukan huruf 'J' nya")
|
||||
</v-chip>
|
||||
</v-col>
|
||||
<v-col cols="12" md="2">
|
||||
<v-btn block color="info">Pendaftaran Online</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
<v-divider class="my-5"></v-divider>
|
||||
|
||||
<v-card class="mb-5">
|
||||
<v-toolbar flat color="transparent" dense>
|
||||
<v-toolbar-title
|
||||
class="text-subtitle-1 font-weight-bold red--text"
|
||||
>DATA PENGUNJUNG TERLAMBAT</v-toolbar-title
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="searchLate"
|
||||
append-icon="mdi-magnify"
|
||||
label="Search"
|
||||
single-line
|
||||
hide-details
|
||||
dense
|
||||
class="mr-2"
|
||||
></v-text-field>
|
||||
<v-select
|
||||
:items="[10, 25, 50, 100]"
|
||||
label="Show"
|
||||
dense
|
||||
single-line
|
||||
hide-details
|
||||
class="shrink"
|
||||
></v-select>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:headers="lateHeaders"
|
||||
:items="lateVisitors"
|
||||
:search="searchLate"
|
||||
no-data-text="No data available in table"
|
||||
hide-default-footer
|
||||
class="elevation-1"
|
||||
></v-data-table>
|
||||
<div class="d-flex justify-end pt-2">
|
||||
<v-pagination
|
||||
v-model="page"
|
||||
:length="10"
|
||||
:total-visible="5"
|
||||
></v-pagination>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-divider class="my-5"></v-divider>
|
||||
|
||||
<v-card>
|
||||
<v-toolbar flat color="transparent" dense>
|
||||
<v-toolbar-title
|
||||
class="text-subtitle-1 font-weight-bold red--text"
|
||||
>DATA PENGUNJUNG</v-toolbar-title
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="Search"
|
||||
single-line
|
||||
hide-details
|
||||
dense
|
||||
class="mr-2"
|
||||
></v-text-field>
|
||||
<v-select
|
||||
:items="[10, 25, 50, 100]"
|
||||
label="Show"
|
||||
dense
|
||||
single-line
|
||||
hide-details
|
||||
class="shrink"
|
||||
></v-select>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="visitors"
|
||||
:search="search"
|
||||
no-data-text="No data available in table"
|
||||
class="elevation-1"
|
||||
:footer-props="{
|
||||
'items-per-page-options': [10, 25, 50, 100],
|
||||
'show-current-page': true,
|
||||
}"
|
||||
>
|
||||
<template v-slot:item.aksi="{ item }">
|
||||
<div class="d-flex flex-column">
|
||||
<v-btn small color="success" class="my-1">Tiket</v-btn>
|
||||
<v-btn small color="primary" class="my-1"
|
||||
>Tiket Pengantar</v-btn
|
||||
>
|
||||
<v-btn small color="warning" class="my-1">ByPass</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-layout>
|
||||
</v-app>
|
||||
</v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
const drawer = ref(true); // Nilai awal true agar sidebar terlihat
|
||||
const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
|
||||
// Definisikan props untuk menerima status 'rail' dari layout induk
|
||||
const props = defineProps({
|
||||
rail: Boolean,
|
||||
});
|
||||
|
||||
// Reactive data
|
||||
const search = ref("");
|
||||
const lateSearch = ref("");
|
||||
const clinicSearch = ref("");
|
||||
const itemsPerPage = ref(10);
|
||||
const lateItemsPerPage = ref(10);
|
||||
const clinicItemsPerPage = ref(10);
|
||||
const currentPage = ref("Admin Anjungan");
|
||||
const searchLate = ref("");
|
||||
const page = ref(1);
|
||||
|
||||
// Gaya komputasi untuk menyesuaikan padding
|
||||
const contentStyle = computed(() => {
|
||||
return {
|
||||
paddingLeft: props.rail ? '56px' : '64px',
|
||||
transition: 'padding-left 0.3s ease-in-out',
|
||||
};
|
||||
});
|
||||
|
||||
// Struktur data yang memisahkan menu dengan dan tanpa submenu
|
||||
const items = ref([
|
||||
{ title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
|
||||
{
|
||||
title: "Setting",
|
||||
icon: "mdi-cog",
|
||||
children: [
|
||||
{ title: "Hak Akses", to: "/setting/hak-akses" },
|
||||
{ title: "User Login", to: "/setting/user-login" },
|
||||
{ title: "Master Loket", to: "/setting/master-loket" },
|
||||
{ title: "Master Klinik", to: "/setting/master-klinik" },
|
||||
{ title: "Master Klinik Ruang", to: "/setting/master-klinik-ruang" },
|
||||
{ title: "Screen", to: "/setting/screen" },
|
||||
],
|
||||
},
|
||||
{ title: "Loket Admin", icon: "mdi-account-supervisor", to : "/LoketAdmin" },
|
||||
{ title: "Ranap Admin", icon: "mdi-bed" },
|
||||
{ title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
|
||||
{ title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
|
||||
{ title: "Anjungan", icon: "mdi-account-box-multiple", to: "/anjungan" },
|
||||
{ title: "Fast Track", icon: "mdi-clock-fast" },
|
||||
{ title: "Data Pasien", icon: "mdi-account-multiple" },
|
||||
{ title: "Screen", icon: "mdi-monitor" },
|
||||
{ title: "List Pasien", icon: "mdi-format-list-bulleted" },
|
||||
// Table headers for late visitors
|
||||
const lateHeaders = [
|
||||
{ text: 'No', value: 'no' },
|
||||
{ text: 'Barcode', value: 'barcode' },
|
||||
{ text: 'No Rekamedik', value: 'noRekamedik' },
|
||||
{ text: 'No Antrian', value: 'noAntrian' },
|
||||
{ text: 'No Antrian Klinik', value: 'noAntrianKlinik' },
|
||||
{ text: 'Shift', value: 'shift' },
|
||||
{ text: 'Pembayaran', value: 'pembayaran' },
|
||||
{ text: 'Status', value: 'status' },
|
||||
];
|
||||
|
||||
// Table headers for all visitors
|
||||
const headers = [
|
||||
{ text: 'No', value: 'no' },
|
||||
{ text: 'Barcode', value: 'barcode' },
|
||||
{ text: 'No Rekamedik', value: 'noRekamedik' },
|
||||
{ text: 'No Antrian', value: 'noAntrian' },
|
||||
{ text: 'Shift', value: 'shift' },
|
||||
{ text: 'Ket', value: 'ket' },
|
||||
{ text: 'Fast Track', value: 'fastTrack' },
|
||||
{ text: 'Pembayaran', value: 'pembayaran' },
|
||||
{ text: 'Panggil', value: 'panggil' },
|
||||
{ text: 'Aksi', value: 'aksi' },
|
||||
];
|
||||
|
||||
// Mock data for late visitors
|
||||
const lateVisitors = ref([
|
||||
{ no: 1, barcode: '250813100928', noRekamedik: 'RM001', noAntrian: 'ON1045', noAntrianKlinik: 'K1', shift: 'Shift 1', pembayaran: 'JKN', status: 'Terlambat' },
|
||||
{ no: 2, barcode: '250813100930', noRekamedik: 'RM002', noAntrian: 'GI1018', noAntrianKlinik: 'K2', shift: 'Shift 1', pembayaran: 'JKN', status: 'Terlambat' },
|
||||
{ no: 3, barcode: '250813100937', noRekamedik: 'RM003', noAntrian: 'MT1073', noAntrianKlinik: 'K3', shift: 'Shift 1', pembayaran: 'JKN', status: 'Terlambat' },
|
||||
]);
|
||||
|
||||
// Mock data for all visitors
|
||||
const visitors = ref([
|
||||
{ no: 1, barcode: '250813100928', noRekamedik: 'RM001', noAntrian: 'ON1045', shift: 'Shift 1', ket: '', fastTrack: 'Ya', pembayaran: 'JKN', panggil: 'Ya' },
|
||||
{ no: 2, barcode: '250813100930', noRekamedik: 'RM002', noAntrian: 'GI1018', shift: 'Shift 1', ket: '', fastTrack: 'Tidak', pembayaran: 'JKN', panggil: 'Tidak' },
|
||||
{ no: 3, barcode: '250813100937', noRekamedik: 'RM003', noAntrian: 'MT1073', shift: 'Shift 1', ket: '', fastTrack: 'Tidak', pembayaran: 'JKN', panggil: 'Tidak' },
|
||||
]);
|
||||
</script>
|
||||
|
||||
128
pages/FastTrack.vue
Normal file
128
pages/FastTrack.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<v-main class="bg-grey-lighten-3">
|
||||
<v-container>
|
||||
<!-- Fast Track Content -->
|
||||
<div class="d-flex align-center justify-space-between mb-4">
|
||||
<h1 class="text-h4">Fast Track</h1>
|
||||
<div class="d-flex">
|
||||
<v-btn
|
||||
prepend-icon="mdi-view-dashboard"
|
||||
variant="text"
|
||||
class="text-capitalize"
|
||||
>
|
||||
Dashboard
|
||||
</v-btn>
|
||||
<v-btn
|
||||
prepend-icon="mdi-fast-forward"
|
||||
variant="text"
|
||||
class="text-capitalize"
|
||||
>
|
||||
Fast Track
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fast Track Table -->
|
||||
<v-card class="pa-4">
|
||||
<div class="d-flex justify-space-between align-center my-3">
|
||||
<div class="d-flex align-center">
|
||||
<span>Show</span>
|
||||
<v-select
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
:items="[10, 25, 50, 100]"
|
||||
class="mx-2"
|
||||
style="width: 90px"
|
||||
></v-select>
|
||||
<span>entries</span>
|
||||
</div>
|
||||
<v-text-field
|
||||
label="Search"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
style="max-width: 200px"
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
<v-table class="mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
v-for="header in fastTrackHeaders"
|
||||
:key="header.text"
|
||||
>
|
||||
{{ header.text }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in fastTrackData" :key="index">
|
||||
<td>{{ item.no }}</td>
|
||||
<td>{{ item.barcode }}</td>
|
||||
<td>{{ item.tanggal }}</td>
|
||||
<td>{{ item.noAntrian }}</td>
|
||||
<td>{{ item.rm }}</td>
|
||||
<td>{{ item.shift }}</td>
|
||||
<td>{{ item.klinik }}</td>
|
||||
<td>{{ item.pj }}</td>
|
||||
<td>{{ item.keterangan }}</td>
|
||||
<td>{{ item.pembayaran }}</td>
|
||||
<td>{{ item.status }}</td>
|
||||
<td>
|
||||
<v-btn color="blue">Fast Track</v-btn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<div class="d-flex justify-space-between align-center mt-3">
|
||||
<span>Showing 1 to 10 of 1,434 entries</span>
|
||||
<v-pagination
|
||||
v-model="page"
|
||||
:length="144"
|
||||
:total-visible="5"
|
||||
></v-pagination>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
// Reactive data
|
||||
const search = ref("");
|
||||
const itemsPerPage = ref(10);
|
||||
const page = ref(1);
|
||||
|
||||
// Table headers
|
||||
const fastTrackHeaders = [
|
||||
{ text: 'No' },
|
||||
{ text: 'Barcode' },
|
||||
{ text: 'Tanggal / Jam Daftar' },
|
||||
{ text: 'No Antrian' },
|
||||
{ text: 'RM' },
|
||||
{ text: 'Shift' },
|
||||
{ text: 'Klinik' },
|
||||
{ text: 'PJ' },
|
||||
{ text: 'Keterangan' },
|
||||
{ text: 'Pembayaran' },
|
||||
{ text: 'Status' },
|
||||
{ text: 'Aksi' },
|
||||
];
|
||||
|
||||
// Mock data
|
||||
const fastTrackData = [
|
||||
{ no: 1, barcode: '250813100928', tanggal: '13-08-2025 / 07:17', noAntrian: 'ON1045', rm: '', shift: 'Shift 1', klinik: 'ONKOLOGI', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Tunggu Daftar' },
|
||||
{ no: 2, barcode: '250813100930', tanggal: '13-08-2025 / 07:19', noAntrian: 'GI1018', rm: '', shift: 'Shift 1', klinik: 'GIGI DAN MULUT', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Tunggu Daftar' },
|
||||
{ no: 3, barcode: '250813100937', tanggal: '13-08-2025 / 07:19', noAntrian: 'MT1073', rm: '', shift: 'Shift 1', klinik: 'MATA', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Tunggu Daftar' },
|
||||
{ no: 4, barcode: '250813100936', tanggal: '13-08-2025 / 07:19', noAntrian: 'ON1047', rm: '', shift: 'Shift 1', klinik: 'ONKOLOGI', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Tunggu Daftar' },
|
||||
{ no: 5, barcode: '250813100935', tanggal: '13-08-2025 / 07:18', noAntrian: 'ON1046', rm: '', shift: 'Shift 1', klinik: 'ONKOLOGI', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Tunggu Daftar' },
|
||||
{ no: 6, barcode: '250813100934', tanggal: '13-08-2025 / 07:18', noAntrian: 'IP1101', rm: '', shift: 'Shift 1', klinik: 'IPD', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Tunggu Daftar' },
|
||||
{ no: 7, barcode: '250813100933', tanggal: '13-08-2025 / 07:18', noAntrian: 'UM1031', rm: '', shift: 'Shift 1', klinik: 'IPD', pj: '', keterangan: '', pembayaran: 'UMUM', status: 'Proses Barcode' },
|
||||
{ no: 8, barcode: '250813100932', tanggal: '13-08-2025 / 07:17', noAntrian: 'AN1122', rm: '', shift: 'Shift 1', klinik: 'ANAK', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Proses Barcode' },
|
||||
{ no: 9, barcode: '250813100931', tanggal: '13-08-2025 / 07:17', noAntrian: 'PR1033', rm: '', shift: 'Shift 1', klinik: 'PARU', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Anjungan' },
|
||||
{ no: 10, barcode: '250813100930', tanggal: '13-08-2025 / 07:17', noAntrian: 'TH1035', rm: '', shift: 'Shift 1', klinik: 'THT', pj: '', keterangan: '', pembayaran: 'JKN', status: 'Anjungan' },
|
||||
];
|
||||
</script>
|
||||
@@ -1,238 +1,192 @@
|
||||
<template>
|
||||
<v-app id="inspire">
|
||||
<!-- App Bar Header -->
|
||||
<v-app-bar app color="green darken-1" dark>
|
||||
<v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
|
||||
<v-toolbar-title class="ml-2">Antrian RSSA</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon>mdi-account-circle</v-icon>
|
||||
</v-btn>
|
||||
<span class="mr-2">Rajal Bayu Nogroho</span>
|
||||
</v-app-bar>
|
||||
|
||||
<!-- Navigation Drawer -->
|
||||
<v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
|
||||
<v-list density="compact" nav>
|
||||
<template v-for="item in items" :key="item.title">
|
||||
<v-menu
|
||||
v-if="item.children"
|
||||
open-on-hover
|
||||
location="end"
|
||||
:nudge-right="3"
|
||||
|
||||
<v-divider class="my-8"></v-divider>
|
||||
<v-main class="bg-grey-lighten-3">
|
||||
<v-container>
|
||||
<div class="d-flex align-center justify-space-between mb-4 mt-10">
|
||||
<h1 class="text-h4">Klinik Admin</h1>
|
||||
<v-tooltip text="Jumlah Maksimal Bangku Tersedia">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-chip
|
||||
v-bind="props"
|
||||
class="text-white"
|
||||
color="green-darken-1"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:value="item.title"
|
||||
:class="{ 'v-list-item--active': item.title === currentPage }"
|
||||
>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-title class="font-weight-bold">{{
|
||||
item.title
|
||||
}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item
|
||||
v-for="child in item.children"
|
||||
:key="child.title"
|
||||
:to="child.to"
|
||||
link
|
||||
>
|
||||
<v-list-item-title>{{ child.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-tooltip
|
||||
v-else
|
||||
:disabled="!rail"
|
||||
open-on-hover
|
||||
location="end"
|
||||
:text="item.title"
|
||||
color="blue"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:to="item.to"
|
||||
:value="item.title"
|
||||
:class="{ 'v-list-item--active': item.title === currentPage }"
|
||||
link
|
||||
></v-list-item>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-icon left>mdi-circle-small</v-icon>
|
||||
Max Quota Bangku 0
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<v-main class="bg-grey-lighten-3">
|
||||
<v-container>
|
||||
<div class="d-flex align-center justify-space-between mb-4">
|
||||
<h1 class="text-h4">Klinik Admin</h1>
|
||||
<v-tooltip text="Jumlah Maksimal Bangku Tersedia">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-chip v-bind="props" color="green" variant="elevated">
|
||||
<v-icon left>mdi-circle-small</v-icon>
|
||||
Max Quota Bangku 0
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<!-- Loket Admin Table -->
|
||||
<v-card class="mb-5 pa-4">
|
||||
<v-card-title class="d-flex justify-space-between align-center">
|
||||
Loket Admin
|
||||
<div>
|
||||
<v-tooltip text="Panggil 1 Antrian">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
color="green"
|
||||
class="mr-2 clickable-btn"
|
||||
@click="handleCallClick(1)"
|
||||
>1</v-btn
|
||||
>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-tooltip text="Panggil 5 Antrian">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
color="blue"
|
||||
class="mr-2 clickable-btn"
|
||||
@click="handleCallClick(5)"
|
||||
>5</v-btn
|
||||
>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-tooltip text="Panggil 10 Antrian">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
color="orange"
|
||||
class="mr-2 clickable-btn"
|
||||
@click="handleCallClick(10)"
|
||||
>10</v-btn
|
||||
>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-tooltip text="Panggil 20 Antrian">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
color="red"
|
||||
class="clickable-btn"
|
||||
@click="handleCallClick(20)"
|
||||
>20</v-btn
|
||||
>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-table class="mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="header in loketHeaders" :key="header.text">
|
||||
{{ header.text }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in loketData" :key="index">
|
||||
<td>{{ item.no }}</td>
|
||||
<td>{{ item.barcode }}</td>
|
||||
<td>{{ item.noRekamedik }}</td>
|
||||
<td>{{ item.noAntrian }}</td>
|
||||
<td>{{ item.shift }}</td>
|
||||
<td>{{ item.ket }}</td>
|
||||
<td>{{ item.fastTrack }}</td>
|
||||
<td>{{ item.pembayaran }}</td>
|
||||
<td><v-btn size="x-small" color="primary">Panggil</v-btn></td>
|
||||
<td>
|
||||
<v-btn size="x-small" color="red">Batalkan</v-btn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
<div class="d-flex justify-space-between align-center mt-3">
|
||||
<span>Showing {{ loketData.length > 0 ? 1 : 0 }} to {{ loketData.length }} of {{ loketData.length }} entries</span>
|
||||
<div>
|
||||
<v-btn size="small" variant="text" disabled>Previous</v-btn>
|
||||
<v-btn size="small" variant="text" disabled>Next</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
<!-- Loket Admin Table -->
|
||||
<v-card class="mb-5 pa-4">
|
||||
<v-card-title class="d-flex justify-space-between align-center">
|
||||
Loket Admin
|
||||
<!-- <div class="d-flex align-center">
|
||||
<span text-h1>Show</span>
|
||||
<v-select
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
:items="[10, 25, 50, 100]"
|
||||
class="mx-1"
|
||||
style="width: 90px"
|
||||
></v-select>
|
||||
<span>entries</span>
|
||||
</div> -->
|
||||
<!-- not aligned with the class div "need seperated div class" -->
|
||||
<div>
|
||||
<v-tooltip text="Panggil 1 Antrian">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props" color="green" class="mr-2">1</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-tooltip text="Panggil 5 Antrian">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props" color="blue" class="mr-2">5</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-tooltip text="Panggil 10 Antrian">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props" color="orange" class="mr-2">10</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-tooltip text="Panggil 20 Antrian">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props" color="red">20</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-table class="mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="header in loketHeaders" :key="header.text">
|
||||
{{ header.text }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td :colspan="loketHeaders.length" class="text-center">
|
||||
No data available in table
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
<div class="d-flex justify-space-between align-center mt-3">
|
||||
<span>Showing 0 to 0 of 0 entries</span>
|
||||
<div>
|
||||
<v-btn size="small" variant="text" disabled>Previous</v-btn>
|
||||
<v-btn size="small" variant="text" disabled>Next</v-btn>
|
||||
</div>
|
||||
<!-- Data Pengunjung Table -->
|
||||
<v-card class="pa-4">
|
||||
<v-card-title>Data Pengunjung: Loket</v-card-title>
|
||||
<v-table class="mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="header in pengunjungHeaders" :key="header.text">
|
||||
{{ header.text }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in pengunjungData" :key="index">
|
||||
<td>{{ item.no }}</td>
|
||||
<td>{{ item.barcode }}</td>
|
||||
<td>{{ item.noRekamedik }}</td>
|
||||
<td>{{ item.noAntrian }}</td>
|
||||
<td>{{ item.noAntrianKlinik }}</td>
|
||||
<td>{{ item.shift }}</td>
|
||||
<td>{{ item.pembayaran }}</td>
|
||||
<td>{{ item.status }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
<div class="d-flex justify-space-between align-center mt-3">
|
||||
<span>Showing {{ pengunjungData.length > 0 ? 1 : 0 }} to {{ pengunjungData.length }} of {{ pengunjungData.length }} entries</span>
|
||||
<div>
|
||||
<v-btn size="small" variant="text" disabled>Previous</v-btn>
|
||||
<v-btn size="small" variant="text" disabled>Next</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
<!-- Data Pengunjung Table -->
|
||||
<v-card class="pa-4">
|
||||
<v-card-title>Data Pengunjung: Loket</v-card-title>
|
||||
<v-table class="mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="header in pengunjungHeaders" :key="header.text">
|
||||
{{ header.text }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td :colspan="pengunjungHeaders.length" class="text-center">
|
||||
No data available in table
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
<div class="d-flex justify-space-between align-center mt-3">
|
||||
<span>Showing 0 to 0 of 0 entries</span>
|
||||
<div>
|
||||
<v-btn size="small" variant="text" disabled>Previous</v-btn>
|
||||
<v-btn size="small" variant="text" disabled>Next</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
// Reactive data
|
||||
const drawer = ref(true); // Nilai awal true agar sidebar terlihat
|
||||
const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
|
||||
const search = ref("");
|
||||
const lateSearch = ref("");
|
||||
const clinicSearch = ref("");
|
||||
const itemsPerPage = ref(10);
|
||||
const lateItemsPerPage = ref(10);
|
||||
const clinicItemsPerPage = ref(10);
|
||||
const currentPage = ref("Klinik Admin");
|
||||
|
||||
// Navigation items
|
||||
const items = ref([
|
||||
{ title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
|
||||
import { ref } from "vue";
|
||||
|
||||
// Sample data for the tables
|
||||
const loketData = ref([
|
||||
{
|
||||
title: "Setting",
|
||||
icon: "mdi-cog",
|
||||
children: [
|
||||
{ title: "Hak Akses", to: "/setting/hak-akses" },
|
||||
{ title: "User Login", to: "/setting/user-login" },
|
||||
{ title: "Master Loket", to: "/setting/master-loket" },
|
||||
{ title: "Master Klinik", to: "/setting/master-klinik" },
|
||||
{ title: "Master Klinik Ruang", to: "/setting/master-klinik-ruang" },
|
||||
{ title: "Screen", to: "/setting/screen" },
|
||||
],
|
||||
no: 1,
|
||||
barcode: "1234567890",
|
||||
noRekamedik: "RM001",
|
||||
noAntrian: "A001",
|
||||
shift: "Pagi",
|
||||
ket: "Normal",
|
||||
fastTrack: "Tidak",
|
||||
pembayaran: "BPJS"
|
||||
},
|
||||
{ title: "Loket Admin", icon: "mdi-account-supervisor", to : "/LoketAdmin" },
|
||||
{ title: "Ranap Admin", icon: "mdi-bed" },
|
||||
{ title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
|
||||
{ title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
|
||||
{
|
||||
no: 2,
|
||||
barcode: "0987654321",
|
||||
noRekamedik: "RM002",
|
||||
noAntrian: "A002",
|
||||
shift: "Pagi",
|
||||
ket: "Normal",
|
||||
fastTrack: "Ya",
|
||||
pembayaran: "Umum"
|
||||
}
|
||||
]);
|
||||
|
||||
{
|
||||
title: "Anjungan",
|
||||
icon: "mdi-account-box-multiple",
|
||||
children: [
|
||||
{title: "Anjungan", to: "/Anjungan/Anjungan"},
|
||||
{title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan"}
|
||||
],
|
||||
const pengunjungData = ref([
|
||||
{
|
||||
no: 1,
|
||||
barcode: "1234567890",
|
||||
noRekamedik: "RM001",
|
||||
noAntrian: "A001",
|
||||
noAntrianKlinik: "K001",
|
||||
shift: "Pagi",
|
||||
pembayaran: "BPJS",
|
||||
status: "Menunggu"
|
||||
},
|
||||
{ title: "Fast Track", icon: "mdi-clock-fast" },
|
||||
{ title: "Data Pasien", icon: "mdi-account-multiple" },
|
||||
{ title: "Screen", icon: "mdi-monitor" },
|
||||
{ title: "List Pasien", icon: "mdi-format-list-bulleted" },
|
||||
{
|
||||
no: 2,
|
||||
barcode: "0987654321",
|
||||
noRekamedik: "RM002",
|
||||
noAntrian: "A002",
|
||||
noAntrianKlinik: "K002",
|
||||
shift: "Pagi",
|
||||
pembayaran: "Umum",
|
||||
status: "Selesai"
|
||||
}
|
||||
]);
|
||||
|
||||
const loketHeaders = [
|
||||
@@ -258,14 +212,21 @@ const pengunjungHeaders = [
|
||||
{ text: 'Pembayaran' },
|
||||
{ text: 'Status' },
|
||||
]
|
||||
|
||||
// Methods to handle clicks
|
||||
const handleCallClick = (value) => {
|
||||
console.log(`Panggil ${value} antrian diklik!`);
|
||||
// Tambahkan logika untuk memanggil antrian di sini
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#inspire .v-navigation-drawer__content {
|
||||
background-color: #f5f5f5;
|
||||
.clickable-btn {
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
#inspire .v-app-bar {
|
||||
background-color: #fff;
|
||||
.clickable-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,196 +1,82 @@
|
||||
<template>
|
||||
<v-app id="inspire">
|
||||
<!-- App Bar Header -->
|
||||
<v-app-bar app color="green darken-1" dark>
|
||||
<v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
|
||||
<v-toolbar-title class="ml-2">Antrian RSSA</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon>mdi-account-circle</v-icon>
|
||||
</v-btn>
|
||||
<span class="mr-2">Rajal Bayu Nogroho</span>
|
||||
</v-app-bar>
|
||||
<v-divider class="my-8"></v-divider>
|
||||
<v-main class="bg-grey-lighten-3">
|
||||
<v-container>
|
||||
<!-- Klinik Ruang Admin Content -->
|
||||
<h1 class="text-h4 mb-4 mt-10">Klinik Ruang Admin</h1>
|
||||
<v-card class="pa-4 mb-4">
|
||||
<v-card-title>GENERATE TIKET</v-card-title>
|
||||
<div class="d-flex align-center">
|
||||
<v-text-field
|
||||
label="Masukkan Barcode"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="mr-4"
|
||||
></v-text-field>
|
||||
<v-col cols="12 " md="6">
|
||||
<v-chip color="#B71C1C" class="text-caption">
|
||||
Tekan Enter: (Apabila barcode depan nomor ada huruf lain, ex: J008730180085 "hiraukan huruf 'J' nya")
|
||||
</v-chip>
|
||||
</v-col>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
<!-- Navigation Drawer -->
|
||||
<v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
|
||||
<v-list density="compact" nav>
|
||||
<template v-for="item in items" :key="item.title">
|
||||
<v-menu
|
||||
v-if="item.children"
|
||||
open-on-hover
|
||||
location="end"
|
||||
:nudge-right="3"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:value="item.title"
|
||||
:class="{ 'v-list-item--active': item.title === currentPage }"
|
||||
>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-title class="font-weight-bold">{{
|
||||
item.title
|
||||
}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item
|
||||
v-for="child in item.children"
|
||||
:key="child.title"
|
||||
:to="child.to"
|
||||
link
|
||||
>
|
||||
<v-list-item-title>{{ child.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-list-item
|
||||
v-else
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:to="item.to"
|
||||
:value="item.title"
|
||||
:class="{ 'v-list-item--active': item.title === currentPage }"
|
||||
link
|
||||
></v-list-item>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<!-- Main Content -->
|
||||
<v-main class="bg-grey-lighten-3">
|
||||
<v-container>
|
||||
<!-- Klinik Ruang Admin Content -->
|
||||
<h1 class="text-h4 mb-4">Klinik Ruang Admin</h1>
|
||||
<v-card class="pa-4 mb-4">
|
||||
<v-card-title>GENERATE TIKET</v-card-title>
|
||||
<v-card class="pa-4">
|
||||
<v-card-title>Pasien Klinik Ruang Admin</v-card-title>
|
||||
<div class="d-flex justify-space-between align-center my-3">
|
||||
<div class="d-flex align-center">
|
||||
<v-text-field
|
||||
label="Masukkan Barcode"
|
||||
variant="outlined"
|
||||
<span>Show</span>
|
||||
<v-select
|
||||
density="compact"
|
||||
class="mr-4"
|
||||
></v-text-field>
|
||||
<v-col cols="12 " md="6">
|
||||
<v-chip color="#B71C1C" class="text-caption">
|
||||
Tekan Enter: (Apabila barcode depan nomor ada huruf lain, ex:
|
||||
J008730180085 "hiraukan huruf 'J' nya")
|
||||
</v-chip>
|
||||
</v-col>
|
||||
</div>
|
||||
|
||||
</v-card>
|
||||
|
||||
<v-card class="pa-4">
|
||||
<v-card-title>Pasien Klinik Ruang Admin</v-card-title>
|
||||
<div class="d-flex justify-space-between align-center my-3">
|
||||
<div class="d-flex align-center">
|
||||
<span>Show</span>
|
||||
<v-select
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
:items="[10, 25, 50, 100]"
|
||||
class="mx-2"
|
||||
style="width: 80px"
|
||||
></v-select>
|
||||
<span>entries</span>
|
||||
</div>
|
||||
<v-text-field
|
||||
label="Search"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
style="max-width: 200px"
|
||||
></v-text-field>
|
||||
:items="[10, 25, 50, 100]"
|
||||
class="mx-2"
|
||||
style="width: 80px"
|
||||
></v-select>
|
||||
<span>entries</span>
|
||||
</div>
|
||||
<v-text-field
|
||||
label="Search"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
style="max-width: 200px"
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
<v-table class="mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
v-for="header in klinikRuangAdminHeaders"
|
||||
:key="header.text"
|
||||
>
|
||||
{{ header.text }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td :colspan="klinikRuangAdminHeaders.length" class="text-center">
|
||||
No data available in table
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
<v-table class="mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
v-for="header in klinikRuangAdminHeaders"
|
||||
:key="header.text"
|
||||
>
|
||||
{{ header.text }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td :colspan="klinikRuangAdminHeaders.length" class="text-center">
|
||||
No data available in table
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<div class="d-flex justify-space-between align-center mt-3">
|
||||
<span>Showing 0 to 0 of 0 entries</span>
|
||||
<div>
|
||||
<v-btn size="small" variant="text" disabled>Previous</v-btn>
|
||||
<v-btn size="small" variant="text" disabled>Next</v-btn>
|
||||
</div>
|
||||
<div class="d-flex justify-space-between align-center mt-3">
|
||||
<span>Showing 0 to 0 of 0 entries</span>
|
||||
<div>
|
||||
<v-btn size="small" variant="text" disabled>Previous</v-btn>
|
||||
<v-btn size="small" variant="text" disabled>Next</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
// Reactive data
|
||||
const drawer = ref(true); // Nilai awal true agar sidebar terlihat
|
||||
const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
|
||||
const search = ref("");
|
||||
const lateSearch = ref("");
|
||||
const clinicSearch = ref("");
|
||||
const itemsPerPage = ref(10);
|
||||
const lateItemsPerPage = ref(10);
|
||||
const clinicItemsPerPage = ref(10);
|
||||
const currentPage = ref("Klinik Ruang Admin");
|
||||
|
||||
// Navigation items
|
||||
const items = ref([
|
||||
{ title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
|
||||
|
||||
{
|
||||
title: "Setting",
|
||||
icon: "mdi-cog",
|
||||
children: [
|
||||
{ title: "Hak Akses", to: "/setting/hak-akses" },
|
||||
{ title: "User Login", to: "/setting/user-login" },
|
||||
{ title: "Master Loket", to: "/setting/master-loket" },
|
||||
{ title: "Master Klinik", to: "/setting/master-klinik" },
|
||||
{ title: "Master Klinik Ruang", to: "/setting/master-klinik-ruang" },
|
||||
{ title: "Screen", to: "/setting/screen" },
|
||||
],
|
||||
},
|
||||
{ title: "Loket Admin", icon: "mdi-account-supervisor", to : "/LoketAdmin" },
|
||||
{ title: "Ranap Admin", icon: "mdi-bed" },
|
||||
{ title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
|
||||
{ title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
|
||||
|
||||
{
|
||||
title: "Anjungan",
|
||||
icon: "mdi-account-box-multiple",
|
||||
children: [
|
||||
{title: "Anjungan", to: "/Anjungan/Anjungan"},
|
||||
{title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan"}
|
||||
],
|
||||
},
|
||||
{ title: "Fast Track", icon: "mdi-clock-fast" },
|
||||
{ title: "Data Pasien", icon: "mdi-account-multiple" },
|
||||
{ title: "Screen", icon: "mdi-monitor" },
|
||||
{ title: "List Pasien", icon: "mdi-format-list-bulleted" },
|
||||
]);
|
||||
|
||||
import { ref } from "vue";
|
||||
|
||||
const klinikRuangAdminHeaders = [
|
||||
{ text: 'No' },
|
||||
@@ -204,15 +90,8 @@ const klinikRuangAdminHeaders = [
|
||||
{ text: 'Action' },
|
||||
{ text: 'Status' },
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#inspire .v-navigation-drawer__content {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
#inspire .v-app-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
/* Scoped styles can be added here if needed for this specific component */
|
||||
</style>
|
||||
|
||||
@@ -1,321 +1,215 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-layout>
|
||||
<!-- App Bar Header -->
|
||||
<v-app-bar app color="green darken-1" dark>
|
||||
<v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
|
||||
<v-toolbar-title class="ml-2">Antrean RSSA</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon>mdi-account-circle</v-icon>
|
||||
</v-btn>
|
||||
<span class="mr-2">Rajal Bayu Nogroho</span>
|
||||
</v-app-bar>
|
||||
<!-- Main Content -->
|
||||
<v-main>
|
||||
<v-container fluid class="pa-4 main-content-padding">
|
||||
<!-- Header Stats -->
|
||||
<div class="d-flex justify-space-between align-center mb-4">
|
||||
<div class="d-flex align-center">
|
||||
<span class="text-h6 mr-4">Total 0</span>
|
||||
<span class="text-body-2">Max 150 Pasien</span>
|
||||
</div>
|
||||
<div class="d-flex align-center">
|
||||
<span class="mr-4">Dashboard</span>
|
||||
<span class="mr-4">Loket 24 | Senin, 11 Agustus 2025</span>
|
||||
<span class="mr-4">11 Agustus 2025 - Pelayanan</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Drawer -->
|
||||
<v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
|
||||
<v-list density="compact" nav>
|
||||
<template v-for="item in items" :key="item.title">
|
||||
<v-menu
|
||||
v-if="item.children"
|
||||
open-on-hover
|
||||
location="end"
|
||||
:nudge-right="8"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:value="item.title"
|
||||
:class="{ 'v-list-item--active': item.title === currentPage }"
|
||||
>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-title class="font-weight-bold">{{
|
||||
item.title
|
||||
}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item
|
||||
v-for="child in item.children"
|
||||
:key="child.title"
|
||||
:to="child.to"
|
||||
link
|
||||
>
|
||||
<v-list-item-title>{{ child.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-list-item
|
||||
v-else
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:to="item.to"
|
||||
:value="item.title"
|
||||
:class="{ 'v-list-item--active': item.title === currentPage }"
|
||||
link
|
||||
></v-list-item>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<!-- Main Content -->
|
||||
<v-main>
|
||||
<v-container fluid class="pa-4">
|
||||
<!-- Header Stats -->
|
||||
<div class="d-flex justify-space-between align-center mb-4">
|
||||
<div class="d-flex align-center">
|
||||
<span class="text-h6 mr-4">Total 0</span>
|
||||
<span class="text-body-2">Max 150 Pasien</span>
|
||||
</div>
|
||||
<div class="d-flex align-center">
|
||||
<span class="mr-4">Dashboard</span>
|
||||
<span class="mr-4">Loket 24 | Senin, 11 Agustus 2025</span>
|
||||
<span class="mr-4">11 Agustus 2025 - Pelayanan</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Cards -->
|
||||
<v-card class="pa-5 mb-5" color="white" flat></v-card>
|
||||
<v-row align="center">
|
||||
<v-col cols="1
|
||||
2" md="1">
|
||||
<v-card color="green" dark class="text-center">
|
||||
<v-card-text>
|
||||
<div class="text-h4">1</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="1">
|
||||
<v-card color="blue" dark class="text-center">
|
||||
<v-card-text>
|
||||
<div class="text-h4">1</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="1">
|
||||
<v-card color="orange" dark class="text-center">
|
||||
<v-card-text>
|
||||
<div class="text-h4">4</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="1">
|
||||
<v-card color="red" dark class="text-center">
|
||||
<v-card-text>
|
||||
<div class="text-h4">30</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<!-- Next Patient Card -->
|
||||
<v-col cols="12" md="4">
|
||||
<v-card color="green" dark class="mb-4">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h4 mb-2">NEXT</div>
|
||||
<div class="text-h6 mb-1">Pasien : UM1001</div>
|
||||
<div class="text-body-2">
|
||||
Klik untuk memanggil pasien selanjutnya
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Main Data Table -->
|
||||
<v-card class="mb-4">
|
||||
<v-card-title class="d-flex justify-space-between align-center">
|
||||
<span>Data Pasien</span>
|
||||
<div class="d-flex align-center">
|
||||
<span class="mr-2">Show</span>
|
||||
<v-select
|
||||
v-model="itemsPerPage"
|
||||
:items="[10, 25, 50, 100]"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="max-width: 80px"
|
||||
class="mr-4"
|
||||
></v-select>
|
||||
<span class="mr-2">entries</span>
|
||||
<span class="mr-4">Search:</span>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="max-width: 200px"
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-data-table
|
||||
:headers="mainHeaders"
|
||||
:items="mainPatients"
|
||||
:search="search"
|
||||
:items-per-page="itemsPerPage"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:item.aksi="{ item }">
|
||||
<div class="d-flex ga-1">
|
||||
<v-btn size="small" color="success" variant="flat"
|
||||
>Panggil</v-btn
|
||||
>
|
||||
<v-btn size="small" color="info" variant="flat">Cancel</v-btn>
|
||||
<v-btn size="small" color="primary" variant="flat"
|
||||
>Selesai</v-btn
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:item.jamPanggil="{ item }">
|
||||
<span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
|
||||
<!-- Total Quota Used -->
|
||||
<v-card color="cyan" dark class="mb-4">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h6">Total Quota Terpakai 5</div>
|
||||
<!-- Status Cards -->
|
||||
<v-card class="pa-5 mb-5" color="white" flat></v-card>
|
||||
<v-row align="center">
|
||||
<v-col cols="12" md="1">
|
||||
<v-card color="green" dark class="text-center clickable-card" @click="handleStatusCardClick('1')">
|
||||
<v-card-text>
|
||||
<div class="text-h4">1</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Late Patients Table -->
|
||||
<v-card class="mb-4">
|
||||
<v-card-title class="d-flex justify-space-between align-center">
|
||||
<span>Info Pasien Lapor Terlambat</span>
|
||||
<div class="d-flex align-center">
|
||||
<span class="mr-2 text-caption text-orange"
|
||||
>KETERANGAN: PASIEN MASUK PADA TANGGAL</span
|
||||
>
|
||||
<span class="mr-2">Show</span>
|
||||
<v-select
|
||||
v-model="lateItemsPerPage"
|
||||
:items="[10, 25, 50, 100]"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="max-width: 80px"
|
||||
class="mr-4"
|
||||
></v-select>
|
||||
<span class="mr-2">entries</span>
|
||||
<span class="mr-4">Search:</span>
|
||||
<v-text-field
|
||||
v-model="lateSearch"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="max-width: 200px"
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-data-table
|
||||
:headers="lateHeaders"
|
||||
:items="latePatients"
|
||||
:search="lateSearch"
|
||||
:items-per-page="lateItemsPerPage"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:no-data>
|
||||
<div class="text-center pa-4">No data available in table</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-col>
|
||||
<v-col cols="12" md="1">
|
||||
<v-card color="blue" dark class="text-center clickable-card" @click="handleStatusCardClick('5')">
|
||||
<v-card-text>
|
||||
<div class="text-h4">5</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Clinic Entry Patients Table -->
|
||||
<v-card>
|
||||
<v-card-title class="d-flex justify-space-between align-center">
|
||||
<span>Info Pasien Masuk Klinik</span>
|
||||
<div class="d-flex align-center">
|
||||
<span class="mr-2">Show</span>
|
||||
<v-select
|
||||
v-model="clinicItemsPerPage"
|
||||
:items="[10, 25, 50, 100]"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="max-width: 80px"
|
||||
class="mr-4"
|
||||
></v-select>
|
||||
<span class="mr-2">entries</span>
|
||||
<span class="mr-4">Search:</span>
|
||||
<v-text-field
|
||||
v-model="clinicSearch"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="max-width: 200px"
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-data-table
|
||||
:headers="clinicHeaders"
|
||||
:items="clinicPatients"
|
||||
:search="clinicSearch"
|
||||
:items-per-page="clinicItemsPerPage"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:no-data>
|
||||
<div class="text-center pa-4">No data available in table</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-col>
|
||||
<v-col cols="12" md="1">
|
||||
<v-card color="orange" dark class="text-center clickable-card" @click="handleStatusCardClick('10')">
|
||||
<v-card-text>
|
||||
<div class="text-h4">10</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-layout>
|
||||
</v-app>
|
||||
</v-col>
|
||||
<v-col cols="12" md="1">
|
||||
<v-card color="red" dark class="text-center clickable-card" @click="handleStatusCardClick('20')">
|
||||
<v-card-text>
|
||||
<div class="text-h4">20</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<!-- Next Patient Card -->
|
||||
<v-col cols="12" md="4">
|
||||
<v-card color="green" dark class="mb-4 clickable-card" @click="handleNextPatientClick">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h4 mb-2">NEXT</div>
|
||||
<div class="text-h6 mb-1">Pasien : UM1001</div>
|
||||
<div class="text-body-2">
|
||||
Klik untuk memanggil pasien selanjutnya
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Main Data Table -->
|
||||
<v-card class="mb-4">
|
||||
<v-card-title class="d-flex justify-space-between align-center">
|
||||
<span>Data Pasien</span>
|
||||
<div class="d-flex align-center">
|
||||
<span class="mr-2">Show</span>
|
||||
<v-select
|
||||
v-model="itemsPerPage"
|
||||
:items="[10, 25, 50, 100]"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="max-width: 80px"
|
||||
class="mr-4"
|
||||
></v-select>
|
||||
<span class="mr-2">entries</span>
|
||||
<span class="mr-4">Search:</span>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="max-width: 200px"
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-data-table
|
||||
:headers="mainHeaders"
|
||||
:items="mainPatients"
|
||||
:search="search"
|
||||
:items-per-page="itemsPerPage"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:item.aksi="{ item }">
|
||||
<div class="d-flex ga-1">
|
||||
<v-btn size="small" color="success" variant="flat"
|
||||
>Panggil</v-btn
|
||||
>
|
||||
<v-btn size="small" color="info" variant="flat">Cancel</v-btn>
|
||||
<v-btn size="small" color="primary" variant="flat"
|
||||
>Selesai</v-btn
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:item.jamPanggil="{ item }">
|
||||
<span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
|
||||
<!-- Total Quota Used -->
|
||||
<v-card color="cyan" dark class="mb-4">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h6">Total Quota Terpakai 5</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Late Patients Table -->
|
||||
<v-card class="mb-4">
|
||||
<v-card-title class="d-flex justify-space-between align-center">
|
||||
<span>Info Pasien Lapor Terlambat</span>
|
||||
<div class="d-flex align-center">
|
||||
<span class="mr-2 text-caption text-orange"
|
||||
>KETERANGAN: PASIEN MASUK PADA TANGGAL</span
|
||||
>
|
||||
<span class="mr-2">Show</span>
|
||||
<v-select
|
||||
v-model="lateItemsPerPage"
|
||||
:items="[10, 25, 50, 100]"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="max-width: 80px"
|
||||
class="mr-4"
|
||||
></v-select>
|
||||
<span class="mr-2">entries</span>
|
||||
<span class="mr-4">Search:</span>
|
||||
<v-text-field
|
||||
v-model="lateSearch"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="max-width: 200px"
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-data-table
|
||||
:headers="lateHeaders"
|
||||
:items="latePatients"
|
||||
:search="lateSearch"
|
||||
:items-per-page="lateItemsPerPage"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:no-data>
|
||||
<div class="text-center pa-4">No data available in table</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
|
||||
<!-- Clinic Entry Patients Table -->
|
||||
<v-card>
|
||||
<v-card-title class="d-flex justify-space-between align-center">
|
||||
<span>Info Pasien Masuk Klinik</span>
|
||||
<div class="d-flex align-center">
|
||||
<span class="mr-2">Show</span>
|
||||
<v-select
|
||||
v-model="clinicItemsPerPage"
|
||||
:items="[10, 25, 50, 100]"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="max-width: 80px"
|
||||
class="mr-4"
|
||||
></v-select>
|
||||
<span class="mr-2">entries</span>
|
||||
<span class="mr-4">Search:</span>
|
||||
<v-text-field
|
||||
v-model="clinicSearch"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="max-width: 200px"
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-data-table
|
||||
:headers="clinicHeaders"
|
||||
:items="clinicPatients"
|
||||
:search="clinicSearch"
|
||||
:items-per-page="clinicItemsPerPage"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:no-data>
|
||||
<div class="text-center pa-4">No data available in table</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { ref } from "vue";
|
||||
|
||||
// Reactive data
|
||||
const drawer = ref(true); // Nilai awal true agar sidebar terlihat
|
||||
const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
|
||||
const search = ref("");
|
||||
const lateSearch = ref("");
|
||||
const clinicSearch = ref("");
|
||||
const itemsPerPage = ref(10);
|
||||
const lateItemsPerPage = ref(10);
|
||||
const clinicItemsPerPage = ref(10);
|
||||
const currentPage = ref("Loket Admin");
|
||||
|
||||
// Navigation items
|
||||
const items = ref([
|
||||
{ title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
|
||||
|
||||
{
|
||||
title: "Setting",
|
||||
icon: "mdi-cog",
|
||||
children: [
|
||||
{ title: "Hak Akses", to: "/setting/hak-akses" },
|
||||
{ title: "User Login", to: "/setting/user-login" },
|
||||
{ title: "Master Loket", to: "/setting/master-loket" },
|
||||
{ title: "Master Klinik", to: "/setting/master-klinik" },
|
||||
{ title: "Master Klinik Ruang", to: "/setting/master-klinik-ruang" },
|
||||
{ title: "Screen", to: "/setting/screen" },
|
||||
],
|
||||
},
|
||||
{ title: "Loket Admin", icon: "mdi-account-supervisor", to : "/LoketAdmin" },
|
||||
{ title: "Ranap Admin", icon: "mdi-bed" },
|
||||
{ title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
|
||||
{ title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
|
||||
|
||||
{
|
||||
title: "Anjungan",
|
||||
icon: "mdi-account-box-multiple",
|
||||
children: [
|
||||
{title: "Anjungan", to: "/Anjungan/Anjungan"},
|
||||
{title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan"}
|
||||
],
|
||||
},
|
||||
{ title: "Fast Track", icon: "mdi-clock-fast" },
|
||||
{ title: "Data Pasien", icon: "mdi-account-multiple" },
|
||||
{ title: "Screen", icon: "mdi-monitor" },
|
||||
{ title: "List Pasien", icon: "mdi-format-list-bulleted" },
|
||||
]);
|
||||
|
||||
// Table headers
|
||||
const mainHeaders = ref([
|
||||
@@ -427,6 +321,16 @@ const getRowClass = (item) => {
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
const handleStatusCardClick = (value) => {
|
||||
console.log(`Status card with value ${value} was clicked!`);
|
||||
// Tambahkan logika Anda di sini
|
||||
};
|
||||
|
||||
const handleNextPatientClick = () => {
|
||||
console.log("Next Patient card was clicked!");
|
||||
// Tambahkan logika untuk memanggil pasien selanjutnya di sini
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -453,4 +357,17 @@ const getRowClass = (item) => {
|
||||
:deep(.v-data-table tbody tr:nth-child(1)) {
|
||||
background-color: #fff3cd !important;
|
||||
}
|
||||
|
||||
.main-content-padding {
|
||||
padding-left: 64px !important;
|
||||
}
|
||||
|
||||
.clickable-card {
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.clickable-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
</style>
|
||||
|
||||
402
pages/index.vue
402
pages/index.vue
@@ -1,244 +1,188 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-layout>
|
||||
<!-- App Bar Header -->
|
||||
<v-app-bar app color="green darken-1" dark>
|
||||
<v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
|
||||
<v-toolbar-title class="ml-2">Antrian RSSA</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon>mdi-account-circle</v-icon>
|
||||
</v-btn>
|
||||
<span class="mr-2">Rajal Bayu Nogroho</span>
|
||||
</v-app-bar>
|
||||
<v-main class="bg-grey-lighten-3">
|
||||
<!-- Konten utama dibungkus dalam div yang menyesuaikan padding kiri -->
|
||||
<div :style="contentStyle">
|
||||
<v-container fluid>
|
||||
<p>Admin Anjungan</p>
|
||||
<v-card class="pa-5 mb-5" color="white" flat>
|
||||
<v-row align="center">
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
label="Barcode"
|
||||
placeholder="Masukkan Barcode"
|
||||
outlined
|
||||
dense
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-chip color="#B71C1C" class="text-caption">
|
||||
Tekan Enter. (Barcode depan nomor selalu ada huruf lain, Ex:
|
||||
J20073010005 "Hiraukan huruf 'J' nya")
|
||||
</v-chip>
|
||||
</v-col>
|
||||
<v-col cols="12" md="2">
|
||||
<v-btn block color="info">Pendaftaran Online</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
<!-- Navigation Drawer -->
|
||||
<v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
|
||||
<v-list density="compact" nav>
|
||||
<template v-for="item in items" :key="item.title">
|
||||
<v-menu
|
||||
v-if="item.children"
|
||||
open-on-hover
|
||||
location="end"
|
||||
:nudge-right="3"
|
||||
<v-divider class="my-5"></v-divider>
|
||||
|
||||
<v-card class="mb-5">
|
||||
<v-toolbar flat color="transparent" dense>
|
||||
<v-toolbar-title class="text-subtitle-1 font-weight-bold red--text">
|
||||
DATA PENGUNJUNG TERLAMBAT
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="searchLate"
|
||||
append-icon="mdi-magnify"
|
||||
label="Search"
|
||||
single-line
|
||||
hide-details
|
||||
dense
|
||||
class="mr-2"
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
<v-select
|
||||
:items="[10, 25, 50, 100]"
|
||||
label="Show"
|
||||
dense
|
||||
single-line
|
||||
hide-details
|
||||
class="shrink"
|
||||
variant="outlined"
|
||||
></v-select>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:headers="lateHeaders"
|
||||
:items="lateVisitors"
|
||||
:search="searchLate"
|
||||
no-data-text="No data available in table"
|
||||
hide-default-footer
|
||||
class="elevation-1"
|
||||
></v-data-table>
|
||||
<div class="d-flex justify-end pt-2">
|
||||
<v-pagination
|
||||
v-model="page"
|
||||
:length="10"
|
||||
:total-visible="5"
|
||||
></v-pagination>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-divider class="my-5"></v-divider>
|
||||
|
||||
<v-card>
|
||||
<v-toolbar flat color="transparent" dense>
|
||||
<v-toolbar-title class="text-subtitle-1 font-weight-bold red--text">
|
||||
DATA PENGUNJUNG
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="Search"
|
||||
single-line
|
||||
hide-details
|
||||
dense
|
||||
class="mr-2"
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
<v-select
|
||||
:items="[10, 25, 50, 100]"
|
||||
label="Show"
|
||||
dense
|
||||
single-line
|
||||
hide-details
|
||||
class="shrink"
|
||||
variant="outlined"
|
||||
></v-select>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="visitors"
|
||||
:search="search"
|
||||
no-data-text="No data available in table"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:value="item.title"
|
||||
:class="{ 'v-list-item--active': item.title === currentPage }"
|
||||
>
|
||||
</v-list-item>
|
||||
<template v-slot:item.aksi="{ item }">
|
||||
<div class="d-flex flex-column">
|
||||
<v-btn small color="success" class="my-1">Tiket</v-btn>
|
||||
<v-btn small color="primary" class="my-1">Tiket Pengantar</v-btn>
|
||||
<v-btn small color="warning" class="my-1">ByPass</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-title class="font-weight-bold">{{
|
||||
item.title
|
||||
}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item
|
||||
v-for="child in item.children"
|
||||
:key="child.title"
|
||||
:to="child.to"
|
||||
link
|
||||
>
|
||||
<v-list-item-title>{{ child.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-list-item
|
||||
v-else
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:to="item.to"
|
||||
:value="item.title"
|
||||
:class="{ 'v-list-item--active': item.title === currentPage }"
|
||||
link
|
||||
></v-list-item>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-main>
|
||||
<v-container fluid>
|
||||
<p>Admin Anjungan</p>
|
||||
<v-card class="pa-5 mb-5" color="white" flat>
|
||||
<v-row align="center">
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
label="Barcode"
|
||||
placeholder="Masukkan Barcode"
|
||||
outlined
|
||||
dense
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-chip color="#B71C1C" class="text-caption">
|
||||
Tekan Enter. (Barcode depan nomor selalu ada huruf lain, Ex:
|
||||
J20073010005 "Hiraukan huruf 'J' nya")
|
||||
</v-chip>
|
||||
</v-col>
|
||||
<v-col cols="12" md="2">
|
||||
<v-btn block color="info">Pendaftaran Online</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
<v-divider class="my-5"></v-divider>
|
||||
|
||||
<v-card class="mb-5">
|
||||
<v-toolbar flat color="transparent" dense>
|
||||
<v-toolbar-title
|
||||
class="text-subtitle-1 font-weight-bold red--text"
|
||||
>DATA PENGUNJUNG TERLAMBAT</v-toolbar-title
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="searchLate"
|
||||
append-icon="mdi-magnify"
|
||||
label="Search"
|
||||
single-line
|
||||
hide-details
|
||||
dense
|
||||
class="mr-2"
|
||||
></v-text-field>
|
||||
<v-select
|
||||
:items="[10, 25, 50, 100]"
|
||||
label="Show"
|
||||
dense
|
||||
single-line
|
||||
hide-details
|
||||
class="shrink"
|
||||
></v-select>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:headers="lateHeaders"
|
||||
:items="lateVisitors"
|
||||
:search="searchLate"
|
||||
no-data-text="No data available in table"
|
||||
hide-default-footer
|
||||
class="elevation-1"
|
||||
></v-data-table>
|
||||
<div class="d-flex justify-end pt-2">
|
||||
<v-pagination
|
||||
v-model="page"
|
||||
:length="10"
|
||||
:total-visible="5"
|
||||
></v-pagination>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-divider class="my-5"></v-divider>
|
||||
|
||||
<v-card>
|
||||
<v-toolbar flat color="transparent" dense>
|
||||
<v-toolbar-title
|
||||
class="text-subtitle-1 font-weight-bold red--text"
|
||||
>DATA PENGUNJUNG</v-toolbar-title
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="Search"
|
||||
single-line
|
||||
hide-details
|
||||
dense
|
||||
class="mr-2"
|
||||
></v-text-field>
|
||||
<v-select
|
||||
:items="[10, 25, 50, 100]"
|
||||
label="Show"
|
||||
dense
|
||||
single-line
|
||||
hide-details
|
||||
class="shrink"
|
||||
></v-select>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="visitors"
|
||||
:search="search"
|
||||
no-data-text="No data available in table"
|
||||
class="elevation-1"
|
||||
:footer-props="{
|
||||
'items-per-page-options': [10, 25, 50, 100],
|
||||
'show-current-page': true,
|
||||
}"
|
||||
>
|
||||
<template v-slot:item.aksi="{ item }">
|
||||
<div class="d-flex flex-column">
|
||||
<v-btn small color="success" class="my-1">Tiket</v-btn>
|
||||
<v-btn small color="primary" class="my-1"
|
||||
>Tiket Pengantar</v-btn
|
||||
>
|
||||
<v-btn small color="warning" class="my-1">ByPass</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-layout>
|
||||
</v-app>
|
||||
</v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
const drawer = ref(true); // Nilai awal true agar sidebar terlihat
|
||||
const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
|
||||
// Definisikan props untuk menerima status 'rail' dari layout induk
|
||||
const props = defineProps({
|
||||
rail: Boolean,
|
||||
});
|
||||
|
||||
// Reactive data
|
||||
const search = ref("");
|
||||
const lateSearch = ref("");
|
||||
const clinicSearch = ref("");
|
||||
const itemsPerPage = ref(10);
|
||||
const lateItemsPerPage = ref(10);
|
||||
const clinicItemsPerPage = ref(10);
|
||||
const currentPage = ref("Admin Anjungan");
|
||||
const searchLate = ref("");
|
||||
const page = ref(1);
|
||||
|
||||
// Gaya komputasi untuk menyesuaikan padding
|
||||
const contentStyle = computed(() => {
|
||||
return {
|
||||
paddingLeft: props.rail ? '56px' : '256px',
|
||||
transition: 'padding-left 0.3s ease-in-out',
|
||||
};
|
||||
});
|
||||
|
||||
// Struktur data yang memisahkan menu dengan dan tanpa submenu
|
||||
const items = ref([
|
||||
{ title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
|
||||
// Table headers for late visitors
|
||||
const lateHeaders = [
|
||||
{ text: 'No', value: 'no' },
|
||||
{ text: 'Barcode', value: 'barcode' },
|
||||
{ text: 'No Rekamedik', value: 'noRekamedik' },
|
||||
{ text: 'No Antrian', value: 'noAntrian' },
|
||||
{ text: 'No Antrian Klinik', value: 'noAntrianKlinik' },
|
||||
{ text: 'Shift', value: 'shift' },
|
||||
{ text: 'Pembayaran', value: 'pembayaran' },
|
||||
{ text: 'Status', value: 'status' },
|
||||
];
|
||||
|
||||
{
|
||||
title: "Setting",
|
||||
icon: "mdi-cog",
|
||||
children: [
|
||||
{ title: "Hak Akses", to: "/setting/hak-akses" },
|
||||
{ title: "User Login", to: "/setting/user-login" },
|
||||
{ title: "Master Loket", to: "/setting/master-loket" },
|
||||
{ title: "Master Klinik", to: "/setting/master-klinik" },
|
||||
{ title: "Master Klinik Ruang", to: "/setting/master-klinik-ruang" },
|
||||
{ title: "Screen", to: "/setting/screen" },
|
||||
],
|
||||
},
|
||||
{ title: "Loket Admin", icon: "mdi-account-supervisor", to : "/LoketAdmin" },
|
||||
{ title: "Ranap Admin", icon: "mdi-bed" },
|
||||
{ title: "Klinik Admin", icon: "mdi-hospital-box", to : "/KlinikAdmin" },
|
||||
{ title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/KlinikRuangAdmin" },
|
||||
// Table headers for all visitors
|
||||
const headers = [
|
||||
{ text: 'No', value: 'no' },
|
||||
{ text: 'Barcode', value: 'barcode' },
|
||||
{ text: 'No Rekamedik', value: 'noRekamedik' },
|
||||
{ text: 'No Antrian', value: 'noAntrian' },
|
||||
{ text: 'Shift', value: 'shift' },
|
||||
{ text: 'Ket', value: 'ket' },
|
||||
{ text: 'Fast Track', value: 'fastTrack' },
|
||||
{ text: 'Pembayaran', value: 'pembayaran' },
|
||||
{ text: 'Panggil', value: 'panggil' },
|
||||
{ text: 'Aksi', value: 'aksi' },
|
||||
];
|
||||
|
||||
{
|
||||
title: "Anjungan",
|
||||
icon: "mdi-account-box-multiple",
|
||||
children: [
|
||||
{title: "Anjungan", to: "/Anjungan/Anjungan"},
|
||||
{title: "Admin Anjungan", to: "/Anjungan/AdminAnjungan"}
|
||||
],
|
||||
},
|
||||
{ title: "Fast Track", icon: "mdi-clock-fast" },
|
||||
{ title: "Data Pasien", icon: "mdi-account-multiple" },
|
||||
{ title: "Screen", icon: "mdi-monitor" },
|
||||
{ title: "List Pasien", icon: "mdi-format-list-bulleted" },
|
||||
// Mock data for late visitors
|
||||
const lateVisitors = ref([
|
||||
{ no: 1, barcode: '250813100928', noRekamedik: 'RM001', noAntrian: 'ON1045', noAntrianKlinik: 'K1', shift: 'Shift 1', pembayaran: 'JKN', status: 'Terlambat' },
|
||||
{ no: 2, barcode: '250813100930', noRekamedik: 'RM002', noAntrian: 'GI1018', noAntrianKlinik: 'K2', shift: 'Shift 1', pembayaran: 'JKN', status: 'Terlambat' },
|
||||
{ no: 3, barcode: '250813100937', noRekamedik: 'RM003', noAntrian: 'MT1073', noAntrianKlinik: 'K3', shift: 'Shift 1', pembayaran: 'JKN', status: 'Terlambat' },
|
||||
]);
|
||||
|
||||
// Mock data for all visitors
|
||||
const visitors = ref([
|
||||
{ no: 1, barcode: '250813100928', noRekamedik: 'RM001', noAntrian: 'ON1045', shift: 'Shift 1', ket: '', fastTrack: 'Ya', pembayaran: 'JKN', panggil: 'Ya' },
|
||||
{ no: 2, barcode: '250813100930', noRekamedik: 'RM002', noAntrian: 'GI1018', shift: 'Shift 1', ket: '', fastTrack: 'Tidak', pembayaran: 'JKN', panggil: 'Tidak' },
|
||||
{ no: 3, barcode: '250813100937', noRekamedik: 'RM003', noAntrian: 'MT1073', shift: 'Shift 1', ket: '', fastTrack: 'Tidak', pembayaran: 'JKN', panggil: 'Tidak' },
|
||||
]);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user