Kembali ke Portofolio
Visit Live Project
Next.js 16 (App Router)
TypeScript
Prisma ORM
SQLite
React 19
Tailwind CSS v4
Framer Motion
JOSE (JWT)
bcryptjs
jsPDF
XLSX
Lucide React
Sistem Multi-Tenant Workspace & Keuangan Perusahaan (Enterprise ERP-Lite)
Deskripsi Proyek
Banyak perusahaan B2B dan agensi berkembang yang kesulitan mengelola operasional secara terpisah karena menggunakan berbagai alat yang terfragmentasi (excel keuangan, spreadsheet task, Google Form cuti, dan invoice manual). Hal ini memicu risiko kebocoran data antar-entitas, ketidakakuratan laporan arus kas, serta inefisiensi koordinasi tim.
Proyek ini dibangun sebagai solusi Enterprise Resource Planning (ERP-Lite) terpadu berskala multi-tenant. Sistem ini menyediakan ruang kerja terisolasi penuh untuk setiap organisasi, mencakup 9 modul utama:
1. Keuangan & Akuntansi (Bagan Akun, Invoice PDF, Tagihan Vendor/Hutang, Budgeting, & Laporan Laba/Rugi).
2. CRM-Lite (Database Klien & Vendor terhubung ke invoice & proyek).
3. Manajemen Proyek & Task (Milestones, Time Tracking, Budget vs Actual, Komentar).
4. SDM (Departemen, Absensi Check-In/Out harian, & Approval Cuti).
5. Executive Dashboard khusus per role (Admin Control Center, Manager Operational, & Staff Personal Workspace).
6. Komunikasi & Keamanan (Notifikasi In-App, Audit Log/Activity Trail, & Billingual i18n ID/EN).
Tantangan Teknis
1. Isolasi Data Multi-Tenant & RBAC Ketat: Memastikan isolasi data 100% antar-organisasi dan hak akses granular 3 tingkat (Admin, Manager, Staff) tanpa kebocoran di level query database maupun JWT session.
2. Sinkronisasi Keuangan Kompleks: Otomatisasi kalkulasi PPN (11%), pelacakan piutang outstanding, rekonsiliasi arus kas harian, dan penyusunan Laporan Laba/Rugi (*Profit & Loss*) real-time.
3. Arsitektur Komponen & UI Adaptif: Mendukung tema gelap/terang adaptif, penanganan SSR/Server Actions Next.js 16 tanpa re-render berlebihan, serta ekspor laporan langsung ke PDF & Excel.
Solusi & Pendekatan
1. Pemodelan Database Prisma 30+ Model: Merancang skema database SQLite terstruktur dengan relasi aman, penghapusan terkonfirmasi (cascade), serta indeks unik gabungan (userId_organizationId) untuk isolasi tenant.
2. Next.js 16 App Router & Server Actions: Menggunakan Server Actions untuk mutasi data aman dari server side dan validasi token JWT JOSE, mengurangi beban JavaScript di sisi klien.
3. Modul i18n & Sistem Desain Modern: Membangun utilitas internasionalisasi (Bahasa Indonesia & English) terpadu, layout Tailwind CSS v4 dengan CSS variables adaptif, serta animasi halus menggunakan Framer Motion.
Hasil & Dampak
Proyek ini berhasil diluncurkan dengan performa responsif yang optimal, mencapai skor Lighthouse tinggi, dan menyederhanakan pelaporan operasional klien secara drastis melalui visualisasi data dasbor yang dinamis.
Project Overview
Category
Digital Product
Year
2026
Client
Confidential
Ingin Proyek Serupa?
Saya siap mendiskusikan kebutuhan sistem Anda dan membangun solusi terbaik.
Hubungi Zain →