Lewati ke konten
Skematik
Semua template
Marketplace

Marketplace Jasa Rumah

FixItNow adalah platform marketplace yang menghubungkan pelanggan dengan teknisi rumah tangga terverifikasi untuk layanan AC, ledeng, dan listrik. Pelanggan dapat mencari, memesan, membayar, dan memberi rating teknisi, sementara teknisi mengelola pesanan dan pendapatan melalui dashboard.

Pakai template

Marketplace Jasa Rumah

FixItNow adalah platform marketplace yang menghubungkan pelanggan dengan teknisi rumah tangga terverifikasi untuk layanan AC, ledeng, dan listrik. Pelanggan dapat mencari, memesan, membayar, dan memberi rating teknisi, sementara teknisi mengelola pesanan dan pendapatan melalui dashboard.

Problem

Mencari teknisi rumah tangga yang cepat, terpercaya, dan berkualitas seringkali sulit dan memakan waktu, dengan risiko kualitas pekerjaan yang tidak standar atau harga yang tidak transparan. Teknisi lepas juga kesulitan mendapatkan order dan membangun reputasi secara mandiri.

Goals

  • Memfasilitasi minimal 100 transaksi booking layanan dalam 3 bulan pertama.
  • Memastikan 100% teknisi terdaftar memiliki status verifikasi yang jelas.
  • Menyediakan dashboard teknisi yang memuat daftar pesanan dan riwayat pendapatan dalam waktu kurang dari 3 detik untuk 1000 transaksi.
  • Mencapai rata-rata rating teknisi minimal 4.5 dari 5 bintang.

Non-Goals

  • Fitur chat real-time antar pelanggan dan teknisi.
  • Sistem dispute resolution yang kompleks (misal: mediasi otomatis, pengembalian dana parsial).
  • Layanan berlangganan atau paket pemeliharaan rutin.
  • Integrasi dengan sistem smart home atau IoT.
  • Fitur promosi atau diskon untuk pelanggan.
  • Pendaftaran teknisi melalui aplikasi mobile (hanya web dashboard).

Target Users

  • Pemilik/penghuni rumah & apartemen (Pelanggan)Membutuhkan akses cepat ke teknisi terpercaya untuk perbaikan rumah tangga, dengan harga transparan dan kemudahan pembayaran.
  • Tukang/teknisi lepas (Penyedia Jasa)Mencari sumber order tambahan, platform untuk membangun reputasi, dan kemudahan pengelolaan jadwal serta pendapatan.
  • Administrator Platform (Admin)Membutuhkan alat untuk memverifikasi teknisi, mengelola layanan, memantau transaksi, dan menyelesaikan masalah operasional.

User Stories

  • must-have
    Sebagai Pelanggan, saya ingin Mencari teknisi AC terdekat yang tersedia pada tanggal tertentu, agar Saya bisa segera menjadwalkan perbaikan AC saya tanpa perlu menghubungi banyak orang..
  • must-have
    Sebagai Teknisi, saya ingin Menerima notifikasi pesanan baru dan melihat detailnya, agar Saya bisa segera merespons dan mempersiapkan diri untuk pekerjaan tersebut..
  • must-have
    Sebagai Pelanggan, saya ingin Membayar layanan perbaikan ledeng langsung di aplikasi, agar Saya tidak perlu repot menyiapkan uang tunai dan transaksi tercatat dengan aman..
  • must-have
    Sebagai Teknisi, saya ingin Melihat riwayat pendapatan dan status pencairan dana, agar Saya bisa memantau keuangan saya dan memastikan pembayaran diterima..
  • must-have
    Sebagai Admin, saya ingin Memverifikasi profil teknisi baru dan mengaktifkan akun mereka, agar Saya dapat memastikan semua teknisi di platform memenuhi standar kualitas dan keamanan..

User Flow

  1. Pelanggan mengunjungi halaman utama.
  2. Pelanggan mencari layanan (kategori, lokasi, tanggal/waktu).
  3. Sistem menampilkan daftar teknisi yang tersedia.
  4. Pelanggan memilih teknisi dan melihat detail profil.
  5. Pelanggan membuat booking dengan detail layanan dan catatan.
  6. Booking berstatus 'PENDING', teknisi menerima notifikasi.
  7. Teknisi menerima booking, status menjadi 'CONFIRMED'.
  8. Pelanggan diarahkan ke halaman pembayaran Midtrans.
  9. Pelanggan menyelesaikan pembayaran, dana masuk escrow, status pembayaran 'PAID'.
  10. Layanan selesai, pelanggan mengkonfirmasi penyelesaian.
  11. Dana (setelah dipotong komisi) dicairkan ke rekening teknisi, status pembayaran 'RELEASED'.
  12. Pelanggan memberikan rating dan ulasan untuk teknisi.
  13. Teknisi melihat riwayat booking dan pendapatan di dashboard mereka.
  14. Admin memantau semua aktivitas dari dashboard admin.
Memuat diagram…

Features

Registrasi & Profil Pengguna (Multi-peran)

must-have

Pengguna dapat mendaftar sebagai pelanggan atau teknisi. Teknisi harus melengkapi profil dengan detail keahlian, area layanan, dan dokumen verifikasi. Admin dapat melihat dan memverifikasi profil teknisi.

  • Pengguna dapat mendaftar sebagai 'CUSTOMER' atau 'TECHNICIAN' dengan email dan password.
  • Teknisi dapat mengunggah dokumen verifikasi (KTP, sertifikat keahlian) dan mengisi detail layanan (keahlian, harga, area).
  • Admin dapat melihat daftar teknisi, detail profil, dan mengubah status verifikasi teknisi menjadi 'VERIFIED' atau 'REJECTED'.
  • Profil teknisi yang belum 'VERIFIED' tidak akan muncul dalam pencarian pelanggan.
  • Pelanggan dapat mengedit informasi dasar profil mereka (nama, nomor telepon, alamat).

Katalog & Pencarian Jasa

must-have

Pelanggan dapat mencari layanan berdasarkan kategori (AC, Ledeng, Listrik), lokasi, dan tanggal yang diinginkan. Hasil pencarian menampilkan daftar teknisi yang tersedia.

  • Pelanggan dapat memilih kategori layanan (AC, Ledeng, Listrik) dan memasukkan lokasi (alamat) serta tanggal/waktu yang diinginkan.
  • Sistem menampilkan daftar teknisi yang 'VERIFIED', memiliki keahlian sesuai kategori, dan tersedia pada jadwal yang diminta, diurutkan berdasarkan relevansi atau rating.
  • Setiap hasil pencarian menampilkan nama teknisi, rating rata-rata, harga per layanan, dan jarak estimasi.
  • Jika tidak ada teknisi yang tersedia, sistem menampilkan pesan 'Tidak ada teknisi yang tersedia' dan menyarankan untuk mengubah kriteria pencarian.

Booking & Penjadwalan

must-have

Pelanggan dapat memilih teknisi dari hasil pencarian, melihat detail profil teknisi, dan membuat booking. Teknisi menerima notifikasi dan dapat menerima atau menolak booking.

  • Pelanggan dapat melihat detail profil teknisi (bio, rating, ulasan, daftar layanan & harga) sebelum membuat booking.
  • Pelanggan dapat membuat booking dengan memilih layanan, tanggal, waktu, dan menambahkan catatan khusus.
  • Setelah booking dibuat, status booking adalah 'PENDING' dan teknisi menerima notifikasi.
  • Teknisi dapat menerima booking (status menjadi 'CONFIRMED') atau menolaknya (status menjadi 'REJECTED') dalam waktu 30 menit.
  • Jika teknisi menolak booking, pelanggan menerima notifikasi dan dapat mencari teknisi lain.
  • Booking yang tidak direspons teknisi dalam 30 menit secara otomatis dibatalkan (status menjadi 'CANCELLED_BY_SYSTEM').

Pembayaran In-App (Midtrans) dengan Escrow & Komisi

must-have

Pelanggan membayar layanan melalui Midtrans. Dana akan masuk ke escrow dan dicairkan ke teknisi setelah layanan selesai dan dikonfirmasi pelanggan, setelah dipotong komisi platform.

  • Setelah booking 'CONFIRMED', pelanggan diarahkan ke halaman pembayaran Midtrans untuk menyelesaikan pembayaran.
  • Setelah pembayaran berhasil, dana masuk ke akun escrow platform dan status pembayaran booking menjadi 'PAID'.
  • Komisi platform sebesar 15% dari total harga layanan secara otomatis dihitung dan dipotong dari dana escrow.
  • Setelah layanan selesai, pelanggan dapat mengkonfirmasi penyelesaian layanan. Setelah konfirmasi, dana (total harga - komisi) dicairkan ke rekening teknisi dan status pembayaran menjadi 'RELEASED'.
  • Jika pembayaran gagal, status pembayaran booking adalah 'FAILED' dan pelanggan dapat mencoba lagi atau membatalkan booking.

Rating & Ulasan

must-have

Setelah layanan selesai, pelanggan dapat memberikan rating bintang dan ulasan untuk teknisi. Rating ini akan ditampilkan di profil teknisi.

  • Setelah status pembayaran booking menjadi 'RELEASED', pelanggan dapat memberikan rating (1-5 bintang) dan menulis ulasan untuk teknisi.
  • Rating dan ulasan yang diberikan akan terlihat di profil teknisi dan di halaman detail booking.
  • Rating rata-rata teknisi diperbarui secara otomatis setelah setiap ulasan baru.
  • Pelanggan hanya bisa memberikan rating dan ulasan sekali per booking.

Dashboard Teknisi

must-have

Teknisi memiliki dashboard untuk melihat daftar booking (pending, confirmed, completed, cancelled), riwayat pendapatan, dan mengelola profil serta layanan mereka.

  • Teknisi dapat melihat daftar booking yang masuk dengan status 'PENDING', 'CONFIRMED', 'COMPLETED', 'CANCELLED', 'REJECTED'.
  • Teknisi dapat melihat detail setiap booking, termasuk informasi pelanggan, layanan, jadwal, dan total harga.
  • Teknisi dapat melihat riwayat pendapatan, termasuk total yang diterima, komisi yang dipotong, dan status pencairan dana.
  • Teknisi dapat mengedit informasi profil mereka, termasuk keahlian, harga layanan, dan area layanan.
  • Dashboard menampilkan ringkasan performa teknisi (jumlah booking, rating rata-rata).

Dashboard Admin

should-have

Admin memiliki dashboard untuk mengelola pengguna (pelanggan & teknisi), layanan master, memantau transaksi, dan melihat laporan umum.

  • Admin dapat melihat daftar semua pengguna (pelanggan dan teknisi) dan detail profil mereka.
  • Admin dapat mengelola layanan master (menambah, mengedit, menghapus kategori layanan seperti AC, Ledeng, Listrik).
  • Admin dapat melihat daftar semua booking dan detail transaksi, termasuk status pembayaran dan komisi.
  • Admin dapat mengubah status verifikasi teknisi.
  • Admin dapat melihat laporan ringkasan transaksi dan pendapatan platform.

Tech Stack

Frontend: Next.js (React)
Backend: Next.js API Routes
Database: PostgreSQL
Hosting: Vercel (Frontend & API), Railway (Database)

Memanfaatkan full-stack Next.js untuk efisiensi pengembangan dan performa. Prisma sebagai ORM untuk interaksi database. Zod untuk validasi skema.

Architecture

Aplikasi ini menggunakan arsitektur monolitik dengan Next.js sebagai framework full-stack. Frontend React berinteraksi dengan API Routes Next.js, yang kemudian berkomunikasi dengan database PostgreSQL melalui Prisma ORM. Autentikasi dikelola oleh NextAuth.js, dan pembayaran diintegrasikan dengan Midtrans.

Frontend (Next.js/React)

Menyajikan UI interaktif untuk pelanggan, teknisi, dan admin; menangani input pengguna; menampilkan data dari API.

API Routes (Next.js)

Menyediakan endpoint RESTful untuk operasi CRUD dan logika bisnis; melakukan validasi input; berinteraksi dengan database dan layanan eksternal (Midtrans); menerapkan autentikasi dan otorisasi.

Database (PostgreSQL)

Menyimpan semua data aplikasi secara terstruktur (pengguna, layanan, booking, pembayaran, ulasan).

Prisma ORM

Menyediakan lapisan abstraksi untuk interaksi antara API Routes dan database PostgreSQL.

NextAuth.js

Mengelola sesi pengguna, autentikasi (login/logout), dan otorisasi (berdasarkan peran).

Midtrans

Memproses pembayaran dari pelanggan dan mengirimkan notifikasi status pembayaran melalui webhook.

Alur data

  1. Pelanggan mencari layanan di UI (Frontend) → Frontend memanggil API Search (API Routes).
  2. API Search query `technicians` dan `technician_services` dari DB (via Prisma) → Mengembalikan hasil ke Frontend.
  3. Pelanggan memilih teknisi dan membuat booking di UI (Frontend) → Frontend memanggil API Booking (API Routes).
  4. API Booking menyimpan data ke `bookings` DB (via Prisma), status 'PENDING' → Mengembalikan konfirmasi ke Frontend.
  5. Teknisi menerima notifikasi booking baru di Dashboard UI (Frontend) → Frontend memanggil API Booking Respond (API Routes).
  6. API Booking Respond mengupdate `bookings.status` di DB (via Prisma) → Mengembalikan konfirmasi ke Frontend.
  7. Booking 'CONFIRMED' → Frontend mengarahkan pelanggan ke halaman pembayaran → Frontend memanggil API Initiate Payment (API Routes).
  8. API Initiate Payment berinteraksi dengan Midtrans untuk membuat transaksi → Midtrans mengembalikan `snap_token` ke API → API mengembalikan `snap_token` ke Frontend.
  9. Pelanggan menyelesaikan pembayaran di Midtrans → Midtrans mengirim webhook notifikasi ke API Webhook Payment (API Routes).
  10. API Webhook Payment mengupdate `payments` dan `bookings.status` di DB (via Prisma) → Mengembalikan respons 200 ke Midtrans.
  11. Layanan selesai → Pelanggan mengkonfirmasi di UI (Frontend) → Frontend memanggil API Complete Booking (API Routes).
  12. API Complete Booking mengupdate `bookings.status` dan `payments.escrow_released_at` di DB (via Prisma), menghitung komisi dan mencatat pencairan → Mengembalikan konfirmasi ke Frontend.
  13. Pelanggan memberikan rating/ulasan di UI (Frontend) → Frontend memanggil API Reviews (API Routes).
  14. API Reviews menyimpan data ke `reviews` DB dan mengupdate `technicians.average_rating` di DB (via Prisma) → Mengembalikan konfirmasi ke Frontend.
  15. Teknisi/Admin melihat dashboard di UI (Frontend) → Frontend memanggil API Dashboard (API Routes) untuk mengambil data dari DB (via Prisma).
Memuat diagram…

Database Schema

Ini struktur data aplikasimu. Kamu tidak perlu paham semuanya — AI yang akan membuatnya. Kolom created_at/updated_at ditambahkan otomatis tiap tabel.

userssoft deleteTabel untuk menyimpan data semua pengguna (pelanggan, teknisi, admin).
iduuidPrimary Key
emailtextEmail pengguna, harus unik.
passwordtextHash password pengguna.
roleenum:UserRolePeran pengguna (CUSTOMER, TECHNICIAN, ADMIN).
nametextNama lengkap pengguna.
phonetextNomor telepon pengguna.
addresstextAlamat utama pengguna.
profile_picture_urltextURL gambar profil pengguna.
verification_statusenum:VerificationStatusStatus verifikasi pengguna, terutama untuk teknisi. Default 'PENDING'.
technicianssoft deleteTabel untuk menyimpan detail spesifik teknisi, terhubung ke tabel users.
iduuidPrimary Key
user_iduuidForeign Key ke tabel users.
biotextBiografi singkat teknisi.
skillstextDaftar keahlian teknisi (misal: 'AC, Plumbing, Electrical').
service_areastextArea layanan teknisi (misal: 'Jakarta Selatan, Tangerang').
average_ratingdecimalRating rata-rata teknisi dari ulasan pelanggan.
total_reviewsintegerJumlah total ulasan yang diterima teknisi.
document_urlstext[]Array URL dokumen verifikasi (KTP, sertifikat).
servicessoft deleteTabel untuk menyimpan daftar layanan master yang ditawarkan platform (misal: 'Perbaikan AC', 'Perbaikan Ledeng').
iduuidPrimary Key
nametextNama layanan, unik hanya untuk baris aktif — partial unique index (UNIQUE WHERE deleted_at IS NULL).
descriptiontextDeskripsi layanan.
categorytextKategori layanan (misal: 'AC', 'Ledeng', 'Listrik').
technician_servicessoft deleteTabel penghubung antara teknisi dan layanan master, menyimpan harga spesifik teknisi untuk layanan tertentu.
iduuidPrimary Key
technician_iduuidForeign Key ke tabel technicians.
service_iduuidForeign Key ke tabel services.
pricedecimalHarga yang ditetapkan teknisi untuk layanan ini.
descriptiontextDeskripsi spesifik teknisi untuk layanan ini.
bookingssoft deleteTabel untuk menyimpan detail setiap pemesanan layanan.
iduuidPrimary Key
customer_iduuidForeign Key ke tabel users (pelanggan).
technician_iduuidForeign Key ke tabel technicians.
technician_service_iduuidForeign Key ke tabel technician_services, snapshot layanan yang dipesan.
scheduled_attimestampWaktu layanan dijadwalkan (Asia/Jakarta WIB).
duration_minutesintegerEstimasi durasi layanan dalam menit.
total_pricedecimalTotal harga layanan sebelum dipotong komisi (snapshot dari technician_services.price).
commission_rate_snapshotdecimalPersentase komisi platform saat booking dibuat (misal: 0.15 untuk 15%).
commission_amountdecimalJumlah komisi yang dipotong (total_price * commission_rate_snapshot).
final_price_after_commissiondecimalHarga akhir yang diterima teknisi setelah komisi (total_price - commission_amount).
statusenum:BookingStatusStatus booking (PENDING, CONFIRMED, REJECTED, CANCELLED_BY_CUSTOMER, CANCELLED_BY_TECHNICIAN, CANCELLED_BY_SYSTEM, COMPLETED).
customer_notestextCatatan dari pelanggan.
technician_notestextCatatan dari teknisi.
address_snapshottextSnapshot alamat pelanggan saat booking dibuat.
paymentsTabel untuk menyimpan detail transaksi pembayaran.
iduuidPrimary Key
booking_iduuidForeign Key ke tabel bookings.
user_iduuidForeign Key ke tabel users (pelanggan yang membayar).
amountdecimalJumlah pembayaran (sama dengan total_price di booking).
payment_methodtextMetode pembayaran (misal: 'Midtrans').
transaction_id_midtranstextID transaksi dari Midtrans.
statusenum:PaymentStatusStatus pembayaran (PENDING, PAID, FAILED, REFUNDED, RELEASED).
paid_attimestampWaktu pembayaran berhasil.
escrow_released_attimestampWaktu dana escrow dicairkan ke teknisi.
reviewssoft deleteTabel untuk menyimpan rating dan ulasan pelanggan untuk teknisi.
iduuidPrimary Key
booking_iduuidForeign Key ke tabel bookings. Unik per booking.
customer_iduuidForeign Key ke tabel users (pelanggan yang memberi ulasan).
technician_iduuidForeign Key ke tabel technicians (teknisi yang diulas).
ratingintegerRating bintang (1-5).
commenttextUlasan teks dari pelanggan.

Relasi

  • users.id → technicians.user_id (one-to-one)
  • users.id → bookings.customer_id (one-to-many)
  • users.id → payments.user_id (one-to-many)
  • users.id → reviews.customer_id (one-to-many)
  • technicians.id → technician_services.technician_id (one-to-many)
  • technicians.id → bookings.technician_id (one-to-many)
  • technicians.id → reviews.technician_id (one-to-many)
  • services.id → technician_services.service_id (one-to-many)
  • technician_services.id → bookings.technician_service_id (one-to-many)
  • bookings.id → payments.booking_id (one-to-one)
  • bookings.id → reviews.booking_id (one-to-one)
Memuat diagram…

Struktur Folder

Struktur ini dikunci agar AI agent membangun dengan susunan file yang sama.

  • src/
  • src/app/ (Next.js App Router)
  • src/app/(auth)/ (Group rute untuk autentikasi: login, register)
  • src/app/(app)/ (Group rute utama aplikasi: search, dashboard, profile)
  • src/app/api/ (API Routes)
  • src/app/api/auth/ (API untuk autentikasi)
  • src/app/api/admin/ (API khusus admin)
  • src/app/api/technicians/ (API khusus teknisi)
  • src/app/api/services/ (API untuk layanan)
  • src/app/api/bookings/ (API untuk booking)
  • src/app/api/payments/ (API untuk pembayaran)
  • src/app/api/reviews/ (API untuk ulasan)
  • src/components/ (Komponen UI React)
  • src/components/ui/ (Komponen UI dasar/shadcn)
  • src/lib/ (Utility functions, helpers, auth logic)
  • src/lib/prisma.ts (Klien Prisma)
  • src/lib/auth.ts (Fungsi terkait autentikasi)
  • src/types/ (Definisi tipe TypeScript)
  • prisma/ (Skema dan migrasi Prisma)

API Endpoints

POST
/api/auth/registerMendaftarkan pengguna baru sebagai CUSTOMER atau TECHNICIAN. Body: { email, password, role, name, phone }
GET
/api/users/meMendapatkan detail profil pengguna yang sedang login.auth: CUSTOMER/TECHNICIAN/ADMIN
PUT
/api/users/meMemperbarui detail profil pengguna yang sedang login. Body: { name?, phone?, address? }auth: CUSTOMER/TECHNICIAN
GET
/api/admin/servicesMendapatkan daftar semua layanan master (paginated).paginatedauth: ADMIN
POST
/api/admin/servicesMenambah layanan master baru. Body: { name, description, base_price, unit, category }auth: ADMIN
PUT
/api/admin/services/:idMemperbarui layanan master yang ada. Body: { name?, description?, base_price?, unit?, category? }auth: ADMIN
DELETE
/api/admin/services/:idMenghapus layanan master. Akan ditolak jika ada `technician_services` yang mereferensikannya.auth: ADMIN
GET
/api/technicians/:idMendapatkan detail profil teknisi (publik).
PUT
/api/technicians/meMemperbarui profil teknisi yang sedang login. Body: { bio?, skills?, service_areas?, technician_services: [{service_id, price, description}] }auth: TECHNICIAN
GET
/api/admin/techniciansMendapatkan daftar semua teknisi (paginated).paginatedauth: ADMIN
PATCH
/api/admin/technicians/:id/verifyMengubah status verifikasi teknisi. Body: { status: 'VERIFIED' | 'REJECTED' }auth: ADMIN
GET
/api/services/searchMencari teknisi berdasarkan kategori, lokasi, dan jadwal. Query params: category_id, latitude, longitude, scheduled_at.paginated
POST
/api/bookingsMembuat booking baru. Status awal 'PENDING'. Body: { technician_id, technician_service_id, scheduled_at, duration_minutes, customer_notes, address_snapshot }auth: CUSTOMER
PATCH
/api/bookings/:id/respondTeknisi merespons booking (menerima/menolak). Body: { action: 'ACCEPT' | 'REJECT', technician_notes? }. Ditolak jika booking bukan 'PENDING' atau teknisi bukan pemilik booking.auth: TECHNICIAN
GET
/api/bookings/meMendapatkan daftar booking pengguna yang sedang login (paginated).paginatedauth: CUSTOMER/TECHNICIAN
GET
/api/bookings/:idMendapatkan detail booking tertentu.auth: CUSTOMER/TECHNICIAN/ADMIN
POST
/api/payments/initiateMenginisiasi transaksi pembayaran Midtrans untuk booking yang 'CONFIRMED'. Body: { booking_id }auth: CUSTOMER
POST
/api/payments/webhookEndpoint webhook untuk menerima notifikasi status pembayaran dari Midtrans. Tidak memerlukan auth, Midtrans akan mengirimkan signature.
PATCH
/api/bookings/:id/completePelanggan mengkonfirmasi penyelesaian layanan. Memicu pencairan dana dari escrow ke teknisi. Ditolak jika booking belum 'PAID' atau bukan milik pelanggan.auth: CUSTOMER
POST
/api/reviewsPelanggan memberikan rating dan ulasan untuk booking yang sudah 'COMPLETED' dan 'PAID'. Body: { booking_id, rating, comment }auth: CUSTOMER
GET
/api/admin/bookingsMendapatkan daftar semua booking untuk admin (paginated).paginatedauth: ADMIN
GET
/api/admin/paymentsMendapatkan daftar semua pembayaran untuk admin (paginated).paginatedauth: ADMIN

Peran (RBAC)

CUSTOMER
Pengguna yang mencari dan memesan jasa teknisi.· mencari jasa, membuat booking, membayar layanan, memberi rating & ulasan, mengelola profil sendiri
TECHNICIAN
Penyedia jasa teknisi yang menerima dan menyelesaikan booking.· mengelola profil & layanan, menerima/menolak booking, melihat riwayat pendapatan
ADMIN
Administrator platform dengan hak akses penuh.· mengelola pengguna (verifikasi teknisi), mengelola layanan master, memantau semua transaksi, melihat laporan

Enum

UserRoleCUSTOMER · TECHNICIAN · ADMIN
VerificationStatusPENDING · VERIFIED · REJECTED
BookingStatusPENDING · CONFIRMED · REJECTED · CANCELLED_BY_CUSTOMER · CANCELLED_BY_TECHNICIAN · CANCELLED_BY_SYSTEM · COMPLETED
PaymentStatusPENDING · PAID · FAILED · REFUNDED · RELEASED

Environment Variables

DATABASE_URLbackendwajibURL koneksi database PostgreSQL.
NEXTAUTH_SECRETbackendwajibSecret key untuk NextAuth.js.
MIDTRANS_SERVER_KEYbackendwajibServer Key Midtrans untuk otentikasi API.
NEXT_PUBLIC_MIDTRANS_CLIENT_KEYfrontendwajibClient Key Midtrans untuk inisiasi Snap di frontend.
NEXTAUTH_URLsharedURL dasar aplikasi untuk NextAuth.js.

Library Inti

react · frontendnext · sharedprisma · backend@prisma/client · backendnext-auth · sharedzod · sharedbcryptjs · backendmidtrans-client · backend

Tasks (siap kirim ke AI agent)

T1
Setup Proyek Next.js & Prisma· M

Inisialisasi proyek Next.js, konfigurasi TypeScript, ESLint, Prettier, dan instalasi Prisma ORM dengan PostgreSQL.

Lihat isi perintah
Inisialisasi proyek Next.js dengan TypeScript. Konfigurasi ESLint dan Prettier. Instal Prisma dan tambahkan provider PostgreSQL. Buat file `schema.prisma` awal. Pastikan struktur dasar proyek siap untuk pengembangan.
T2
Implementasi Skema Database Awal· L· Butuh dulu: T1

Buat skema database untuk `users`, `technicians`, `services`, `technician_services`, `bookings`, `payments`, `reviews` di `schema.prisma` sesuai PRD. Terapkan migrasi awal.

Lihat isi perintah
Berdasarkan `databaseSchema` yang diberikan, buat atau update `prisma/schema.prisma` untuk mendefinisikan semua tabel, kolom, tipe data, relasi, dan enum. Pastikan `softDelete` diimplementasikan dengan `deleted_at` (otomatis oleh exporter, jangan tulis manual). Jalankan `npx prisma migrate dev --name init` untuk menerapkan skema ke database.
T3
Konfigurasi Autentikasi (NextAuth.js)· M· Butuh dulu: T2

Implementasi sistem autentikasi menggunakan NextAuth.js dengan provider Credentials untuk login email/password dan JWT untuk sesi.

Lihat isi perintah
Instal NextAuth.js. Buat file `pages/api/auth/[...nextauth].ts` dan konfigurasikan `CredentialsProvider` untuk autentikasi email/password. Gunakan PrismaAdapter untuk integrasi dengan database. Pastikan JWT digunakan untuk manajemen sesi. Tambahkan fungsi `hashPassword` dan `verifyPassword` di `lib/auth.ts`.
T4
Halaman Registrasi & Login· M· Butuh dulu: T3

Buat halaman registrasi untuk pelanggan/teknisi dan halaman login. Implementasikan validasi input menggunakan Zod.

Lihat isi perintah
Buat komponen `pages/register.tsx` dan `pages/login.tsx`. Implementasikan form registrasi dengan pilihan peran 'CUSTOMER' atau 'TECHNICIAN'. Gunakan Zod untuk validasi input email, password, dan konfirmasi password. Integrasikan dengan NextAuth.js untuk proses login dan registrasi (API route `/api/auth/register`). Pastikan pesan error ditampilkan dengan jelas.
T5
Middleware Autentikasi & RBAC· S· Butuh dulu: T4

Buat middleware untuk melindungi API routes dan halaman berdasarkan status autentikasi dan peran pengguna.

Lihat isi perintah
Buat middleware di `middleware.ts` untuk melindungi rute tertentu (misal: `/dashboard`, `/api/admin/*`). Implementasikan logika untuk memeriksa sesi pengguna dan perannya (`user.role`). Arahkan pengguna yang tidak terautentikasi ke halaman login, dan pengguna dengan peran tidak sesuai ke halaman 403 atau beranda.
T6
API & UI Manajemen Layanan Master (Admin)· M· Butuh dulu: T5

Buat API endpoint dan halaman admin untuk CRUD layanan master (AC, Ledeng, Listrik).

Lihat isi perintah
Buat API routes di `pages/api/admin/services.ts` untuk `GET`, `POST`, `PUT`, `DELETE` layanan master. Pastikan hanya role 'ADMIN' yang bisa mengaksesnya. Buat halaman `pages/admin/services.tsx` dengan tabel untuk menampilkan daftar layanan, form untuk menambah/mengedit, dan tombol hapus. Gunakan Zod untuk validasi input layanan.
T7
API & UI Profil Teknisi· L· Butuh dulu: T6

Buat API endpoint dan UI untuk teknisi mengelola profil mereka, termasuk keahlian, harga, dan area layanan.

Lihat isi perintah
Buat API routes di `pages/api/technicians/[id].ts` untuk `GET` dan `PUT` profil teknisi. Pastikan teknisi hanya bisa mengedit profilnya sendiri. Buat halaman `pages/technician/profile.tsx` yang menampilkan form untuk mengedit bio, daftar keahlian, harga per layanan (`technician_services`), dan area layanan. Integrasikan dengan `technician_services` table.
T8
API & UI Verifikasi Teknisi (Admin)· M· Butuh dulu: T7

Buat API endpoint dan UI di dashboard admin untuk melihat detail teknisi dan mengubah status verifikasi.

Lihat isi perintah
Buat API route di `pages/api/admin/technicians/[id]/verify.ts` (PATCH) untuk mengubah `verification_status` teknisi. Pastikan hanya 'ADMIN' yang bisa akses. Update halaman `pages/admin/technicians.tsx` untuk menampilkan daftar teknisi, link ke detail profil teknisi, dan tombol/dropdown untuk mengubah status verifikasi ('PENDING', 'VERIFIED', 'REJECTED').
T9
API Pencarian Jasa (Pelanggan)· M· Butuh dulu: T8

Buat API endpoint untuk pelanggan mencari teknisi berdasarkan kategori, lokasi, dan jadwal.

Lihat isi perintah
Buat API route `pages/api/services/search.ts` (GET) yang menerima `category_id`, `latitude`, `longitude`, `scheduled_at` (tanggal/waktu). Query database untuk menemukan teknisi dengan `verification_status='VERIFIED'`, memiliki `technician_services` yang cocok, dan `is_available` pada `scheduled_at`. Return daftar teknisi dengan detail profil, rating, dan harga. Pertimbangkan radius pencarian 10km.
T10
UI Halaman Pencarian & Detail Teknisi (Pelanggan)· L· Butuh dulu: T9

Buat halaman pencarian jasa dan halaman detail teknisi untuk pelanggan.

Lihat isi perintah
Buat halaman `pages/search.tsx` dengan form input kategori, lokasi, dan tanggal/waktu. Tampilkan hasil pencarian dari API `api/services/search` dalam bentuk daftar kartu teknisi. Setiap kartu harus bisa diklik untuk navigasi ke `pages/technicians/[id].tsx` yang menampilkan detail profil teknisi, daftar layanan, harga, rating, dan ulasan.
T11
API Booking Jasa· L· Butuh dulu: T10

Buat API endpoint untuk pelanggan membuat booking dan teknisi menerima/menolak booking.

Lihat isi perintah
Buat API route `pages/api/bookings.ts` (POST) untuk membuat booking baru. Body request harus mencakup `technician_id`, `technician_service_id`, `scheduled_at`, `duration_minutes`, `customer_notes`, `address_snapshot`. Set `booking.status` ke 'PENDING'. Buat API route `pages/api/bookings/[id]/respond.ts` (PATCH) untuk teknisi merespons booking (menerima/menolak). Implementasikan logika pembatalan otomatis jika tidak direspons dalam 30 menit. Pastikan `commission_rate_snapshot` diambil saat booking dibuat.
T12
UI Proses Booking (Pelanggan)· M· Butuh dulu: T11

Implementasikan alur booking dari halaman detail teknisi hingga konfirmasi booking.

Lihat isi perintah
Di halaman `pages/technicians/[id].tsx`, tambahkan form booking. Setelah pelanggan mengisi detail dan submit, panggil API `api/bookings` (POST). Tampilkan status booking 'PENDING' dan notifikasi bahwa teknisi sedang meninjau. Setelah teknisi merespons, update UI dengan status 'CONFIRMED' atau 'REJECTED'.
T13
UI Notifikasi & Respons Booking (Teknisi)· M· Butuh dulu: T11

Buat UI di dashboard teknisi untuk melihat booking 'PENDING' dan meresponsnya.

Lihat isi perintah
Di halaman `pages/technician/dashboard.tsx`, tambahkan bagian 'Pesanan Baru' yang menampilkan booking dengan status 'PENDING'. Setiap item booking harus memiliki tombol 'Terima' dan 'Tolak'. Panggil API `api/bookings/[id]/respond` (PATCH) saat tombol diklik. Pastikan UI diperbarui setelah respons.
T14
Integrasi Pembayaran Midtrans· L· Butuh dulu: T12, T13

Integrasikan Midtrans untuk proses pembayaran. Buat API endpoint untuk inisiasi transaksi dan webhook handler untuk notifikasi status pembayaran.

Lihat isi perintah
Instal Midtrans SDK (misal: `midtrans-client`). Buat API route `pages/api/payments/initiate.ts` (POST) yang menerima `booking_id`, membuat transaksi Midtrans, dan mengembalikan `snap_token`. Buat API route `pages/api/payments/webhook.ts` (POST) untuk menerima notifikasi status pembayaran dari Midtrans. Update `payments` dan `bookings.status` berdasarkan notifikasi webhook. Pastikan `MIDTRANS_SERVER_KEY` dan `NEXT_PUBLIC_MIDTRANS_CLIENT_KEY` diatur di `.env`.
T15
API & Logika Pencairan Dana Escrow· M· Butuh dulu: T14

Buat API endpoint untuk pelanggan mengkonfirmasi penyelesaian layanan, yang akan memicu pencairan dana ke teknisi setelah dipotong komisi.

Lihat isi perintah
Buat API route `pages/api/bookings/[id]/complete.ts` (PATCH) yang diakses oleh pelanggan. Ketika dipanggil, ubah `booking.status` menjadi 'COMPLETED', hitung `final_price_after_commission` (`booking.total_price - booking.commission_amount`), dan set `payments.escrow_released_at`. Simulasikan pencairan dana ke rekening teknisi (log saja untuk MVP). Pastikan hanya pelanggan dari booking tersebut yang bisa mengkonfirmasi.
T16
API Rating & Ulasan· M· Butuh dulu: T15

Buat API endpoint untuk pelanggan memberikan rating dan ulasan.

Lihat isi perintah
Buat API route `pages/api/reviews.ts` (POST) yang menerima `booking_id`, `rating`, dan `comment`. Pastikan hanya pelanggan dari booking yang `COMPLETED` dan `PAID` yang bisa memberikan review, dan hanya sekali per booking. Setelah review disimpan, update `technicians.average_rating` dan `technicians.total_reviews`.
T17
UI Rating & Ulasan (Pelanggan)· M· Butuh dulu: T16

Buat UI di halaman detail booking untuk pelanggan memberikan rating dan ulasan.

Lihat isi perintah
Di halaman `pages/customer/bookings/[id].tsx` (detail booking pelanggan), setelah booking berstatus 'COMPLETED' dan 'PAID', tampilkan form untuk memberikan rating bintang dan input ulasan. Panggil API `api/reviews` (POST) saat submit. Setelah berhasil, tampilkan ulasan yang sudah diberikan dan nonaktifkan form.
T18
Dashboard Teknisi: Daftar Booking & Riwayat Pendapatan· L· Butuh dulu: T15, T17

Lengkapi dashboard teknisi dengan daftar booking dan riwayat pendapatan.

Lihat isi perintah
Di halaman `pages/technician/dashboard.tsx`, buat dua tab/section: 'Daftar Booking' dan 'Riwayat Pendapatan'. Bagian 'Daftar Booking' harus menampilkan semua booking teknisi (pending, confirmed, completed, cancelled, rejected) dengan detail relevan. Bagian 'Riwayat Pendapatan' harus menampilkan daftar pembayaran (`payments`) yang terkait dengan booking teknisi, termasuk `amount`, `commission_amount`, dan `escrow_released_at`. Tampilkan total pendapatan yang sudah dicairkan.
T19
Dashboard Admin: Pengelolaan Pengguna & Laporan Transaksi· L· Butuh dulu: T18

Lengkapi dashboard admin dengan pengelolaan pengguna dan laporan transaksi.

Lihat isi perintah
Di halaman `pages/admin/dashboard.tsx`, buat tab/section untuk 'Manajemen Pengguna' dan 'Laporan Transaksi'. 'Manajemen Pengguna' menampilkan daftar semua `users` (pelanggan dan teknisi) dengan kemampuan melihat detail dan mengedit peran atau status verifikasi (untuk teknisi). 'Laporan Transaksi' menampilkan daftar semua `bookings` dan `payments` dengan filter dan kemampuan melihat detail. Tampilkan ringkasan statistik seperti total booking, total pendapatan platform.
T20
Deployment Awal· S· Butuh dulu: T19

Konfigurasi proyek untuk deployment ke Vercel (frontend & API) dan Railway (PostgreSQL).

Lihat isi perintah
Buat `vercel.json` untuk konfigurasi deployment Next.js. Pastikan semua `envVars` yang diperlukan diatur di Vercel dan Railway. Siapkan `Procfile` jika diperlukan untuk Railway. Verifikasi bahwa aplikasi dapat di-deploy dan berfungsi dengan benar di lingkungan produksi.

Risks

  • Ketergantungan pada Midtrans untuk pembayaran; perubahan API atau kebijakan Midtrans dapat memengaruhi fungsionalitas inti.
  • Potensi fraud atau ulasan palsu dari teknisi/pelanggan, yang dapat merusak reputasi platform. Mitigasi: verifikasi teknisi yang ketat dan sistem rating yang transparan.
  • Ketersediaan teknisi yang tidak memadai di awal peluncuran, menyebabkan pengalaman pelanggan yang buruk. Mitigasi: fokus pada akuisisi teknisi di area target awal.
  • Perubahan harga layanan atau profil teknisi setelah booking dibuat dapat menyebabkan inkonsistensi data laporan. Mitigasi: snapshot harga dan detail layanan ke record booking (`technician_service_id`, `total_price`, `commission_rate_snapshot`, `address_snapshot`) untuk menjaga integritas data historis.

Open Questions

  • Apakah ada kebutuhan untuk fitur pembatalan booking oleh pelanggan setelah pembayaran berhasil dan sebelum layanan dimulai? Jika ya, bagaimana mekanisme pengembalian dananya?
  • Bagaimana penanganan jika teknisi tidak datang atau layanan tidak sesuai ekspektasi pelanggan (di luar rating/ulasan)? Apakah ada mekanisme pengajuan komplain formal?