Lewati ke konten
Skematik
Semua templateBikin PRD gratis
Semua template
E-commerce / Toko Online

Toko Kue Online

Platform e-commerce untuk UMKM kue dan makanan rumahan, memungkinkan pemilik menjual produk secara online dengan katalog, keranjang belanja, checkout, pembayaran Midtrans, dan pengiriman terbatas area kota. Dilengkapi dashboard admin sederhana untuk pengelolaan produk dan pesanan.

Pakai template

Toko Kue Online

Platform e-commerce untuk UMKM kue dan makanan rumahan, memungkinkan pemilik menjual produk secara online dengan katalog, keranjang belanja, checkout, pembayaran Midtrans, dan pengiriman terbatas area kota. Dilengkapi dashboard admin sederhana untuk pengelolaan produk dan pesanan.

Problem

Banyak UMKM kue dan makanan rumahan kesulitan menjangkau pasar yang lebih luas dan mengelola pesanan secara efisien tanpa platform online yang terintegrasi. Pelanggan juga kesulitan menemukan dan memesan produk rumahan berkualitas dari penjual lokal dengan mudah dan aman.

Goals

  • Produk UMKM dapat diakses online oleh pelanggan di area kota, memungkinkan penambahan 50 produk dalam 1 jam oleh admin.
  • Pelanggan dapat menyelesaikan pesanan dari melihat produk hingga konfirmasi pembayaran dalam ≤ 5 langkah.
  • Pemilik UMKM dapat melihat dan memperbarui status 100% pesanan masuk melalui dashboard admin.
  • Halaman katalog produk memuat dalam < 2 detik untuk 100 produk pada koneksi 4G standar.

Non-Goals

  • Fitur registrasi dan akun pelanggan (hanya guest checkout untuk MVP).
  • Sistem diskon, voucher, atau program loyalitas.
  • Integrasi dengan jasa pengiriman pihak ketiga (hanya pengiriman internal/kurir toko dengan tarif flat).
  • Fitur ulasan dan rating produk oleh pelanggan.
  • Manajemen stok yang kompleks (hanya stok sederhana: tersedia/habis).
  • Laporan penjualan dan analitik lanjutan.

Target Users

  • Pemilik Usaha Kue/Makanan Rumahan (UMKM) — Memiliki platform untuk menampilkan produk, menerima pesanan, dan mengelola status pesanan dengan mudah.
  • Pelanggan di Area Kota — Mencari dan memesan kue serta makanan rumahan berkualitas secara online dengan proses yang cepat dan pembayaran yang aman.

User Stories

  • must-have
    Sebagai Pelanggan, saya ingin Melihat daftar kue dan makanan rumahan yang tersedia, agar Saya bisa memilih produk yang ingin saya beli..
  • must-have
    Sebagai Pelanggan, saya ingin Menambahkan produk ke keranjang belanja dan mengatur jumlahnya, agar Saya bisa mengumpulkan semua item yang ingin saya beli sebelum checkout..
  • must-have
    Sebagai Pelanggan, saya ingin Melakukan checkout dan pembayaran menggunakan metode lokal (Midtrans), agar Pesanan saya dapat diproses dan saya bisa menerima konfirmasi..
  • must-have
    Sebagai Pemilik UMKM (Admin), saya ingin Menambahkan, mengedit, atau menghapus produk dari katalog, agar Saya bisa menjaga katalog produk saya tetap up-to-date..
  • must-have
    Sebagai Pemilik UMKM (Admin), saya ingin Melihat daftar pesanan masuk dan memperbarui statusnya, agar Saya bisa memproses pesanan dengan efisien dan memberi tahu pelanggan..

User Flow

  1. **Alur Pelanggan:**
  2. 1. Pelanggan mengunjungi halaman utama toko.
  3. 2. Pelanggan melihat katalog produk, dapat memfilter atau mencari produk.
  4. 3. Pelanggan mengklik produk untuk melihat detail.
  5. 4. Pelanggan menambahkan produk ke keranjang belanja.
  6. 5. Pelanggan melihat isi keranjang belanja, dapat mengubah kuantitas atau menghapus item.
  7. 6. Pelanggan melanjutkan ke halaman checkout.
  8. 7. Pelanggan mengisi informasi kontak dan alamat pengiriman.
  9. 8. Sistem memvalidasi area pengiriman dan menampilkan total pesanan (termasuk biaya kirim).
  10. 9. Pelanggan mengkonfirmasi pesanan dan diarahkan ke halaman pembayaran Midtrans.
  11. 10. Pelanggan menyelesaikan pembayaran di Midtrans.
  12. 11. Pelanggan diarahkan kembali ke halaman konfirmasi pesanan di toko.
  13. 12. Pelanggan menerima notifikasi konfirmasi pesanan (email/WA).
  14. **Alur Admin:**
  15. 1. Admin mengakses halaman login dashboard.
  16. 2. Admin memasukkan email dan password untuk login.
  17. 3. Admin berhasil login dan masuk ke dashboard.
  18. 4. Admin dapat melihat daftar produk, menambah, mengedit, atau menghapus produk.
  19. 5. Admin dapat melihat daftar pesanan masuk.
  20. 6. Admin dapat melihat detail setiap pesanan.
  21. 7. Admin dapat memperbarui status pesanan (misal: 'PROCESSING', 'DELIVERED').
  22. 8. Admin menerima notifikasi (email/WA) saat ada pesanan baru.
Memuat diagram…

Features

Katalog Produk

must-have

Menampilkan daftar produk kue dan makanan rumahan dengan detail seperti nama, deskripsi, harga, dan gambar.

  • Halaman utama menampilkan daftar produk aktif dengan gambar, nama, dan harga.
  • Pengguna dapat melihat detail lengkap setiap produk dengan mengklik item di katalog.
  • Produk dapat difilter berdasarkan kategori (misalnya 'Kue Basah', 'Makanan Berat').
  • Pengguna dapat mencari produk berdasarkan nama atau deskripsi, dan hasil pencarian ditampilkan secara relevan.
  • Produk dengan stok 0 tidak ditampilkan di katalog publik.

Keranjang Belanja

must-have

Memungkinkan pelanggan untuk menambah, mengurangi, atau menghapus produk dari keranjang belanja mereka sebelum checkout.

  • Pengguna dapat menambahkan produk ke keranjang belanja dari halaman katalog atau detail produk.
  • Pengguna dapat mengubah kuantitas produk di keranjang belanja.
  • Pengguna dapat menghapus produk dari keranjang belanja.
  • Total harga belanja (subtotal) di keranjang diperbarui secara real-time saat ada perubahan kuantitas atau item.
  • Pengguna tidak dapat menambahkan produk ke keranjang jika stok produk tersebut 0 atau kuantitas melebihi stok yang tersedia.

Checkout & Pengiriman

must-have

Proses checkout untuk mengumpulkan informasi pelanggan, alamat pengiriman, dan menghitung biaya pengiriman (tarif flat).

  • Pengguna dapat mengisi formulir checkout dengan nama, nomor telepon, dan alamat pengiriman.
  • Sistem secara otomatis menghitung biaya pengiriman flat sebesar Rp 15.000 untuk area pengiriman yang ditentukan (misal: 'Kota Jakarta').
  • Sistem menolak pesanan jika alamat pengiriman berada di luar area layanan yang ditentukan dengan pesan 'Area pengiriman tidak didukung'.
  • Total pesanan (subtotal + biaya pengiriman) ditampilkan dengan jelas sebelum pembayaran.
  • Validasi input form dilakukan untuk memastikan semua data wajib terisi dan format nomor telepon benar.

Pembayaran Lokal (Midtrans)

must-have

Integrasi dengan Midtrans untuk memproses pembayaran online dari pelanggan.

  • Setelah konfirmasi checkout, pengguna diarahkan ke halaman pembayaran Midtrans.
  • Setelah pembayaran berhasil di Midtrans, status pesanan di sistem diperbarui menjadi 'PAID'.
  • Jika pembayaran gagal atau dibatalkan di Midtrans, status pesanan di sistem diperbarui menjadi 'CANCELLED' atau 'FAILED'.
  • Sistem mencatat Midtrans transaction ID untuk setiap pesanan yang diproses melalui Midtrans.
  • Pembayaran ganda untuk pesanan yang sama akan ditolak oleh Midtrans atau sistem akan mengabaikan callback duplikat.

Notifikasi Pesanan

should-have

Mengirim notifikasi kepada admin saat ada pesanan baru dan konfirmasi kepada pelanggan setelah pembayaran berhasil.

  • Admin menerima notifikasi email (atau WhatsApp) saat ada pesanan baru yang masuk dengan status 'PENDING_PAYMENT'.
  • Pelanggan menerima konfirmasi email (atau WhatsApp) berisi detail pesanan dan status 'PAID' setelah pembayaran berhasil.
  • Notifikasi berisi ringkasan pesanan, total harga, dan alamat pengiriman.
  • Notifikasi dikirim dalam waktu maksimal 30 detik setelah peristiwa pemicu (pesanan baru / pembayaran sukses).

Dashboard Admin

must-have

Antarmuka sederhana untuk pemilik UMKM mengelola produk dan pesanan.

  • Admin dapat login ke dashboard menggunakan email dan password.
  • Admin dapat melihat daftar semua produk dengan opsi untuk menambah, mengedit, dan menghapus produk.
  • Admin dapat melihat daftar semua pesanan dengan detail pelanggan, produk, total harga, dan status.
  • Admin dapat memperbarui status pesanan (misalnya dari 'PAID' ke 'PROCESSING', 'DELIVERED').
  • Admin tidak dapat menghapus produk yang sedang aktif dalam pesanan berstatus 'PAID' atau 'PROCESSING', sistem akan menampilkan pesan error yang relevan.

Tech Stack

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

Memanfaatkan Next.js sebagai framework full-stack untuk menyederhanakan pengembangan frontend dan backend, serta PostgreSQL untuk database relasional yang handal.

Architecture

Sistem ini menggunakan arsitektur full-stack dengan Next.js. Frontend akan menyajikan katalog produk dan proses checkout, sementara Next.js API Routes akan menangani logika backend seperti manajemen produk, pesanan, autentikasi admin, dan integrasi pembayaran Midtrans. Data disimpan di database PostgreSQL.

Frontend (Next.js)

Menampilkan UI katalog produk, keranjang belanja, form checkout, dan halaman konfirmasi pesanan. Berinteraksi dengan API backend.

Backend (Next.js API Routes)

Menyediakan API untuk CRUD produk dan pesanan, autentikasi admin, validasi bisnis, dan integrasi dengan Midtrans. Berinteraksi dengan database.

Database (PostgreSQL)

Menyimpan semua data aplikasi seperti produk, kategori, pesanan, item pesanan, dan informasi admin.

Midtrans Payment Gateway

Memproses pembayaran online dari pelanggan dan mengirim notifikasi status pembayaran ke backend.

Alur data

  1. Pelanggan mengakses aplikasi web (Frontend).
  2. Frontend memuat data produk dari Backend API (`GET /api/products`).
  3. Pelanggan menambah produk ke keranjang (Frontend state).
  4. Pelanggan mengisi form checkout dan mengirim data ke Backend API (`POST /api/orders`).
  5. Backend API memvalidasi data, mengurangi stok, menyimpan pesanan ke Database, dan menginisiasi transaksi ke Midtrans.
  6. Backend API mengembalikan URL redirect Midtrans ke Frontend.
  7. Frontend mengarahkan pelanggan ke halaman pembayaran Midtrans.
  8. Pelanggan menyelesaikan pembayaran di Midtrans.
  9. Midtrans mengirim callback notifikasi status pembayaran ke Backend API (`POST /api/payments/midtrans-callback`).
  10. Backend API memperbarui status pesanan di Database dan mengirim notifikasi ke Admin/Pelanggan.
  11. Admin login ke Dashboard (Frontend) melalui Backend API (`POST /api/auth/login`).
  12. Admin mengelola produk dan pesanan melalui Dashboard (Frontend) yang berinteraksi dengan Backend API (`/api/admin/*`).
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.

usersTabel untuk pengguna sistem (admin).
iduuidPrimary key
emailtextEmail unik pengguna
password_hashtextHash password pengguna
roleenum:UserRolePeran pengguna (misal: ADMIN)
categoriesTabel untuk kategori produk.
iduuidPrimary key
nametextNama kategori, unik
slugtextSlug URL unik untuk kategori
productssoft deleteTabel untuk daftar produk yang dijual.
iduuidPrimary key
nametextNama produk, unik untuk baris aktif — partial unique index (UNIQUE WHERE deleted_at IS NULL)
descriptiontextDeskripsi lengkap produk
pricenumericHarga jual produk (contoh: 25000.00)
stockintegerJumlah stok produk yang tersedia
image_urltextURL gambar produk
category_iduuidForeign key ke tabel categories
is_activebooleanStatus aktif produk, true = ditampilkan di katalog
orderssoft deleteTabel untuk pesanan pelanggan.
iduuidPrimary key
customer_nametextNama pelanggan
customer_phonetextNomor telepon pelanggan
customer_addresstextAlamat pengiriman pelanggan
total_amountnumericTotal jumlah pesanan termasuk biaya pengiriman
shipping_costnumericBiaya pengiriman untuk pesanan ini
order_statusenum:OrderStatusStatus pesanan (misal: PENDING_PAYMENT, PROCESSING, DELIVERED)
payment_statusenum:PaymentStatusStatus pembayaran (misal: UNPAID, PAID, FAILED)
midtrans_transaction_idtextID transaksi dari Midtrans
order_itemsTabel untuk item-item dalam setiap pesanan.
iduuidPrimary key
order_iduuidForeign key ke tabel orders
product_iduuidForeign key ke tabel products
quantityintegerKuantitas produk dalam pesanan
price_at_salenumericHarga produk saat pesanan dibuat (snapshot untuk historis)

Relasi

  • users.role (enum:UserRole)
  • products.category_id → categories.id (many-to-one)
  • orders.order_status (enum:OrderStatus)
  • orders.payment_status (enum:PaymentStatus)
  • order_items.order_id → orders.id (many-to-one)
  • order_items.product_id → products.id (many-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 root
  • src/app/(auth)/ — Route group untuk halaman autentikasi (mis. login)
  • src/app/(auth)/login/page.tsx — Halaman login admin
  • src/app/(app)/ — Route group untuk halaman aplikasi utama (admin dashboard)
  • src/app/(app)/admin/ — Folder untuk halaman dashboard admin
  • src/app/(app)/admin/products/page.tsx — Daftar produk admin
  • src/app/(app)/admin/products/new/page.tsx — Form tambah produk
  • src/app/(app)/admin/products/[id]/edit/page.tsx — Form edit produk
  • src/app/(app)/admin/orders/page.tsx — Daftar pesanan admin
  • src/app/(app)/admin/orders/[id]/page.tsx — Detail pesanan admin
  • src/app/(shop)/ — Route group untuk halaman toko publik
  • src/app/(shop)/page.tsx — Halaman katalog produk utama
  • src/app/(shop)/products/[id]/page.tsx — Halaman detail produk
  • src/app/(shop)/cart/page.tsx — Halaman keranjang belanja
  • src/app/(shop)/checkout/page.tsx — Halaman checkout
  • src/app/(shop)/order-confirmation/[id]/page.tsx — Halaman konfirmasi pesanan
  • src/app/api/ — Next.js API Routes
  • src/app/api/auth/login/route.ts — Endpoint login admin
  • src/app/api/products/route.ts — Endpoint list produk publik
  • src/app/api/products/[id]/route.ts — Endpoint detail produk publik
  • src/app/api/orders/route.ts — Endpoint pembuatan pesanan
  • src/app/api/orders/[id]/route.ts — Endpoint detail pesanan publik (dengan verifikasi)
  • src/app/api/payments/midtrans-callback/route.ts — Endpoint webhook Midtrans
  • src/app/api/admin/products/route.ts — Endpoint CRUD produk admin
  • src/app/api/admin/products/[id]/route.ts — Endpoint CRUD produk admin (detail)
  • src/app/api/admin/orders/route.ts — Endpoint list pesanan admin
  • src/app/api/admin/orders/[id]/route.ts — Endpoint detail pesanan admin
  • src/app/api/admin/orders/[id]/status/route.ts — Endpoint update status pesanan admin
  • src/components/ — Komponen UI yang dapat digunakan kembali
  • src/components/CartDisplay.tsx — Komponen tampilan keranjang
  • src/db/ — Konfigurasi dan skema database
  • src/db/index.ts — Klien Drizzle ORM
  • src/db/schema.ts — Definisi skema Drizzle
  • src/db/seed.ts — Script seeding data awal
  • src/lib/ — Fungsi utilitas dan helper
  • src/lib/auth.ts — Fungsi autentikasi dan middleware
  • src/lib/cart-store.ts — State manajemen keranjang belanja
  • src/schemas/ — Skema validasi Zod
  • src/services/ — Logika bisnis dan integrasi eksternal
  • src/services/midtrans.ts — Integrasi Midtrans
  • src/services/notification.ts — Layanan notifikasi (email/WA)
  • src/types/ — Definisi tipe TypeScript

API Endpoints

POST
/api/auth/loginMelakukan autentikasi admin dan mengembalikan token JWT. Gagal jika kredensial tidak valid.
GET
/api/productsMendapatkan daftar produk aktif yang tersedia untuk pelanggan. Mendukung pagination, filter kategori, dan pencarian. Mengembalikan 404 jika tidak ada produk yang cocok.paginated
GET
/api/products/:idMendapatkan detail produk spesifik. Mengembalikan 404 jika produk tidak ditemukan atau tidak aktif.
POST
/api/ordersMembuat pesanan baru dari keranjang belanja pelanggan. Memvalidasi stok produk dan area pengiriman. Mengurangi stok. Mengembalikan `order_id` dan `redirect_url` Midtrans. Gagal jika stok tidak cukup, area pengiriman tidak didukung, atau data tidak valid. body: { customer_name, customer_phone, customer_address, items: [{product_id, quantity}] }
GET
/api/orders/:idMendapatkan detail pesanan berdasarkan ID. Membutuhkan `customer_phone` sebagai query parameter untuk verifikasi. Mengembalikan 404 jika tidak ditemukan atau verifikasi gagal.
POST
/api/payments/midtrans-callbackEndpoint webhook untuk menerima notifikasi status pembayaran dari Midtrans. Memverifikasi signature dan memperbarui status pesanan. Endpoint ini idempotent.
GET
/api/admin/productsMendapatkan daftar semua produk (termasuk yang tidak aktif) untuk admin. Mendukung pagination. Membutuhkan autentikasi ADMIN.paginatedauth: ADMIN
POST
/api/admin/productsMenambah produk baru ke katalog. Membutuhkan autentikasi ADMIN. Gagal jika data produk tidak valid.auth: ADMIN
PUT
/api/admin/products/:idMemperbarui detail produk yang sudah ada. Membutuhkan autentikasi ADMIN. Gagal jika produk tidak ditemukan atau data tidak valid.auth: ADMIN
DELETE
/api/admin/products/:idMenghapus (soft delete) produk. Membutuhkan autentikasi ADMIN. Gagal jika produk tidak ditemukan atau produk masih terkait dengan pesanan aktif.auth: ADMIN
GET
/api/admin/ordersMendapatkan daftar semua pesanan untuk admin. Mendukung pagination. Membutuhkan autentikasi ADMIN.paginatedauth: ADMIN
GET
/api/admin/orders/:idMendapatkan detail pesanan spesifik untuk admin. Membutuhkan autentikasi ADMIN. Mengembalikan 404 jika pesanan tidak ditemukan.auth: ADMIN
PATCH
/api/admin/orders/:id/statusMemperbarui status pesanan (misal: 'PROCESSING', 'DELIVERED'). Membutuhkan autentikasi ADMIN. Gagal jika pesanan tidak ditemukan atau status tidak valid.auth: ADMIN

Peran (RBAC)

ADMIN
Pemilik usaha yang memiliki akses penuh ke dashboard untuk mengelola produk dan pesanan.· kelola produk (CRUD), lihat & perbarui status pesanan

Enum

UserRoleADMIN
OrderStatusPENDING_PAYMENT · PAID · PROCESSING · DELIVERED · CANCELLED
PaymentStatusUNPAID · PAID · FAILED · CANCELLED

Environment Variables

DATABASE_URLbackendwajibURL koneksi database PostgreSQL
JWT_SECRETbackendwajibSecret key untuk JWT
MIDTRANS_SERVER_KEYbackendwajibServer Key Midtrans untuk transaksi backend
MIDTRANS_CLIENT_KEYbackendwajibClient Key Midtrans untuk inisialisasi di frontend (jika diperlukan)
MIDTRANS_IS_PRODUCTIONbackendwajibFlag untuk mode produksi Midtrans (true/false)
NEXT_PUBLIC_APP_URLfrontendwajibURL publik aplikasi untuk callback Midtrans dan notifikasi
EMAIL_SERVICE_API_KEYbackendAPI Key untuk layanan pengiriman email (opsional untuk notifikasi)

Library Inti

react · frontendnext · sharedtailwindcss · frontenddrizzle-orm · backendpg · backendzod · sharedbcryptjs · backendjsonwebtoken · backendmidtrans-client · backendreact-hook-form · frontend

Tasks (siap kirim ke AI agent)

T1
Inisialisasi Proyek Next.js· S

Membuat proyek Next.js baru dengan TypeScript dan Tailwind CSS.

Lihat isi perintah
Buat proyek Next.js baru menggunakan `create-next-app` dengan TypeScript, ESLint, Tailwind CSS, dan App Router. Pastikan konfigurasi dasar Tailwind CSS sudah terpasang.
T2
Konfigurasi Database PostgreSQL dengan Drizzle ORM· M· Butuh dulu: T1

Menyiapkan koneksi database PostgreSQL dan Drizzle ORM.

Lihat isi perintah
Instal `drizzle-orm`, `pg` (atau `postgres.js`), dan `drizzle-kit`. Buat file `src/db/index.ts` untuk inisialisasi koneksi Drizzle. Tambahkan konfigurasi `drizzle.config.ts` dan `DATABASE_URL` di `.env.example`.
T3
Definisi Skema Database Awal· L· Butuh dulu: T2

Mendefinisikan skema tabel `users`, `categories`, `products`, `orders`, `order_items` menggunakan Drizzle ORM.

Lihat isi perintah
Buat file `src/db/schema.ts` dan definisikan skema Drizzle ORM untuk tabel `users`, `categories`, `products`, `orders`, `order_items` sesuai PRD. Pastikan semua tipe data, relasi, dan constraint sudah benar, termasuk `softDelete` untuk `products` dan `orders`.
T4
Migrasi Database & Seeding Admin User· M· Butuh dulu: T3

Menjalankan migrasi database dan membuat user admin awal.

Lihat isi perintah
Buat script migrasi awal menggunakan Drizzle Kit. Jalankan migrasi. Buat script `src/db/seed.ts` untuk menambahkan satu user admin dengan email `admin@example.com` dan password `password123` (hash password menggunakan `bcryptjs`). Tambahkan perintah seed ke `package.json`.
T5
Implementasi Autentikasi Admin (Login)· M· Butuh dulu: T4

Membuat endpoint API untuk login admin dan mengelola sesi/token.

Lihat isi perintah
Buat API route `src/app/api/auth/login/route.ts` untuk menangani login admin. Gunakan `bcryptjs` untuk memverifikasi password dan `jsonwebtoken` untuk membuat JWT. Set JWT_SECRET di `.env.example`. Implementasikan `src/lib/auth.ts` untuk fungsi verifikasi JWT dan middleware autentikasi.
T6
Halaman Login Admin· S· Butuh dulu: T5

Membuat UI halaman login untuk admin.

Lihat isi perintah
Buat halaman login di `src/app/(auth)/login/page.tsx` dengan form email dan password. Gunakan `react-hook-form` dan `zod` untuk validasi form. Kirim data ke API login dan tangani respons (sukses/gagal).
T7
API CRUD Produk (Admin)· L· Butuh dulu: T5

Membuat endpoint API untuk admin mengelola produk (tambah, lihat, edit, hapus).

Lihat isi perintah
Buat API routes di `src/app/api/admin/products/route.ts` (GET, POST) dan `src/app/api/admin/products/[id]/route.ts` (GET, PUT, DELETE). Pastikan semua endpoint ini dilindungi oleh autentikasi admin. Gunakan Drizzle ORM untuk interaksi database. Implementasikan soft delete untuk DELETE.
T8
Halaman Daftar Produk (Admin)· M· Butuh dulu: T7

Membuat UI untuk menampilkan daftar produk di dashboard admin.

Lihat isi perintah
Buat halaman `src/app/(app)/admin/products/page.tsx` yang menampilkan tabel daftar produk. Ambil data dari API `GET /api/admin/products`. Tambahkan tombol untuk 'Tambah Produk' dan 'Edit/Hapus' untuk setiap baris.
T9
Form Tambah/Edit Produk (Admin)· M· Butuh dulu: T8

Membuat UI form untuk menambah dan mengedit detail produk.

Lihat isi perintah
Buat halaman `src/app/(app)/admin/products/new/page.tsx` dan `src/app/(app)/admin/products/[id]/edit/page.tsx` dengan form untuk input nama, deskripsi, harga, stok, kategori, dan URL gambar. Gunakan `react-hook-form` dan `zod` untuk validasi. Kirim data ke API `POST /api/admin/products` atau `PUT /api/admin/products/[id]`.
T10
API Daftar & Detail Pesanan (Admin)· M· Butuh dulu: T5

Membuat endpoint API untuk admin melihat daftar dan detail pesanan.

Lihat isi perintah
Buat API routes di `src/app/api/admin/orders/route.ts` (GET) dan `src/app/api/admin/orders/[id]/route.ts` (GET). Pastikan dilindungi autentikasi admin. Ambil data pesanan beserta item-itemnya dari database.
T11
API Update Status Pesanan (Admin)· S· Butuh dulu: T10

Membuat endpoint API untuk admin memperbarui status pesanan.

Lihat isi perintah
Buat API route `src/app/api/admin/orders/[id]/status/route.ts` (PATCH) untuk memperbarui `order_status`. Pastikan hanya admin yang bisa mengakses dan hanya menerima nilai enum yang valid (`OrderStatus`).
T12
Halaman Daftar & Detail Pesanan (Admin)· M· Butuh dulu: T11

Membuat UI untuk menampilkan daftar dan detail pesanan di dashboard admin.

Lihat isi perintah
Buat halaman `src/app/(app)/admin/orders/page.tsx` untuk menampilkan tabel daftar pesanan. Buat halaman `src/app/(app)/admin/orders/[id]/page.tsx` untuk menampilkan detail pesanan, termasuk daftar item dan opsi untuk mengubah status pesanan.
T13
Halaman Katalog Produk (Pelanggan)· M· Butuh dulu: T7

Membuat UI halaman utama yang menampilkan katalog produk untuk pelanggan.

Lihat isi perintah
Buat halaman `src/app/(shop)/page.tsx` yang menampilkan daftar produk aktif dari `GET /api/products`. Tambahkan komponen untuk filter kategori dan pencarian nama produk. Pastikan produk dengan `is_active=false` atau `stock=0` tidak ditampilkan.
T14
Halaman Detail Produk (Pelanggan)· S· Butuh dulu: T13

Membuat UI halaman detail produk untuk pelanggan.

Lihat isi perintah
Buat halaman `src/app/(shop)/products/[slug]/page.tsx` (atau `[id]`) yang menampilkan detail produk lengkap dari `GET /api/products/:id`. Sertakan tombol 'Tambah ke Keranjang'.
T15
Manajemen Keranjang Belanja (Frontend State)· M· Butuh dulu: T14

Mengelola state keranjang belanja di sisi frontend (menggunakan React Context atau Zustand).

Lihat isi perintah
Buat `src/lib/cart-store.ts` (atau `src/context/CartContext.tsx`) untuk mengelola state keranjang belanja (tambah, hapus, update kuantitas item). Simpan keranjang di `localStorage` agar persisten. Hitung subtotal secara otomatis.
T16
Komponen Keranjang Belanja & Ringkasan· M· Butuh dulu: T15

Membuat komponen UI untuk menampilkan isi keranjang belanja.

Lihat isi perintah
Buat komponen `src/components/CartDisplay.tsx` yang menampilkan daftar item di keranjang, kuantitas, harga, dan subtotal. Tambahkan tombol untuk mengubah kuantitas dan menghapus item. Tambahkan tombol 'Lanjutkan ke Checkout'.
T17
Halaman Keranjang Belanja· S· Butuh dulu: T16

Membuat halaman khusus untuk melihat dan mengelola keranjang belanja.

Lihat isi perintah
Buat halaman `src/app/(shop)/cart/page.tsx` yang menggunakan komponen `CartDisplay` dan menampilkan ringkasan keranjang yang lebih besar.
T18
API Publik Produk (List & Detail)· S· Butuh dulu: T7

Membuat endpoint API publik untuk katalog produk (list dan detail).

Lihat isi perintah
Buat API routes `src/app/api/products/route.ts` (GET) dan `src/app/api/products/[id]/route.ts` (GET). Pastikan endpoint ini tidak memerlukan autentikasi dan hanya mengembalikan produk yang `is_active=true` dan `stock > 0`. Implementasikan pagination, filter kategori, dan search.
T19
Halaman Checkout (Input Info Pelanggan)· M· Butuh dulu: T17

Membuat UI halaman checkout untuk input informasi pelanggan dan alamat pengiriman.

Lihat isi perintah
Buat halaman `src/app/(shop)/checkout/page.tsx` dengan form untuk nama, nomor telepon, dan alamat lengkap. Gunakan `react-hook-form` dan `zod` untuk validasi. Tampilkan ringkasan keranjang dan biaya pengiriman (Rp 15.000) serta total akhir. Tambahkan validasi untuk area pengiriman (misal: hanya 'Kota Jakarta').
T20
API Pembuatan Pesanan· L· Butuh dulu: T19

Membuat endpoint API untuk menerima data checkout dan membuat pesanan baru.

Lihat isi perintah
Buat API route `src/app/api/orders/route.ts` (POST). Endpoint ini menerima data pelanggan dan item keranjang. Validasi stok produk. Buat entri di tabel `orders` dan `order_items`. Kurangi stok produk. Set `order_status` ke `PENDING_PAYMENT` dan `payment_status` ke `UNPAID`. Kembalikan `order_id`.
T21
Integrasi Midtrans (Backend)· M· Butuh dulu: T20

Menyiapkan integrasi Midtrans di sisi backend untuk membuat transaksi.

Lihat isi perintah
Instal `midtrans-client`. Buat fungsi di `src/services/midtrans.ts` untuk membuat transaksi Midtrans. Gunakan `MIDTRANS_SERVER_KEY` dan `MIDTRANS_IS_PRODUCTION` dari `.env.example`. Fungsi ini akan dipanggil setelah pesanan dibuat, mengembalikan `redirect_url` Midtrans.
T22
Integrasi Midtrans (Frontend & Redirect)· S· Butuh dulu: T21

Mengintegrasikan Midtrans di frontend dan mengarahkan pengguna ke halaman pembayaran.

Lihat isi perintah
Setelah `POST /api/orders` berhasil, panggil API backend untuk mendapatkan `redirect_url` Midtrans. Arahkan pengguna ke URL tersebut. Kosongkan keranjang belanja setelah berhasil membuat pesanan.
T23
Midtrans Notification Handler (Webhook)· M· Butuh dulu: T21

Membuat endpoint untuk menerima notifikasi status pembayaran dari Midtrans.

Lihat isi perintah
Buat API route `src/app/api/payments/midtrans-callback/route.ts` (POST). Endpoint ini akan menerima callback dari Midtrans. Verifikasi signature Midtrans. Perbarui `payment_status` dan `order_status` di database berdasarkan notifikasi. Tangani kasus pembayaran berhasil (`PAID`) dan gagal (`FAILED`/`CANCELLED`). Pastikan endpoint ini idempotent.
T24
Halaman Konfirmasi Pesanan· S· Butuh dulu: T23

Membuat halaman untuk menampilkan status pesanan setelah pembayaran.

Lihat isi perintah
Buat halaman `src/app/(shop)/order-confirmation/[id]/page.tsx` yang menampilkan ringkasan pesanan dan status pembayaran (misal: 'Menunggu Pembayaran', 'Pembayaran Berhasil'). Ambil data dari `GET /api/orders/:id` (public, hanya bisa diakses dengan `order_id` dan `customer_phone` sebagai verifikasi).
T25
Integrasi Notifikasi Email/WhatsApp· M· Butuh dulu: T23

Menyiapkan layanan pengiriman email/WhatsApp untuk notifikasi.

Lihat isi perintah
Pilih library untuk mengirim email (misal: Nodemailer) atau integrasi WhatsApp API (misal: Twilio/WA.js). Buat service `src/services/notification.ts` dengan fungsi `sendOrderNotificationToAdmin` dan `sendOrderConfirmationToCustomer`. Tambahkan `EMAIL_SERVICE_API_KEY` atau `TWILIO_ACCOUNT_SID` di `.env.example`.
T26
Trigger Notifikasi Pesanan Baru· S· Butuh dulu: T25, T20

Memicu notifikasi admin saat pesanan baru dibuat.

Lihat isi perintah
Modifikasi API `POST /api/orders` (`src/app/api/orders/route.ts`) untuk memanggil `sendOrderNotificationToAdmin` setelah pesanan berhasil dibuat dengan status `PENDING_PAYMENT`.
T27
Trigger Notifikasi Pembayaran Berhasil· S· Butuh dulu: T25, T23

Memicu notifikasi pelanggan saat pembayaran berhasil.

Lihat isi perintah
Modifikasi API `POST /api/payments/midtrans-callback` (`src/app/api/payments/midtrans-callback/route.ts`) untuk memanggil `sendOrderConfirmationToCustomer` setelah status pesanan berhasil diperbarui menjadi `PAID`.

Risks

  • Kompleksitas integrasi Midtrans: Penanganan callback, verifikasi signature, dan status pembayaran yang berbeda-beda memerlukan penanganan yang cermat untuk menghindari inkonsistensi data.
  • Keamanan: Potensi XSS, CSRF, dan SQL Injection jika validasi input dan sanitasi tidak dilakukan dengan benar, terutama pada form checkout dan dashboard admin.
  • Konsistensi data: Perubahan stok produk harus atomik dengan pembuatan pesanan. Snapshot harga produk saat pesanan dibuat (`price_at_sale`) penting untuk laporan historis jika harga master produk berubah.
  • Penanganan error: Kegagalan pada salah satu tahap (misal: Midtrans tidak merespons, notifikasi gagal terkirim) harus ditangani dengan graceful degradation atau retry mechanism (out of scope untuk MVP, tapi perlu dipertimbangkan).

Open Questions

  • Apakah ada batasan jumlah item per pesanan atau total nilai pesanan minimum/maksimum?
  • Bagaimana penanganan produk yang memerlukan pre-order atau memiliki waktu produksi tertentu?