🎨 SIMRS FEFO - Frontend Module

Aplikasi Web Frontend Sistem Manajemen Stok & Kedaluwarsa Obat Rumah Sakit (SIMRS) berbasis React 19, Vite, Tailwind CSS v4, dan Framer Motion yang terhubung langsung ke REST API Backend Go.

• Backend REST API: README Backend Module

• Framework UI: React 19 + Vite 8
• Styling & Theme: Tailwind CSS v4 (@tailwindcss/vite) + Custom Glassmorphism System
• Animasi & Transisi: Framer Motion (Pop-up Modal, Toast, & Rotasi Ikon Tema)
• Ikonografi: Lucide React
• State & Context: React Context API (AuthContext & ThemeContext)
• HTTP Client: Centralized Native fetch Wrapper dengan JWT Interceptor (src/api/client.js)

frontend/
├── public/                    # Aset statis & Favicon
├── src/
│   ├── api/
│   │   └── client.js          # Wrapper HTTP client & penanganan otomatis token JWT
│   ├── components/
│   │   ├── layout/
│   │   │   └── Navbar.jsx     # Header navigasi, profil user, & toggle Dark/Light mode
│   │   ├── ui/
│   │   │   ├── Modal.jsx      # Dialog modal glassmorphic serbaguna dengan backdrop blur
│   │   │   └── Toast.jsx      # Notifikasi floating pesan sukses & error
│   │   └── medicines/
│   │       ├── MedicineTable.jsx  # Tabel obat, status expired, & drawer rincian batch
│   │       ├── AddMedicineModal.jsx # Form tambah obat baru & batch stok awal
│   │       ├── EditMedicineModal.jsx# Form edit nama & kode obat
│   │       └── DeductFefoModal.jsx  # Modal pemotongan stok FEFO dengan simulasi live
│   ├── context/
│   │   ├── AuthContext.jsx    # Pengelolaan state autentikasi user (login, register, logout)
│   │   └── ThemeContext.jsx   # Pengelolaan state tema Dark/Light Mode
│   ├── pages/
│   │   ├── AuthPage.jsx       # Halaman login & registrasi terpadu (Tabbed)
│   │   └── DashboardPage.jsx  # Dashboard utama, ringkasan metrik, pencarian, & CRUD
│   ├── styles/                # CSS tambahan & utility
│   ├── App.jsx                # Komponen utama penentu route & provider
│   ├── index.css              # Custom styling Tailwind v4 & kurva transisi tema 0.4s
│   └── main.jsx               # Entry point React
├── index.html                 # Template utama HTML
├── package.json               # Dependensi & skrip NPM
└── vite.config.js             # Konfigurasi plugin Vite & Tailwind v4

Aplikasi dilengkapi dengan fitur pengubah tema yang sangat halus dan tidak meletihkan mata:

• Transisi Halus: Dilengkapi kurva transisi CSS 0.4s cubic-bezier(0.16, 1, 0.3, 1) untuk perubahan warna latar belakang, teks, border, dan bayangan komponen secara bertahap.
• Penyimpanan Otomatis: Pilihan tema pengguna disimpan secara permanen di localStorage (app_theme).
• Animasi Ikon: Tombol di header menampilkan animasi rotasi & fade ikon Matahari/Bulan menggunakan Framer Motion.

• Node.js v18+ terinstall.
• Backend Go REST API sudah berjalan pada http://localhost:8080.

Buka terminal pada direktori frontend/:

cd frontend
npm install

npm run dev

Aplikasi frontend akan berjalan pada http://localhost:5173.

npm run build

1. Autentikasi Terpadu (AuthPage.jsx):

   • Tab beralih antara Login dan Registrasi tanpa reload halaman.
   • Menyimpan JWT token di localStorage dan menangani auto-logout jika token kadaluwarsa (401 Unauthorized).

2. Ringkasan Metrik Dashboard (DashboardPage.jsx):

   • Menampilkan total master obat, total batch stok terdaftar, obat mendekati kedaluwarsa (<90 hari), dan total kuantitas unit stok.

3. Pencarian Real-Time & Rincian Batch (MedicineTable.jsx):

   • Pencarian instan berdasarkan Nama Obat atau Kode Obat.
   • Rincian batch dapat di-expand untuk melihat nomor batch, sisa stok, dan tanggal kedaluwarsa dengan label status warna:
     • 🔴 Kedaluwarsa: Sudah melewati tanggal kedaluwarsa.
     • 🟡 Mendekati Expired: Sisa <90 hari.
     • 🟢 Aman: Lebih dari 90 hari.

4. Simulasi Pemotongan Stok FEFO Live (DeductFefoModal.jsx):

   • Ketika memilih obat dan memasukkan jumlah kuantitas yang dipotong, sistem menampilkan simulasi urutan batch mana saja yang akan terkurangi terlebih dahulu secara otomatis berdasarkan tanggal expired paling awal.

Pastikan backend API Go telah dinyalakan agar semua fitur otorisasi dan stok obat berfungsi sempurna: ➡️ Instruksi Jalankan Backend Module