<div align="center">

🏛️ Dashboard Monitoring Progress

Sistem Monitoring Terintegrasi untuk Program Perumahan dan Permukiman Kementerian PKP

<p align="center"> <strong>Platform monitoring progress real-time untuk program BSPS, Penanganan Kawasan Kumuh, dan Sanitasi Layak dengan visualisasi data interaktif, peta geografis, dan sistem manajemen pengguna berbasis role.</strong> </p>

Demo Langsung • Fitur • Instalasi • Dokumentasi • Keamanan • Roadmap

</div>

---

📋 Daftar Isi

• Tentang Proyek
• Demo
• Fitur Utama
• Tech Stack
• Arsitektur Sistem
• Quick Start
• Struktur Proyek
• Panduan Penggunaan
• Keamanan & Enkripsi
• Keyboard Shortcuts
• Data & API
• Deployment
• Performance
• Roadmap Pengembangan
• Contributing
• License
• Kontak & Support

---

🎯 Tentang Proyek

Dashboard Monitoring Progress adalah sistem informasi terintegrasi yang dirancang khusus untuk Kementerian Pekerjaan Umum dan Perumahan Rakyat (PUPR) dalam memantau progres pelaksanaan program-program strategis di bidang perumahan dan permukiman.

Program yang Dimonitor

Program	Deskripsi	Target
BSPS	Bantuan Stimulan Perumahan Swadaya	Peningkatan kualitas rumah tidak layak huni
Kawasan Kumuh	Penanganan Kawasan Permukiman Kumuh	Pengurangan luasan kawasan kumuh
Sanitasi Layak	Program Rumah Sanitasi Layak	Penyediaan akses sanitasi yang memadai

Mengapa Dashboard Ini?

• ✅ Real-time Monitoring: Pantau progres fisik dan keuangan secara real-time
• ✅ Visualisasi Intuitif: Data kompleks disajikan dalam bentuk grafik dan peta interaktif
• ✅ Multi-level Tracking: Monitoring dari level nasional hingga kabupaten/kota
• ✅ Decision Support: Identifikasi cepat area bermasalah dengan sistem early warning
• ✅ Akuntabilitas: Audit trail lengkap untuk setiap aktivitas pengguna

---

🌐 Demo

Demo Credentials

Role	Username	Password	Akses
Admin	admin	admin123	Full Access
Operator	operator	operator123	View, Edit, Export
Viewer	viewer	viewer123	View Only

---

✨ Fitur Utama

📊 Dashboard & Visualisasi

<table> <tr> <td width="50%">

Dashboard Overview

• Executive summary dengan KPI cards
• Quick links ke semua program
• Status summary (On Track, Warning, Danger)
• Comparative charts antar program

</td> <td width="50%">

Dashboard BSPS

• Monitoring target vs realisasi
• Progress per provinsi
• Detail per kabupaten/kota
• Peta distribusi geografis

</td> </tr> <tr> <td width="50%">

Dashboard BSPS Anggaran 2025

• Alokasi dan realisasi anggaran
• Progress fisik per tahap
• Status pencairan (SPM, SP2D)
• Identifikasi permasalahan

</td> <td width="50%">

Dashboard Kumuh

• Progress peningkatan kualitas
• Deviasi progres fisik vs rencana
• Pagu anggaran vs realisasi
• Trend progress over time

</td> </tr> <tr> <td width="50%">

Kumuh Monitoring (GENESIS)

• Project-level monitoring
• Analisis komponen detail
• Ringkasan kontraktor
• Proyek dengan deviasi

</td> <td width="50%">

Dashboard Sanitasi

• Coverage area sanitasi
• Distribusi tipe fasilitas
• Progress per provinsi
• Peta heat map coverage

</td> </tr> </table>

🛡️ Manajemen & Administrasi

Fitur	Deskripsi
User Management	CRUD pengguna, assignment role, toggle status aktif
Activity Log	Tracking lengkap semua aktivitas pengguna dengan timestamp
Database Management	View, export (CSV/JSON), dan print data
Settings	Profil pengguna, notifikasi, backup & restore

📈 Charts & Grafik

• Bar Chart: Perbandingan target vs realisasi
• Line Chart: Trend waktu dan progress
• Area Chart: Kumulatif dan distribusi
• Pie/Donut Chart: Proporsi dan komposisi

🗺️ Peta Interaktif

• Visualisasi geografis berbasis Leaflet
• Custom markers dengan status warna
• Popup detail informasi
• Zoom dan pan control

📱 Responsive & PWA

• Mobile-first responsive design
• Progressive Web App (PWA) ready
• Installable di device
• Offline capability (planned)

---

🛠️ Tech Stack

Core Framework

Technology	Version	Purpose
	14.1.0	React framework dengan SSR/SSG
	18.2.0	UI component library
	5.3.3	Type safety & developer experience

Styling & UI

Technology	Version	Purpose
	3.4.1	Utility-first CSS framework
	0.312.0	Beautiful icon library
PostCSS	8.4.33	CSS transformation
Autoprefixer	10.4.17	Browser vendor prefixes

Data Visualization

Technology	Version	Purpose
	2.10.4	React charting library
	1.9.4	Interactive maps
React Leaflet	4.2.1	React wrapper for Leaflet

State Management & Data Fetching

Technology	Version	Purpose
	4.5.0	Lightweight state management
React Query	5.17.19	Data fetching & caching
date-fns	3.2.0	Modern date utility

Development Tools

Technology	Version	Purpose
ESLint	8.56.0	Code quality & linting
eslint-config-next	14.1.0	Next.js ESLint rules

---

🏗️ Arsitektur Sistem

┌─────────────────────────────────────────────────────────────────┐
│                        CLIENT LAYER                              │
├─────────────────────────────────────────────────────────────────┤
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐          │
│  │   Browser    │  │   PWA App    │  │   Mobile     │          │
│  └──────┬───────┘  └──────┬───────┘  └──────┬───────┘          │
│         └─────────────────┼─────────────────┘                   │
└───────────────────────────┼─────────────────────────────────────┘
                            │
┌───────────────────────────┼─────────────────────────────────────┐
│                    APPLICATION LAYER                             │
├───────────────────────────┼─────────────────────────────────────┤
│                           ▼                                      │
│  ┌─────────────────────────────────────────────────────────┐    │
│  │                    Next.js 14 (App Router)               │    │
│  ├─────────────────────────────────────────────────────────┤    │
│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐      │    │
│  │  │   Pages     │  │ Components  │  │   Hooks     │      │    │
│  │  │  /app/*     │  │ /components │  │  /hooks     │      │    │
│  │  └─────────────┘  └─────────────┘  └─────────────┘      │    │
│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐      │    │
│  │  │   Stores    │  │    Types    │  │   Utils     │      │    │
│  │  │  (Zustand)  │  │  /types     │  │   /lib      │      │    │
│  │  └─────────────┘  └─────────────┘  └─────────────┘      │    │
│  └─────────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────────┘
                            │
┌───────────────────────────┼─────────────────────────────────────┐
│                      DATA LAYER                                  │
├───────────────────────────┼─────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │  Local Storage  │  │   Mock Data     │  │  Static JSON    │  │
│  │  (Persistence)  │  │   (/lib/data)   │  │  (/public)      │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

Component Architecture

App
├── DashboardLayout
│   ├── Sidebar (Navigation)
│   ├── Header (Title, Theme, User)
│   └── Main Content
│       ├── KPI Cards
│       ├── Charts (Bar, Line, Area, Pie)
│       ├── DataTable
│       └── MapComponent
├── Providers
│   ├── ThemeProvider
│   └── ToastProvider
└── Stores
    ├── AuthStore (User & Permissions)
    ├── ThemeStore (Dark/Light Mode)
    └── ToastStore (Notifications)

---

🚀 Quick Start

Prerequisites

Pastikan sistem Anda memiliki:

• Node.js >= 18.0.0
• npm >= 9.0.0 atau yarn >= 1.22.0
• Git >= 2.0.0

Installation

# 1. Clone repository
git clone https://github.com/subkhanibnuaji/dashboard-monitoring-progress.git

# 2. Masuk ke direktori proyek
cd dashboard-monitoring-progress

# 3. Install dependencies
npm install
# atau
yarn install

# 4. Jalankan development server
npm run dev
# atau
yarn dev

# 5. Buka browser
# http://localhost:3000

Build untuk Production

# Build aplikasi
npm run build

# Jalankan production server
npm start

# Lint check
npm run lint

Environment Variables (Optional)

Buat file .env.local untuk konfigurasi tambahan:

# API Configuration (untuk integrasi masa depan)
NEXT_PUBLIC_API_URL=https://api.example.com

# Map Configuration
NEXT_PUBLIC_MAP_TILE_URL=https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

# Analytics (opsional)
NEXT_PUBLIC_GA_ID=UA-XXXXXXXXX-X

# Feature Flags
NEXT_PUBLIC_ENABLE_ANALYTICS=false
NEXT_PUBLIC_ENABLE_DEBUG=false

---

📁 Struktur Proyek

dashboard-monitoring-progress/
│
├── 📂 public/                      # Static assets
│   ├── 📂 icons/                   # PWA icons (72x72 - 512x512)
│   ├── 📄 manifest.json            # PWA manifest
│   └── 📄 favicon.ico              # Favicon
│
├── 📂 src/
│   │
│   ├── 📂 app/                     # Next.js App Router
│   │   ├── 📄 layout.tsx           # Root layout
│   │   ├── 📄 page.tsx             # Homepage (Overview)
│   │   ├── 📄 globals.css          # Global styles
│   │   │
│   │   ├── 📂 bsps/                # Dashboard BSPS
│   │   │   └── 📄 page.tsx
│   │   │
│   │   ├── 📂 bsps-anggaran/       # BSPS Anggaran 2025
│   │   │   └── 📄 page.tsx
│   │   │
│   │   ├── 📂 kumuh/               # Dashboard Kumuh
│   │   │   └── 📄 page.tsx
│   │   │
│   │   ├── 📂 kumuh-monitoring/    # Kumuh Monitoring Detail
│   │   │   └── 📄 page.tsx
│   │   │
│   │   ├── 📂 sanitasi/            # Dashboard Sanitasi
│   │   │   └── 📄 page.tsx
│   │   │
│   │   ├── 📂 login/               # Authentication
│   │   │   └── 📄 page.tsx
│   │   │
│   │   ├── 📂 users/               # User Management (Admin)
│   │   │   └── 📄 page.tsx
│   │   │
│   │   ├── 📂 activity-log/        # Activity Log (Admin)
│   │   │   └── 📄 page.tsx
│   │   │
│   │   ├── 📂 database/            # Database Management
│   │   │   └── 📄 page.tsx
│   │   │
│   │   └── 📂 settings/            # User Settings
│   │       └── 📄 page.tsx
│   │
│   ├── 📂 components/
│   │   │
│   │   ├── 📂 charts/              # Chart components
│   │   │   ├── 📄 BarChartComponent.tsx
│   │   │   ├── 📄 LineChartComponent.tsx
│   │   │   ├── 📄 AreaChartComponent.tsx
│   │   │   └── 📄 PieChartComponent.tsx
│   │   │
│   │   ├── 📂 layout/              # Layout components
│   │   │   ├── 📄 DashboardLayout.tsx
│   │   │   ├── 📄 Sidebar.tsx
│   │   │   └── 📄 Header.tsx
│   │   │
│   │   ├── 📂 maps/                # Map components
│   │   │   └── 📄 MapComponent.tsx
│   │   │
│   │   ├── 📂 providers/           # Context providers
│   │   │   ├── 📄 ThemeProvider.tsx
│   │   │   └── 📄 ToastProvider.tsx
│   │   │
│   │   ├── 📂 tables/              # Table components
│   │   │   └── 📄 DataTable.tsx
│   │   │
│   │   └── 📂 ui/                  # UI components
│   │       ├── 📄 Badge.tsx
│   │       ├── 📄 Button.tsx
│   │       ├── 📄 Card.tsx
│   │       ├── 📄 KPICard.tsx
│   │       ├── 📄 ProgressBar.tsx
│   │       ├── 📄 Skeleton.tsx
│   │       ├── 📄 ThemeToggle.tsx
│   │       ├── 📄 Toast.tsx
│   │       ├── 📄 QuickLinks.tsx
│   │       └── 📄 KeyboardShortcutsModal.tsx
│   │
│   ├── 📂 hooks/                   # Custom React hooks
│   │   └── 📄 useKeyboardShortcuts.ts
│   │
│   ├── 📂 lib/
│   │   │
│   │   ├── 📂 data/                # Mock data
│   │   │   ├── 📄 bsps-data.ts
│   │   │   ├── 📄 bsps-anggaran-2025.ts
│   │   │   ├── 📄 kumuh-data.ts
│   │   │   ├── 📄 kumuh-projects-2025.ts
│   │   │   ├── 📄 sanitasi-data.ts
│   │   │   └── 📄 summary-data.ts
│   │   │
│   │   ├── 📂 stores/              # Zustand stores
│   │   │   ├── 📄 auth-store.ts
│   │   │   ├── 📄 theme-store.ts
│   │   │   └── 📄 toast-store.ts
│   │   │
│   │   └── 📄 utils.ts             # Utility functions
│   │
│   └── 📂 types/                   # TypeScript definitions
│       └── 📄 index.ts
│
├── 📄 .eslintrc.json               # ESLint configuration
├── 📄 .gitignore                   # Git ignore rules
├── 📄 next.config.js               # Next.js configuration
├── 📄 package.json                 # Dependencies & scripts
├── 📄 postcss.config.js            # PostCSS configuration
├── 📄 tailwind.config.js           # Tailwind CSS configuration
├── 📄 tsconfig.json                # TypeScript configuration
├── 📄 vercel.json                  # Vercel deployment config
└── 📄 README.md                    # Documentation (this file)

---

📖 Panduan Penggunaan

Login & Authentication

1. Akses halaman login di /login
2. Masukkan credentials sesuai role
3. Setelah login, Anda akan diarahkan ke dashboard utama

Navigasi Dashboard

• Sidebar: Navigasi utama ke semua program
• Header: Informasi user, theme toggle, dan menu
• Breadcrumb: Lokasi saat ini dalam aplikasi

Menggunakan Filter

1. Klik dropdown filter di bagian atas dashboard
2. Pilih provinsi/kabupaten yang ingin ditampilkan
3. Data akan di-filter secara otomatis

Export Data

1. Buka halaman Database (/database)
2. Pilih dataset yang ingin di-export
3. Klik tombol "Export CSV" atau "Export JSON"
4. File akan ter-download otomatis

Print Report

1. Di halaman Database, klik tombol "Print"
2. Browser akan membuka dialog print
3. Pilih printer atau save as PDF

---

🔐 Keamanan & Enkripsi

Role-Based Access Control (RBAC)

Sistem mengimplementasikan RBAC dengan 3 tingkat akses:

┌─────────────────────────────────────────────────────────────┐
│                     PERMISSION MATRIX                        │
├─────────────┬───────────┬───────────┬───────────────────────┤
│ Permission  │   Admin   │  Operator │       Viewer          │
├─────────────┼───────────┼───────────┼───────────────────────┤
│ View Data   │     ✅    │     ✅    │          ✅           │
│ Edit Data   │     ✅    │     ✅    │          ❌           │
│ Delete Data │     ✅    │     ❌    │          ❌           │
│ Export Data │     ✅    │     ✅    │          ❌           │
│ Manage Users│     ✅    │     ❌    │          ❌           │
│ View Logs   │     ✅    │     ❌    │          ❌           │
│ Settings    │     ✅    │     ❌    │          ❌           │
└─────────────┴───────────┴───────────┴───────────────────────┘

Security Features

Feature	Deskripsi
Authentication Gate	Semua halaman protected memerlukan login
Permission Check	Validasi permission sebelum render konten
Session Management	Tracking last login dan session aktif
Account Lockout	Kemampuan disable akun tidak aktif
Audit Trail	Logging lengkap semua aktivitas pengguna

Activity Logging

Sistem mencatat semua aktivitas berikut:

type ActivityAction =
  | 'LOGIN'           // User login
  | 'LOGOUT'          // User logout
  | 'CREATE_USER'     // Pembuatan user baru
  | 'UPDATE_USER'     // Update data user
  | 'DELETE_USER'     // Hapus user
  | 'TOGGLE_USER_STATUS'  // Aktivasi/deaktivasi user
  | 'EXPORT_DATA'     // Export data
  | 'DELETE_DATA';    // Hapus data

Data Protection

Aspek	Implementasi
Client-side Storage	Data tersimpan di Local Storage dengan partisi terpisah
State Persistence	Zustand middleware untuk persist state dengan enkripsi key
No Backend Exposure	Tidak ada API endpoint yang terekspos
Secure Headers	Next.js security headers (CSP, HSTS)

Future Security Enhancements

• JWT Token-based authentication
• Server-side session management
• Data encryption at rest (AES-256)
• Two-factor authentication (2FA)
• Rate limiting & brute force protection
• IP whitelisting untuk admin access

---

⌨️ Keyboard Shortcuts

Untuk meningkatkan produktivitas, tersedia keyboard shortcuts:

Shortcut	Action
Ctrl + K	Focus search bar
Ctrl + Shift + D	Toggle dark/light mode
Alt + H	Go to Home (Overview)
Alt + B	Go to BSPS Dashboard
Alt + M	Go to Kumuh Dashboard
Alt + S	Go to Sanitasi Dashboard
/	Show keyboard shortcuts modal

---

📊 Data & API

Data Structure

BSPS Data

interface BSPSData {
  id: string;
  kabupaten: string;        // Nama kabupaten/kota
  provinsi: string;         // Nama provinsi
  target: number;           // Target unit
  realisasi: number;        // Realisasi unit
  persentase: number;       // Persentase pencapaian
  status: 'on-track' | 'warning' | 'danger';
  lat: number;              // Latitude
  lng: number;              // Longitude
}

BSPS Anggaran 2025

interface BSPSAnggaran2025 {
  id: string;
  provinsi: string;
  kodeProvinsi: string;
  alokasiUnit: number;
  paguAnggaran: number;         // dalam Rupiah
  realisasiAnggaran: number;
  persentaseRealisasi: number;
  verifikasi: number;           // persentase verifikasi
  progressFisik: {
    belumMulai: number;
    awalPekerjaan: number;
    pertengahan: number;
    selesai: number;
  };
  statusPencairan: 'Belum' | 'Proses' | 'SPM' | 'SP2D' | 'Selesai';
  permasalahan: string[];
  tindakLanjut: string[];
  lastUpdated: string;          // ISO date string
}

Kumuh Data

interface KumuhData {
  id: string;
  kabupaten: string;
  provinsi: string;
  progresFisikRencana: number;      // persentase
  progresFisikRealisasi: number;
  deviasi: number;                  // bisa negatif
  paguAnggaran: number;
  realisasiAnggaran: number;
  persentaseRealisasi: number;
}

Sanitasi Data

interface SanitasiData {
  id: string;
  wilayah: string;
  provinsi: string;
  jumlahRumah: number;
  sanitasiLayak: number;
  persentase: number;
  tipe: 'Septic Tank' | 'IPAL Komunal' | 'MCK' | 'PDAM';
}

Utility Functions

// Format number dengan locale Indonesia
formatNumber(value: number): string

// Format currency ke Rupiah
formatCurrency(value: number): string

// Format persentase dengan 2 desimal
formatPercentage(value: number): string

// Get status color berdasarkan nilai
getStatusColor(status: string): string

// Export data ke CSV
exportToCSV(data: any[], filename: string, columns: Column[]): void

// Export data ke JSON
exportToJSON(data: any[], filename: string): void

// Print table dengan styling
printTable(data: any[], columns: Column[], title: string): void

---

🚀 Deployment

Vercel (Recommended)

Proyek ini dikonfigurasi untuk deploy ke Vercel dengan mudah:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Deploy ke production
vercel --prod

Vercel Configuration

{
  "framework": "nextjs",
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "regions": ["sin1"],
  "functions": {
    "app/**/*.js": {
      "maxDuration": 10
    }
  }
}

Docker Deployment

# Dockerfile
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

EXPOSE 3000
CMD ["npm", "start"]

# Build dan run
docker build -t dashboard-monitoring .
docker run -p 3000:3000 dashboard-monitoring

Manual Server Deployment

# 1. Clone di server
git clone https://github.com/subkhanibnuaji/dashboard-monitoring-progress.git
cd dashboard-monitoring-progress

# 2. Install dependencies
npm ci --production

# 3. Build
npm run build

# 4. Start dengan PM2
pm2 start npm --name "dashboard" -- start

---

⚡ Performance & Optimasi

Built-in Optimizations

Optimization	Deskripsi
SWC Minification	Kompilasi dan minifikasi dengan SWC (lebih cepat dari Babel)
Image Optimization	Automatic image optimization via Next.js
Code Splitting	Automatic code splitting per-page
Tree Shaking	Eliminasi dead code saat build
Incremental Compilation	TypeScript incremental build

Performance Metrics Target

Metric	Target	Keterangan
First Contentful Paint	< 1.5s	Waktu hingga konten pertama muncul
Largest Contentful Paint	< 2.5s	Waktu hingga konten terbesar muncul
Time to Interactive	< 3.0s	Waktu hingga halaman interaktif
Cumulative Layout Shift	< 0.1	Stabilitas layout

Best Practices Implemented

• ✅ Memoization dengan useMemo untuk komputasi berat
• ✅ Lazy loading untuk komponen non-critical
• ✅ Optimized re-renders dengan Zustand
• ✅ Efficient data structures
• ✅ Minimal bundle size

---

🗺️ Roadmap Pengembangan

Phase 1: Foundation ✅ (Completed)

• Setup Next.js 14 dengan TypeScript
• Implementasi Tailwind CSS theming
• Dashboard Overview dengan KPI
• Dashboard BSPS dengan charts dan peta
• Dashboard Kumuh dengan progress tracking
• Dashboard Sanitasi
• Role-based access control
• Activity logging
• Dark/Light mode
• Responsive design
• PWA manifest

Phase 2: Enhanced Features 🔄 (In Progress)

• BSPS Anggaran 2025 monitoring
• Kumuh Monitoring dengan GENESIS features
• User management system
• Database export (CSV/JSON)
• Keyboard shortcuts
• Toast notifications
• Advanced filtering dan search
• Batch data operations
• Custom date range picker

Phase 3: Backend Integration 📋 (Planned)

• REST API development
• PostgreSQL database integration
• Real-time data updates (WebSocket)
• Authentication dengan JWT
• API rate limiting
• Data caching layer (Redis)
• File upload untuk dokumen

Phase 4: Advanced Analytics 📋 (Planned)

• Predictive analytics
• AI-powered insights
• Custom report builder
• Scheduled report generation
• Email notification system
• WhatsApp integration
• Dashboard embedding

Phase 5: Enterprise Features 📋 (Planned)

• Multi-tenant architecture
• SSO integration (Keycloak/LDAP)
• Audit compliance reporting
• Data encryption at rest
• Backup & disaster recovery
• High availability setup
• Performance monitoring (APM)

Phase 6: Mobile & Offline 📋 (Planned)

• Native mobile app (React Native)
• Offline-first architecture
• Push notifications
• Location-based features
• Camera integration untuk dokumentasi
• Barcode/QR scanner

---

🤝 Contributing

Kami menyambut kontribusi dari komunitas! Berikut panduan untuk berkontribusi:

Development Workflow

# 1. Fork repository
# 2. Clone fork Anda
git clone https://github.com/YOUR_USERNAME/dashboard-monitoring-progress.git

# 3. Buat branch baru
git checkout -b feature/nama-fitur

# 4. Lakukan perubahan dan commit
git add .
git commit -m "feat: menambahkan fitur baru"

# 5. Push ke fork
git push origin feature/nama-fitur

# 6. Buat Pull Request

Commit Convention

Gunakan format commit message berikut:

<type>(<scope>): <description>

[optional body]
[optional footer]

Type	Deskripsi
feat	Fitur baru
fix	Bug fix
docs	Dokumentasi
style	Formatting, tidak mengubah logic
refactor	Refactoring kode
test	Menambah/memperbaiki tests
chore	Maintenance tasks

Code Style

• Gunakan TypeScript strict mode
• Follow ESLint rules yang sudah dikonfigurasi
• Gunakan Tailwind CSS untuk styling
• Tulis komponen sebagai functional components
• Implementasi proper error handling

Pull Request Guidelines

1. Pastikan semua tests pass
2. Update dokumentasi jika diperlukan
3. Sertakan screenshots untuk UI changes
4. Link ke issue yang terkait
5. Minta review dari maintainer

---

📄 License

MIT License

Copyright (c) 2024 Subkhan Ibnu Aji

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

📞 Kontak & Support

<div align="center">

Developer

Subkhan Ibnu Aji

Project Links

</div>

---

<div align="center">

⭐ Star Repository Ini

Jika proyek ini membantu Anda, berikan ⭐ star untuk mendukung pengembangan!

<br>

Made with ❤️ for Indonesia's Housing & Settlement Programs

<br>

</div>