EP

Enterprise Portfolio

Full Stack Engineering & Systems Architecture

Portofolio Pengembang Aplikasi Enterprise: Management Armada & Distribusi Penjualan

Dokumentasi arsitektur sistem, alur proses bisnis (*flowchart*), screenshot antarmuka, serta detail *Tech Stack* mendalam dari dua aplikasi enterprise skala besar.

Singapore Fleet Logistics Distributor ERP & Sales Order Node.js & Laravel Backends
Project 01 Singapore Logistics Production Ready

Hwaseng Fleet & Job Management System

Aplikasi manajemen operasional armada alat berat dan pengiriman kargo konstruksi untuk Hwa Seng Builder Pte Ltd (Singapore). Sistem ini mengelola penjadwalan *Lorry Crane*, *TMA (Truck Mounted Attenuator)*, dan *Tipper Truck*, penugasan driver, serta kalkulasi finansial biaya sewa alat/kendaraan secara real-time.

Tech Stack Details & Architecture Breakdown

Backend Architecture RESTful API & Event-Driven
  • Node.js
    Node.js & Express.js (TypeScript): Runtime cepat non-blocking I/O dengan kepastian tipe data strict TypeScript. Mencegah runtime bug pada operasi finansial & perhitungan jam sewa armada.
  • Prisma
    Prisma ORM & PostgreSQL: Penanganan relasi kompleks antara *Projects*, *Jobs*, *Vehicles*, *Drivers*, dan *Vendors*. Skema *type-safe* otomatis mempercepat agregasi biaya sewa alat berat.
  • Redis
    Redis In-Memory Caching & Lock: Digunakan untuk *Caching* status ketersediaan driver/armada real-time dan mekanisme *Distributed Lock* untuk mencegah perebutan Job bersamaan (*race condition*).
Frontend Architecture SPA Enterprise UI
  • React
    React.js Component Architecture: Desain berbasis komponen modular terpisah untuk memudahkan perawatan filter proyek, riwayat trip, dan modal verifikasi driver.
  • MUI
    Material UI (MUI) Enterprise Components: Implementasi *MUI DataGrid* interaktif dengan *custom filtering*, pagination cepat, modal dialog konfirmasi, dan statistik dashboard yang rapi.
  • Axios
    Axios & State Management: Penanganan HTTP request terpusat dengan *interceptor* autentikasi token JWT dan penanganan error terstruktur.

Alur Kerja Umum Aplikasi (Hwaseng Logistics Flow)

1 Request Client

Client memesan tipe armada (Lorry Crane, TMA, Tipper) ke Admin Hwaseng.

2 Admin Create Job

Admin memvalidasi dan menginput tiket Job ke dalam sistem.

3 Dispatch Job

Job terlempar ke driver (Sistem Direct Assign atau Rebutan Driver).

4 Driver Assigned

Driver terkonfirmasi di sistem dan memegang tiket transaksi Job.

5 Eksekusi & Lokasi

Driver bergerak menuju lokasi konstruksi client untuk eksekusi pekerjaan.

Fleet & Machinery Management

Pencatatan kepemilikan alat (*Own Machinery*, *Rented Machinery*, dan *Fleet Vehicles*) lengkap dengan harga sewa per jam/trip.

Project Cost Aggregation

Kalkulasi otomatis total biaya proyek konstruksi berdasarkan pemakaian alat berat, biaya vendor eksternal, dan insentif driver.

Multi-Role RBAC

Sistem hak akses bertingkat: *Super Admin, Site IC Bypass, Asset Manager, Vendor, dan Driver*.

Interface Screen Showcase (Hwaseng)

Klik gambar untuk memperbesar / zoom
hwaseng.dev.noid.com.sg/project/160
Zoom
Hwaseng Project Dashboard
1. Project Details & Financial Dashboard

Menampilkan *Total Cost*, breakdown biaya kendaraan, mesin sewa, serta daftar *Vehicle Job History*.

hwaseng.dev.noid.com.sg/job
Zoom
Hwaseng Job List
2. Dispatch Job Management

Daftar Job tiket (*Income & Internal*), assigned driver, tipe armada, dan *Status Tag* real-time.

hwaseng.dev.noid.com.sg/login
Zoom
Hwaseng Login Page
3. Authentication Gateway

Halaman login enterprise terproteksi dengan latar proyek konstruksi Hwa Seng Builder Pte Ltd.

Project 02 Distributor ERP & Sales Production Ready

CCA Distributor ERP & Sales Management System

Aplikasi komprehensif manajemen penjualan, stok multi-gudang, penagihan invoice, dan laporan akuntansi keuangan terpadu untuk perusahaan distributor. Memungkinkan tim *Sales Field* melakukan pemesanan barang (*Sales Order*), pembukaan *Invoice*, serta input pembayaran secara langsung via aplikasi Web selagi berkunjung ke toko/klien.

Tech Stack Details & Architecture Breakdown

Backend Architecture Robust Enterprise Accounting
  • PHP
    PHP 8 & Laravel 8 Framework: Arsitektur MVC yang solid untuk penanganan logika bisnis ERP yang kompleks. Menjamin keandalan transaksi finansial dan pembuatan nomor dokumen otomatis (SO, Invoice, Surat Jalan).
  • PostgreSQL
    PostgreSQL Relational Engine: Penyimpanan data relasional skala besar untuk *double-entry bookkeeping*, buku besar (*general ledger*), tracking mutasi stok per gudang, dan piutang dagang.
  • Database Transaction
    ACID Transactions & Eloquent ORM: Penggunaan *DB::transaction* untuk menjamin konsistensi stok barang dan jurnal keuangan ketika pesanan dikonfirmasi atau dibatalkan.
Frontend Architecture React & Dynamic Dashboard
  • React
    React.js Decoupled SPA: Antarmuka terpisah (*decoupled*) yang memberikan kecepatan *response time* optimal saat entri pesanan di lapangan dan navigasi laporan keuangan.
  • MUI
    Material UI (MUI) Enterprise Layout: Komponen antarmuka kaya data seperti tabel neraca berhierarki, filter rentang tanggal penjualan, serta grafik status penyiapan gudang.
  • Chart Analytics
    Chart Visualizations & PDF Export: Integrasi grafik analitik nominal penundaan gudang, tren invoice, dan fitur ekspor dokumen laporan keuangan resmi.

Alur Kerja Penjualan & Distribusi (CCA Sales Flow)

1 Kunjungan Sales

Sales berkunjung ke toko/klien dan menawarkan katalog produk via Web App.

2 Input Sales Order (SO)

Klien memesan, sales menginput Sales Order langsung di lokasi via Web App.

3 Invoice & Pembayaran

Sales menerbitkan Invoice dan mencatat konfirmasi Pembayaran di Web.

4 Pengiriman Gudang

Tim gudang memproses Surat Jalan & pengiriman barang (hari itu / esok hari).

Order & Billing Automation

Siklus transaksi utuh dari *Sales Order*, pencatatan *Discount/Plafon*, *Surat Jalan*, hingga penagihan *Invoice*.

Double-Entry General Ledger

Modul Keuangan lengkap: Laporan Neraca, Laba Rugi, Kas/Bank, Piutang Dagang, dan Akuntansi Tutup Buku.

Multi-Warehouse Stock Tracking

Pemantauan stok barang real-time antar gudang (AVN, dsb) dengan filter rute distribusi sales.

Interface Screen Showcase (CCA)

Klik gambar untuk memperbesar / zoom
hady.devapps.orenda.co.id/dashboard
Zoom
CCA Dashboard
1. Sales Order Analytics Dashboard

Kpi ringkasan SO harian, status penyiapan gudang, dan grafik tren Sales Order tertunda.

hady.devapps.orenda.co.id/penjualan
Zoom
CCA Penjualan List
2. Modul Penjualan & Sales Route Filter

Tabel entri pesanan toko, rute sales (Route D, Route K, dsb), dan modal konfirmasi diskon mitra.

hady.devapps.orenda.co.id/neraca
Zoom
CCA Laporan Neraca
3. Laporan Neraca Keuangan (General Ledger)

Struktur neraca seimbang (Aset Lancar, Aktiva Tetap, Liabilitas, Ekuitas) siap unduh PDF.

Technical Highlights

Perbandingan Pendekatan Arsitektur Sistem

Penerapan teknologi backend yang disesuaikan dengan kebutuhan domain bisnis masing-masing proyek.

Event-Driven Fleet Management (Hwaseng)

Menggunakan Node.js + Express + Redis untuk mengantisipasi tingginya frekuensi update status lokasi kendaraan dan perebutan job secara simultan oleh puluhan driver di lapangan tanpa *latency*.

Transactional Financial Ledger (CCA)

Menggunakan Laravel 8 + PostgreSQL ACID Transactions untuk memastikan kepatuhan mutlak pencatatan akuntansi *double-entry*, di mana setiap Sales Order otomatis mengupdate jurnal debit/kredit tanpa resiko selisih nilai.