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

No files matched your search

pages/Setting/Master-Loket.vue
+116 -21
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>
pages/Setting/Screen/edit/[id].vue
+1 -1
View File
@@ -190,7 +190,7 @@ onMounted(() => {
.screen-card.active {
border-color: #1976d2;
background-color: #f3f7ff;
background-color: #d4d4d4;
}
.screen-card .v-card-title {
pages/Setting/Screen/index.vue
+128 -27
View File
@@ -1,7 +1,28 @@
<template>
<div class="screen-list">
<!-- Header -->
<div class="d-flex justify-space-between align-center mb-4">
<div class="page-header">
<div class="header-content">
<div class="header-left">
<div class="header-icon">
<v-icon size="32" color="white">mdi-monitor</v-icon>
</div>
<div class="header-text">
<h1 class="page-title">Screen</h1>
<p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
</div>
</div>
<div class="header-right">
<!-- <v-chip color="success" variant="flat" class="mr-2">
Total {{ totalPasien }} Pasien
</v-chip> -->
<v-chip color="white" variant="flat" class="text-primary" to="/Setting/screen/edit/1">
Edit Screen
</v-chip>
</div>
</div>
</div>
<!-- <div class="d-flex justify-space-between align-center mb-4">
<h2>Screen</h2>
<div class="d-flex gap-2">
<v-btn color="primary" variant="outlined" prepend-icon="mdi-eye">
@@ -11,7 +32,7 @@
Edit
</v-btn>
</div>
</div>
</div> -->
<!-- Controls -->
<div class="d-flex justify-space-between align-center mb-4">
@@ -22,11 +43,11 @@
:items="[10, 25, 50, 100]"
density="compact"
variant="outlined"
style="width: 80px;"
style="width: 80px"
></v-select>
<span>entries</span>
</div>
<div class="d-flex align-center gap-2">
<span>Search:</span>
<v-text-field
@@ -34,7 +55,7 @@
density="compact"
variant="outlined"
hide-details
style="width: 200px;"
style="width: 200px"
></v-text-field>
</div>
</div>
@@ -50,7 +71,7 @@
<template v-slot:item.no="{ index }">
{{ index + 1 }}
</template>
<template v-slot:item.klinik="{ item }">
<div class="klinik-tags">
<v-chip
@@ -70,9 +91,9 @@
<v-btn
icon="mdi-pencil"
size="small"
color=#ff9248
color="#ff9248"
@click="editScreen(item)"
style="color:white;"
style="color: white"
></v-btn>
</template>
</v-data-table>
@@ -80,9 +101,10 @@
<!-- Footer -->
<div class="d-flex justify-space-between align-center mt-4">
<div>
Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalItems }} entries
Showing {{ currentPageStart }} to {{ currentPageEnd }} of
{{ totalItems }} entries
</div>
<v-pagination
v-model="currentPage"
:length="totalPages"
@@ -93,43 +115,75 @@
</template>
<script setup>
import { ref, computed } from 'vue';
import { ref, computed } from "vue";
// Data
const search = ref('');
const search = ref("");
const itemsPerPage = ref(10);
const currentPage = ref(1);
const headers = [
{ title: 'No', key: 'no', sortable: false, width: '60px' },
{ title: 'Nama Screen', key: 'nama_screen', sortable: true },
{ title: 'Klinik', key: 'klinik', sortable: false },
{ title: 'Actions', key: 'actions', sortable: false, width: '100px' }
{ title: "No", key: "no", sortable: false, width: "60px" },
{ title: "Nama Screen", key: "nama_screen", sortable: true },
{ title: "Klinik", key: "klinik", sortable: false },
{ title: "Actions", key: "actions", sortable: false, width: "100px" },
];
const screenItems = ref([
{
id: 1,
nama_screen: 'Layar Screen 1',
klinik: ['ANAK', 'ANESTESI', 'BEDAH', 'GIGI DAN MULUT', 'GERIATRI', 'GIZI', 'IPD', 'JANTUNG']
nama_screen: "Layar Screen 1",
klinik: [
"ANAK",
"ANESTESI",
"BEDAH",
"GIGI DAN MULUT",
"GERIATRI",
"GIZI",
"IPD",
"JANTUNG",
],
},
{
id: 2,
nama_screen: 'Layar Screen 2',
klinik: ['JIWA', 'KUL KEL', 'KOMPLEMENTER', 'MATA', 'SARAF', 'KANDUNGAN', 'ONKOLOGI', 'PARU']
nama_screen: "Layar Screen 2",
klinik: [
"JIWA",
"KUL KEL",
"KOMPLEMENTER",
"MATA",
"SARAF",
"KANDUNGAN",
"ONKOLOGI",
"PARU",
],
},
{
id: 3,
nama_screen: 'Layar Screen 3',
klinik: ['RADIOTERAPI', 'REHAB MEDIK', 'THT', 'MCU', 'KEMOTERAPI', 'R. TINDAKAN', 'HOM']
}
nama_screen: "Layar Screen 3",
klinik: [
"RADIOTERAPI",
"REHAB MEDIK",
"THT",
"MCU",
"KEMOTERAPI",
"R. TINDAKAN",
"HOM",
],
},
]);
// Computed
const totalItems = computed(() => screenItems.value.length);
const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage.value));
const currentPageStart = computed(() => (currentPage.value - 1) * itemsPerPage.value + 1);
const currentPageEnd = computed(() => Math.min(currentPage.value * itemsPerPage.value, totalItems.value));
const totalPages = computed(() =>
Math.ceil(totalItems.value / itemsPerPage.value)
);
const currentPageStart = computed(
() => (currentPage.value - 1) * itemsPerPage.value + 1
);
const currentPageEnd = computed(() =>
Math.min(currentPage.value * itemsPerPage.value, totalItems.value)
);
// Methods
const editScreen = (item) => {
@@ -138,6 +192,53 @@ const editScreen = (item) => {
</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;
}
.header-right {
display: flex;
align-items: center;
}
.screen-list {
padding: 20px;
}
@@ -149,4 +250,4 @@ const editScreen = (item) => {
.gap-2 {
gap: 8px;
}
</style>
</style>