Homewiz

HomeWiz adalah platform manajemen properti untuk pengelola apartemen dan gedung komersial. Platform ini menggantikan penggunaan spreadsheet dan grup WhatsApp yang umum dipakai dalam operasional sehari-hari dengan menggabungkan lebih dari 17 modul ke dalam satu dashboard terintegrasi.

Modul tersebut mencakup pendaftaran unit dan penghuni, billing dan invoicing, work order, helpdesk, patroli keamanan, kartu akses, parkir, pengelolaan paket, utilitas, reservasi fasilitas, RSVP acara, izin keluar-masuk barang, serta pelaporan manajemen. Setiap modul memiliki alur kerja, permission, dan audit trail tersendiri.

Frontend dibangun menggunakan Next.js 15 App Router dan TypeScript. Route groups digunakan untuk memisahkan autentikasi, dashboard terproteksi, dan landing page publik, sehingga setiap bagian dapat menggunakan layout yang berbeda. Dashboard menggabungkan server layout dan client layout agar sidebar tetap interaktif, sementara metadata halaman dirender di sisi server.

Setiap direktori fitur menggunakan struktur yang konsisten, dengan page, layout, loading skeleton, section, form, dan type yang disimpan dalam satu lokasi. Konvensi ini menjaga kerapian codebase berskala besar sekaligus memudahkan beberapa developer mengerjakan modul yang berbeda secara bersamaan.

Kontrol akses menjadi salah satu kebutuhan arsitektur yang paling menantang. Setiap gedung memiliki beberapa departemen, seperti building management, engineering, security, finance, dan front office. Masing-masing departemen membutuhkan akses ke fitur yang berbeda.

Data permission diambil satu kali pada setiap sesi, disimpan sementara di sisi klien, kemudian diperiksa melalui hook hasPermission yang digunakan bersama. Hook ini mengontrol visibilitas menu pada sidebar, akses rute, dan tindakan tertentu di dalam fitur. Role dan kumpulan permission dapat dikelola langsung dari aplikasi, sehingga pengelola dapat membuat role baru tanpa perlu melakukan perubahan atau deployment kode.

Seluruh komunikasi HTTP dipusatkan melalui satu wrapper apiFetch. Wrapper ini membaca JWT dari cookie, menambahkan authorization header, mengeluarkan pengguna secara otomatis ketika request menghasilkan respons 401, serta mengarahkan pengguna yang belum terverifikasi ketika menerima respons 403. Dengan pendekatan ini, komponen tidak perlu mengakses token autentikasi atau URL backend secara langsung.

Data sesi dikelola melalui cookie service terpusat yang terhubung dengan React Context. Hal ini memungkinkan fetch layer menjalankan navigasi dari luar React component tree. Zustand digunakan untuk menyimpan profil pengguna yang telah terautentikasi dan data formulir onboarding properti, lengkap dengan persistensi setelah halaman dimuat ulang.

Fitur Utama

• Dashboard Operasional
  Menampilkan metrik real-time, analitik, dan ringkasan aktivitas operasional gedung sehari-hari.
• Unit dan Penghuni
  Mengelola unit properti, penghuni, penyewa, serta data pendaftaran terkait.
• Billing
  Mendukung template invoice, pembayaran sebagian, pelacakan saldo terutang, pembuatan kuitansi, riwayat pembayaran, dan analitik billing menggunakan Ant Design Plots.
• Work Order dan Helpdesk
  Menyediakan alur ticketing untuk permintaan pemeliharaan, kendala operasional, dan layanan bantuan penghuni.
• Patroli Keamanan
  Mengelola jadwal patroli, pembagian tugas, pemindaian QR checkpoint, dan dokumentasi bukti patroli.
• Kartu Akses
  Membuat dan mengelola kartu akses yang dilengkapi QR code untuk proses verifikasi masuk.
• Parkir
  Mengelola alokasi tempat parkir dan pendaftaran kendaraan.
• Pengelolaan Paket
  Melacak paket yang masuk dan mengirimkan notifikasi kepada penghuni.
• Utilitas
  Mencatat serta menagihkan pemakaian meter listrik, air, dan gas.
• Fasilitas dan RSVP
  Mengelola reservasi fasilitas bersama seperti gym, ruang pertemuan, dan kolam renang, serta RSVP untuk acara yang diselenggarakan pihak gedung.
• Izin Keluar-Masuk Barang
  Menangani permintaan dan proses persetujuan untuk membawa barang masuk atau keluar dari gedung.
• Pengumuman
  Mengirimkan pengumuman secara real-time melalui Pusher kepada role pengguna yang sesuai tanpa melakukan polling.
• Laporan
  Menyediakan laporan manajemen dan analitik dari seluruh modul operasional.

Modul billing dan reporting memiliki beberapa logika bisnis paling kompleks di dalam platform. Sistem mendukung template invoice yang fleksibel, pelacakan pembayaran sebagian, pembuatan kuitansi otomatis, serta riwayat pembayaran yang lengkap.

Notifikasi real-time menggunakan Pusher untuk mengirimkan pengumuman kepada role yang sesuai tanpa perlu melakukan request berulang ke server. Modul patroli dan kartu akses menggunakan QR code untuk memverifikasi checkpoint dan kartu akses, termasuk pemindaian secara langsung melalui browser. Jadwal patroli, tugas, dan log dipisahkan ke dalam service khusus agar setiap aktivitas dan bukti pendukung dapat dikelola secara independen.

Selain mengembangkan dashboard web, saya juga berkontribusi pada aplikasi mobile berbasis Flutter untuk penyewa dan petugas lapangan. Alur kerja pada aplikasi mobile mengikuti modul operasional yang tersedia di platform web. Saya juga menambahkan beberapa endpoint pada Laravel REST API agar kontrak backend sesuai dengan kebutuhan antarmuka.

Peran: Frontend Developer—bertanggung jawab utama atas arsitektur dashboard web dan implementasi seluruh modul, serta turut berkontribusi pada aplikasi mobile Flutter dan Laravel REST API.