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

Update Theme

Browse Source
This commit is contained in:
bagus-arie05
2025-09-24 11:18:02 +07:00
parent a66f883372
commit 1b1d7e331a
11 changed files with 368 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
pages/Setting/Master-Loket.vue
View File

@@ -1,18 +1,40 @@
<template>
<v-container>
<v-card>
<v-card-title class="d-flex justify-space-between align-center">
<!-- <v-card-title class="d-flex justify-space-between align-center">
<span>Master Loket</span>
<v-btn color=#ff9248 @click="tambahLoket" style="color:white;">Tambah Baru</v-btn>
</v-card-title>
</v-card-title> -->
<div class="page-header">
<div class="header-content">
<div class="header-left">
<div class="header-icon">
<v-icon size="32" color="white">mdi-view-dashboard</v-icon>
</div>
<div class="header-text">
<h1 class="page-title">Master Loket</h1>
<p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
</div>
</div>
</div>
</div>
<TabelData
:headers="loketHeaders"
:items="loketData"
title="Master Loket"
>
<template #actions="{ item }">
<v-btn small color=#ff9248 @click="editLoket(item)" class="mr-2" style="color:white;">Edit</v-btn>
<v-btn small color="grey-lighten-4" @click="deleteLoket(item)">Delete</v-btn>
<v-btn
small
color="#ff9248"
@click="editLoket(item)"
class="mr-2"
style="color: white"
>Edit</v-btn
>
<v-btn small color="grey-lighten-4" @click="deleteLoket(item)"
>Delete</v-btn
>
</template>
</TabelData>
</v-card>
@@ -20,28 +42,60 @@
</template>
<script setup>
import { ref } from 'vue';
import TabelData from '../../components/TabelData.vue';
import { useRouter } from 'vue-router';
import { ref } from "vue";
import TabelData from "../../components/TabelData.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const loketHeaders = ref([
{ title: 'No', value: 'no' },
{ title: 'Nama Loket', value: 'namaLoket' },
{ title: 'Kuota', value: 'kuota' },
{ title: 'Pelayanan', value: 'pelayanan' },
{ title: 'Pembayaran', value: 'pembayaran' },
{ title: 'Keterangan', value: 'keterangan' },
{ title: 'Aksi', value: 'aksi', sortable: false }, // 'value' harus 'actions'
{ title: "No", value: "no" },
{ title: "Nama Loket", value: "namaLoket" },
{ title: "Kuota", value: "kuota" },
{ title: "Pelayanan", value: "pelayanan" },
{ title: "Pembayaran", value: "pembayaran" },
{ title: "Keterangan", value: "keterangan" },
{ title: "Aksi", value: "aksi", sortable: false }, // 'value' harus 'actions'
]);
// Master-Loket.vue
const loketData = ref([
{ id: 1, no: 1, namaLoket: 'Loket 1', kuota: 500, pelayanan: ['RADIOTERAPI', 'REHAB MEDIK', 'TINDAKAN'], pembayaran: 'JKN', keterangan: 'ONLINE' },
{ id: 2, no: 2, namaLoket: 'Loket 2', kuota: 666, pelayanan: ['JIWA', 'SARAF'], pembayaran: 'JKN', keterangan: 'ONLINE' },
{ id: 3, no: 3, namaLoket: 'Loket 3', kuota: 666, pelayanan: ['ANESTESI', 'JANTUNG'], pembayaran: 'JKN', keterangan: 'ONLINE' },
{ id: 4, no: 4, namaLoket: 'Loket 4', kuota: 3676, pelayanan: ['KULIT KELAMIN', 'PARU'], pembayaran: 'JKN', keterangan: 'ONLINE' },
{
id: 1,
no: 1,
namaLoket: "Loket 1",
kuota: 500,
pelayanan: ["RADIOTERAPI", "REHAB MEDIK", "TINDAKAN"],
pembayaran: "JKN",
keterangan: "ONLINE",
},
{
id: 2,
no: 2,
namaLoket: "Loket 2",
kuota: 666,
pelayanan: ["JIWA", "SARAF"],
pembayaran: "JKN",
keterangan: "ONLINE",
},
{
id: 3,
no: 3,
namaLoket: "Loket 3",
kuota: 666,
pelayanan: ["ANESTESI", "JANTUNG"],
pembayaran: "JKN",
keterangan: "ONLINE",
},
{
id: 4,
no: 4,
namaLoket: "Loket 4",
kuota: 3676,
pelayanan: ["KULIT KELAMIN", "PARU"],
pembayaran: "JKN",
keterangan: "ONLINE",
},
]);
const editLoket = (item) => {
@@ -49,13 +103,54 @@ const editLoket = (item) => {
};
const deleteLoket = (item) => {
const index = loketData.value.findIndex(loket => loket.id === item.id);
const index = loketData.value.findIndex((loket) => loket.id === item.id);
if (index !== -1) {
loketData.value.splice(index, 1);
}
};
const tambahLoket = () => {
router.push({ path: '/Setting/Tambah-Loket' });
router.push({ path: "/Setting/Tambah-Loket" });
};
</script>
</script>
<style scoped>
.page-header {
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
border-radius: 16px;
margin-bottom: 24px;
box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px;
color: white;
}
.header-left {
display: flex;
align-items: center;
}
.header-icon {
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 16px;
margin-right: 20px;
backdrop-filter: blur(10px);
}
.page-title {
font-size: 32px;
font-weight: 700;
margin: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.page-subtitle {
margin: 4px 0 0 0;
opacity: 0.9;
font-size: 16px;
}
</style>