SIMONI

Sistem Informasi Monitoring

Aplikasi monitoring berbasis web untuk pemantauan pelaksanaan Program Bantuan Perumahan bagi Masyarakat Berpenghasilan Rendah (MBR) di bawah Direktorat Pengembangan Kawasan Permukiman, Kementerian PKP.

Fitur Utama

• Dashboard - Ringkasan statistik, peta lokasi proyek (Leaflet/OpenStreetMap), grafik anggaran per provinsi, dan daftar proyek aktif
• Data Teknis - Manajemen data teknis perumahan (CRUD), komponen prasarana sarana, informasi kontrak, lokasi, dan jadwal pelaksanaan
• Pelaporan Progress - Laporan progress mingguan dengan kurva S (rencana vs realisasi), dokumentasi foto, kendala, dan tindak lanjut
• Manajemen Pengguna - Kelola akun pengguna dengan 5 level role dan hak akses berbeda
• Profil - Pengaturan profil pengguna dan ganti password
• Panel Admin - Informasi sistem, statistik, dan konfigurasi
• Export Excel - Download data teknis dan laporan progress ke format Excel (.xlsx)

Role & Hak Akses

Role	Lihat	Tambah	Edit	Hapus
Administrator	✓	✓	✓	✓
Direktorat RUK	✓	✓	✓	✓
Balai P2P	✓	✓	✓	✗
Satker PnP	✓	✓	✓	✗
PPK	✓	✗	✗	✗

Tech Stack

• Frontend: Next.js 16, React 19, TypeScript, Tailwind CSS 4
• Backend: Next.js API Routes
• Database: SQLite (dev) / PostgreSQL (production) via Prisma ORM
• Auth: NextAuth.js v5
• Map: Leaflet + OpenStreetMap
• Charts: Recharts
• Export: SheetJS (xlsx)

Instalasi

# Clone repository
git clone <repo-url>
cd simoni

# Install dependencies
npm install

# Generate Prisma client & push schema
npx prisma generate
npx prisma db push

# Seed database dengan data sample
npx tsx prisma/seed.ts

# Jalankan development server
npm run dev

Buka http://localhost:3000 di browser.

Akun Demo

Role	Email	Password
Admin	admin@simoni.go.id	admin123
Direktorat RUK	direktorat@simoni.go.id	admin123
Balai P2P	balai@simoni.go.id	admin123
Satker PnP	satker@simoni.go.id	admin123
PPK	ppk@simoni.go.id	admin123

Struktur Proyek

src/
├── app/
│   ├── api/              # API Routes
│   │   ├── auth/         # NextAuth endpoints
│   │   ├── dashboard/    # Dashboard statistics
│   │   ├── technical-data/ # Technical data CRUD
│   │   ├── progress-reports/ # Progress reports CRUD
│   │   ├── users/        # User management
│   │   ├── projects/     # Project listing
│   │   └── upload/       # File upload
│   ├── dashboard/        # Dashboard page
│   ├── technical-data/   # Technical data pages
│   ├── progress-reports/ # Progress reports pages
│   ├── users/            # User management pages
│   ├── profile/          # Profile page
│   ├── admin/            # Admin panel
│   └── login/            # Login page
├── components/
│   ├── layout/           # Layout components (Sidebar, Header, AppLayout)
│   ├── ui/               # Reusable UI components
│   ├── maps/             # Map components
│   └── charts/           # Chart components
├── lib/                  # Core libraries (Prisma, Auth)
└── types/                # TypeScript types & constants

Deployment

Untuk production, ganti DATABASE_URL di .env ke PostgreSQL dan ubah provider di prisma/schema.prisma:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}