📋 PLANNING — eFaraidh
1. Feature List
Public:

Landing Page (hero, fitur unggulan, cara pakai, tentang aplikasi)
Kalkulator Faraidh (input ahli waris & harta, proses hitung via API)
Halaman Hasil (tabel pembagian, langkah penjelasan step-by-step, pie chart visualisasi)
Export PDF (ditangani frontend — print/jsPDF dari halaman hasil)
Login Admin

Auth (Admin):

Dashboard (statistik penggunaan kalkulator, grafik tren harian)
Manajemen Riwayat Perhitungan (list semua kalkulasi yang tersimpan, detail, hapus)
Manajemen Materi Edukasi (CRUD artikel/materi pendukung bab waris untuk siswa)
Manajemen Soal Latihan (CRUD soal + jawaban benar, pilihan ganda)
Manajemen Glosarium (CRUD istilah-istilah faraidh + definisi)
Pengaturan Profil Admin (nama, email, password)
Pengaturan Aplikasi (nama app, tagline, logo, about text)


2. Database Schema
users:
  - id, name, email, password, timestamps
  - (Single admin, seeded)

perhitungans (riwayat kalkulator):
  - id, session_id (nullable, untuk guest tracking), nama_pewaris,
    harta_total, input_ahli_waris (JSON), hasil (JSON),
    asal_masalah, kondisi (normal/aul/radd), ip_address, timestamps
  - Indexes: session_id, created_at

materis (materi edukasi):
  - id, judul, slug, konten (longText), kategori
    (dasar/furudh/ashabah/mahjub/kondisi), urutan (int),
    is_published (bool), foto (nullable), timestamps
  - Indexes: slug, kategori, is_published

soals (soal latihan):
  - id, pertanyaan, pilihan_a, pilihan_b, pilihan_c, pilihan_d,
    jawaban_benar (enum: a/b/c/d), penjelasan (text),
    tingkat_kesulitan (mudah/sedang/sulit), is_active (bool), timestamps
  - Indexes: tingkat_kesulitan, is_active

glosariums:
  - id, istilah, definisi (text), asal_kata (nullable),
    contoh (nullable), urutan (int), timestamps
  - Indexes: istilah

pengaturans:
  - id, key (unique), value (text), timestamps
  - Seeded: app_name, tagline, about, logo

3. API Endpoints
Auth:
  POST /api/auth/login
  POST /api/auth/logout
  GET  /api/auth/profile

Kalkulator (Public):
  GET  /api/ahli-waris              (daftar 29 ahli waris)
  POST /api/hitung                  (proses perhitungan + simpan riwayat)
  GET  /api/perhitungan/{id}        (ambil hasil untuk halaman hasil & PDF)

Dashboard Admin:
  GET  /api/admin/dashboard         (stats: total hitung, hitung hari ini, kondisi terbanyak, dll)

Riwayat Admin:
  GET  /api/admin/perhitungans      (list, search, pagination, filter kondisi)
  GET  /api/admin/perhitungans/{id} (detail)
  DELETE /api/admin/perhitungans/{id}
  DELETE /api/admin/perhitungans    (bulk delete)

Materi:
  GET  /api/materis                 (public, hanya published)
  GET  /api/materis/{slug}          (public, detail)
  GET  /api/admin/materis           (semua, + draft)
  POST /api/admin/materis
  PUT  /api/admin/materis/{id}
  DELETE /api/admin/materis/{id}

Soal:
  GET  /api/soals                   (public, hanya active, random)
  GET  /api/admin/soals             (semua)
  POST /api/admin/soals
  PUT  /api/admin/soals/{id}
  DELETE /api/admin/soals/{id}

Glosarium:
  GET  /api/glosariums              (public, all, search)
  GET  /api/admin/glosariums        (semua)
  POST /api/admin/glosariums
  PUT  /api/admin/glosariums/{id}
  DELETE /api/admin/glosariums/{id}

Pengaturan:
  GET  /api/admin/pengaturan
  PUT  /api/admin/pengaturan

4. Backend Files
Services:   FaraidhCalculator (sudah ada, copy dari file Anda)

Models:     User, Perhitungan, Materi, Soal, Glosarium, Pengaturan

Controllers (Api/):
  AuthController
  KalkulatorController      (public: daftar AW + hitung)
  Admin/DashboardController
  Admin/PerhitunganController
  Admin/MateriController
  Admin/SoalController
  Admin/GlosariumController
  Admin/PengaturanController
  Admin/ProfileController

Migrations:
  (default users) + create_perhitungans_table,
  create_materis_table, create_soals_table,
  create_glosariums_table, create_pengaturans_table

Seeders:
  UserSeeder, PengaturanSeeder, MateriSeeder,
  SoalSeeder, GlosariumSeeder

5. Frontend Files
Services:
  api.js, authService.js, kalkulatorService.js,
  materiService.js, soalService.js, glosariumService.js,
  pengaturanService.js, dashboardService.js

Stores:
  useAuthStore.js, useKalkulatorStore.js

Pages Public:
  LandingPage.jsx
  KalkulatorPage.jsx
  HasilPage.jsx
  LoginPage.jsx

Pages Auth (Admin):
  dashboard/DashboardPage.jsx
  perhitungan/PerhitunganListPage.jsx
  perhitungan/PerhitunganDetailPage.jsx
  materi/MateriListPage.jsx
  materi/MateriFormPage.jsx
  soal/SoalListPage.jsx
  soal/SoalFormPage.jsx
  glosarium/GlosariumListPage.jsx
  glosarium/GlosariumFormPage.jsx
  pengaturan/PengaturanPage.jsx
  profile/ProfilePage.jsx
  PlaceholderPage.jsx

Components:
  layout/PublicLayout.jsx
  layout/AuthLayout.jsx
  layout/Navbar.jsx            (public navbar: logo + menu)
  layout/AdminNavbar.jsx       (admin topbar)
  layout/Sidebar.jsx
  layout/Breadcrumbs.jsx
  layout/Footer.jsx
  auth/ProtectedRoute.jsx
  auth/ErrorBoundary.jsx
  kalkulator/AhliWarisForm.jsx (stepper input ahli waris)
  kalkulator/HasilTable.jsx    (tabel pembagian)
  kalkulator/LangkahList.jsx   (penjelasan step-by-step)
  kalkulator/PieChart.jsx      (visualisasi proporsi)
  kalkulator/PdfExport.jsx     (tombol + logic export PDF)
  common/DataTable.jsx
  common/SearchBar.jsx
  common/ConfirmDialog.jsx
  common/RichEditor.jsx        (untuk form materi)

6. Dependencies
Backend:
  laravel/sanctum
  (FaraidhCalculator tidak perlu package tambahan)

Frontend:
  @tanstack/react-query, zustand, axios
  react-hook-form, zod
  react-router-dom
  tailwindcss, lucide-react
  react-hot-toast, date-fns
  recharts                     (pie chart + bar/line chart dashboard)
  jspdf, html2canvas           (export PDF dari frontend)
  @uiw/react-md-editor         (rich text/markdown editor untuk materi)

Shadcn:
  button, card, input, label, textarea, select,
  dialog, alert, skeleton, table, badge,
  dropdown-menu, separator, tabs, progress,
  accordion (untuk langkah penjelasan & FAQ)

7. Theme
Primary:    #10B981 (Emerald Green — nuansa Islami)
Secondary:  #1E3A5F (Navy Blue — formal/akademis)
Accent:     #F59E0B (Amber — highlight)
Background: #F8FAFC
Font:       Inter (latin) + Amiri (Arab/istilah)
Border Radius: 0.5rem
Dark Mode:  No

8. UI/UX Patterns & Consistency
Dashboard Admin:

Greeting: "Selamat datang, Admin" + tanggal hijri & masehi
Stats Cards (4): Total Perhitungan, Hari Ini, Kondisi Aul, Kondisi Radd
Chart: Line chart tren perhitungan 7 hari terakhir + Bar chart kondisi (normal/aul/radd)
Quick Actions: Tambah Materi, Tambah Soal, Lihat Riwayat, Pengaturan
Recent: 10 perhitungan terbaru (nama pewaris, harta, kondisi, waktu)

Layout:

PublicLayout: Navbar (logo + menu: Beranda, Kalkulator, Materi, Glosarium, Latihan, Login) + Footer
AuthLayout: AdminNavbar + Sidebar + Breadcrumbs + Footer

Kalkulator UX (KHUSUS — multi-step):

Step 1: Input nama pewaris + harta total
Step 2: Pilih & input jumlah ahli waris (grouped: Pokok, Anak & Cucu, Saudara, Kerabat Jauh)
Step 3: Konfirmasi input → kirim ke API
Redirect ke /hasil/:id setelah berhasil

Halaman Hasil:

Summary card (nama pewaris, harta, kondisi, asal masalah)
Pie chart proporsi
Tabel pembagian (nama AW, bagian, saham, nominal, per orang)
Accordion langkah penjelasan (1 per accordion item)
Tombol Export PDF + Hitung Ulang

CRUD Pattern:

Modal: Glosarium (simple), Soal (form tidak terlalu panjang)
Separate Pages: Materi (ada rich text editor)
Riwayat Perhitungan: List + Detail Page (read-only)


9. Workflow Eksekusi
BACKEND WORKFLOW
Setup & Installation:
bash# 1. Buat folder project
mkdir ~/Desktop/efaraidh && cd ~/Desktop/efaraidh

# 2. Install Laravel
composer create-project laravel/laravel backend && cd backend

# 3. Install Breeze API
composer require laravel/breeze --dev && php artisan breeze:install api

# 4. Install Sanctum (sudah include di Breeze, verifikasi):
composer require laravel/sanctum

# 5. Install dev tools
composer require --dev barryvdh/laravel-debugbar
Database Setup:
bash# 6. Buat database
mysql -u root -p
# → CREATE DATABASE efaraidh_db;
# → EXIT;

# 7. Update .env (full file akan diberikan AI)
# 8. Buat .env.production (full file akan diberikan AI)
Configuration:
bash# 9. Edit config/cors.php (full code dari AI)
# 10. Edit bootstrap/app.php (full code dari AI)
# 11. Buat folder uploads
mkdir -p public/uploads/materi
chmod -R 775 public/uploads

# 12. Edit app/Models/User.php — tambah HasApiTokens (full code dari AI)
Structure Creation:
bash# 13. Buat folder controller
mkdir -p app/Http/Controllers/Api/Admin

# 14. Copy FaraidhCalculator.php
mkdir -p app/Services
# → Copy paste file FaraidhCalculator.php ke app/Services/

# 15. Buat semua models
touch app/Models/{Perhitungan,Materi,Soal,Glosarium,Pengaturan}.php

# 16. Buat semua controllers
touch app/Http/Controllers/Api/{AuthController,KalkulatorController}.php
touch app/Http/Controllers/Api/Admin/{DashboardController,PerhitunganController,MateriController,SoalController,GlosariumController,PengaturanController,ProfileController}.php

# 17. Buat migrations (timestamp beda supaya urutan benar)
touch database/migrations/2024_03_01_000001_create_perhitungans_table.php
touch database/migrations/2024_03_01_000002_create_materis_table.php
touch database/migrations/2024_03_01_000003_create_soals_table.php
touch database/migrations/2024_03_01_000004_create_glosariums_table.php
touch database/migrations/2024_03_01_000005_create_pengaturans_table.php

# 18. Buat seeders
touch database/seeders/{UserSeeder,PengaturanSeeder,MateriSeeder,SoalSeeder,GlosariumSeeder}.php

# 19. Cek struktur
ls app/Models/ && ls app/Http/Controllers/Api/ && ls app/Http/Controllers/Api/Admin/ && ls database/migrations/ && ls app/Services/
→ Setelah semua selesai, balas: "Backend workflow selesai, struktur ready, kasih kode file nya"

FRONTEND WORKFLOW
bash# 1. Masuk folder project
cd ~/Desktop/efaraidh

# 2. Buat Vite React
npm create vite@latest frontend -- --template react && cd frontend

# 3. Install dependencies dasar
npm install

# 4. Install core packages
npm install @tanstack/react-query zustand axios react-hook-form zod react-router-dom

# 5. Install UI packages
npm install clsx tailwind-merge lucide-react react-hot-toast date-fns recharts

# 6. Install PDF & editor
npm install jspdf html2canvas @uiw/react-md-editor

# 7. Install dev deps
npm install -D tailwindcss@^3 postcss autoprefixer @tailwindcss/forms

# 8. Init Tailwind
npx tailwindcss init -p
Configuration (EDIT MANUAL di VS Code):
# 9.  Edit vite.config.js     → tambah @ alias
# 10. Buat jsconfig.json      → baseUrl & paths
# 11. Edit tailwind.config.js → theme colors eFaraidh
# 12. Edit src/index.css      → @tailwind & CSS variables
Shadcn Setup:
bash# 13. Init Shadcn
npx shadcn@latest init
# pilih: No TS, Default style, CSS vars Yes

# 14. Install components
npx shadcn@latest add button card input label textarea select dialog alert skeleton table badge dropdown-menu separator tabs progress accordion
Environment:
bash# 15. Buat .env
echo "VITE_API_URL=http://localhost:8000" > .env

# 16. Buat .env.production
echo "VITE_API_URL=https://your-domain.com" > .env.production
Structure Creation:
bash# 17. Buat semua folder
mkdir -p src/components/{layout,auth,common,kalkulator}
mkdir -p src/pages/{auth,dashboard,perhitungan,materi,soal,glosarium,pengaturan,profile}
mkdir -p src/{services,store,hooks,lib}

# 18. Buat semua file
touch src/lib/utils.js
touch src/services/{api,authService,kalkulatorService,materiService,soalService,glosariumService,pengaturanService,dashboardService}.js
touch src/store/{useAuthStore,useKalkulatorStore}.js
touch src/hooks/{useAuth,useDebounce}.js
touch src/components/auth/{ProtectedRoute,ErrorBoundary}.jsx
touch src/components/layout/{PublicLayout,AuthLayout,Navbar,AdminNavbar,Sidebar,Footer,Breadcrumbs}.jsx
touch src/components/common/{DataTable,SearchBar,ConfirmDialog,RichEditor}.jsx
touch src/components/kalkulator/{AhliWarisForm,HasilTable,LangkahList,PieChart,PdfExport}.jsx
touch src/pages/auth/LoginPage.jsx
touch src/pages/dashboard/DashboardPage.jsx
touch src/pages/perhitungan/{PerhitunganListPage,PerhitunganDetailPage}.jsx
touch src/pages/materi/{MateriListPage,MateriFormPage}.jsx
touch src/pages/soal/{SoalListPage,SoalFormPage}.jsx
touch src/pages/glosarium/GlosariumListPage.jsx
touch src/pages/pengaturan/PengaturanPage.jsx
touch src/pages/profile/ProfilePage.jsx
touch src/pages/{LandingPage,KalkulatorPage,HasilPage,PlaceholderPage}.jsx

# 19. Cek struktur
ls src/components/ && ls src/pages/ && ls src/services/
→ Setelah semua selesai, balas: "Frontend workflow selesai, struktur ready, kasih kode file nya"

🛑 CHECKPOINT 1: PLANNING COMPLETE
Planning selesai! Review planning di atas — terutama fitur auth admin, struktur kalkulator multi-step, dan tema hijau Islami.
Jika sudah sesuai, balas "approve" untuk lanju
