AutoRent - Rental Mobil Makassar Murah & Terpercaya

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.

🏗 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

Website Rental Mobil Pintar — Dibangun dengan ❤️ untuk pemilik usaha rental mobil Indonesia.

Website Rental Mobil Pintar — Sistem Manajemen Rental Mobil All-in-One