-
-
-
- mdi-office-building
-
+ mdi-office-building
IT Support RSSA
@@ -309,11 +215,10 @@
-
+
- mdi-phone
-
+ mdi-phone
(0341) 343343 ext. 1234
@@ -323,11 +228,10 @@
-
+
- mdi-email
-
+ mdi-email
it-support@rssa.malang.go.id
@@ -337,11 +241,10 @@
-
+
- mdi-clock
-
+ mdi-clock
Senin - Jumat: 07:00 - 15:00
@@ -352,19 +255,18 @@
-
+
+ color="orange" >
-
+
mdi-content-copy
Salin Info
@@ -406,6 +307,15 @@ const successMessage = ref('')
const showRegistrationDialog = ref(false)
const showAdminContact = ref(false)
+// Hospital Profile URL
+const HOSPITAL_PROFILE_URL = 'https://rsusaifulanwar.jatimprov.go.id/v2/'
+
+// Function to navigate to external hospital profile site
+// NOTE: This function is no longer called in the template since the menu item was removed.
+const goToHospitalProfile = (): void => {
+ window.open(HOSPITAL_PROFILE_URL, '_blank')
+}
+
// Check URL parameters for errors
const route = useRoute()
onMounted(() => {
@@ -414,7 +324,7 @@ onMounted(() => {
}
})
-// Custom login handler
+// Custom login handler (pointing to Keycloak SSO logic)
const handleLogin = async (): Promise => {
isLoading.value = true
errorMessage.value = ''
@@ -422,7 +332,8 @@ const handleLogin = async (): Promise => {
try {
console.log('Starting login process...')
-
+
+ // Call API route to initiate Keycloak login process
const response = await $fetch('/api/auth/keycloak-login', {
method: 'POST'
})
@@ -430,7 +341,8 @@ const handleLogin = async (): Promise => {
if (response?.success && response?.data?.authUrl) {
console.log('Redirecting to Keycloak...')
successMessage.value = 'Redirecting to Keycloak...'
-
+
+ // Redirect the user to the Keycloak authorization URL
setTimeout(() => {
window.location.href = response.data!.authUrl
}, 500)
@@ -439,31 +351,44 @@ const handleLogin = async (): Promise => {
}
} catch (error: any) {
console.error('Login error:', error)
+ // Display the error message
errorMessage.value = `Login failed: ${error.message || 'Please try again.'}`
} finally {
- isLoading.value = false
+ // Only set isLoading back to false if no redirect is happening
+ if (!successMessage.value.includes('Redirecting')) {
+ isLoading.value = false
+ }
}
}
// Copy contact information to clipboard
const copyContactInfo = async (): Promise => {
+ // Updated contact info block from user's provided code
const contactInfo = `
IT Support RSSA
Telepon: (0341) 343343 ext. 1234
Email: it-support@rssa.malang.go.id
-Jam Operasional: Senin - Jumat, 08:00 - 16:00
+Jam Operasional: Senin - Jumat, 07:00 - 15:00
`.trim()
-
+
try {
+ // Use the Clipboard API
await navigator.clipboard.writeText(contactInfo)
successMessage.value = 'Informasi kontak berhasil disalin!'
showAdminContact.value = false
-
+
+ // Clear the success message after a short delay
setTimeout(() => {
successMessage.value = ''
}, 3000)
} catch (error) {
console.error('Failed to copy contact info:', error)
+ // Fallback or simple alert for error
+ errorMessage.value = 'Gagal menyalin informasi kontak. Silakan coba salin manual.'
+
+ setTimeout(() => {
+ errorMessage.value = ''
+ }, 3000)
}
}
diff --git a/pages/MonitoringPasien/monitoringPasien.vue b/pages/MonitoringPasien/monitoringPasien.vue
new file mode 100644
index 0000000..6dea9b0
--- /dev/null
+++ b/pages/MonitoringPasien/monitoringPasien.vue
@@ -0,0 +1,252 @@
+
+
+
+
+
+
+
+
+ Semua Pasien
+
+ Menunggu Poli
+
+ Diperiksa Dokter
+
+ Selesai Pelayanan
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cari
+
+
+
+
+
+
+
+ {{ item.status }}
+
+
+
+
+ Lihat
+
+
+
+
+ Tidak ada data pasien untuk ditampilkan.
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/MonitoringPasien/pasien/[id].vue b/pages/MonitoringPasien/pasien/[id].vue
new file mode 100644
index 0000000..695df6d
--- /dev/null
+++ b/pages/MonitoringPasien/pasien/[id].vue
@@ -0,0 +1,298 @@
+
+
+
+
+
+
+
+
+
+
+
+ mdi-progress-check
+ Status: {{ patient.status }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ mdi-ticket-off-outline
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/Profile/Pengaturan.vue.txt b/pages/Profile/Pengaturan.vue.txt
new file mode 100644
index 0000000..6332cc7
--- /dev/null
+++ b/pages/Profile/Pengaturan.vue.txt
@@ -0,0 +1,1126 @@
+
+
+
+
+
+
+
+ mdi-shield-lock
+ Keamanan
+
+
+ mdi-bell
+ Notifikasi
+
+
+ mdi-eye-off
+ Privasi
+
+
+ mdi-alert
+ Danger Zone
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Batal
+
+
+ Ubah Password
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tutup
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Batal
+
+
+ Konfirmasi
+
+
+
+
+
+
+
+ Tutup
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/Profile/Profil.vue b/pages/Profile/Profil.vue
new file mode 100644
index 0000000..2bcbd45
--- /dev/null
+++ b/pages/Profile/Profil.vue
@@ -0,0 +1,800 @@
+
+
+
+
+
+
+
+
+
+
+ Pengaturan Akun
+
+
+
+
+
+
+
+
+
+
+ mdi-account-details
+ Informasi Pribadi
+
+ Edit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Batal
+
+
+ Simpan Perubahan
+
+
+
+
+
+
+
+ mdi-shield-check
+ Keamanan
+
+
+
+
+ Ubah Password
+ Perbarui password akun Anda
+
+ mdi-chevron-right
+
+
+
+
+ Autentikasi Dua Faktor
+ Tingkatkan keamanan akun
+
+
+
+
+ Perangkat Aktif
+ Kelola perangkat yang terhubung
+
+ {{ activeSessions.length }} Perangkat
+
+
+
+
+
+
+
+
+
+ mdi-tune
+ Preferensi
+
+
+
+
+ Notifikasi Email
+ Terima update via email
+
+
+
+
+ Tema Gelap
+ Aktifkan mode gelap
+
+
+
+
+ Bahasa
+ Indonesia
+
+ mdi-chevron-right
+
+
+
+
+
+
+
+
+
+ Change Password Dialog
+
+
+
+
+
+
+
+
+
+
+
+
+ Batal
+
+
+ Ubah Password
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ session.icon }}
+
+
+
+
+
+ {{ session.device }}
+
+ Sesi Ini
+
+
+
+
+
+
+
+
+
+
+
+
+ Keluar dari Semua Perangkat
+
+
+ Tutup
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hapus Foto
+
+
+ Batal
+
+
+ Simpan
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/verifikasiAkun/VerifikasiAkun.vue b/pages/verifikasiAkun/VerifikasiAkun.vue
index 3113121..ccbf554 100644
--- a/pages/verifikasiAkun/VerifikasiAkun.vue
+++ b/pages/verifikasiAkun/VerifikasiAkun.vue
@@ -1,115 +1,138 @@
-
+
- mdi-account-circle
- Admin Aktif
+
+ mdi-account-star
+ Admin
-
-
+
+
-
+
-
-
+
+
-
+
-
- SEMUA PASIEN {{ patients.length }}
+
+ SEMUA {{ patients.length }}
-
- BELUM VERIFIKASI {{ unverifiedPatients.length }}
+
+ PENDING {{ unverifiedPatients.length }}
-
- TERVERIFIKASI {{ verifiedPatients.length }}
+
+ VERIFIED {{ verifiedPatients.length }}
-
+
-
-
- {{ patient.status === 'Terverifikasi' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
+
+
+
+ {{ patient.status === 'Terverifikasi' ? 'mdi-check-decagram' : 'mdi-clock-alert' }}
+
+
+
+
{{ patient.nama }}
-
-
-
- RM: {{ patient.rm }}
+
+
+
+
+ mdi-file-document
+ {{ patient.rm }}
+
-
- Alamat: {{ patient.alamat }}
+
+
+ mdi-map-marker
+ {{ patient.alamat }}
-
- Telp: {{ patient.telepon || '-' }}
+
+
+ mdi-phone
+ {{ patient.telepon || 'Belum diisi' }}
-
+
- DAFTARKAN
+ VERIFIKASI
+ mdi-shield-check
VERIFIED
-
+
{{ noDataText }}
@@ -117,81 +140,97 @@
-
-
-
- Aktivasi Akun Pasien
-
-
- {{ selectedPatient.nama }} (RM: {{ selectedPatient.rm }})
-
+
+
+
+
- mdi-qrcode-scan
- Lanjutkan & Generate QR
+ mdi-qrcode-plus
+ Generate QR Code
-
-
-
-
- mdi-cog
-
- Pengaturan Akun
-
+
+
+
-
+
-
- mdi-logout
-
-
- {{ isLoggingOut ? 'Logging out...' : 'Keluar' }}
-
-
-
+ {{ isLoggingOut ? 'Keluar...' : 'Keluar' }}
+
+
@@ -146,7 +203,6 @@ const signOut = async () => {
menu.value = false;
try {
- // 🚨 Emits event up to SideBar to trigger useAuth().logout()
emit('logout');
} finally {
isLoggingOut.value = false;
@@ -156,21 +212,205 @@ const signOut = async () => {
const handleAction = (action) => {
switch(action) {
case 'account':
- navigateTo('/settings/account')
+ navigateTo('/Profile/Pengaturan')
break;
case 'profile':
- navigateTo('/profile')
+ navigateTo('/Profile/Profil')
break;
+ case 'notifications':
+ navigateTo('/notifications')
+ break;
+ case 'help':
+ navigateTo('/help')
+ break;
+ case 'darkMode':
+ darkMode.value = !darkMode.value;
+ return;
}
- if (action !== 'darkMode') {
- menu.value = false;
- }
+ menu.value = false;
};
\ No newline at end of file
diff --git a/components/ReorderMenuDialog.vue b/components/ReorderMenuDialog.vue
deleted file mode 100644
index 4c75f83..0000000
--- a/components/ReorderMenuDialog.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-
\ No newline at end of file
diff --git a/components/SideBar.vue b/components/SideBar.vue
index 7267487..50de1ac 100644
--- a/components/SideBar.vue
+++ b/components/SideBar.vue
@@ -23,7 +23,8 @@
+
+
diff --git a/composables/usePermissions.ts b/composables/usePermissions.ts
index 5a3d1c5..017ba90 100644
--- a/composables/usePermissions.ts
+++ b/composables/usePermissions.ts
@@ -1,3 +1,4 @@
+// /composables/usePermissions.ts
export const usePermission = () => {
/**
* Extract group and role from path
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d99bfd7..68aaae9 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,7 +3,13 @@ import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
export default defineNuxtConfig({
compatibilityDate: '2025-05-15',
- devtools: { enabled: true },
+ devtools: {
+ enabled: true,
+
+ timeline: {
+ enabled: true
+ }
+ },
modules: [
'@nuxt/content',
diff --git a/package-lock.json b/package-lock.json
index fe9e74d..7ba369f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
"vue-router": "^4.5.1"
},
"devDependencies": {
+ "@types/node": "^24.7.2",
"sass-embedded": "^1.89.2",
"vite-plugin-vuetify": "^2.1.2",
"vuetify": "^3.9.3"
@@ -5123,6 +5124,16 @@
"integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
"license": "MIT"
},
+ "node_modules/@types/node": {
+ "version": "24.7.2",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-24.7.2.tgz",
+ "integrity": "sha512-/NbVmcGTP+lj5oa4yiYxxeBjRivKQ5Ns1eSZeB99ExsEQ6rX5XYU1Zy/gGxY/ilqtD4Etx9mKyrPxZRetiahhA==",
+ "devOptional": true,
+ "license": "MIT",
+ "dependencies": {
+ "undici-types": "~7.14.0"
+ }
+ },
"node_modules/@types/parse-path": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/@types/parse-path/-/parse-path-7.0.3.tgz",
@@ -16590,6 +16601,13 @@
"node": ">=20.18.1"
}
},
+ "node_modules/undici-types": {
+ "version": "7.14.0",
+ "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.14.0.tgz",
+ "integrity": "sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA==",
+ "devOptional": true,
+ "license": "MIT"
+ },
"node_modules/unenv": {
"version": "2.0.0-rc.21",
"resolved": "https://registry.npmjs.org/unenv/-/unenv-2.0.0-rc.21.tgz",
diff --git a/package.json b/package.json
index 8c90f8a..e6b1b59 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,9 @@
"type": "module",
"scripts": {
"build": "nuxt build",
- "dev": "nuxt dev",
+ "_command_dev": "nuxt dev -o --host --port 3001",
+ "_command_dev2": "nuxt dev -o --port 3001",
+ "dev": "nuxt dev -o --port 3001",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
@@ -34,6 +36,7 @@
"vue-router": "^4.5.1"
},
"devDependencies": {
+ "@types/node": "^24.7.2",
"sass-embedded": "^1.89.2",
"vite-plugin-vuetify": "^2.1.2",
"vuetify": "^3.9.3"
diff --git a/pages/CheckInPasien/checkIn.vue b/pages/CheckInPasien/checkIn.vue
new file mode 100644
index 0000000..6d681fc
--- /dev/null
+++ b/pages/CheckInPasien/checkIn.vue
@@ -0,0 +1,1068 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Kembali
+
+
+
+
+
+ Batal
+
+
+
+
+ Check-in
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/Dashboard.vue b/pages/Dashboard.vue
index b0ab2cd..cb53a67 100644
--- a/pages/Dashboard.vue
+++ b/pages/Dashboard.vue
@@ -1,114 +1,155 @@
-
-
-
-
-
-
- mdi-account-plus
- Pendaftaran Akun Baru
+
+ mdi-account-plus Pendaftaran Akun Baru
-
+
mdi-information
+
- mdi-numeric-1-circle
-
+ mdi-numeric-1-circle
Hubungi Administrator IT Rumah Sakit
-
+
- mdi-numeric-2-circle
-
+ mdi-numeric-2-circle
Siapkan dokumen identitas dan surat penugasan
-
+
- mdi-numeric-3-circle
-
+ mdi-numeric-3-circle
Tunggu proses verifikasi dan aktivasi akun
-
+
mdi-phone
Hubungi Admin
@@ -282,24 +192,20 @@
-
-
- mdi-account-tie
- Kontak Administrator
+
+ mdi-account-tie Kontak Administrator
-
+
mdi-phone-settings
+
+
+
+
-
+
+
+ {{ user?.id?.substring(0, 10) }}...
+
+
-
+
+
+
+
+ mdi-check
+
+ {{ user?.name || user?.preferred_username || 'User' }} -
+
+
- {{ user?.email || 'No email' }} -
- ID: {{ user?.id?.substring(0, 8) }}...
-
+
+
+
+
+ mdi-bell-outline
+
+
+ Notifikasi
+
+
+
+
+
+
+ mdi-help-circle-outline
+
+
+ Bantuan & Dukungan
+
+
+
+
+
+
+
+ mdi-qrcode-scan
+ Scan QR
+
+
+ mdi-keyboard
+ Manual
+
+
+ mdi-qrcode
+ Generate QR
+
+
+
+
+
+
+
+
+
+ Check-in Pasien
+Sistem Antrean Rumah Sakit
+
+
+ mdi-camera
+ Simulasi Scan QR
+
+
+
+
+
+ mdi-information-outline
+
+
+
+ + Arahkan Kamera ke QR Code +
++ Pastikan QR code terlihat jelas dan tidak terpotong +
+
+
+
+
+
+
+ mdi-qrcode-scan
+
+
+
+
+ mdi-lightbulb-outline
+
+ Tips: Pastikan pencahayaan cukup untuk hasil scan optimal
+
+
+
+
+
+
+
+ {{ manualInput ? 'mdi-check-circle' : 'mdi-circle-outline' }}
+
+
+
+
+
+ mdi-login
+ Check-in Sekarang
+
+
+
+
+
+
+ mdi-form-textbox
+
+
+ + Input Manual +
++ Masukkan nomor antrean atau ID pasien +
+
+
+
+
+ mdi-history
+ Riwayat
+
+
+
+
+ mdi-help-circle
+ Bantuan
+
+
+
+
+ Akses Cepat
+
+
+
+ mdi-qrcode-plus
+ Generate QR Code
+
+
+
+
+
+
+ mdi-qrcode
+
+
+
+ + Generate QR Code untuk Testing +
++ Buat QR code yang bisa Anda scan di tab "Scan QR" +
+
+
+
+
+
+
+
+ mdi-information
+
+ Cara menggunakan:
+
+
+
+
+ {{ generateStatus === 'ALLOWED' ? 'mdi-check' : 'mdi-clock-alert' }}
+ {{ generateStatus === 'ALLOWED' ? 'Diizinkan Check-in' : 'Belum Diizinkan' }}
+
+
+
+
+
+ mdi-download
+ Download
+
+
+
+
+ mdi-share-variant
+ Share
+
+
+
+
+ QR Code Anda:
+ + ++ Data: {{ generatedQRData }} +
+ + +-
+
- Klik "Download" atau "Share" untuk menyimpan/mengirim QR ke HP Anda +
- Buka QR code di HP Anda +
- Pindah ke tab "Scan QR" dan scan QR code tersebut +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ infoAction === 'checkin' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
+
+
+ + {{ infoAction === 'checkin' ? 'Siap Check-in!' : 'Belum Diizinkan' }} +
+ +
+
+
+ {{ infoAction === 'checkin' ? 'mdi-check' : 'mdi-clock-alert' }}
+
+ {{ infoAction === 'checkin' ? 'Diizinkan' : 'Menunggu' }}
+
+
+
+
+ {{ snackbar.icon }}
+
+
+
+
+ {{ snackbar.title }}
+ {{ snackbar.message }}
+
+
+
+
-
+
-
+
+
-
+
+
-
+
+
-
+
-
+
+
-
-
- Grafik Jumlah Antrean
-
- Hari
- Minggu
- Bulan
- Tahun
+
+
+ Registration Trend
+
+ Day
+
-
+
-
-
- Monthly Visitor Data
+
+
+ Total Registrasi Perbulan
2024
2025
-
+
@@ -117,35 +158,35 @@
-
- Realtime Ticket Queue
-
+
+ Realtime Check-in Velocity
+
-
- Registrant Breakdown
-
+
+ Registrant Type Breakdown
+
-
-
+
@@ -174,6 +215,7 @@ import {
LineElement,
} from 'chart.js';
+// Ensure this middleware setup is correct for your framework (e.g., Nuxt)
definePageMeta({
middleware:['auth']
})
@@ -181,54 +223,59 @@ definePageMeta({
// Register necessary Chart.js elements
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ArcElement, PointElement, LineElement);
-// Use the auth composable
+// --- KEYCLOAK/AUTH INTEGRATION ---
const { user, isLoading, checkAuth, logout } = useAuth()
+const navigateTo = (path) => { console.log('Navigating to', path); };
+// ---------------------------------
+
+// --- EXPORT STATE ---
+const exportType = ref('JSON');
+const exportOptions = ref([
+ { title: 'JSON (.json)', type: 'json', icon: 'mdi-code-json' },
+ { title: 'CSV (.csv)', type: 'csv', icon: 'mdi-file-delimited' },
+ { title: 'Excel (.xlsx) - Server Only', type: 'excel', icon: 'mdi-file-excel' },
+ { title: 'PDF (.pdf) - Placeholder', type: 'pdf', icon: 'mdi-file-pdf' },
+]);
+// --------------------
+
const isLoggingOut = ref(false)
-// Dashboard data
+// Dashboard state
const currentDate = ref('');
const activeYear = ref('2025');
-const queueTimePeriod = ref('month');
+const queueTimePeriod = ref('day');
-// --- MOCK DATA DINAMIS ANTREEAN (Tetap) ---
+// --- MOCK DATA FOR CHARTS ---
const mockQueueData = ref([
- // ... (data tetap sama)
- { date: '2025-09-22', count: 120 },
- { date: '2025-09-23', count: 150 },
- { date: '2025-09-24', count: 135 },
- { date: '2025-09-25', count: 160 },
- { date: '2025-09-26', count: 145 },
- { date: '2025-09-27', count: 170 },
- { date: '2025-09-28', count: 180 },
- { date: '2025-08-10', count: 300 },
- { date: '2025-08-20', count: 350 },
- { date: '2025-09-01', count: 400 },
- { date: '2025-09-15', count: 450 },
- { date: '2024-01-01', count: 1200 },
- { date: '2024-06-01', count: 1800 },
- { date: '2025-01-01', count: 2000 },
- { date: '2025-06-01', count: 2500 },
+ { date: '2025-10-13', registrants: 300, attendees: 250 },
+ { date: '2025-10-14', registrants: 450, attendees: 400 },
+ { date: '2025-10-15', registrants: 500, attendees: 420 },
+ { date: '2025-10-16', registrants: 400, attendees: 350 },
+ { date: '2025-10-17', registrants: 550, attendees: 500 },
+ { date: '2025-10-18', registrants: 435, attendees: 380 },
]);
-// --- AKHIR MOCK DATA ANTREEAN ---
-// --- REFACTORED REALTIME LOGIC ---
-const realtimeChart = ref(null); // Ref untuk mengakses komponen Line
+// --- REALTIME CHART LOGIC ---
+const realtimeChart = ref(null);
const maxDataPoints = 10;
let realtimeInterval = null;
-// Initial data structure (non-reactive for update function)
const initialLineData = {
labels: Array.from({ length: maxDataPoints }, (_, i) =>
- dayjs().subtract((maxDataPoints - 1 - i) * 5, 'second').format('HH:mm:ss')
+ dayjs().subtract((maxDataPoints - 1 - i) * 10, 'second').format('HH:mm:ss')
),
datasets: [
{
- label: 'Tickets Processed',
- backgroundColor: '#FF5722',
- borderColor: '#FF5722',
- data: Array.from({ length: maxDataPoints }, () => Math.floor(Math.random() * 50) + 100),
- fill: false,
- tension: 0.1,
+ label: 'Check-ins/min',
+ backgroundColor: 'rgba(74, 95, 122, 0.15)',
+ borderColor: '#5FB7FF',
+ data: Array.from({ length: maxDataPoints }, () => Math.floor(Math.random() * 20) + 40),
+ fill: true,
+ tension: 0.3,
+ borderWidth: 3,
+ pointRadius: 4,
+ pointHoverRadius: 6,
+ pointBackgroundColor: '#4A5F7A',
},
],
};
@@ -236,9 +283,7 @@ const initialLineData = {
const lineOptions = ref({
responsive: true,
maintainAspectRatio: false,
- animation: {
- duration: 0 // Crucial: Disable animation for smooth realtime scrolling
- },
+ animation: { duration: 0 },
plugins: {
legend: { display: true },
title: { display: false }
@@ -246,9 +291,9 @@ const lineOptions = ref({
scales: {
y: {
beginAtZero: true,
- suggestedMax: 200,
- title: { display: true, text: 'Count' },
- grid: { display: true }
+ suggestedMax: 80,
+ title: { display: true, text: 'Check-ins per Minute' },
+ grid: { color: 'rgba(0, 0, 0, 0.05)' }
},
x: {
title: { display: true, text: 'Time (HH:MM:SS)' },
@@ -257,49 +302,28 @@ const lineOptions = ref({
}
});
-// Function to simulate realtime data update using chart.update()
const updateRealtimeData = () => {
const chart = realtimeChart.value?.chart;
if (!chart) return;
-
- // 1. Get the current data arrays
const dataArray = chart.data.datasets[0].data;
const labelArray = chart.data.labels;
-
- // 2. Shift (remove) the oldest data point and label
dataArray.shift();
labelArray.shift();
-
- // 3. Generate new data point and time label
- const newDataPoint = Math.floor(Math.random() * 50) + 100;
+ const newDataPoint = Math.floor(Math.random() * 20) + 40;
const newTimeLabel = dayjs().format('HH:mm:ss');
-
- // 4. Push the new data and label
dataArray.push(newDataPoint);
labelArray.push(newTimeLabel);
-
- // 5. CRUCIAL: Tell Chart.js to redraw itself without destroying the instance
chart.update();
};
-// --- END REFACTORED REALTIME LOGIC ---
+// --- END REALTIME CHART LOGIC ---
-
-// Example data for both years (Tetap)
-const visitorData2024 = [150, 200, 350, 400, 380, 500, 550, 600, 520, 480, 650, 700];
-const visitorData2025 = [200, 250, 400, 450, 420, 550, 600, 650, 570, 520, 700, 750];
-
-// Check authentication and setup on page load
onMounted(async () => {
try {
const sessionUser = await checkAuth()
if (sessionUser) {
- // Set current date
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
currentDate.value = new Date().toLocaleDateString('id-ID', options);
-
- // Start realtime data update interval
- // Pastikan chart instance sudah siap sebelum memulai interval
- realtimeInterval = setInterval(updateRealtimeData, 5000);
+ realtimeInterval = setInterval(updateRealtimeData, 10000);
} else {
await navigateTo('/LoginPage');
}
@@ -309,34 +333,86 @@ onMounted(async () => {
}
});
-// Clear the interval when the component is unmounted
onUnmounted(() => {
if (realtimeInterval) {
clearInterval(realtimeInterval);
}
});
-// Updated logout handler (Tetap)
-const handleLogout = async () => {
- if (isLoggingOut.value) return
-
- try {
- isLoggingOut.value = true
- console.log('🚪 Dashboard logout initiated...')
- await logout()
- } catch (error) {
- console.error('❌ Dashboard logout error:', error)
- } finally {
- isLoggingOut.value = false
- }
-};
-
-// Function to change the active year (Tetap)
const changeYear = (year) => {
activeYear.value = year;
};
-// --- LOGIKA UTAMA UNTUK GRAFIK ANTREEAN (Tetap) ---
+// --- DATA UTILITY FUNCTIONS ---
+const getKpiData = () => {
+ return [
+ { name: 'Antrean Online', value: 150 },
+ { name: 'Antrean MJKN', value: 100 },
+ { name: 'Total Kunjungan', value: 500 },
+ { name: 'Avg. Check-in Time', value: '7.5s' },
+ ];
+};
+
+const convertJsonToCsv = (jsonData, fields) => {
+ if (!jsonData.length) return '';
+
+ const header = fields.join(',');
+
+ const csv = jsonData.map(row =>
+ fields.map(fieldName => {
+ let value = row[fieldName];
+ if (typeof value === 'string') {
+ value = `"${value.replace(/"/g, '""')}"`;
+ }
+ return value;
+ }).join(',')
+ ).join('\n');
+
+ return header + '\n' + csv;
+};
+// --- END DATA UTILITY FUNCTIONS ---
+
+// --- EXPORT FUNCTION HANDLER ---
+const downloadFile = (data, filename, mimeType) => {
+ const dataStr = `data:${mimeType};charset=utf-8,` + encodeURIComponent(data);
+ const downloadAnchorNode = document.createElement('a');
+ downloadAnchorNode.setAttribute("href", dataStr);
+ downloadAnchorNode.setAttribute("download", filename);
+ document.body.appendChild(downloadAnchorNode);
+ downloadAnchorNode.click();
+ downloadAnchorNode.remove();
+}
+
+const handleExport = (type) => {
+ exportType.value = type.toUpperCase();
+ const filenamePrefix = "antrean_data_" + dayjs().format('YYYYMMDD');
+
+ const dataToExport = mockQueueData.value;
+
+ if (type === 'json') {
+ downloadFile(JSON.stringify(dataToExport, null, 2), `${filenamePrefix}.json`, 'application/json');
+ alert("Data Antrean berhasil diexport sebagai JSON! ✅");
+
+ } else if (type === 'csv') {
+ const fields = ['date', 'registrants', 'attendees'];
+ const csvContent = convertJsonToCsv(dataToExport, fields);
+
+ const kpiData = getKpiData().map(kpi => `# ${kpi.name}: ${kpi.value}`).join('\n');
+ const finalCsvContent = kpiData + '\n' + csvContent;
+
+ downloadFile(finalCsvContent, `${filenamePrefix}.csv`, 'text/csv');
+ alert("Data Antrean berhasil diexport sebagai CSV! 📊");
+
+ } else if (type === 'excel') {
+ alert("Excel (.xlsx) export requires a dedicated server endpoint. Simulating download... ⚠️");
+
+ } else if (type === 'pdf') {
+ alert("PDF (.pdf) export requires client-side libraries (like jsPDF) or a server service. Simulating download... 📝");
+ }
+};
+// --- END EXPORT FUNCTION HANDLER ---
+
+// --- CHART DATA LOGIC ---
const processQueueData = (data, period) => {
const grouped = {};
const sortedDates = data.map(item => ({
@@ -347,37 +423,49 @@ const processQueueData = (data, period) => {
sortedDates.forEach(item => {
let key;
let label;
-
if (period === 'day') {
key = item.date.format('YYYY-MM-DD');
- label = item.date.format('DD/MM');
+ label = item.date.format('ddd, DD/MM');
} else if (period === 'week') {
key = item.date.format('YYYY-WW');
- label = `Wk ${item.date.week()} ${item.date.year()}`;
+ label = `Wk ${item.date.week()}`;
} else if (period === 'month') {
key = item.date.format('YYYY-MM');
label = item.date.format('MMM YYYY');
- } else if (period === 'year') {
- key = item.date.format('YYYY');
- label = item.date.format('YYYY');
}
-
if (!grouped[key]) {
- grouped[key] = { label: label, count: 0 };
+ grouped[key] = { label: label, registrants: 0, attendees: 0 };
}
- grouped[key].count += item.count;
+ grouped[key].registrants += item.registrants;
+ grouped[key].attendees += item.attendees;
});
const finalLabels = Object.values(grouped).map(g => g.label);
- const finalCounts = Object.values(grouped).map(g => g.count);
+ const finalRegistrants = Object.values(grouped).map(g => g.registrants);
+ const finalAttendees = Object.values(grouped).map(g => g.attendees);
return {
labels: finalLabels,
datasets: [
{
- label: `Total Antrean per ${period}`,
- backgroundColor: '#FFB300',
- data: finalCounts,
+ label: `Registrants`,
+ backgroundColor: '#FFB95F',
+ data: finalRegistrants,
+ yAxisID: 'y1',
+ type: 'bar',
+ borderRadius: 6,
+ },
+ {
+ label: `Attendees`,
+ backgroundColor: 'transparent',
+ borderColor: '#5FB7FF',
+ data: finalAttendees,
+ yAxisID: 'y1',
+ type: 'line',
+ pointRadius: 5,
+ pointBackgroundColor: '#4A5F7A',
+ tension: 0.4,
+ borderWidth: 3,
},
],
};
@@ -392,66 +480,94 @@ const queueChartOptions = ref({
responsive: true,
maintainAspectRatio: false,
plugins: {
- legend: { display: true },
+ legend: { display: true, position: 'top' },
},
scales: {
- y: {
+ y1: {
beginAtZero: true,
- grid: { display: true }
+ title: { display: true, text: 'Count' },
+ grid: { display: true, color: 'rgba(0, 0, 0, 0.05)' }
},
x: {
grid: { display: false }
}
}
});
-// --- AKHIR LOGIKA GRAFIK ANTREEAN ---
+const visitorData2024 = [150, 200, 350, 400, 380, 500, 550, 600, 520, 480, 650, 700];
+const visitorData2025 = [200, 250, 400, 450, 420, 550, 600, 650, 570, 520, 700, 750];
+const conversionRate2025 = [2.5, 3.1, 4.0, 4.5, 4.2, 5.5, 6.0, 5.8, 5.7, 5.2, 6.5, 7.5];
-// Computed property Monthly Visitor (Tetap)
const barData = computed(() => {
const dataForYear = activeYear.value === '2024' ? visitorData2024 : visitorData2025;
+ const conversionData = activeYear.value === '2024' ? [2.0, 2.5, 3.5, 3.8, 3.6, 4.5, 5.0, 5.2, 4.8, 4.5, 5.5, 6.0] : conversionRate2025;
+
return {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
datasets: [
{
- label: `Total Visitors ${activeYear.value}`,
- backgroundColor: '#2196F3',
+ label: `Total Registrants`,
+ backgroundColor: '#FFB95F',
data: dataForYear,
+ yAxisID: 'y1',
+ type: 'bar',
+ borderRadius: 6,
},
+ {
+ label: `Conv. Rate (%)`,
+ borderColor: '#5FB7FF',
+ backgroundColor: 'transparent',
+ data: conversionData,
+ yAxisID: 'y2',
+ type: 'line',
+ pointRadius: 5,
+ pointBackgroundColor: '#4A5F7A',
+ tension: 0.4,
+ borderWidth: 3,
+ }
],
};
});
-// Bar chart options (Tetap)
const barOptions = ref({
responsive: true,
maintainAspectRatio: false,
plugins: {
- legend: { display: false },
+ legend: { display: true, position: 'top' },
},
scales: {
- y: {
+ y1: {
+ position: 'left',
beginAtZero: true,
+ title: { display: true, text: 'Registrants' },
grid: { display: false }
},
+ y2: {
+ position: 'right',
+ beginAtZero: true,
+ suggestedMax: 10,
+ title: { display: true, text: 'Conv. Rate (%)' },
+ grid: { drawOnChartArea: false }
+ },
x: {
grid: { display: false }
}
}
});
-// Pie chart data (Tetap)
const pieData = ref({
labels: ['Offline Registrants', 'Online Registrants'],
datasets: [
{
- backgroundColor: ['#2196F3', '#4CAF50'],
+ backgroundColor: ['#5FB7FF', '#FFB95F'],
+ hoverBackgroundColor: ['#1B98FF ', '#FF9B1B'],
data: [759, 1876],
+ borderWidth: 3,
+ borderColor: '#ffffff',
},
],
});
-// Pie chart options (Tetap)
const pieOptions = ref({
responsive: true,
maintainAspectRatio: false,
@@ -461,7 +577,9 @@ const pieOptions = ref({
label: function(context) {
const label = context.label || '';
const value = context.parsed || 0;
- return `${label}: ${value}`;
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
+ const percentage = ((value / total) * 100).toFixed(1);
+ return `${label}: ${value} (${percentage}%)`;
}
}
}
@@ -470,9 +588,89 @@ const pieOptions = ref({
\ No newline at end of file
diff --git a/pages/LoginPage.vue b/pages/LoginPage.vue
index ef7c1eb..2a7d129 100644
--- a/pages/LoginPage.vue
+++ b/pages/LoginPage.vue
@@ -1,78 +1,6 @@
-
-
-
-
-
- mdi-hospital-building
- ANTREAN RSSA
-
-
-
-
-
- Tentang
- mdi-chevron-down
-
-
-
-
-
- mdi-hospital-building
- Profil Rumah Sakit
-
-
-
-
-
-
-
- Kontak
- mdi-chevron-down
-
-
-
-
-
- mdi-phone
- Hubungi Kami
-
-
- mdi-map-marker
- Alamat & Lokasi
-
-
- mdi-email
- Email
-
-
- mdi-help-circle
- Bantuan
-
-
-
-
-
- mdi-menu
-
-
-
-
@@ -92,18 +20,16 @@
mdi-bandage
-
-
Dashboard
-- Selamat Datang, {{ user.name || user.preferred_username }}! +
+ Antrean Dashboard +
++ Selamat Datang, + + {{ user.name || user.preferred_username }} + ! 🍊
-
-
+
+
+ mdi-menu-down
+
+
+
+
+
+
+
+
+
+
+
+
- mdi-account-group
+ mdi-tablet-dashboard
-
2635
- Total Visitors
+ 150
+ Total Antrean Online
- mdi-account-multiple-plus
+ mdi-account-hard-hat
-
759
- Offline Registrants
+ 100
+ Total Antrean MJKN
- mdi-account-multiple-plus-outline
+ mdi-account-group
-
1876
- Online Registrants
+ 500
+ Total Kunjungan
- mdi-ticket
+ mdi-timer-sand
-
248
- Total Tickets Printed
+ 7.5s
+ Avg. Check-in Time
Loading dashboard...
+Loading dashboard...
Sistem Terbaik
@@ -119,26 +45,22 @@
-
-
{{ errorMessage }}
@@ -147,12 +69,10 @@
{{ successMessage }}
-
-
mdi-arrow-right
-
-
SELAMAT DATANG KEMBALI
MASUK UNTUK MELANJUTKAN
- Antrean RSSA
+ Antrean RSSA
-
Login menggunakan Single Sign-On
@@ -193,8 +112,7 @@
Hubungi Administrator
@@ -202,7 +120,6 @@
Masalah dengan kata sandi Anda?
@@ -213,53 +130,47 @@
- mdi-information
-
-
+ Untuk mendaftar akun baru pada sistem Antrean RSSA, silakan ikuti langkah berikut:
- +
- mdi-phone-settings
-
-
+
Catatan: Pendaftaran akun memerlukan verifikasi dokumen dan dapat memakan waktu 1-2 hari kerja.
+
+ mdi-heart-pulse
+ Monitoring Pasien
+
+ mdi-account-tie
+ Admin
+
+
+
+
+
+
+
+ mdi-account-details
+ Informasi Pasien
+
+
+ Kembali
+
+
+
+
+
+ mdi-account-circle
+
+
+
+ Nama Pasien
+ {{ patient.name }}
+
+ mdi-numeric
+
+
+ {{ patient.rm_number }}
+
+ Nomor Rekam Medis
+
+ mdi-calendar
+
+
+
+ Tanggal Lahir
+ {{ patient.dob }}
+
+ mdi-phone
+
+
+
+ No Telepon
+ {{ patient.phone }}
+
+ mdi-map-marker
+
+
+
+ Alamat
+ {{ patient.address }}
+ Tiket Pelayanan Aktif
+ +Pasien ini tidak memiliki tiket pelayanan aktif saat ini.
+
+
+
+
+
+
+
+
+
+ Pengaturan Akun
+Kelola keamanan, privasi, dan preferensi akun Anda
+
+
+
+
+
+
+ Password & Autentikasi
+
+
+
+
+
+
+ Ubah Password
+
+
+
+
+ Password
+
+ Terakhir diubah: 2 bulan yang lalu
+
+
+
+
+
+
+
+
+
+ {{ settings.twoFactorEnabled ? 'Aktif' : 'Nonaktif' }}
+
+
+ Autentikasi Dua Faktor (2FA)
+
+ Tambahkan lapisan keamanan ekstra ke akun Anda
+
+
+
+
+
+
+ Lihat Detail
+
+
+
+
+ Riwayat Login
+
+ Lihat semua aktivitas login akun Anda
+
+
+
+
+
+
+
+ Sesi Aktif
+
+
+
+
+
+
+
+
+
+ Sesi Ini
+
+
+ {{ session.device }}
+
+ {{ session.location }} • {{ session.lastActive }}
+
+
+
+
+
+
+
+ Preferensi Notifikasi
+
+
+
+ Notifikasi Sistem
+ +
+
+
+
+
+
+
+
+
+
+ Email Notifikasi
+ Terima pemberitahuan penting via email
+
+
+
+
+
+
+
+
+
+
+ Push Notifikasi
+ Notifikasi langsung di perangkat
+
+
+
+
+
+
+
+
+
+ SMS Notifikasi
+ Terima kode verifikasi via SMS
+
+
+ Notifikasi Marketing
+ +
+
+
+
+
+
+
+
+
+
+ Promosi & Penawaran
+ Dapatkan info promo eksklusif
+
+
+
+
+
+
+
+
+
+ Newsletter
+ Update bulanan dan artikel
+
+
+
+
+
+
+ Pengaturan Privasi
+
+
+
+
+
+
+
+
+
+
+ Profil Publik
+
+ Tampilkan profil Anda di hasil pencarian
+
+
+
+
+
+
+
+
+
+
+
+ Tampilkan Email
+
+ Perlihatkan alamat email di profil publik
+
+
+
+
+
+
+
+
+
+
+
+ Status Online
+
+ Tampilkan status online kepada pengguna lain
+
+
+
+
+
+
+
+
+
+
+ Data Analytics
+
+ Izinkan pengumpulan data untuk meningkatkan layanan
+
+
+
+
+
+
+
+ Danger Zone
+
+ Tindakan di area ini bersifat sensitif dan dapat berdampak permanen pada akun Anda.
+
+
+
+
+
+
+ Nonaktifkan
+
+
+
+
+
+
+
+ Nonaktifkan Akun
+
+ Akun Anda akan disembunyikan dan dapat diaktifkan kembali kapan saja
+
+
+
+
+
+ Hapus Permanen
+
+
+
+
+
+
+
+ Hapus Akun Permanen
+
+ Semua data Anda akan dihapus secara permanen dan tidak dapat dipulihkan
+
+
+
+ Ubah Password
+
+
+
+
+ mdi-lock
+
+
+
+
+
+
+
+ mdi-lock-plus
+
+
+
+
+
+
+
+ mdi-lock-check
+
+
+
+
+
+ Riwayat Login
+
+
+
+
+ {{ login.success ? 'Berhasil' : 'Gagal' }}
+
+
+ {{ login.device }}
+
+ mdi-map-marker {{ login.location }}
+
+
+ mdi-clock {{ login.date }}
+
+
+
+ mdi-alert-circle
+
+ {{ confirmDialogTitle }}
+
+ {{ confirmDialogMessage }}
+
+
+ {{ snackbarColor === 'success' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
+
+ {{ snackbarMessage }}
+
+
+
+
+
+
+
+
+ mdi-account-circle
+
+
+
+ Profil Saya
+Kelola informasi profil dan pengaturan akun Anda
+
+
+ Akun Terverifikasi
+
+
+
+
+
+
+
+
+ mdi-camera
+
+
+
+ {{ profileData.name }}
+@{{ profileData.username }}
+{{ profileData.email }}
+ +
+
+
+ mdi-identifier
+ ID: {{ profileData.id }}
+
+
+ mdi-calendar-check
+ Bergabung: {{ profileData.joinDate }}
+
+
+ mdi-clock-outline
+ Login: {{ profileData.lastLogin }}
+
+
+ mdi-lock-reset
+ Ubah Password
+
+
+ mdi-devices
+ Perangkat Aktif
+
+ {{ session.location }}
+
+ mdi-clock-outline
+ {{ session.lastActive }}
+
+
+ mdi-camera
+ Ubah Foto Profil
+
+
+ {{ snackbarIcon }}
+ {{ snackbarMessage }}
+
+
+
- mdi-shield-account-outline
-
- Verifikasi Akun Pasien
+
+ mdi-shield-check
+
+
+
Verifikasi Akun
+Manajemen Pasien Digital
+
+ mdi-qrcode-scan
+
+ RM: {{ selectedPatient.rm }}
+
+
- Aktivasi Akun
+{{ selectedPatient.nama }}
+
- mdi-cellphone-check
-
+
- Reload
+ Reload QR
Selesai
-
- Batal
+
+
+ Batal
+
@@ -202,9 +241,12 @@
PINDAI UNTUK VERIFIKASI
+
+
+
- Pindai QR Code
+Arahkan kamera smartphone ke QR code
-
+