diff --git a/assets/scss/main.scss b/assets/scss/main.scss index e1b27fc..06cef8d 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1,7 +1,7 @@ // Gunakan @use daripada @import -@use './variables' as *; -@use './colors' as *; -@use './typography' as *; +@use "./variables" as *; +@use "./colors" as *; +@use "./typography" as *; // Global styles *, @@ -19,7 +19,9 @@ body { padding: 0; background-color: var(--color-background); color: var(--color-textPrimary); - transition: background-color 0.3s ease, color 0.3s ease; + transition: + background-color 0.3s ease, + color 0.3s ease; } // Selection color @@ -68,4 +70,4 @@ button { opacity: 0.5; cursor: not-allowed; } -} \ No newline at end of file +} diff --git a/nuxt.config.ts b/nuxt.config.ts index fb6da14..46186a2 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -17,7 +17,7 @@ export default defineNuxtConfig({ { name: 'apple-mobile-web-app-capable', content: 'yes' }, { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' } ] - } + }, }, modules: [// "@nuxt/content", diff --git a/pages/AdminKlinikRuang/index.vue b/pages/AdminKlinikRuang/index.vue index 03ded0d..e0eec8c 100644 --- a/pages/AdminKlinikRuang/index.vue +++ b/pages/AdminKlinikRuang/index.vue @@ -156,10 +156,10 @@ onMounted(async () => { .klinik-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - gap: 24px; - max-width: 1400px; - margin: 0 auto; + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + gap: 20px; + width: 100%; + margin: 0; } .klinik-card { diff --git a/pages/AdminLoket/index.vue b/pages/AdminLoket/index.vue index 05d2450..966f842 100644 --- a/pages/AdminLoket/index.vue +++ b/pages/AdminLoket/index.vue @@ -160,10 +160,10 @@ const navigateToLoket = (id) => { .loket-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - gap: 24px; - max-width: 1400px; - margin: 0 auto; + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + gap: 20px; + width: 100%; + margin: 0; } .loket-card { diff --git a/pages/Anjungan/Anjungan/[id].vue b/pages/Anjungan/Anjungan/[id].vue index 50597de..02bf8d1 100644 --- a/pages/Anjungan/Anjungan/[id].vue +++ b/pages/Anjungan/Anjungan/[id].vue @@ -743,7 +743,12 @@ const prefetchDoctorsForCurrentAnjungan = async () => { `🔄 Prefetching doctors for ${clinicsForAnjungan.length} klinik (${anjunganData.value.jenisPasien})` ); - await Promise.all(clinicsForAnjungan.map((clinic) => loadDoctorsForClinic(clinic))); + // Fetch doctors sequentially to avoid overwhelming the server + for (const clinic of clinicsForAnjungan) { + await loadDoctorsForClinic(clinic); + // Tiny delay between requests + await new Promise(resolve => setTimeout(resolve, 30)); + } console.log("✅ Prefetch complete. Doctors by klinik ID:", doctorsByKlinikId.value); }; diff --git a/pages/Anjungan/AntreanMasuk/index.vue b/pages/Anjungan/AntreanMasuk/index.vue index fc7bf06..e326b13 100644 --- a/pages/Anjungan/AntreanMasuk/index.vue +++ b/pages/Anjungan/AntreanMasuk/index.vue @@ -217,10 +217,10 @@ const navigateToSettings = () => { .screens-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - gap: 24px; - max-width: 1400px; - margin: 0 auto; + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + gap: 20px; + width: 100%; + margin: 0; } .screen-card { diff --git a/pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue b/pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue index 1153396..d251db7 100644 --- a/pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue +++ b/pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue @@ -640,7 +640,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => { background: var(--color-neutral-300); width: 100vw; height: 100dvh; - padding: 24px; + padding: 12px; font-family: 'Inter', 'Roboto', sans-serif; overflow: hidden; display: flex; @@ -655,8 +655,8 @@ watch(anjunganClientId, (newClientId, oldClientId) => { align-items: center; background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%); border-radius: 16px; - padding: 16px 40px; - margin-bottom: 16px; + padding: 12px 32px; + margin-bottom: 12px; box-shadow: 0 8px 24px rgba(33, 150, 243, 0.3); flex-shrink: 0; } @@ -730,7 +730,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => { background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%); border-radius: 20px; padding: 24px 32px; - margin-bottom: 16px; + margin-bottom: 12px; text-align: center; box-shadow: 0 12px 32px rgba(33, 150, 243, 0.35); animation: pulse-highlight 2s ease-in-out infinite; diff --git a/pages/Anjungan/AntrianKlinikRuang/index.vue b/pages/Anjungan/AntrianKlinikRuang/index.vue index 3b60ad7..3e3b814 100644 --- a/pages/Anjungan/AntrianKlinikRuang/index.vue +++ b/pages/Anjungan/AntrianKlinikRuang/index.vue @@ -241,11 +241,10 @@ onMounted(async () => { .kliniks-grid { display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 24px; - max-width: 1400px; - margin: 0 auto; + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + gap: 20px; width: 100%; + margin: 0; } @media (max-width: 1280px) { diff --git a/pages/Anjungan/AntrianLoket/index.vue b/pages/Anjungan/AntrianLoket/index.vue index e205299..ab9ac8d 100644 --- a/pages/Anjungan/AntrianLoket/index.vue +++ b/pages/Anjungan/AntrianLoket/index.vue @@ -252,11 +252,10 @@ const getKlinikName = (kode, loket = null) => { .lokets-grid { display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 24px; - max-width: 1400px; - margin: 0 auto; + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + gap: 20px; width: 100%; + margin: 0; } @media (max-width: 1280px) { diff --git a/pages/Dashboard.vue b/pages/Dashboard.vue index 421165c..dd0218e 100644 --- a/pages/Dashboard.vue +++ b/pages/Dashboard.vue @@ -114,7 +114,7 @@