Frontend Overview
Arsitektur frontend Next.js 16 App Router, struktur direktori src/, dan sistem desain token tiga lapis.
package.json, src/app/layout.tsx, src/app/globals.css, DESIGN.mdTests: tests/unit/pwaPolicy.test.ts, tests/unit/uiDesignPolicy.test.tsFrontend Architecture & Design System Overview#
Frontend OrthoBreath dibangun menggunakan Next.js 16 (App Router) dengan React 19, Tailwind CSS, dan Three.js, dirancang dengan standar antarmuka medis (Clinical Decision Support System / CDSS) yang mengutamakan kecepatan navigasi, presisi visual, responsivitas tablet perawat, dan aksesibilitas WCAG 2.1 AA.
1. Arsitektur Frontend Next.js 16 & Server Components#
- Server Components by Default: Seluruh halaman publik (
/,/cara-kerja,/edukasi,/tentang,/faq,/kontak,/docs) dirender di sisi server untuk waktu muat awal (First Contentful Paint) di bawah 0.8 detik serta pengoptimalan SEO otomatis. - Client Components Islands (
*Client.tsx): Ditandai dengan"use client"hanya pada modul yang membutuhkan interaksi pengguna aktif (Three.js 3D viewer, streaming WebRTC kamera, grafik telemetri real-time, atau status autentikasi sesi). - Directory Structure:
src/app/(public): Landing page, simulator edukasi anatomi gigi, FAQ, dan autentikasi.src/app/app: Portal klinis terautentikasi (ruang kerja, pasien, pemeriksaan wizard, riwayat, laporan PDF, admin).src/components: Komponen modular UI yang dapat digunakan kembali.
2. Arsitektur Token Desain Tiga Lapis (Three-Layer Tokens)#
Sistem desain OrthoBreath mengadopsi pemisahan token terstandarisasi: 1. Token Primitif (Raw Values): Palet warna dasar HSL/Hex (#122235, #0f7a70, #287a51), skala spasi, dan kurva radius (rounded-xl, rounded-2xl). 2. Token Semantik (CSS Variables): Variabel kontekstual pada src/app/globals.css (--deep-navy, --teal, --surface, --success, --warm-amber, --soft-coral). 3. Token Komponen (Tailwind Utilities): Kelas utilitas yang dikomposisikan secara konsisten (bg-[var(--deep-navy)], min-h-11, focus-visible:ring-[var(--teal)]).
3. Sistem Warna Semantik & Tipografi Klinis#
| Token Semantik | Nilai Hex | Peran & Penggunaan Klinis |
|---|---|---|
--deep-navy | #122235 | Judul utama, teks berkontras tinggi, bingkai navigasi utama |
--navy-strong | #0b1726 | Status hover tombol utama, header dengan kontras tertinggi |
--teal | #0f7a70 | Aksi interaktif utama, tombol konfirmasi, tautan aktif |
--teal-soft | #e8f4f2 | Latar belakang badge informasi, indikator step wizard |
--success | #287a51 | Status temuan normal, koneksi sensor stabil |
--warm-amber | #a96207 | Peringatan awal, indikasi perlu tinjauan dokter spesialis |
--soft-coral | #c2414b | Indikasi maloklusi dental, kegagalan transmisi sensor |
Tipografi: Plus Jakarta Sans / Outfit untuk heading dan metrik kuantitatif; Inter / Manrope untuk narasi klinis; font monospace untuk telemetri kPa dan checksum.
4. Progressive Web App (PWA) & Offline Shell#
Aplikasi dapat diinstal ke layar beranda tablet medis (Add to Home Screen):
- Manifest:
public/manifest.webmanifestmendefinisikan ikon adaptif dan modestandalone. - Service Worker:
public/sw.jsmelakukan precaching aset shell aplikasi untuk memuat antarmuka secara instan bahkan saat koneksi klinik tidak stabil.