Website Rental Mobil Pintar — Sistem Manajemen Rental Mobil All-in-One
Solusi digital lengkap untuk bisnis rental mobil modern. Dari katalog publik hingga buku kas per unit, dari bagi hasil mitra hingga dynamic pricing — semuanya dalam satu platform yang elegan, aman, dan siap deploy ke produksi. Dibangun di atas Next.js 15 dan Supabase (PostgreSQL), platform ini dirancang untuk pemilik usaha rental mobil yang ingin mendigitalisasi seluruh operasional bisnis mereka — mulai dari vitrine mobil di website, pencatatan keuangan kas masuk/keluar per plat nomor, manajemen armada fisik multi-unit, sistem bagi hasil mitra konsinyasi, hingga pengaturan SEO dan integrasi pemasaran digital — tanpa perlu menyewa developer terpisah. 📋 Daftar Isi Arsitektur & Teknologi Fitur Halaman Publik (Pelanggan) Fitur Dashboard Admin Dashboard Utama Setup Mobil Keuangan & Kas Penyesuaian Harga Manajemen Blog Galeri Publik Halaman & Kontak Navigasi Menu Pengaturan SEO Marketing & Integrasi Pengaturan Web Pengaturan Akun Keamanan & Arsitektur Data Persiapan & Instalasi Deployment Produksi Skema Database 🏗 Arsitektur & Teknologi Lapisan Teknologi Keterangan Framework Next.js 15 (App Router) Server-Side Rendering dinamis, Server Actions, React 19 Database Supabase (PostgreSQL) Realtime database dengan Row Level Security Autentikasi Supabase Auth + @supabase/ssr Session-based auth dengan cookie management Styling Tailwind CSS 3 + Radix UI Design system modern dengan komponen aksesibel Charts Recharts Grafik interaktif arus kas & insight armada Data Table TanStack React Table Tabel data canggih dengan sorting, filter, dan paginasi Ikon Tabler Icons React 5000+ ikon premium SVG Notifikasi Sonner Toast notifications yang elegan Deployment Vercel Optimized untuk Next.js, global CDN 🌐 Fitur Halaman Publik (Pelanggan) 🏠 Beranda & Katalog Mobil Hero Section dinamis — Judul dan sub-judul yang dapat diedit langsung dari dashboard admin tanpa coding. Badge statistik armada real-time — Menampilkan jumlah mobil tersedia, sedang disewa, dan total armada (konfigurabel on/off dari dashboard). Banner promo animasi — Teks promo yang muncul di bagian atas halaman, bisa diaktifkan/nonaktifkan dari dashboard. Katalog mobil responsif — Grid kartu mobil lengkap dengan foto, spesifikasi (transmisi, kapasitas, BBM, tipe, tahun), harga sewa harian, label promo, dan status ketersediaan. Multi-tier pricing — Mendukung 4 jenis harga sekaligus: Harga Lepas Kunci, Harga + Supir, Harga All-In, dan Harga Promo. Pencarian & filter cerdas — Filter berdasarkan kata kunci, tipe mobil, jenis bahan bakar, dan filter promo saja — semua kategori diambil secara dinamis dari database. Dynamic Pricing otomatis — Harga yang ditampilkan ke pelanggan otomatis menyesuaikan berdasarkan jadwal kenaikan/penurunan musiman yang diatur di dashboard. 📱 Integrasi WhatsApp Tombol Sewa via WhatsApp — Setiap kartu mobil memiliki tombol yang langsung membuka WhatsApp dengan pesan otomatis berisi nama mobil yang dipilih. Floating WhatsApp Button — Tombol pintasan WhatsApp melayang di sudut kanan bawah dengan pesan default yang konfigurabel. 📄 Halaman Statis Halaman Kontak (/hubungi-kami) — Informasi alamat, nomor telepon, email, dan embed Google Maps interaktif. Kebijakan Privasi (/kebijakan-privasi) — Konten rich-text HTML yang aman, diedit dari dashboard. Syarat & Ketentuan (/syarat-ketentuan) — Konten legalitas yang dikelola penuh dari dashboard. Blog & Artikel (/blog) — Sistem blog lengkap dengan listing dan halaman detail per artikel (/blog/[slug]). Galeri Foto (/galeri) — Timeline visual momen dan armada, dikelola dari dashboard. 🎨 Desain & UX Dark mode / Light mode — Deteksi otomatis tema sistem pengguna, bisa di-toggle manual. Animasi premium — Fade-in, slide-in, zoom, dan micro-interactions pada setiap elemen UI. Fully responsive — Tampilan optimal dari layar 320px (mobile) hingga ultra-wide desktop. Font modern — Menggunakan font Geist Sans dan Geist Mono untuk kesan profesional. Navigasi dinamis — Header dan footer menu dikelola langsung dari database. 🖥 Fitur Dashboard Admin (11 Modul) Dashboard admin dilindungi autentikasi Supabase Auth dengan captcha matematika. Tampilan menggunakan sidebar navigasi yang terorganisir dalam 3 kelompok: Operasional & Keuangan, Konten & Publik, dan Konfigurasi. 1. 📊 Dashboard Utama — Pusat Komando Bisnis Route: /dashboard Halaman ringkasan eksekutif yang memberikan gambaran menyeluruh kondisi bisnis rental Anda dalam sekali pandang. Kartu Ringkasan Keuangan (6 kartu): 💰 Total Omzet — Akumulasi seluruh pemasukan sewa armada 📉 Total Pengeluaran — Biaya oli, bensin, service, dan operasional 📈 Keuntungan Bersih — Laba bersih kas (omzet dikurangi pengeluaran) ✅ Armada Tersedia — Jumlah unit siap disewa 📅 Armada Disewa — Jumlah unit sedang jalan 🔧 Armada di Bengkel — Unit dalam maintenance & perbaikan Grafik Arus Kas Interaktif: Chart area dengan toggle periode 7 hari / 30 hari / 90 hari terakhir Overlay visual omzet masuk vs pengeluaran keluar per hari Tooltip detail saat hover pada titik data Insight Performa Armada (2 grafik): 📊 Performa Keuangan Per Plat Nomor — Bar chart perbandingan pendapatan vs pengeluaran per unit mobil (Top 10) 🏆 Mobil Paling Sering Disewa — Horizontal bar chart frekuensi transaksi sewa per unit (Top 6) Tabel Transaksi Terbaru: 10 transaksi terakhir ditampilkan dalam tabel ringkas dengan badge tipe (masuk/keluar), nominal, plat nomor, dan deskripsi 2. 🚗 Setup Mobil — Manajemen Armada & Unit Fisik Route: /dashboard/setup-mobil Pusat pengelolaan seluruh inventaris mobil rental Anda dengan sistem 2 tingkat yang canggih: Model Mobil (produk) dan Unit Fisik (plat nomor individual). Ringkasan Armada (4 kartu status): Kartu Tersedia, Disewa, di Bengkel, dan Total Armada Fisik Manajemen Model Mobil (CRUD Lengkap): ➕ Tambah Mobil Baru — Dialog form lengkap: nama, prioritas tampil, 4 kolom harga (lepas kunci, + supir, all-in, promo), nama promo, transmisi (Manual/Matic), kapasitas penumpang, tahun, URL gambar, tipe (SUV/MPV/Sedan/dll), jenis BBM, deskripsi, kuantitas ✏️ Edit Mobil — Klik baris tabel untuk langsung membuka dialog edit 🗑️ Hapus Mobil — Konfirmasi sebelum penghapusan (cascade ke semua unit terkait) 🔄 Ubah Status — Toggle cepat antara Tersedia dan Disewa Manajemen Unit Fisik Per Plat Nomor: 📋 Kelola Unit (Plat) — Setiap model mobil bisa memiliki banyak unit fisik dengan plat nomor berbeda Tambah plat nomor baru, set status individual (Tersedia / Disewa / Bengkel) Pengaturan Konsinyasi Mitra per unit: Tipe kepemilikan: Internal atau Mitra Nama pemilik mitra & nomor WhatsApp Model bagi hasil: Net Profit Share, Gross Revenue Share, atau Flat Lease Persentase bagi hasil (konfigurabel per unit) Tarif flat lease bulanan Tabel Data Canggih: Pencarian nama mobil Kustomisasi kolom yang ditampilkan Paginasi (10/20/30/40/50 baris per halaman) Sorting per kolom 3. 💰 Keuangan & Kas — Buku Kas Digital Per Unit Mobil Route: /dashboard/finance Modul keuangan paling komprehensif yang mengubah cara Anda melacak setiap rupiah masuk dan keluar dari bisnis rental. Pemilih Periode Laporan: Dropdown filter per bulan/tahun atau "Semua Waktu" Semua kalkulasi otomatis menyesuaikan dengan periode yang dipilih Kartu Ringkasan Keuangan (4 kartu utama): 💰 Omzet — Total kas masuk pada periode terpilih 📉 Pengeluaran — Total kas keluar pada periode terpilih 📊 Laba Bersih — Selisih otomatis omzet dikurangi pengeluaran 📏 Indikator Kesehatan Kas — Bar visual rasio pengeluaran terhadap omzet dengan label otomatis (Sangat Sehat / Sehat / Perlu Perhatian / Waspada) Ringkasan Konsinyasi Armada (jika ada mitra): 🤝 Bagi Hasil Mitra — Total kewajiban bayar ke pemilik mobil mitra 📈 Laba Murni Rental — Laba bersih setelah dipotong bagi hasil seluruh mitra ⚙️ Rasio Armada — Persentase mobil titipan vs internal Form Pencatatan Transaksi: Combobox pencarian unit — Autocomplete plat nomor, nama mobil, dan status unit Opsi "Transaksi Umum / Operasional" untuk biaya yang tidak terkait unit spesifik Toggle visual Kas Masuk (hijau) / Kas Keluar (merah) Input tanggal, nominal, dan deskripsi Konversi terbilang otomatis ("Dua Juta Lima Ratus Ribu Rupiah") Breakdown Alokasi Pengeluaran: Pie chart visual dengan 6 kategori otomatis: BBM & Solar, Gaji & Honor, Servis & Oli, Cuci & Salon, Sewa Ruko, Lain-lain Persentase dan nominal masing-masing kategori Riwayat Kas & Transaksi (Compact View): Tabel riwayat lengkap dengan pencarian (deskripsi, plat, nama mobil), filter tipe (Semua/Masuk/Keluar) Badge warna untuk tipe transaksi Tombol hapus per transaksi Export CSV — Download seluruh data transaksi ke file CSV (kompatibel Google Sheets & Excel, UTF-8 BOM) Peringkat Profitabilitas Armada: 🏆 Leaderboard semua unit mobil diurutkan berdasarkan profit tertinggi Kotak pencarian untuk filter cepat berdasarkan plat nomor atau nama mobil Setiap entry menampilkan: plat nomor, nama mobil, pendapatan, pengeluaran, profit, dan margin Klik untuk expand detail: spesifikasi kendaraan, harga sewa bawaan Progress bar profit — Visualisasi progres menuju target profit harian Laporan Bagi Hasil Mitra (Semua Waktu): 📋 Dikelompokkan berdasarkan nama dan nomor telepon mitra (menggabungkan jika satu mitra titip banyak mobil) Detail per unit: plat nomor, pendapatan, pengeluaran, laba bersih, bagian mitra Skema bagi hasil transparan (Net Profit / Gross Revenue / Flat Lease) Tombol Tandai Lunas — Tandai pembayaran bagi hasil per unit per periode Badge status: ✅ Sudah Dibayar / ⚠️ Belum Dibayar Tombol Salin Ringkasan — Copy rincian bagi hasil ke clipboard untuk dikirim ke mitra Tombol Kirim via WhatsApp — Langsung buka WhatsApp dengan format laporan bagi hasil ke nomor mitra 4. 📈 Penyesuaian Harga — Dynamic Pricing Engine Route: /dashboard/price-adjustments Atur kenaikan atau penurunan harga sewa secara otomatis berdasarkan jadwal musiman. Target fleksibel — Aturan bisa diterapkan ke Semua Mobil (Global) atau ke satu model mobil spesifik Persentase konfigurabel — Nilai positif (naik harga), negatif (diskon). Contoh: +20% untuk Lebaran, -10% untuk promo weekend Tanggal berlaku — Set mulai dan selesai otomatis Label event — Beri nama musim/event (misalnya: "Musim Libur Lebaran", "Weekend Promo") Status otomatis — Badge: Aktif Sekarang (hijau), Akan Datang (kuning), atau Sudah Lewat (abu-abu) Harga publik otomatis berubah — Pelanggan melihat harga yang sudah disesuaikan di halaman depan selama periode aktif Hapus aturan — Tombol hapus per jadwal 5. ✍️ Manajemen Blog — Content Marketing Route: /dashboard/blog Sistem penulisan artikel lengkap untuk mendongkrak SEO dan membagikan konten ke pelanggan. Rich Text Editor — Editor visual dengan toolbar formatting (Bold, Italic, Underline, Heading, List, dll) Kustom URL Slug — Atur URL ramah SEO untuk setiap artikel (contoh: /blog/tips-sewa-mobil-murah) Gambar Utama — Input URL gambar cover artikel Status Publikasi — Draft (simpan sebagai konsep) atau Publish (langsung tampil di website) Tanggal Publikasi — Atur jadwal tanggal publish Preview publik — Artikel yang di-publish tampil di halaman /blog dengan layout blog modern Edit & Hapus — CRUD lengkap untuk semua artikel 6. 📸 Galeri Publik — Showcase Visual Route: /dashboard/gallery Kelola showcase foto armada, momen pelanggan, atau layanan Anda. Upload via URL — Masukkan link gambar dari layanan hosting eksternal (Imgur, Unsplash, dll) Judul & Tahun — Setiap foto dilabeli dengan judul singkat dan tahun momen untuk tampilan timeline Grid galeri interaktif — Hover reveal dengan animasi zoom dan overlay info Hapus foto — Tombol hapus langsung di overlay card Tampil di halaman publik — Semua foto otomatis muncul di halaman /galeri 7. 📝 Halaman & Kontak — Branding & Legalitas Route: /dashboard/halaman-statis Pusat pengelolaan identitas brand dan dokumen legalitas bisnis Anda. Informasi Publik & Kontak: Nama Merek / Perusahaan Nomor WhatsApp Sentral Email Layanan Alamat Operasional (teks bebas multi-baris) Google Maps Embed URL (iframe embed peta lokasi) Hero Section Beranda: Judul Utama Hero — Teks besar yang tampil di banner utama halaman depan Sub-judul Hero — Teks deskriptif di bawah judul utama Dokumen Legalitas (Rich Text Editor): 📜 Kebijakan Privasi — Editor visual HTML lengkap 📋 Syarat & Ketentuan — Editor visual HTML lengkap Kedua dokumen tampil di halaman publik masing-masing (/kebijakan-privasi dan /syarat-ketentuan) 8. 🧭 Navigasi Menu — Dynamic Menu Builder Route: /dashboard/navigation Kelola struktur menu navigasi website secara real-time tanpa menyentuh kode. Menu Header — Link navigasi atas website Menu Footer — Link navigasi bawah website Per-item control: Nama Menu / Tampilan (teks yang ditampilkan) Link URL Tujuan (internal /path atau eksternal https://...) Indeks Urutan (angka prioritas tampil) Posisi (Navigasi Atas / Navigasi Bawah) Edit & Hapus — CRUD lengkap Menu default terlindungi — Menu bawaan sistem tidak dapat dihapus, hanya bisa ditimpa 9. 🔍 Pengaturan SEO — SEO Global Control Route: /dashboard/seo Optimasi mesin pencari website Anda tanpa perlu developer. Meta Title — Judul yang muncul di tab browser dan hasil pencarian Google Meta Description — Deskripsi ringkas di bawah judul pada halaman pencarian Meta Keywords — Kata kunci untuk crawler (dipisah koma) Author — Nama perusahaan / penulis Robots — Instruksi untuk crawler (default: index, follow) Canonical URL — URL preferensi untuk mencegah duplikasi indeks Open Graph Image — Gambar preview saat link dibagikan ke WhatsApp, Facebook, Twitter, dll 10. 📡 Marketing & Integrasi — Analytics, Pixel & Script Route: /dashboard/marketing Hubungkan website Anda dengan platform pemasaran digital favorit. Google Analytics ID (GA4) — Masukkan Measurement ID (format G-XXXXXXXXXX) untuk melacak traffic website Meta Pixel ID (Facebook) — Masukkan Pixel ID untuk tracking konversi dan retargeting iklan Facebook/Instagram Custom Script HTML/JS — Area kode bebas untuk menyematkan: Widget live chat (Tawk.to, Crisp, dll) Script verifikasi webmaster (Google Search Console, Bing, dll) Analytics pihak ketiga (Hotjar, Microsoft Clarity, dll) Tag manager atau script lainnya 11. ⚙️ Pengaturan Web — Tampilan & Widget Route: /dashboard/web-settings Kontrol granular terhadap elemen-elemen yang ditampilkan di halaman publik. Statistik Armada (Toggle On/Off): ✅ Tampilkan jumlah Armada Tersedia ✅ Tampilkan jumlah Armada Disewa ✅ Tampilkan Total Armada Banner Promo (Toggle On/Off + Teks Custom): Aktifkan/nonaktifkan banner promosi di bagian atas halaman Edit teks promo sesuai campaign yang sedang berjalan Tombol Pintasan WhatsApp (Toggle On/Off + Pesan Default): Aktifkan/nonaktifkan floating WhatsApp button di sudut kanan bawah Konfigurasi pesan default yang dikirim saat pelanggan klik tombol tersebut 12. 🔐 Pengaturan Akun — Keamanan Admin Route: /dashboard/settings Ganti Password — Form perubahan password admin langsung dari dashboard Log Out — Tombol keluar yang mengakhiri sesi login dan memerlukan re-login Lupa Password — Alur reset password melalui email Supabase Auth (/forgot-password → /reset-password) 🛡 Keamanan & Arsitektur Data Row Level Security (RLS) Setiap tabel di Supabase dilindungi oleh kebijakan RLS: Tipe Akses Aturan Publik (SELECT) Tabel cars, settings, seo, gallery, blogs, navigation_menus, price_adjustments dapat dibaca oleh semua pengunjung Admin Only Tabel car_transactions, partner_payouts hanya bisa diakses oleh pengguna terautentikasi Admin Full (CRUD) Semua operasi tulis (INSERT, UPDATE, DELETE) memerlukan auth.role() = 'authenticated' Proteksi Ganda Server-Side Setiap mutasi data dilindungi oleh 2 lapis keamanan: Supabase RLS — Database menolak operasi jika tidak terautentikasi Server Action Guard — Fungsi isAuthenticated() memverifikasi session Supabase sebelum setiap aksi Autentikasi Login melalui Supabase Auth (Email + Password) Captcha matematika untuk mencegah bot Session berbasis cookie dengan @supabase/ssr Alur Forgot Password → Reset Password via email ⚙️ Persiapan & Instalasi 1. Buat Proyek Supabase Buka supabase.com → New Project Pilih region terdekat (Singapore untuk Indonesia) Catat Project URL dan Anon Key dari Settings → API 2. Jalankan Skema Database Buka SQL Editor di Supabase Dashboard, salin isi file supabase_schema.sql, lalu klik Run. Skrip ini bersifat idempotent (aman dijalankan berulang kali). 3. Buat Akun Admin Di Supabase Dashboard → Authentication → Users → Add User → Masukkan email & password → Aktifkan "Auto-confirm User" 4. Konfigurasi Environment Buat file .env.local di root proyek: NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key 5. Jalankan Aplikasi # Instal dependensi npm install # Jalankan development server npm run dev # Buka di browser # http://localhost:3000 → Halaman publik # http://localhost:3000/login → Login admin 6. Migrasi Data Lama (Opsional) Jika memiliki data dari versi JSON lokal: node scripts/migrate-to-supabase.js 7. Verifikasi Diagnostik Buka http://localhost:3000/api/diagnose untuk memeriksa status koneksi database. 🚀 Deployment Produksi Platform ini dioptimalkan untuk deployment di Vercel: Push repositori ke GitHub Import proyek di vercel.com Tambahkan Environment Variables: NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_ANON_KEY Deploy otomatis pada setiap push ke branch main Lihat vercel_production_notes.md untuk panduan lengkap termasuk konfigurasi Vercel Blob Store. 🗄 Skema Database (10 Tabel) # Tabel Fungsi 1 settings Konfigurasi global (branding, kontak, hero, promo, WhatsApp) 2 seo Metadata SEO (title, description, keywords, OG image) 3 cars Katalog model mobil (nama, harga, spesifikasi, gambar) 4 car_units Unit fisik per plat nomor + konfigurasi konsinyasi mitra 5 car_transactions Buku kas masuk/keluar per unit mobil 6 partner_payouts Tracking status bagi hasil mitra per periode 7 price_adjustments Jadwal dynamic pricing musiman 8 blogs Artikel blog (judul, slug, konten, gambar, status) 9 gallery Foto galeri publik (judul, tahun, URL gambar) 10 navigation_menus Menu navigasi header & footer Detail lengkap skema database tersedia di supabase_schema.sql.Panduan setup Supabase langkah demi langkah tersedia di userguide_supabase.md. 📄 Lisensi Proyek ini bersifat proprietary. Hak cipta dilindungi. Website Rental Mobil Pintar — Dibangun dengan ❤️ untuk pemilik usaha rental mobil Indonesia.
