Component Catalog & 3D Visualization

Component Catalog & 3D Clinical Visualization#

Katalog pustaka komponen modular, widget klinis, dan visualisasi 3D anatomi dental yang digunakan di seluruh platform OrthoBreath.

1. Komponen UI Primitif & Desain Tombol#

• Button (src/components/ui/Button.tsx): Komponen tombol interaktif dengan varian primary (bg-[var(--deep-navy)]), secondary, outline, danger, dan ghost. Memiliki tinggi standar $\ge 44\text{px}$ (min-h-11) untuk kepatuhan target sentuh mobile/tablet.
• Card (src/components/ui/Card.tsx): Wadah konten dengan radius rounded-2xl atau rounded-3xl, batas border-[var(--border)], dan bayangan ambient halus.
• Badge (src/components/ui/Badge.tsx): Label penanda status klinis (Normal, Indikasi Maloklusi, Menunggu Tinjauan, Final Disahkan).
• Input / Select: Bidang form dengan label eksplisit htmlFor dan validasi pesan galat bawaan.

2. Simulator 3D Anatomi Dental & Maloklusi (Dental3DViewer)#

Komponen Dental3DViewer (src/components/education/Dental3DViewer.tsx) menyediakan visualisasi 3D anatomi gigi interaktif berbasis Three.js:

• PBR Material Enamel: MeshPhysicalMaterial dengan warna gading natural (#fdfcfa), roughness 0.28, dan clearcoat 0.45 untuk mensimulasikan kilau saliva pada permukaan email gigi.
• Material Jaringan Gingiva: MeshStandardMaterial dengan warna merah muda sehat (#e08a8a).
• 5 Pola Simulasi Morfologi Maloklusi:
• Oklusi Normal (Angle Kelas I): Overjet dan overbite ideal $2.0\text{ mm}$.
• Gigitan Terbuka Anterior (Open Bite): Celah vertikal $3.5\text{ mm}$ akibat kebiasaan bernapas mulut.
• Protrusi Maksila / Gigi Tonggos (Kelas II/1): Overjet berlebih $+5.0\text{ mm}$.
• Gigitan Silang (Crossbite): Pergeseran transversal rahang anterior/posterior.
• Gigi Berjejal (Crowding): Disharmoni lengkung rahang sempit dengan rotasi gigi incisivus.
• Sudut Kamera Presisi: Pilihan sudut pandang Anterior (Depan), Oklusal Maksila (Atas), dan Oklusal Mandibula (Bawah).

3. Widget Pemeriksaan Klinis & Kamera#

• BreathingChart (src/components/clinical/BreathingChart.tsx): Grafik telemetri tekanan aliran napas berbasis Recharts dengan visualisasi gelombang nasal (Teal) dan oral (Amber/Coral) simultan pada batas acuan $\pm 2.5\text{ kPa}$.
• DentalCamera (src/components/dental/DentalCamera.tsx): Jendela bidik kamera intraoral berlatar klinis gelap (#020617) dengan retikel garis bidik oklusal (crosshair guide) untuk memandu pengambilan foto gigi anterior yang tegak lurus.
• BreathingValidationPanel: Panel otomatis pendeteksi kebocoran selang kanula dan konfirmasi kestabilan pernapasan anak.

4. Komponen Rekam Medis & Laporan PDF#

• ClinicalReport (src/components/report/ClinicalReport.tsx): Komponen penyaji rekam medis terpadu berstandar cetak A4 dengan tata letak dua kolom, visualisasi skor risiko terpadu, dan blok tanda tangan digital dokter penanggung jawab.
• TraceabilityBadge: Komponen penampil metadata pada portal dokumentasi untuk memverifikasi jalur berkas kode sumber dan bukti pengujian unit yang terasosiasi.