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

update 11/08

Browse Source
This commit is contained in:
bagus-arie05
2025-08-11 17:00:44 +07:00
parent 388e405b2c
commit 559ca94a7b
5 changed files with 472 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
package-lock.json generated
View File

@@ -15,6 +15,7 @@
"@nuxt/test-utils": "^3.19.2",
"@nuxt/ui": "^3.3.0",
"@unhead/vue": "^2.0.13",
"better-sqlite3": "^12.2.0",
"eslint": "^9.32.0",
"nuxt": "^3.17.7",
"typescript": "^5.8.3",
@@ -7003,6 +7004,20 @@
],
"license": "MIT"
},
"node_modules/better-sqlite3": {
"version": "12.2.0",
"resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-12.2.0.tgz",
"integrity": "sha512-eGbYq2CT+tos1fBwLQ/tkBt9J5M3JEHjku4hbvQUePCckkvVf14xWj+1m7dGoK81M/fOjFT7yM9UMeKT/+vFLQ==",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
"bindings": "^1.5.0",
"prebuild-install": "^7.1.1"
},
"engines": {
"node": "20.x || 22.x || 23.x || 24.x"
}
},
"node_modules/binary-extensions": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -7038,7 +7053,6 @@
"resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
"integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
"license": "MIT",
"optional": true,
"dependencies": {
"buffer": "^5.5.0",
"inherits": "^2.0.4",
@@ -7064,7 +7078,6 @@
}
],
"license": "MIT",
"optional": true,
"dependencies": {
"base64-js": "^1.3.1",
"ieee754": "^1.1.13"
@@ -7075,7 +7088,6 @@
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
"license": "MIT",
"optional": true,
"dependencies": {
"inherits": "^2.0.3",
"string_decoder": "^1.1.1",
@@ -8326,7 +8338,6 @@
"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
"integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
"license": "MIT",
"optional": true,
"dependencies": {
"mimic-response": "^3.1.0"
},
@@ -8342,7 +8353,6 @@
"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
"license": "MIT",
"optional": true,
"engines": {
"node": ">=4.0.0"
}
@@ -9807,7 +9817,6 @@
"resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
"integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
"license": "(MIT OR WTFPL)",
"optional": true,
"engines": {
"node": ">=6"
}
@@ -10191,8 +10200,7 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
"integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
"license": "MIT",
"optional": true
"license": "MIT"
},
"node_modules/fsevents": {
"version": "2.3.3",
@@ -10364,8 +10372,7 @@
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
"integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
"license": "MIT",
"optional": true
"license": "MIT"
},
"node_modules/github-slugger": {
"version": "2.0.0",
@@ -13258,7 +13265,6 @@
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
"integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
"license": "MIT",
"optional": true,
"engines": {
"node": ">=10"
},
@@ -13351,8 +13357,7 @@
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
"license": "MIT",
"optional": true
"license": "MIT"
},
"node_modules/mlly": {
"version": "1.7.4",
@@ -13454,8 +13459,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
"integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
"license": "MIT",
"optional": true
"license": "MIT"
},
"node_modules/napi-postinstall": {
"version": "0.3.2",
@@ -13628,7 +13632,6 @@
"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.75.0.tgz",
"integrity": "sha512-OhYaY5sDsIka7H7AtijtI9jwGYLyl29eQn/W623DiN/MIv5sUqc4g7BIDThX+gb7di9f6xK02nkp8sdfFWZLTg==",
"license": "MIT",
"optional": true,
"dependencies": {
"semver": "^7.3.5"
},
@@ -15149,7 +15152,6 @@
"resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
"integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
"license": "MIT",
"optional": true,
"dependencies": {
"detect-libc": "^2.0.0",
"expand-template": "^2.0.3",
@@ -15175,15 +15177,13 @@
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
"license": "ISC",
"optional": true
"license": "ISC"
},
"node_modules/prebuild-install/node_modules/detect-libc": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
"integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
"license": "Apache-2.0",
"optional": true,
"engines": {
"node": ">=8"
}
@@ -15193,7 +15193,6 @@
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
"license": "MIT",
"optional": true,
"dependencies": {
"inherits": "^2.0.3",
"string_decoder": "^1.1.1",
@@ -15208,7 +15207,6 @@
"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.3.tgz",
"integrity": "sha512-090nwYJDmlhwFwEW3QQl+vaNnxsO2yVsd45eTKRBzSzu+hlb1w2K9inVq5b0ngXuLVqQ4ApvsUHHnu/zQNkWAg==",
"license": "MIT",
"optional": true,
"dependencies": {
"chownr": "^1.1.1",
"mkdirp-classic": "^0.5.2",
@@ -15221,7 +15219,6 @@
"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
"license": "MIT",
"optional": true,
"dependencies": {
"bl": "^4.0.3",
"end-of-stream": "^1.4.1",
@@ -15456,7 +15453,6 @@
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
"license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
"optional": true,
"dependencies": {
"deep-extend": "^0.6.0",
"ini": "~1.3.0",
@@ -15471,15 +15467,13 @@
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
"license": "ISC",
"optional": true
"license": "ISC"
},
"node_modules/rc/node_modules/strip-json-comments": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
"integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
"license": "MIT",
"optional": true,
"engines": {
"node": ">=0.10.0"
}
@@ -16227,7 +16221,6 @@
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16244,7 +16237,6 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16261,7 +16253,6 @@
"cpu": [
"riscv64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16278,7 +16269,6 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16295,7 +16285,6 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16312,7 +16301,6 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16329,7 +16317,6 @@
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16346,7 +16333,6 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16363,7 +16349,6 @@
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16380,7 +16365,6 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16397,7 +16381,6 @@
"cpu": [
"riscv64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16414,7 +16397,6 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16431,7 +16413,6 @@
"cpu": [
"riscv64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16448,7 +16429,6 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16465,7 +16445,6 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16482,7 +16461,6 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -16826,8 +16804,7 @@
"url": "https://feross.org/support"
}
],
"license": "MIT",
"optional": true
"license": "MIT"
},
"node_modules/simple-get": {
"version": "4.0.1",
@@ -16848,7 +16825,6 @@
}
],
"license": "MIT",
"optional": true,
"dependencies": {
"decompress-response": "^6.0.0",
"once": "^1.3.1",
@@ -17731,7 +17707,6 @@
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
"integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
"license": "Apache-2.0",
"optional": true,
"dependencies": {
"safe-buffer": "^5.0.1"
},

1
package.json
View File

@@ -18,6 +18,7 @@
"@nuxt/test-utils": "^3.19.2",
"@nuxt/ui": "^3.3.0",
"@unhead/vue": "^2.0.13",
"better-sqlite3": "^12.2.0",
"eslint": "^9.32.0",
"nuxt": "^3.17.7",
"typescript": "^5.8.3",

447
pages/LoketAdmin.vue Normal file
View File

@@ -0,0 +1,447 @@
<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>
<!-- 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>
</v-card>
<!-- 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>
</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>
</v-layout>
</v-app>
</template>
<script setup>
import { ref, computed } from "vue";
// Reactive data
const drawer = ref(true);
const rail = ref(false);
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" },
{ title: "Ranap Admin", icon: "mdi-bed" },
{ title: "Klinik Admin", icon: "mdi-hospital-box" },
{ title: "Klinik Ruang Admin", icon: "mdi-hospital-marker" },
{ 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
const mainHeaders = ref([
{ title: "No", value: "no", sortable: false },
{ title: "Jam Panggil", value: "jamPanggil" },
{ title: "Barcode", value: "barcode" },
{ title: "No Antrian", value: "noAntrian" },
{ title: "Shift", value: "shift" },
{ title: "Klinik", value: "klinik" },
{ title: "Fast Track", value: "fastTrack" },
{ title: "Pembayaran", value: "pembayaran" },
{ title: "Panggil", value: "panggil" },
{ title: "Aksi", value: "aksi", sortable: false },
]);
const lateHeaders = ref([
{ title: "No", value: "no", sortable: false },
{ title: "Barcode", value: "barcode" },
{ title: "No Antrian", value: "noAntrian" },
{ title: "Shift", value: "shift" },
{ title: "Klinik", value: "klinik" },
{ title: "Aksi", value: "aksi", sortable: false },
]);
const clinicHeaders = ref([
{ title: "#", value: "no", sortable: false },
{ title: "Barcode", value: "barcode" },
{ title: "No Antrian", value: "noAntrian" },
{ title: "No RM", value: "noRM" },
{ title: "Shift", value: "shift" },
{ title: "Klinik", value: "klinik" },
{ title: "Fast Track", value: "fastTrack" },
{ title: "Pembayaran", value: "pembayaran" },
{ title: "Aksi", value: "aksi", sortable: false },
]);
// Sample data
const mainPatients = ref([
{
no: 1,
jamPanggil: "12:49",
barcode: "250811100163",
noAntrian: "UM1001 | Online - 250811100163",
shift: "Shift 1",
klinik: "KANDUNGAN",
fastTrack: "UMUM",
pembayaran: "UMUM",
panggil: "Panggil",
status: "current",
},
{
no: 2,
jamPanggil: "10:52",
barcode: "250811100155",
noAntrian: "UM1002 | Online - 250811100155",
shift: "Shift 1",
klinik: "IPD",
fastTrack: "UMUM",
pembayaran: "UMUM",
panggil: "Cancel",
status: "normal",
},
{
no: 3,
jamPanggil: "07:35",
barcode: "250811100355",
noAntrian: "UM1005 | Online - 250811100355",
shift: "Shift 1",
klinik: "THT",
fastTrack: "UMUM",
pembayaran: "UMUM",
panggil: "Panggil",
status: "normal",
},
{
no: 4,
jamPanggil: "08:05",
barcode: "250811100355",
noAntrian: "UM1006 | Online - 250811100355",
shift: "Shift 1",
klinik: "THT",
fastTrack: "UMUM",
pembayaran: "UMUM",
panggil: "Panggil",
status: "normal",
},
{
no: 5,
jamPanggil: "12:43",
barcode: "250811100402",
noAntrian: "UM1004 | Online - 250811100402",
shift: "Shift 1",
klinik: "SARAF",
fastTrack: "UMUM",
pembayaran: "UMUM",
panggil: "Panggil",
status: "normal",
},
]);
const latePatients = ref([]);
const clinicPatients = ref([]);
// Methods
const getRowClass = (item) => {
if (item.status === "current") {
return "text-green font-weight-bold";
}
return "";
};
</script>
<style scoped>
.v-list-item--active {
background-color: rgba(25, 118, 210, 0.12);
color: #1976d2;
}
.text-green {
color: #4caf50 !important;
}
/* Custom scrollbar */
:deep(.v-data-table) {
font-size: 14px;
}
:deep(.v-data-table__wrapper) {
max-height: 400px;
overflow-y: auto;
}
/* Row highlighting */
:deep(.v-data-table tbody tr:nth-child(1)) {
background-color: #fff3cd !important;
}
</style>

7
pages/index.vue
View File

@@ -29,9 +29,6 @@
:title="item.title"
:value="item.title"
>
<v-list-item-title v-if="!rail">{{
item.title
}}</v-list-item-title>
</v-list-item>
</template>
@@ -129,8 +126,8 @@
></v-data-table>
<div class="d-flex justify-end pt-2">
<v-pagination
v-model="latePage"
:length="latePageCount"
v-model="page"
:length="10"
:total-visible="5"
></v-pagination>
</div>

0
server/api/datapengunjung.ts Normal file
View File