Back to projects
05-02-2026

SIPETA LOBAR

"Sistem Informasi Pemetaan Lokasi dan Rekomendasi Usaha Lombok Barat"

SIPETA LOBAR
See Demo Repository

DPMPTSP Admin Panel - Lombok Barat

Sistem admin panel lengkap untuk mengelola data usaha, wilayah, dan users di DPMPTSP Kabupaten Lombok Barat.

🎯 Fitur Utama --

Admin Panel (/admin)

  1. Dashboard - Overview statistik usaha, wilayah, dan users
  2. CRUD Usaha - Tambah, edit, hapus lokasi usaha dengan upload foto
  3. CRUD Wilayah - Kelola wilayah, RDTR, dan rekomendasi usaha
  4. CRUD Users/Admin - Manage akun admin dan users

User Biasa

  1. Homepage - Informasi umum dan panduan
  2. Cek Wilayah - Check area potensial dan rekomendasi usaha
  3. Peta Usaha - Lihat semua usaha di map dengan detail lengkap
  4. Info Perizinan - Edukasi tentang proses perizinan
  5. FAQ & Contact - Tanya jawab dan form kontak

🚀 Quick Start

Lihat QUICK_START.md untuk setup 5 menit, atau SETUP_LOCAL.md untuk dokumentasi lengkap.

# 1. Setup MySQL
mysql -u root -p
# CREATE DATABASE dpmptsp_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

# 2. Install & Setup
npm install
cp .env.local.example .env.local
# Edit .env.local dengan DATABASE_URL yang benar

# 3. Database migration
npx prisma db push

# 4. Run development
npm run dev


Akses di:

  1. User: http://localhost:3000
  2. Admin: http://localhost:3000/admin

📁 Project Structure

├── app/
│ ├── admin/ # Admin panel pages & forms
│ ├── api/ # API routes (CRUD)
│ ├── (public pages) # User pages (peta-usaha, cek-wilayah, dll)
├── components/
│ ├── admin/ # Admin components (navbar, sidebar)
│ ├── public/ # Public components (business map)
│ └── ui/ # Reusable UI components
├── lib/
│ ├── db.ts # Prisma client
│ └── utils.ts # Utility functions
├── prisma/
│ ├── schema.prisma # Database schema
│ └── seed.ts # Sample data
└── public/ # Static assets


🗄️ Database Schema --

Usaha (Business Listings)

  1. ID, nama, sektor, deskripsi, lokasi (lat/lon)
  2. Kontak: nama pemilik, telepon, email
  3. Gambar: foto usaha (base64)
  4. Status: aktif/nonaktif

Wilayah (Districts & Villages)

  1. Kecamatan (District): nama, lokasi, status RDTR
  2. Desa (Village): nama, kecamatan, rekomendasi usaha (JSON)
  3. Informasi: usaha_sesuai, perlu_kajian, catatan risiko

Admin (Users Management)

  1. Email, password (hashed dengan bcrypt)
  2. Role: admin, moderator
  3. Timestamps: created_at, updated_at

🔐 Security

  1. Password hashing dengan bcrypt
  2. Environment variables untuk sensitive data
  3. Prepared queries untuk prevent SQL injection
  4. Role-based access control

🛠️ Tech Stack

  1. Frontend: React + Next.js 16
  2. Styling: Tailwind CSS v4 + shadcn/ui
  3. Database: MySQL
  4. ORM: Prisma
  5. Map: Leaflet + OpenStreetMap
  6. Icons: Lucide React

📝 Development

npm run dev # Start dev server
npm run build # Build for production
npm run start # Start prod server
npm run lint # Check code quality

# Database tools
npx prisma studio # Open Prisma GUI
npx prisma db push # Sync schema
npx prisma generate # Generate client


🐛 Troubleshooting

Error: "Error connect ECONNREFUSED"

  1. MySQL server tidak berjalan, start MySQL

Error: "Unknown database"

  1. Cek database sudah dibuat: mysql -u root -p → SHOW DATABASES;

Error: "Authentication failed"

  1. Cek DATABASE_URL di .env.local
  2. Format harus: mysql://username:password@localhost:3306/db_name

Lihat SETUP_LOCAL.md untuk troubleshooting lebih lengkap.

📚 Documentation

  1. QUICK_START.md - Setup cepat 5 menit
  2. SETUP_LOCAL.md - Dokumentasi setup lengkap
  3. ADMIN_SETUP.md - Info admin credentials
  4. STRUCTURE.md - Detail struktur folder & files

📧 Support

Untuk pertanyaan atau issue, hubungi tim DPMPTSP Lombok Barat.

Version: 1.0.0

Last Updated: 2024

License: MIT


Next Project

Ngantri DPMPTSP

→