SejatiDimedia Client Portal — Client Workspace & Project Management Platform

SejatiDimedia Client Portal adalah platform berbasis web yang digunakan untuk mengelola proyek dan memberikan akses kepada klien terhadap informasi proyek mereka. Portal ini mencakup progress milestone, task, file deliverable, invoice, bukti pembayaran, dan komunikasi terkait proyek.

Saya membangun sistem ini sebagai Full-Stack Engineer, mulai dari perancangan database, autentikasi dan akses pengguna, pengelolaan proyek, sistem billing, file storage, hingga notifikasi Telegram.

---

Ringkasan Proyek

• Kategori: Client Portal & Project Management
• Peran: Full-Stack Engineer
• Frontend: Next.js, React, TypeScript, Tailwind CSS, Framer Motion, Lucide Icons
• Backend: Next.js App Router, Server Actions, Route Handlers
• Database: PostgreSQL, Prisma ORM
• Authentication: Passwordless Magic Link, JWT Cookie, RBAC
• Storage: Cloudflare R2 / S3 Object Storage
• Automation: Cron Job
• Notification: Telegram Bot API

---

Latar Belakang

Dalam proses pengembangan software, informasi proyek sering tersebar di berbagai tempat seperti chat, email, cloud storage, dan dokumen terpisah. Hal ini membuat klien kesulitan mengetahui progress proyek, mencari file deliverable, maupun memeriksa status pembayaran.

Client Portal dibuat untuk menggabungkan kebutuhan tersebut dalam satu platform.

Melalui portal ini, klien dapat:

• Melihat proyek dan progress milestone.
• Melihat task yang sedang dikerjakan.
• Mengakses file deliverable proyek.
• Melihat invoice dan status pembayaran.
• Mengunggah bukti pembayaran.
• Memberikan komentar pada milestone.
• Melihat riwayat aktivitas yang berkaitan dengan proyek.

Di sisi admin, portal digunakan untuk mengelola lead, proyek, milestone, invoice, deliverable, dan aktivitas klien.

---

Kontribusi Full-Stack Saya

1. Passwordless Authentication & Role-Based Access

• Membangun autentikasi menggunakan Passwordless Magic Link sehingga pengguna tidak perlu membuat dan mengingat password.
• Menyimpan hash token Magic Link menggunakan SHA-256 sebelum disimpan ke database.
• Memberikan masa berlaku token dan mekanisme single-use melalui usedAt.
• Membuat session menggunakan HTTP-only secure cookie.
• Mengimplementasikan Role-Based Access Control untuk membedakan akses ADMIN dan CLIENT.

2. Database & Project Data Management

• Mendesain database PostgreSQL menggunakan Prisma ORM dengan 10 model utama: User, Lead, Project, Milestone, Task, Deliverable, Comment, Invoice, InvoiceItem, dan AuditLog.
• Mengatur hubungan antar data menggunakan foreign key dan cascading rules.
• Mengelola hubungan antara project, milestone, task, deliverable, invoice, dan client.
• Memastikan data yang ditampilkan kepada client selalu terkait dengan akun dan project yang menjadi hak aksesnya.

3. Project Progress & Milestone Management

• Membuat sistem milestone dan task untuk memantau progress proyek.
• Menghitung progress milestone berdasarkan status task yang telah selesai.
• Menyediakan status pekerjaan seperti To Do, In Progress, dan Done.
• Menambahkan komentar pada milestone agar diskusi dan persetujuan terkait pekerjaan dapat tersimpan bersama data proyek.

4. Deliverable & File Storage

• Membuat modul untuk mengunggah dan mengelola file deliverable proyek.
• Menggunakan Cloudflare R2 / S3-compatible storage untuk menyimpan file.
• Menyimpan metadata file pada database dan file pada object storage.
• Menggunakan signed URL untuk memberikan akses terhadap file yang tersedia untuk client.

5. Invoice & Payment Management

• Membuat lifecycle invoice seperti DRAFT, SENT, PAID, OVERDUE, dan CANCELLED.
• Mengelola invoice item, subtotal, pajak, dan total tagihan.
• Membuat fitur upload bukti pembayaran dari portal client.
• Menambahkan validasi tipe dan ukuran file untuk bukti pembayaran.
• Membuat cron endpoint untuk memeriksa invoice yang mendekati atau melewati tanggal jatuh tempo.

6. Audit Log & Telegram Notification

• Membuat AuditLog untuk mencatat aktivitas penting pada sistem.
• Mencatat perubahan status proyek, milestone, invoice, dan pembayaran.
• Mengintegrasikan Telegram Bot API untuk mengirim notifikasi kepada admin.
• Mengirim notifikasi ketika client mengunggah bukti pembayaran atau melakukan aktivitas tertentu pada project.

7. Client Workspace UI

• Membangun dashboard client untuk menampilkan informasi proyek secara ringkas.
• Menampilkan summary seperti project aktif, progress milestone, invoice, dan deadline.
• Membuat tampilan milestone dan task yang mudah dipahami oleh client non-teknis.
• Menggunakan Tailwind CSS dan Framer Motion untuk membangun interface yang konsisten dengan website SejatiDimedia.

---

Fitur Produk

• Client Dashboard — Menampilkan ringkasan project, milestone, invoice, dan deadline.
• Project & Milestone Tracking — Memantau progress pekerjaan berdasarkan milestone dan task.
• Task Management — Mengelola status task dari To Do hingga Done.
• Deliverable Vault — Tempat client mengakses file hasil pekerjaan proyek.
• Invoice Management — Menampilkan invoice dan status pembayaran.
• Payment Proof Upload — Client dapat mengunggah bukti pembayaran melalui portal.
• Milestone Comments — Menyediakan ruang diskusi pada setiap milestone.
• Audit Log — Mencatat aktivitas penting yang terjadi pada sistem.
• Telegram Notification — Mengirim notifikasi aktivitas tertentu kepada admin.
• Lead to Project Management — Admin dapat mengelola proses dari lead hingga menjadi project client.

---

Teknologi & Arsitektur (Tech Stack)

• Frontend: Next.js 14, React 18, TypeScript, Tailwind CSS, Framer Motion, Lucide Icons
• Backend: Next.js App Router, Server Actions, Route Handlers, TypeScript
• Database: PostgreSQL
• ORM: Prisma ORM
• Authentication: Passwordless Magic Link, JWT Cookies, RBAC
• Storage: Cloudflare R2 / S3 Object Storage
• Automation: Cron Job
• Notification: Telegram Bot API

---

Tantangan Teknis & Solusi

1. Membatasi Akses Data Antar Client

Tantangan: Setiap client hanya boleh melihat project, invoice, dan file yang menjadi hak aksesnya. Mengandalkan projectId saja dapat menyebabkan risiko akses terhadap data milik client lain.

Solusi: Setiap request melakukan pengecekan kepemilikan data berdasarkan session pengguna. Query dibatasi menggunakan kombinasi ID resource dan ID pengguna sehingga client hanya dapat mengakses data yang terkait dengan akunnya.

2. Pengelolaan Bukti Pembayaran

Tantangan: Client dapat mengunggah bukti pembayaran dengan format atau ukuran file yang tidak sesuai.

Solusi: Menambahkan validasi MIME type dan ukuran file sebelum file disimpan ke object storage. Status invoice juga dipisahkan dari proses verifikasi sehingga pembayaran yang belum diperiksa admin tidak langsung dianggap lunas.

3. Menjaga Progress Milestone Tetap Konsisten

Tantangan: Progress milestone harus berubah ketika status task di dalamnya berubah.

Solusi: Progress dihitung berdasarkan status task yang terkait dengan milestone dan data diperbarui kembali setelah terjadi perubahan menggunakan mekanisme revalidation Next.js.

4. Mengelola Banyak Jenis Data dalam Satu Portal

Tantangan: Portal memiliki beberapa bagian yang saling berhubungan seperti project, milestone, task, deliverable, comment, invoice, dan audit log.

Solusi: Menggunakan PostgreSQL dan Prisma ORM untuk mendefinisikan relasi antar entity secara jelas sehingga data dapat dikelola secara terstruktur dan konsisten.

---

Pembelajaran & Poin Kunci

• Mendapat pengalaman merancang database relasional untuk aplikasi project management.
• Memahami implementasi Passwordless Authentication dan Role-Based Access Control.
• Menerapkan pembatasan akses data berdasarkan user dan project.
• Mengintegrasikan object storage untuk pengelolaan file deliverable dan bukti pembayaran.
• Membangun workflow invoice dan payment verification dalam aplikasi.
• Mengintegrasikan audit log dan Telegram notification untuk membantu operasional admin.