update loket admin & layout
This commit is contained in:
bagus-arie05
158
layouts/default.vue
Normal file
158
layouts/default.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<!-- Root component for the entire Vuetify application -->
|
||||
<v-app>
|
||||
<!-- App bar di bagian atas layout -->
|
||||
<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">Ragil Bayu Nogroho</span>
|
||||
</v-app-bar>
|
||||
|
||||
<!-- Komponen sidebar (v-navigation-drawer) yang Anda berikan -->
|
||||
<v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
|
||||
<!-- Komponen untuk menampilkan item daftar menu -->
|
||||
<v-list density="compact" nav>
|
||||
<!-- Loop melalui setiap item di array 'items' -->
|
||||
<template v-for="item in items" :key="item.title">
|
||||
<!-- V-menu untuk item yang memiliki sub-menu (children) -->
|
||||
<v-menu
|
||||
v-if="item.children"
|
||||
open-on-hover
|
||||
location="end"
|
||||
:nudge-right="8"
|
||||
>
|
||||
<!-- Slot untuk mengaktifkan menu saat diklik/hover -->
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:value="item.title"
|
||||
:active="item.title === currentActiveMenu"
|
||||
>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<!-- Konten menu (sub-menu) -->
|
||||
<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
|
||||
:active="child.to === currentRoute.path"
|
||||
>
|
||||
<v-list-item-title>{{ child.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<!-- V-list-item untuk item yang tidak memiliki sub-menu -->
|
||||
<v-list-item
|
||||
v-else
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:to="item.to"
|
||||
:value="item.title"
|
||||
:active="item.to === currentRoute.path"
|
||||
link
|
||||
></v-list-item>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<!-- Area konten utama aplikasi -->
|
||||
<v-main>
|
||||
<v-container fluid>
|
||||
<!-- Di sini, konten halaman akan di-render oleh Nuxt -->
|
||||
<slot></slot>
|
||||
</v-container>
|
||||
</v-main>
|
||||
<v-footer app padless class="bg-grey-lighten-4">
|
||||
<v-container fluid class="py-2">
|
||||
<v-row no-gutters align="center">
|
||||
<v-col cols="12" md="6">
|
||||
<span class="text-caption text-grey-darken-2">
|
||||
RSUD Dr. Saiful Anwar Malang | Jl. Jaksa Agung Suprapto No. 2 Malang | Telp : 0341- 362101 | Fax : 0341-369384
|
||||
</span>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" class="text-right">
|
||||
<span class="text-caption text-grey-darken-2">
|
||||
ITIKom Antrian RSSA Ver. 0.2
|
||||
</span>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-footer>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
// Data untuk item-item sidebar
|
||||
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: "/loket-admin" },
|
||||
{ title: "Ranap Admin", icon: "mdi-bed", to: "/ranap-admin" },
|
||||
{ title: "Klinik Admin", icon: "mdi-hospital-box", to: "/klinik-admin" },
|
||||
{ title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/klinik-ruang-admin" },
|
||||
{ title: "Anjungan", icon: "mdi-account-box-multiple", to: "/anjungan" },
|
||||
{ title: "Fast Track", icon: "mdi-clock-fast", to: "/fast-track" },
|
||||
{ title: "Data Pasien", icon: "mdi-account-multiple", to: "/data-pasien" },
|
||||
{ title: "Screen", icon: "mdi-monitor", to: "/screen" },
|
||||
{ title: "List Pasien", icon: "mdi-format-list-bulleted", to: "/list-pasien" },
|
||||
]);
|
||||
|
||||
// State untuk sidebar
|
||||
const drawer = ref(true);
|
||||
const rail = ref(false);
|
||||
|
||||
const currentRoute = useRoute();
|
||||
const currentActiveMenu = computed(() => {
|
||||
const currentItem = items.value.find(item => item.to === currentRoute.path);
|
||||
if (currentItem) {
|
||||
return currentItem.title;
|
||||
}
|
||||
|
||||
for (const item of items.value) {
|
||||
if (item.children) {
|
||||
const childItem = item.children.find(child => child.to === currentRoute.path);
|
||||
if (childItem) {
|
||||
return item.title;
|
||||
}
|
||||
}
|
||||
}
|
||||
return '';
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-list-item--active {
|
||||
background-color: var(--v-theme-primary);
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
231
pages/index.vue
231
pages/index.vue
@@ -1,69 +1,4 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-layout>
|
||||
<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-app-bar>
|
||||
|
||||
<v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
|
||||
<!-- /* <v-list-item>
|
||||
<v-list-item-title class="text-h6">
|
||||
RSSA
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
-->
|
||||
|
||||
<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"
|
||||
>
|
||||
</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"
|
||||
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">
|
||||
@@ -88,7 +23,11 @@
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
<v-divider class="my-5"></v-divider>
|
||||
<v-divider
|
||||
class="my-5"
|
||||
color="deep-orange-darken-4"
|
||||
thickness="8"
|
||||
></v-divider>
|
||||
|
||||
<v-card class="mb-5">
|
||||
<v-toolbar flat color="transparent" dense>
|
||||
@@ -134,37 +73,45 @@
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-divider class="my-5"></v-divider>
|
||||
<v-divider
|
||||
class="my-5"
|
||||
color="blue-darken-4"
|
||||
thickness="8"
|
||||
></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-title class="text-subtitle-1 font-weight-bold bg-red-lighten-3">
|
||||
DATA PENGUNJUNG
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
<div class="d-flex justify-space-between align-center ps-4">
|
||||
<div class="d-flex align-center">
|
||||
<span>Show</span>
|
||||
<v-select
|
||||
:items="[10, 25, 50]"
|
||||
label="Entries"
|
||||
density="compact"
|
||||
hide-details
|
||||
class="mx-2"
|
||||
style="width: 80px"
|
||||
></v-select>
|
||||
<span>entries</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center">
|
||||
<span class="mr-2">Search:</span>
|
||||
<v-text-field
|
||||
label="Search"
|
||||
hide-details
|
||||
density="compact"
|
||||
style="min-width: 200px"
|
||||
></v-text-field>
|
||||
</div>
|
||||
</div>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="visitors"
|
||||
:items="mainPatients"
|
||||
:search="search"
|
||||
no-data-text="No data available in table"
|
||||
class="elevation-1"
|
||||
@@ -174,28 +121,24 @@
|
||||
}"
|
||||
>
|
||||
<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"
|
||||
<div class="d-flex ga-1">
|
||||
<v-btn small color="success" class="d-flex flex-row" variant="flat">Tiket</v-btn>
|
||||
<v-btn small color="success" class="d-flex flex-row" variant="flat"
|
||||
>Tiket Pengantar</v-btn
|
||||
>
|
||||
<v-btn small color="warning" class="my-1">ByPass</v-btn>
|
||||
<v-btn small color="info"class="d-flex flex-row" variant="flat">ByPass</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-layout>
|
||||
</v-app>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { ref } 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
|
||||
// const drawer = ref(true); // Nilai awal true agar sidebar terlihat
|
||||
// const rail = ref(true); // Nilai awal true agar sidebar dimulai dalam mode rail
|
||||
|
||||
// Struktur data yang memisahkan menu dengan dan tanpa submenu
|
||||
const items = ref([
|
||||
@@ -217,5 +160,85 @@ const items = ref([
|
||||
{ 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" },
|
||||
]);
|
||||
const headers = ref([
|
||||
{ title: "No", value: "no", sortable: false },
|
||||
{ title: "Tgl Daftar", value: "tglDaftar", sortable: true },
|
||||
{ title: "RM", value: "rm", sortable: true },
|
||||
{ title: "Barcode", value: "barcode", sortable: true },
|
||||
{ title: "No Antrian", value: "noAntrian", sortable: true },
|
||||
{ title: "No Klinik", value: "noKlinik", sortable: true },
|
||||
{ title: "Shift", value: "shift", sortable: true },
|
||||
{ title: "Klinik", value: "klinik", sortable: true },
|
||||
{ title: "Pembayaran", value: "pembayaran", sortable: true },
|
||||
{ title: "Masuk", value: "masuk", sortable: true },
|
||||
{ title: "Aksi", value: "aksi", sortable: false },
|
||||
]);
|
||||
const mainPatients = ref([
|
||||
{
|
||||
no: 1,
|
||||
tglDaftar: "12:49",
|
||||
rm: "250811100163",
|
||||
noAntrian: "UM1001 | Online - 250811100163",
|
||||
noKlinik: "THT",
|
||||
barcode: "2321232",
|
||||
shift: "Shift 1",
|
||||
klinik: "KANDUNGAN",
|
||||
pembayaran: "UMUM",
|
||||
masuk : "TIDAK",
|
||||
status: "current",
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
tglDaftar: "18:23",
|
||||
rm: "42081123200199",
|
||||
noAntrian: "UM1001 | Online - 250811100163",
|
||||
noKlinik: "THT",
|
||||
barcode: "2321985",
|
||||
shift: "Shift 1",
|
||||
klinik: "DALAM",
|
||||
pembayaran: "UMUM",
|
||||
masuk : "TIDAK",
|
||||
status: "current",
|
||||
},
|
||||
{
|
||||
no: 3,
|
||||
tglDaftar: "02:19",
|
||||
rm: "15092710084",
|
||||
noAntrian: "UM1001 | Online - 250811100163",
|
||||
noKlinik: "THT",
|
||||
barcode: "2321777",
|
||||
shift: "Shift 1",
|
||||
klinik: "ANAK",
|
||||
pembayaran: "UMUM",
|
||||
masuk : "TIDAK",
|
||||
status: "current",
|
||||
},
|
||||
{
|
||||
no: 4,
|
||||
tglDaftar: "10:09",
|
||||
rm: "250254310011",
|
||||
noAntrian: "UM1001 | Online - 250811100163",
|
||||
noKlinik: "THT",
|
||||
barcode: "2321298",
|
||||
shift: "Shift 1",
|
||||
klinik: "JANTUNG",
|
||||
pembayaran: "UMUM",
|
||||
masuk : "TIDAK",
|
||||
status: "current",
|
||||
},
|
||||
|
||||
]);
|
||||
const search = ref("");
|
||||
// const searchLate = ref('');
|
||||
// const page = ref(1);
|
||||
// const lateVisitors = ref('');
|
||||
// // const lateHeaders = ref ('');
|
||||
// definePageMeta({
|
||||
// layout: 'MainL'
|
||||
// });
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user