10a:"ExplicitChatIdProvider" 10b:I[903690,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$82","$83","$84","$85","$7e","$86","$87","$88","$89","$8a","$8b","$7f","$80","$8c","$8d"],"$10a"] 10c:I[838238,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$82","$83","$84","$85","$7e","$86","$87","$88","$89","$8a","$8b","$7f","$80","$8c","$8d"],"SWRDataProvider"] 10e:[] 10f:[["hDAnTUFFTRv","b_TkxP8vBxLxj"]] 110:[["hDAnTUFFTRv",{"templateVersionId":null,"templateCanonId":null}]] 111:[["hDAnTUFFTRv","$D2025-11-20T13:32:43.500Z"]] 112:[["hDAnTUFFTRv",false]] 113:[["hDAnTUFFTRv","$undefined"]] 114:[["hDAnTUFFTRv",null]] 115:[["hDAnTUFFTRv",true]] 116:[["hDAnTUFFTRv",true]] 117:[] 118:Ta628e,[V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" 'use client' import * as React from 'react' import * as AccordionPrimitive from '@radix-ui/react-accordion' import { ChevronDownIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Accordion({ ...props }: React.ComponentProps) { return } function AccordionItem({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { return ( svg]:rotate-180', className, )} {...props} > {children} ) } function AccordionContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

) } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" 'use client' import * as React from 'react' import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog' import { cn } from '@/lib/utils' import { buttonVariants } from '@/components/ui/button' function AlertDialog({ ...props }: React.ComponentProps) { return } function AlertDialogTrigger({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogPortal({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogContent({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogAction({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogCancel({ className, ...props }: React.ComponentProps) { return ( ) } export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const alertVariants = cva( 'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', { variants: { variant: { default: 'bg-card text-card-foreground', destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90', }, }, defaultVariants: { variant: 'default', }, }, ) function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps) { return (

) } function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" 'use client' import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio' function AspectRatio({ ...props }: React.ComponentProps) { return } export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" 'use client' import * as React from 'react' import * as AvatarPrimitive from '@radix-ui/react-avatar' import { cn } from '@/lib/utils' function Avatar({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarImage({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarFallback({ className, ...props }: React.ComponentProps) { return ( ) } export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const badgeVariants = cva( 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90', secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90', destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'span' return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { ChevronRight, MoreHorizontal } from 'lucide-react' import { cn } from '@/lib/utils' function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) { return

} function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) { return (

) } function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<'a'> & { asChild?: boolean }) { const Comp = asChild ? Slot : 'a' return ( ) } function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) { return ( ) } function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) { return (
svg]:size-3.5', className)} {...props} > {children ?? }

& { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" 'use client' import * as React from 'react' import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react' import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker' import { cn } from '@/lib/utils' import { Button, buttonVariants } from '@/components/ui/button' function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }: React.ComponentProps & { buttonVariant?: React.ComponentProps['variant'] }) { const defaultClassNames = getDefaultClassNames() return ( svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className, )} captionLayout={captionLayout} formatters={{ formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }), ...formatters, }} classNames={{ root: cn('w-fit', defaultClassNames.root), months: cn( 'flex gap-4 flex-col md:flex-row relative', defaultClassNames.months, ), month: cn('flex flex-col w-full gap-4', defaultClassNames.month), nav: cn( 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav, ), button_previous: cn( buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous, ), button_next: cn( buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next, ), month_caption: cn( 'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption, ), dropdowns: cn( 'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns, ), dropdown_root: cn( 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root, ), dropdown: cn( 'absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown, ), caption_label: cn( 'select-none font-medium', captionLayout === 'label' ? 'text-sm' : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label, ), table: 'w-full border-collapse', weekdays: cn('flex', defaultClassNames.weekdays), weekday: cn( 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday, ), week: cn('flex w-full mt-2', defaultClassNames.week), week_number_header: cn( 'select-none w-(--cell-size)', defaultClassNames.week_number_header, ), week_number: cn( 'text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number, ), day: cn( 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', defaultClassNames.day, ), range_start: cn( 'rounded-l-md bg-accent', defaultClassNames.range_start, ), range_middle: cn('rounded-none', defaultClassNames.range_middle), range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end), today: cn( 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today, ), outside: cn( 'text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside, ), disabled: cn( 'text-muted-foreground opacity-50', defaultClassNames.disabled, ), hidden: cn('invisible', defaultClassNames.hidden), ...classNames, }} components={{ Root: ({ className, rootRef, ...props }) => { return (

) }, Chevron: ({ className, orientation, ...props }) => { if (orientation === 'left') { return ( ) } if (orientation === 'right') { return ( ) } return ( ) }, DayButton: CalendarDayButton, WeekNumber: ({ children, ...props }) => { return (

{children}

) }, ...components, }} {...props} /> ) } function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) { const defaultClassNames = getDefaultClassNames() const ref = React.useRef(null) React.useEffect(() => { if (modifiers.focused) ref.current?.focus() }, [modifiers.focused]) return ( ) } function CarouselNext({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps) { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) } export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" 'use client' import * as React from 'react' import * as RechartsPrimitive from 'recharts' import { cn } from '@/lib/utils' // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: '', dark: '.dark' } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error('useChart must be used within a ') } return context } function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<'div'> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >['children'] }) { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, '')}` return (

{children}

) } const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([, config]) => config.theme || config.color, ) if (!colorConfig.length) { return null } return ( ERD SISTEM MOMOYO ICE CREAM USERS 🔑 id (PK) name email password phone address created_at updated_at ORDERS 🔑 id (PK) 🔗 user_id (FK) 🔗 voucher_code (FK) total subtotal discount shipping_cost status payment_method payment_status shipping_address created_at ORDER_ITEMS 🔑 id (PK) 🔗 order_id (FK) 🔗 menu_item_id (FK) quantity price subtotal created_at 1 M Membuat 1 M Memiliki ADMINS 🔑 id (PK) email password created_at VOUCHERS 🔑 id (PK) code discount_type discount_value min_purchase is_active created_at MENU_ITEMS 🔑 id (PK) name description price category image_url is_promo promo_price created_at updated_at 1 M Kelola M 1 1 M REVIEWS 🔑 id (PK) 🔗 user_id (FK) 🔗 menu_item_id (FK) rating comment created_at PAYMENT_LOGS 🔑 id (PK) 🔗 order_id (FK) transaction_id payment_method amount status midtrans_response created_at 1 M 1 M LEGEND Entity = Tabel 🔑 PK = Primary Key 🔗 FK = Foreign Key = Relasi 1:M = Kardinalitas FLOW SISTEM CUSTOMER: 1. Registrasi/Login → USERS 2. Browse MENU_ITEMS → Tambah ke keranjang 3. Checkout → Buat ORDERS + ORDER_ITEMS 4. Input VOUCHERS untuk diskon (opsional) 5. Bayar via Midtrans → PAYMENT_LOGS 6. Tulis REVIEWS setelah terima pesanan ADMIN: 1. Login → ADMINS 2. Kelola MENU_ITEMS (CRUD + set promo) 3. Kelola VOUCHERS (buat kode diskon) 4. Monitor ORDERS + update status 5. Lihat PAYMENT_LOGS untuk tracking [V0_FILE]xml:file="public/erd-simple.svg" [V0_FILE]html:file="public/erd-viewer.html" isQuickEdit="true" ERD MOMOYO Ice Cream System

🍦 ERD SISTEM MOMOYO ICE CREAM 🍦

Entity Relationship Diagram - Sistem Penjualan Es Krim

[V0_FILE]sql:file="scripts/05-create-payment-shipping-tables.sql" -- Tabel untuk voucher diskon CREATE TABLE IF NOT EXISTS vouchers ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), code VARCHAR(50) UNIQUE NOT NULL, discount_type VARCHAR(20) NOT NULL, -- 'percentage' atau 'fixed' discount_value DECIMAL(10, 2) NOT NULL, min_purchase DECIMAL(10, 2) DEFAULT 0, is_active BOOLEAN DEFAULT true, max_uses INTEGER, used_count INTEGER DEFAULT 0, valid_from TIMESTAMP DEFAULT CURRENT_TIMESTAMP, valid_until TIMESTAMP, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Tabel untuk transaksi Midtrans CREATE TABLE IF NOT EXISTS payment_transactions ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), order_id UUID REFERENCES orders(id) ON DELETE CASCADE, transaction_id VARCHAR(255) UNIQUE, -- dari Midtrans gross_amount DECIMAL(10, 2) NOT NULL, payment_type VARCHAR(50), -- credit_card, bank_transfer, gopay, dll transaction_status VARCHAR(50) DEFAULT 'pending', -- pending, success, failed, expire transaction_time TIMESTAMP, settlement_time TIMESTAMP, fraud_status VARCHAR(50), snap_token VARCHAR(500), snap_redirect_url VARCHAR(500), payment_code VARCHAR(100), -- untuk bank transfer va_number VARCHAR(100), -- untuk virtual account metadata JSON, -- data lengkap dari Midtrans created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Tabel untuk data pengiriman CREATE TABLE IF NOT EXISTS shipping_info ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), order_id UUID REFERENCES orders(id) ON DELETE CASCADE, recipient_name VARCHAR(255) NOT NULL, recipient_phone VARCHAR(50) NOT NULL, recipient_address TEXT NOT NULL, city_id VARCHAR(10), -- dari RajaOngkir city_name VARCHAR(255), province VARCHAR(255), postal_code VARCHAR(10), courier VARCHAR(50), -- jne, pos, tiki service VARCHAR(50), -- REG, YES, OKE, dll shipping_cost DECIMAL(10, 2) NOT NULL, weight INTEGER, -- dalam gram estimated_delivery VARCHAR(50), -- "2-3 hari" tracking_number VARCHAR(100), shipping_status VARCHAR(50) DEFAULT 'pending', -- pending, processing, shipped, delivered created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Update tabel orders untuk support voucher dan shipping ALTER TABLE orders ADD COLUMN IF NOT EXISTS voucher_code VARCHAR(50), ADD COLUMN IF NOT EXISTS voucher_discount DECIMAL(10, 2) DEFAULT 0, ADD COLUMN IF NOT EXISTS shipping_cost DECIMAL(10, 2) DEFAULT 0, ADD COLUMN IF NOT EXISTS subtotal DECIMAL(10, 2), ADD COLUMN IF NOT EXISTS payment_method VARCHAR(50), ADD COLUMN IF NOT EXISTS payment_status VARCHAR(50) DEFAULT 'unpaid', ADD COLUMN IF NOT EXISTS notes TEXT; -- Buat index untuk performa CREATE INDEX IF NOT EXISTS idx_vouchers_code ON vouchers(code); CREATE INDEX IF NOT EXISTS idx_payment_transactions_order_id ON payment_transactions(order_id); CREATE INDEX IF NOT EXISTS idx_payment_transactions_transaction_id ON payment_transactions(transaction_id); CREATE INDEX IF NOT EXISTS idx_shipping_info_order_id ON shipping_info(order_id); -- Insert voucher default INSERT INTO vouchers (code, discount_type, discount_value, min_purchase, is_active, max_uses) VALUES ('MOMOYO10', 'percentage', 10, 50000, true, 100), ('PROMO20K', 'fixed', 20000, 100000, true, 50), ('WELCOME15', 'percentage', 15, 75000, true, 200) ON CONFLICT (code) DO NOTHING; -- Function untuk update payment status CREATE OR REPLACE FUNCTION update_order_payment_status() RETURNS TRIGGER AS $$ BEGIN UPDATE orders SET payment_status = CASE WHEN NEW.transaction_status = 'settlement' OR NEW.transaction_status = 'capture' THEN 'paid' WHEN NEW.transaction_status = 'pending' THEN 'pending' WHEN NEW.transaction_status = 'deny' OR NEW.transaction_status = 'cancel' OR NEW.transaction_status = 'expire' THEN 'failed' ELSE 'unpaid' END, status = CASE WHEN NEW.transaction_status = 'settlement' OR NEW.transaction_status = 'capture' THEN 'confirmed' WHEN NEW.transaction_status = 'pending' THEN 'pending' WHEN NEW.transaction_status = 'deny' OR NEW.transaction_status = 'cancel' OR NEW.transaction_status = 'expire' THEN 'cancelled' ELSE status END, updated_at = CURRENT_TIMESTAMP WHERE id = NEW.order_id; RETURN NEW; END; $$ LANGUAGE plpgsql; -- Trigger untuk auto update order status DROP TRIGGER IF EXISTS trigger_update_order_payment_status ON payment_transactions; CREATE TRIGGER trigger_update_order_payment_status AFTER INSERT OR UPDATE ON payment_transactions FOR EACH ROW EXECUTE FUNCTION update_order_payment_status(); COMMENT ON TABLE vouchers IS 'Tabel untuk menyimpan voucher diskon yang dibuat admin'; COMMENT ON TABLE payment_transactions IS 'Tabel untuk menyimpan transaksi pembayaran dari Midtrans'; COMMENT ON TABLE shipping_info IS 'Tabel untuk menyimpan informasi pengiriman dari RajaOngkir'; [V0_FILE]markdown:file="SETUP_PAYMENT_GATEWAY.md" # 🚀 Panduan Lengkap Setup Midtrans & RajaOngkir Panduan step-by-step untuk mengintegrasikan payment gateway Midtrans dan shipping calculator RajaOngkir ke sistem MOMOYO Ice Cream. --- ## 📋 Prerequisites - Akun Vercel atau hosting dengan Next.js support - Email bisnis untuk pendaftaran - Dokumen bisnis (untuk production Midtrans) --- ## 1️⃣ SETUP DATABASE ### Langkah 1: Jalankan SQL Scripts Jalankan script SQL berikut **secara berurutan** di Supabase: 1. ✅ `scripts/01-create-tables.sql` (sudah ada) 2. ✅ `scripts/01-create-users-table.sql` (sudah ada) 3. ✅ `scripts/02-add-admin.sql` (sudah ada) 4. ✅ `scripts/03-setup-reviews-table.sql` (sudah ada) 5. ✅ `scripts/04-seed-sample-data.sql` (sudah ada) 6. **🆕 `scripts/05-create-payment-shipping-tables.sql`** (BARU - jalankan sekarang!) ### Cara Menjalankan Script: - Di v0: Script otomatis terdeteksi, klik "Run" di sidebar Scripts - Di Supabase Dashboard: SQL Editor → Paste script → Run ### Apa yang Dibuat: - ✅ Tabel `vouchers` - untuk voucher diskon - ✅ Tabel `payment_transactions` - untuk tracking pembayaran Midtrans - ✅ Tabel `shipping_info` - untuk data pengiriman RajaOngkir - ✅ Update kolom di tabel `orders` - untuk voucher, shipping, payment - ✅ 3 voucher default: MOMOYO10, PROMO20K, WELCOME15 --- ## 2️⃣ SETUP MIDTRANS (Payment Gateway) ### Langkah 1: Daftar Akun Midtrans 1. Buka: **https://dashboard.midtrans.com/register** 2. Isi form registrasi: - Email bisnis - Password - Nama bisnis: **MOMOYO Ice Cream** - Kategori: **Food & Beverage** 3. Verifikasi email 4. Login ke dashboard ### Langkah 2: Aktifkan Sandbox Mode 1. Di dashboard, pilih **Sandbox** (pojok kiri atas) 2. Klik **Settings** → **Access Keys** 3. Catat: - **Server Key**: `SB-Mid-server-xxxxxxxxxxxxx` - **Client Key**: `SB-Mid-client-xxxxxxxxxxxxx` ### Langkah 3: Tambahkan Environment Variables Di project Vercel atau v0, tambahkan di **Vars** section: \`\`\` MIDTRANS_SERVER_KEY=SB-Mid-server-xxxxxxxxxxxxx NEXT_PUBLIC_MIDTRANS_CLIENT_KEY=SB-Mid-client-xxxxxxxxxxxxx MIDTRANS_IS_PRODUCTION=false \`\`\` ### Langkah 4: Testing Midtrans Gunakan nomor kartu test berikut: | Card Number | CVV | Expiry | Result | |------------|-----|--------|--------| | 4811 1111 1111 1114 | 123 | 01/25 | ✅ Success | | 4911 1111 1111 1113 | 123 | 01/25 | ❌ Failed | | 4411 1111 1111 1118 | 123 | 01/25 | ⏳ Pending | E-wallet test (GoPay, OVO, DANA): - Masukkan nomor HP apa saja - Akan muncul simulator pembayaran --- ## 3️⃣ SETUP RAJAONGKIR (Shipping Calculator) ### Langkah 1: Daftar Akun RajaOngkir 1. Buka: **https://rajaongkir.com/dokumentasi** 2. Klik **Daftar** untuk paket **Starter** (GRATIS) 3. Isi form: - Nama - Email - Nomor HP 4. Verifikasi email ### Langkah 2: Dapatkan API Key 1. Login ke **https://rajaongkir.com/akun/panel** 2. Copy **API Key** dari dashboard 3. Paket Starter mendukung: - ✅ JNE (Jalur Nugraha Ekakurir) - ✅ POS Indonesia - ✅ TIKI (Titipan Kilat) ### Langkah 3: Tambahkan Environment Variable Di project Vercel atau v0: \`\`\` RAJAONGKIR_API_KEY=xxxxxxxxxxxxxxxxxxxx \`\`\` ### Langkah 4: Set Kota Asal (Origin) Edit file `lib/rajaongkir.ts`: \`\`\`typescript // Cari city_id kota Anda di: https://rajaongkir.com/dokumentasi/starter export const ORIGIN_CITY_ID = "152"; // Jakarta // Contoh city_id populer: // Jakarta: 152 // Bandung: 23 // Surabaya: 444 // Yogyakarta: 419 // Semarang: 398 // Medan: 158 \`\`\` Cara cek city_id: 1. Buka: https://rajaongkir.com/dokumentasi/starter 2. Klik **"Get City List"** 3. Cari nama kota toko Anda 4. Copy `city_id` --- ## 4️⃣ TESTING LENGKAP ### Test Flow Checkout: 1. **Tambah Produk ke Cart** - Pilih beberapa ice cream - Klik "Tambah ke Keranjang" 2. **Buka Cart & Isi Data Pengiriman** - Klik icon cart - Isi nama, phone, alamat - Pilih kota tujuan 3. **Pilih Kurir & Service** - Pilih JNE / POS / TIKI - Sistem auto hitung ongkir - Pilih service (REG/YES/OKE) 4. **Apply Voucher (Opsional)** - Input kode: `MOMOYO10` (diskon 10%) - Atau: `PROMO20K` (diskon Rp 20.000) - Atau: `WELCOME15` (diskon 15%) 5. **Checkout & Bayar** - Klik "Checkout" - Pilih metode pembayaran - Popup Midtrans akan muncul - Gunakan kartu test untuk bayar 6. **Cek Status Order** - Setelah bayar, order masuk ke admin - Status otomatis update: pending → paid → confirmed --- ## 5️⃣ GO LIVE (PRODUCTION) ### Midtrans Production: 1. **Lengkapi Dokumen Bisnis** - KTP pemilik - NPWP - NIB/SIUP (jika ada) - Foto tampak depan toko 2. **Submit ke Midtrans** - Upload di dashboard - Tunggu approval: 1-3 hari kerja 3. **Dapatkan Production Keys** - Setelah approved, switch ke **Production** - Catat production Server Key & Client Key 4. **Update Environment Variables** \`\`\` MIDTRANS_SERVER_KEY=Mid-server-xxxxxxxxxxxxx NEXT_PUBLIC_MIDTRANS_CLIENT_KEY=Mid-client-xxxxxxxxxxxxx MIDTRANS_IS_PRODUCTION=true \`\`\` 5. **Setup Webhook Notification** - Di dashboard Midtrans: Settings → Configuration - Notification URL: `https://yourdomain.com/api/midtrans/notification` - Save ### RajaOngkir Production: Paket Starter sudah bisa untuk production! Jika butuh lebih banyak kurir: - Upgrade ke paket **Basic** (Rp 25.000/bulan) - Support 10+ kurir: JNE, POS, TIKI, J&T, SiCepat, dll --- ## 6️⃣ MONITORING & MAINTENANCE ### Midtrans Dashboard: - Monitor transaksi: https://dashboard.midtrans.com/transactions - Cek settlement: setiap hari H+1 - Download laporan: untuk rekonsiliasi ### RajaOngkir Dashboard: - Monitor API usage: https://rajaongkir.com/akun/panel - Paket Starter: 1000 request/bulan (cukup untuk 500 order) - Upgrade jika sudah mendekati limit ### Database Maintenance: \`\`\`sql -- Cek transaksi pending lebih dari 24 jam SELECT * FROM payment_transactions WHERE transaction_status = 'pending' AND created_at < NOW() - INTERVAL '24 hours'; -- Update status expire UPDATE payment_transactions SET transaction_status = 'expire' WHERE transaction_status = 'pending' AND created_at < NOW() - INTERVAL '24 hours'; \`\`\` --- ## 7️⃣ TROUBLESHOOTING ### ❌ Problem: Midtrans popup tidak muncul **Solusi:** - ✅ Pastikan `NEXT_PUBLIC_MIDTRANS_CLIENT_KEY` ada di environment variables - ✅ Check script Snap.js sudah ter-load di `app/layout.tsx` - ✅ Buka browser console, lihat error - ✅ Coba refresh page ### ❌ Problem: RajaOngkir error "Invalid API Key" **Solusi:** - ✅ Cek API key di dashboard RajaOngkir - ✅ Copy paste ulang ke environment variables - ✅ Pastikan tidak ada spasi di awal/akhir - ✅ Restart development server ### ❌ Problem: Ongkir tidak muncul **Solusi:** - ✅ Pastikan `ORIGIN_CITY_ID` sudah benar di `lib/rajaongkir.ts` - ✅ Cek weight produk > 0 (default 500 gram per item) - ✅ Pilih kota tujuan yang valid - ✅ Buka console, lihat error dari API ### ❌ Problem: Payment callback tidak jalan **Solusi:** - ✅ Setup webhook URL di Midtrans dashboard - ✅ URL harus HTTPS (tidak bisa localhost) - ✅ Test dengan ngrok untuk development - ✅ Pastikan API route `/api/midtrans/notification` tidak error ### ❌ Problem: Voucher tidak bisa digunakan **Solusi:** - ✅ Cek voucher sudah di-insert ke database - ✅ Jalankan script `05-create-payment-shipping-tables.sql` - ✅ Cek `is_active = true` - ✅ Cek minimal purchase sudah terpenuhi --- ## 8️⃣ FITUR ADMIN Admin dapat mengelola: ### Voucher Management: - Buat voucher baru - Edit discount value - Set expired date - Activate/deactivate voucher - Lihat usage statistics ### Order Management: - Lihat semua orders - Update order status - Lihat payment details - Lihat shipping info - Print invoice ### Payment Monitoring: - Lihat pending payments - Manual confirm payment - Refund handling - Settlement reports --- ## 📞 SUPPORT ### Midtrans: - Email: support@midtrans.com - Phone: 021-8064-1388 - Docs: https://docs.midtrans.com ### RajaOngkir: - Email: info@rajaongkir.com - Docs: https://rajaongkir.com/dokumentasi ### v0 (Development): - Support: https://vercel.com/help --- ## ✅ CHECKLIST Pastikan sudah complete semua: **Database:** - [ ] Jalankan script `05-create-payment-shipping-tables.sql` - [ ] Verify 3 voucher default sudah ada - [ ] Check semua tabel created successfully **Midtrans:** - [ ] Akun Midtrans registered - [ ] Sandbox keys didapat - [ ] Environment variables ditambahkan - [ ] Test payment berhasil **RajaOngkir:** - [ ] Akun RajaOngkir registered - [ ] API key didapat - [ ] Environment variable ditambahkan - [ ] Origin city_id sudah benar - [ ] Test cek ongkir berhasil **Testing:** - [ ] Bisa tambah produk ke cart - [ ] Bisa pilih kota & kurir - [ ] Ongkir muncul dengan benar - [ ] Voucher bisa diapply - [ ] Checkout berhasil - [ ] Midtrans popup muncul - [ ] Payment test berhasil - [ ] Order masuk ke database **Production Ready:** - [ ] Midtrans production approved - [ ] Production keys updated - [ ] Webhook URL configured - [ ] Domain sudah HTTPS - [ ] Testing di production environment --- Selamat! Sistem payment gateway dan shipping calculator Anda sudah siap digunakan! 🎉 [V0_FILE]sql:file="scripts/06-setup-midtrans-only.sql" -- ================================================ -- SETUP DATABASE UNTUK MIDTRANS PAYMENT GATEWAY -- Sistem Pembayaran MOMOYO Ice Cream -- ================================================ -- Tabel untuk transaksi Midtrans CREATE TABLE IF NOT EXISTS payment_transactions ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), order_id UUID REFERENCES orders(id) ON DELETE CASCADE, transaction_id VARCHAR(255) UNIQUE, -- dari Midtrans gross_amount DECIMAL(10, 2) NOT NULL, payment_type VARCHAR(50), -- credit_card, bank_transfer, gopay, dana, ovo, qris, dll transaction_status VARCHAR(50) DEFAULT 'pending', -- pending, settlement, success, failed, expire, cancel transaction_time TIMESTAMP, settlement_time TIMESTAMP, fraud_status VARCHAR(50), snap_token VARCHAR(500), snap_redirect_url VARCHAR(500), payment_code VARCHAR(100), -- untuk bank transfer va_number VARCHAR(100), -- untuk virtual account metadata JSON, -- data lengkap dari Midtrans created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Update tabel orders untuk support payment ALTER TABLE orders ADD COLUMN IF NOT EXISTS subtotal DECIMAL(10, 2), ADD COLUMN IF NOT EXISTS payment_method VARCHAR(50), ADD COLUMN IF NOT EXISTS payment_status VARCHAR(50) DEFAULT 'unpaid', ADD COLUMN IF NOT EXISTS shipping_address TEXT, ADD COLUMN IF NOT EXISTS recipient_name VARCHAR(255), ADD COLUMN IF NOT EXISTS recipient_phone VARCHAR(50), ADD COLUMN IF NOT EXISTS notes TEXT; -- Buat index untuk performa CREATE INDEX IF NOT EXISTS idx_payment_transactions_order_id ON payment_transactions(order_id); CREATE INDEX IF NOT EXISTS idx_payment_transactions_transaction_id ON payment_transactions(transaction_id); CREATE INDEX IF NOT EXISTS idx_payment_transactions_status ON payment_transactions(transaction_status); -- Function untuk update payment status otomatis CREATE OR REPLACE FUNCTION update_order_payment_status() RETURNS TRIGGER AS $$ BEGIN UPDATE orders SET payment_status = CASE WHEN NEW.transaction_status IN ('settlement', 'capture', 'success') THEN 'paid' WHEN NEW.transaction_status = 'pending' THEN 'pending' WHEN NEW.transaction_status IN ('deny', 'cancel', 'expire', 'failed') THEN 'failed' ELSE 'unpaid' END, status = CASE WHEN NEW.transaction_status IN ('settlement', 'capture', 'success') THEN 'confirmed' WHEN NEW.transaction_status = 'pending' THEN 'pending' WHEN NEW.transaction_status IN ('deny', 'cancel', 'expire') THEN 'cancelled' ELSE status END, updated_at = CURRENT_TIMESTAMP WHERE id = NEW.order_id; RETURN NEW; END; $$ LANGUAGE plpgsql; -- Trigger untuk auto update order status DROP TRIGGER IF EXISTS trigger_update_order_payment_status ON payment_transactions; CREATE TRIGGER trigger_update_order_payment_status AFTER INSERT OR UPDATE ON payment_transactions FOR EACH ROW EXECUTE FUNCTION update_order_payment_status(); -- Fungsi untuk get order dengan payment info CREATE OR REPLACE FUNCTION get_order_with_payment(order_uuid UUID) RETURNS TABLE ( order_id UUID, order_status VARCHAR, order_total DECIMAL, payment_status VARCHAR, transaction_status VARCHAR, payment_type VARCHAR, va_number VARCHAR, payment_code VARCHAR, created_at TIMESTAMP ) AS $$ BEGIN RETURN QUERY SELECT o.id, o.status, o.total, o.payment_status, pt.transaction_status, pt.payment_type, pt.va_number, pt.payment_code, o.created_at FROM orders o LEFT JOIN payment_transactions pt ON o.id = pt.order_id WHERE o.id = order_uuid; END; $$ LANGUAGE plpgsql; COMMENT ON TABLE payment_transactions IS 'Tabel untuk menyimpan transaksi pembayaran dari Midtrans'; COMMENT ON COLUMN payment_transactions.transaction_id IS 'Transaction ID dari Midtrans (unique)'; COMMENT ON COLUMN payment_transactions.payment_type IS 'Jenis pembayaran: gopay, dana, ovo, qris, bank_transfer, credit_card'; COMMENT ON COLUMN payment_transactions.va_number IS 'Virtual Account Number untuk bank transfer'; COMMENT ON COLUMN payment_transactions.payment_code IS 'Kode pembayaran untuk convenience store'; [V0_FILE]markdown:file="PANDUAN_MIDTRANS.md" # 📱 PANDUAN LENGKAP INTEGRASI MIDTRANS ### Sistem Pembayaran MOMOYO Ice Cream --- ## 🎯 OVERVIEW Midtrans adalah payment gateway #1 di Indonesia yang mendukung berbagai metode pembayaran: - 💳 Kartu Kredit/Debit (Visa, Mastercard, JCB) - 🏦 Transfer Bank (BCA, Mandiri, BNI, BRI, Permata) - 💰 E-Wallet (GoPay, OVO, DANA, ShopeePay, LinkAja) - 📱 QRIS (Scan QR semua bank & e-wallet) - 🏪 Convenience Store (Alfamart, Indomaret) --- ## 📋 LANGKAH 1: REGISTRASI AKUN MIDTRANS ### A. Buat Akun Sandbox (Testing) 1. **Buka website Midtrans** - Kunjungi: https://dashboard.sandbox.midtrans.com/register 2. **Isi form registrasi** - Email bisnis Anda - Password yang kuat - Nama bisnis: "MOMOYO Ice Cream" - Nomor telepon 3. **Verifikasi email** - Cek inbox email - Klik link verifikasi 4. **Login ke Dashboard** - https://dashboard.sandbox.midtrans.com ### B. Dapatkan API Keys (Sandbox) 1. **Masuk ke Settings** - Klik menu "Settings" di sidebar - Pilih "Access Keys" 2. **Copy API Keys** \`\`\` Server Key: SB-Mid-server-xxxxxxxxxxxxxxx Client Key: SB-Mid-client-xxxxxxxxxxxxxxx \`\`\` 3. **PENTING**: Simpan keys ini dengan aman! --- ## 📋 LANGKAH 2: SETUP ENVIRONMENT VARIABLES ### A. Tambahkan di v0 (Vars Section) 1. **Buka sidebar v0** - Klik "Vars" di sidebar kiri 2. **Tambahkan environment variables**: \`\`\` MIDTRANS_SERVER_KEY=SB-Mid-server-xxxxxxxxxxxxxxx NEXT_PUBLIC_MIDTRANS_CLIENT_KEY=SB-Mid-client-xxxxxxxxxxxxxxx MIDTRANS_IS_PRODUCTION=false \`\`\` 3. **Klik Save** ### B. Untuk Development Lokal Buat file `.env.local` di root project: \`\`\`env MIDTRANS_SERVER_KEY=SB-Mid-server-xxxxxxxxxxxxxxx NEXT_PUBLIC_MIDTRANS_CLIENT_KEY=SB-Mid-client-xxxxxxxxxxxxxxx MIDTRANS_IS_PRODUCTION=false \`\`\` --- ## 📋 LANGKAH 3: SETUP DATABASE ### A. Jalankan SQL Script 1. **Buka Scripts di v0** - File: `scripts/06-setup-midtrans-only.sql` 2. **Klik "Run Script"** - Script akan membuat tabel `payment_transactions` - Update tabel `orders` dengan field payment - Setup triggers otomatis untuk update status 3. **Verifikasi** \`\`\`sql SELECT * FROM payment_transactions LIMIT 1; \`\`\` --- ## 📋 LANGKAH 4: TESTING PEMBAYARAN ### A. Flow Customer 1. **Tambahkan produk ke keranjang** - Buka halaman produk - Klik "Tambah ke Keranjang" 2. **Buka keranjang** - Klik icon keranjang di navbar - Review items 3. **Checkout** - Klik tombol "Checkout" - Pilih metode pembayaran 4. **Bayar dengan Midtrans** - Popup Midtrans akan muncul - Pilih metode pembayaran (GoPay, QRIS, Bank Transfer, dll) ### B. Testing dengan Sandbox #### 1. Test Credit Card Gunakan nomor kartu test: \`\`\` Card Number: 4811 1111 1111 1114 CVV: 123 Exp Date: 01/25 OTP/3DS: 112233 \`\`\` #### 2. Test GoPay - Pilih GoPay - Akan muncul QR Code - Di sandbox, pembayaran langsung berhasil #### 3. Test Bank Transfer (BCA Virtual Account) - Pilih BCA Virtual Account - Copy nomor VA yang diberikan - Gunakan simulator di Midtrans Dashboard: - Settings → Payment Simulator - Paste VA number - Klik "Pay" #### 4. Test QRIS - Pilih QRIS - QR Code akan muncul - Di sandbox, scan langsung berhasil --- ## 📋 LANGKAH 5: WEBHOOK NOTIFICATION ### A. Setup Notification URL 1. **Buat API endpoint untuk webhook** - File sudah ada: `app/api/midtrans/notification/route.ts` 2. **Dapatkan URL webhook Anda** \`\`\` https://your-project.vercel.app/api/midtrans/notification \`\`\` 3. **Set di Midtrans Dashboard** - Settings → Configuration - Payment Notification URL: paste URL di atas - Klik Save ### B. Test Webhook 1. **Lakukan test transaksi** 2. **Cek log di Midtrans Dashboard** - Home → Transactions - Klik transaction - Lihat "Notification History" --- ## 📋 LANGKAH 6: GO LIVE (PRODUCTION) ### A. Registrasi Production Account 1. **Daftar akun production** - https://dashboard.midtrans.com/register 2. **Lengkapi data bisnis** - Informasi perusahaan - Dokumen KTP/NPWP - Rekening bank bisnis 3. **Submit untuk review** - Tim Midtrans akan review (1-3 hari kerja) ### B. Aktivasi dan Setup 1. **Setelah disetujui** - Login ke: https://dashboard.midtrans.com 2. **Dapatkan Production Keys** - Settings → Access Keys - Copy Server Key dan Client Key 3. **Update Environment Variables** \`\`\` MIDTRANS_SERVER_KEY=Mid-server-xxxxxxxxxxxxxxx (tanpa SB-) NEXT_PUBLIC_MIDTRANS_CLIENT_KEY=Mid-client-xxxxxxxxxxxxxxx MIDTRANS_IS_PRODUCTION=true \`\`\` 4. **Update Notification URL** - Settings → Configuration - Set production webhook URL --- ## 🎨 CARA KERJA SISTEM ### Flow Pembayaran \`\`\` 1. Customer → Checkout → Pilih Payment Method ↓ 2. Backend → Create Transaction → Midtrans API ↓ 3. Midtrans → Generate Snap Token → Return to Backend ↓ 4. Backend → Return Snap Token → Frontend ↓ 5. Frontend → Open Snap Popup → Customer Bayar ↓ 6. Midtrans → Send Notification → Webhook API ↓ 7. Webhook API → Update Database → Order Status Changed ↓ 8. Customer → Redirect Success Page → Tracking \`\`\` ### Database Flow \`\`\`sql -- Saat create order INSERT INTO orders (user_id, total, status, payment_status) VALUES ('user-uuid', 50000, 'pending', 'unpaid'); -- Saat create payment transaction INSERT INTO payment_transactions ( order_id, transaction_id, gross_amount, payment_type, snap_token ) VALUES (...); -- Saat webhook dari Midtrans UPDATE payment_transactions SET transaction_status = 'settlement' WHERE transaction_id = 'xxx'; -- Trigger otomatis update orders -- status: pending → confirmed -- payment_status: unpaid → paid \`\`\` --- ## 🔍 MONITORING & DEBUGGING ### A. Cek Status Transaksi **Di Midtrans Dashboard:** 1. Home → Transactions 2. Filter by status: pending, settlement, failed 3. Klik transaction untuk detail **Di Database:** \`\`\`sql -- Lihat semua transaksi SELECT pt.transaction_id, pt.payment_type, pt.transaction_status, pt.gross_amount, o.status as order_status FROM payment_transactions pt JOIN orders o ON pt.order_id = o.id ORDER BY pt.created_at DESC; -- Lihat transaksi pending SELECT * FROM payment_transactions WHERE transaction_status = 'pending'; \`\`\` ### B. Troubleshooting **Problem: Snap popup tidak muncul** - Cek apakah Snap.js sudah loaded di layout.tsx - Cek console browser untuk error - Pastikan NEXT_PUBLIC_MIDTRANS_CLIENT_KEY sudah benar **Problem: Payment notification tidak masuk** - Cek notification URL di Midtrans Dashboard - Test dengan ngrok untuk local development - Cek logs di `/api/midtrans/notification` **Problem: Order status tidak update** - Cek apakah trigger database sudah berjalan - Cek webhook notification history di Midtrans - Pastikan transaction_id match --- ## 💰 BIAYA MIDTRANS ### Sandbox (Testing) - **GRATIS** - Unlimited transaksi ### Production - **MDR (Merchant Discount Rate)**: - Kartu Kredit: 2.9% per transaksi - Bank Transfer: Rp 4,000 per transaksi - E-Wallet (GoPay, OVO): 2% per transaksi - QRIS: 0.7% per transaksi - **Settlement Time**: - Kartu Kredit: T+4 hari kerja - Bank Transfer: T+2 hari kerja - E-Wallet: T+1 hari kerja --- ## ✅ CHECKLIST SEBELUM GO LIVE - [ ] Akun production Midtrans sudah disetujui - [ ] Production API keys sudah di-set di environment variables - [ ] MIDTRANS_IS_PRODUCTION=true - [ ] Webhook notification URL sudah di-set - [ ] Test semua payment method di production - [ ] Database production sudah di-setup - [ ] Monitoring system sudah aktif - [ ] Customer service ready untuk handle payment issues --- ## 🆘 SUPPORT **Midtrans Support:** - Email: support@midtrans.com - Phone: +62 21 2976 8888 - Live Chat: Dashboard → Help **Dokumentasi:** - https://docs.midtrans.com - https://api-docs.midtrans.com --- ## 📝 CATATAN PENTING 1. **JANGAN** hardcode API keys di code 2. **SELALU** gunakan sandbox untuk testing 3. **PASTIKAN** webhook notification URL accessible dari internet 4. **BACKUP** database sebelum update production 5. **MONITOR** transaksi secara regular 6. **HANDLE** semua error dengan graceful message ke user --- **Selamat! Sistem pembayaran Midtrans siap digunakan! 🎉** [V0_FILE]typescript:file="app/api/midtrans/notification/route.ts" import { NextRequest, NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" import crypto from "crypto" // Midtrans notification endpoint export async function POST(request: NextRequest) { try { const notification = await request.json() console.log("[v0] Midtrans notification received:", notification) // Verify signature const serverKey = process.env.MIDTRANS_SERVER_KEY if (!serverKey) { throw new Error("MIDTRANS_SERVER_KEY not configured") } const { order_id, status_code, gross_amount, signature_key } = notification // Create signature hash const signatureHash = crypto .createHash("sha512") .update(`${order_id}${status_code}${gross_amount}${serverKey}`) .digest("hex") // Verify signature if (signatureHash !== signature_key) { console.error("[v0] Invalid signature") return NextResponse.json({ error: "Invalid signature" }, { status: 401 }) } // Create Supabase client const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, { cookies: { getAll() { return [] }, setAll() {}, }, } ) // Get order by transaction_id const { data: payment, error: paymentError } = await supabase .from("payment_transactions") .select("order_id") .eq("transaction_id", notification.transaction_id) .single() if (paymentError || !payment) { console.error("[v0] Payment transaction not found:", notification.transaction_id) return NextResponse.json({ error: "Payment not found" }, { status: 404 }) } // Update payment transaction const { error: updateError } = await supabase .from("payment_transactions") .update({ transaction_status: notification.transaction_status, payment_type: notification.payment_type, transaction_time: notification.transaction_time, settlement_time: notification.settlement_time, fraud_status: notification.fraud_status, va_number: notification.va_numbers?.[0]?.va_number || null, payment_code: notification.payment_code || null, metadata: notification, updated_at: new Date().toISOString(), }) .eq("transaction_id", notification.transaction_id) if (updateError) { console.error("[v0] Error updating payment:", updateError) return NextResponse.json({ error: "Failed to update payment" }, { status: 500 }) } console.log("[v0] Payment updated successfully") // Trigger will auto-update order status return NextResponse.json({ success: true }) } catch (error) { console.error("[v0] Notification error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]markdown:file="PANDUAN_SANDBOX_MIDTRANS.md" # Panduan Lengkap Testing Midtrans Sandbox ## Step 1: Dapatkan API Keys dari Midtrans Sandbox 1. **Daftar/Login ke Midtrans:** - Kunjungi: https://dashboard.sandbox.midtrans.com/ - Daftar akun baru atau login jika sudah punya 2. **Dapatkan API Keys:** - Setelah login, pergi ke **Settings** → **Access Keys** - Copy kedua keys ini: - **Server Key** (contoh: `SB-Mid-server-xxxxxxx`) - **Client Key** (contoh: `SB-Mid-client-xxxxxxx`) ## Step 2: Setup Environment Variables di v0 Tambahkan environment variables berikut di **Vars section** pada sidebar v0: \`\`\` MIDTRANS_SERVER_KEY=SB-Mid-server-xxxxxxx NEXT_PUBLIC_MIDTRANS_CLIENT_KEY=SB-Mid-client-xxxxxxx MIDTRANS_IS_PRODUCTION=false \`\`\` **PENTING:** - Gunakan `MIDTRANS_IS_PRODUCTION=false` untuk sandbox - Pastikan tidak ada spasi sebelum atau sesudah tanda `=` ## Step 3: Setup Database untuk Payment Jalankan SQL script berikut untuk membuat tabel payment: \`\`\`sql -- Tabel untuk menyimpan transaksi pembayaran CREATE TABLE IF NOT EXISTS payment_transactions ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), order_id TEXT UNIQUE NOT NULL, transaction_id TEXT, gross_amount INTEGER NOT NULL, payment_type TEXT, transaction_status TEXT DEFAULT 'pending', fraud_status TEXT, transaction_time TIMESTAMPTZ, settlement_time TIMESTAMPTZ, midtrans_response JSONB, created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- Index untuk performa CREATE INDEX idx_payment_order_id ON payment_transactions(order_id); CREATE INDEX idx_payment_status ON payment_transactions(transaction_status); \`\`\` Jalankan script ini di v0 atau execute manual di Supabase. ## Step 4: Testing Payment Flow ### A. Simulasi Pembayaran 1. **Tambah produk ke keranjang** di website MOMOYO 2. **Klik Checkout** dan isi data: - Nama: Test User - Email: test@example.com - Phone: 081234567890 - Alamat: Jl. Test No. 123 3. **Klik Bayar Sekarang** 4. **Snap Payment** popup akan muncul dari Midtrans ### B. Testing dengan Kartu Kredit Sandbox Gunakan data kartu test berikut di Midtrans Snap: **Kartu Kredit - Success:** - Card Number: `4811 1111 1111 1114` - Expiry: `01/25` (bulan/tahun di masa depan) - CVV: `123` - OTP: `112233` **Kartu Kredit - Failed:** - Card Number: `4911 1111 1111 1113` - Expiry: `01/25` - CVV: `123` **GoPay:** - Pilih GoPay - Di halaman simulasi, klik **Success** **Transfer Bank:** - Pilih bank (BCA/Mandiri/BNI/BRI) - Copy nomor VA yang diberikan - Klik link simulasi pembayaran di dashboard sandbox ### C. Status Transaksi Setelah pembayaran: - **Pending:** Menunggu pembayaran (Transfer Bank/GoPay) - **Success:** Pembayaran berhasil - **Failed:** Pembayaran gagal - **Expired:** VA/payment link expired (24 jam) ## Step 5: Monitoring Transaksi ### Di Dashboard Midtrans Sandbox: 1. Login ke https://dashboard.sandbox.midtrans.com/ 2. Klik **Transactions** 3. Lihat semua transaksi test Anda 4. Bisa manual update status untuk testing ### Di Database: Query untuk cek transaksi: \`\`\`sql SELECT order_id, gross_amount, transaction_status, payment_type, created_at FROM payment_transactions ORDER BY created_at DESC; \`\`\` ## Step 6: Testing Webhook Notification Midtrans akan mengirim webhook notification ke: \`\`\` https://your-domain.vercel.app/api/midtrans/notification \`\`\` **Testing Webhook:** 1. Di Dashboard Midtrans → Settings → Configuration 2. Set **Payment Notification URL** ke: `https://your-domain.vercel.app/api/midtrans/notification` 3. Setiap perubahan status akan trigger webhook 4. Webhook akan update status di database otomatis **Manual Test Webhook:** \`\`\`bash curl -X POST https://your-domain.vercel.app/api/midtrans/notification \ -H "Content-Type: application/json" \ -d '{ "order_id": "ORDER-123", "transaction_status": "settlement", "payment_type": "credit_card" }' \`\`\` ## Step 7: Troubleshooting ### Error: "Midtrans configuration is missing" - Cek environment variables sudah diset dengan benar - Pastikan key dimulai dengan `SB-Mid-` untuk sandbox ### Error: "401 Unauthorized" - Server Key salah atau expired - Copy ulang dari dashboard Midtrans ### Snap popup tidak muncul - Cek browser console untuk error - Pastikan Snap.js script loaded (lihat Network tab) - Cek NEXT_PUBLIC_MIDTRANS_CLIENT_KEY sudah benar ### Payment berhasil tapi status tidak update - Cek webhook URL sudah diset di Midtrans dashboard - Cek log API `/api/midtrans/notification` untuk error - Manual update status di database untuk testing ## Step 8: Go Live ke Production Ketika sudah siap production: 1. **Upgrade ke Production Account:** - Login ke https://dashboard.midtrans.com/ (production) - Complete business verification - Activate production mode 2. **Update Environment Variables:** \`\`\` MIDTRANS_SERVER_KEY=Mid-server-xxxxxxx (production key) NEXT_PUBLIC_MIDTRANS_CLIENT_KEY=Mid-client-xxxxxxx (production key) MIDTRANS_IS_PRODUCTION=true \`\`\` 3. **Update Webhook URL** di production dashboard 4. **Testing Production** dengan transaksi real (minimal Rp 10,000) ## Checklist Testing Sandbox - [ ] Environment variables sudah diset - [ ] Database tables sudah dibuat - [ ] Bisa checkout dan muncul Snap popup - [ ] Test payment dengan kartu kredit success - [ ] Test payment dengan kartu kredit failed - [ ] Test payment dengan GoPay - [ ] Test payment dengan Transfer Bank (BCA/Mandiri/BNI) - [ ] Status transaksi update di database - [ ] Webhook notification berfungsi - [ ] Order status update setelah payment success ## Support Jika ada masalah: - Dokumentasi: https://docs.midtrans.com/ - Support: support@midtrans.com - Slack Community: Midtrans Developer Community --- **Testing Tips:** 1. Gunakan email berbeda untuk setiap test order 2. Catat order_id untuk tracking 3. Monitor dashboard Midtrans dan database secara bersamaan 4. Test semua payment methods yang akan digunakan 5. Simulate failed payments untuk testing error handling [V0_FILE]markdown:file="QUICK_START_MIDTRANS.md" # Quick Start - Midtrans Sandbox ## 3 Langkah Cepat Mulai Testing ### 1. Setup API Keys (5 menit) Buka: https://dashboard.sandbox.midtrans.com/ Dapatkan: - Server Key: `SB-Mid-server-xxxxxxx` - Client Key: `SB-Mid-client-xxxxxxx` Tambahkan ke v0 Vars: \`\`\` MIDTRANS_SERVER_KEY=SB-Mid-server-xxxxxxx NEXT_PUBLIC_MIDTRANS_CLIENT_KEY=SB-Mid-client-xxxxxxx MIDTRANS_IS_PRODUCTION=false \`\`\` ### 2. Setup Database (2 menit) Jalankan file: `scripts/06-setup-midtrans-only.sql` di v0 ### 3. Test Payment (2 menit) 1. Buka website MOMOYO 2. Tambah produk → Checkout 3. Isi data customer 4. Klik "Bayar Sekarang" 5. Di Snap popup, gunakan kartu test: - Card: `4811 1111 1111 1114` - Expiry: `01/25` - CVV: `123` - OTP: `112233` **SELESAI!** Payment berhasil dan order status akan update otomatis. ## Payment Methods yang Tersedia 1. **Kartu Kredit/Debit** - Instant settlement 2. **GoPay** - E-wallet, instant 3. **Transfer Bank** - BCA, Mandiri, BNI, BRI (pending → settlement) 4. **QRIS** - Scan & pay ## Kartu Test Sandbox **Success:** - `4811 1111 1111 1114` - Visa - `5211 1111 1111 1117` - Mastercard **Failed:** - `4911 1111 1111 1113` - Will fail **OTP untuk 3DS:** `112233` ## Monitor Transaksi **Dashboard Midtrans:** https://dashboard.sandbox.midtrans.com/transactions **Database Query:** \`\`\`sql SELECT order_id, transaction_status, gross_amount, payment_type FROM payment_transactions ORDER BY created_at DESC; \`\`\` ## FAQ **Q: Snap popup tidak muncul?** A: Cek environment variables sudah benar, terutama CLIENT_KEY **Q: Payment success tapi status tidak update?** A: Setup webhook URL di Midtrans dashboard settings **Q: Error 401 Unauthorized?** A: Server Key salah, copy ulang dari dashboard --- Dokumentasi lengkap: Lihat `PANDUAN_SANDBOX_MIDTRANS.md` [V0_FILE]typescript:file="lib/midtrans.ts" isQuickEdit="true" export interface MidtransConfig { serverKey: string clientKey: string isProduction: boolean } export interface MidtransTransaction { transaction_details: { order_id: string gross_amount: number } customer_details: { first_name: string email: string phone: string } item_details: Array<{ id: string price: number quantity: number name: string }> } export interface MidtransSnapResponse { token: string redirect_url: string } export class MidtransService { private serverKey: string private isProduction: boolean constructor(config: MidtransConfig) { this.serverKey = config.serverKey this.isProduction = config.isProduction } private getBaseUrl(): string { return this.isProduction ? "https://app.midtrans.com/snap/v1/transactions" : "https://app.sandbox.midtrans.com/snap/v1/transactions" } private getAuthHeader(): string { const authString = `${this.serverKey}:` if (typeof Buffer !== 'undefined') { return `Basic ${Buffer.from(authString).toString("base64")}` } // Fallback for non-Node.js environments (shouldn't happen in API route) return `Basic ${btoa(authString)}` } async createTransaction(transaction: MidtransTransaction): Promise { try { console.log("[v0] Calling Midtrans Snap API:", this.getBaseUrl()) const response = await fetch(this.getBaseUrl(), { method: "POST", headers: { "Content-Type": "application/json", Authorization: this.getAuthHeader(), Accept: "application/json", }, body: JSON.stringify(transaction), }) console.log("[v0] Midtrans response status:", response.status) if (!response.ok) { const errorText = await response.text() console.error("[v0] Midtrans error response:", errorText) throw new Error(`Midtrans API Error (${response.status}): ${errorText}`) } const data = await response.json() console.log("[v0] Midtrans success, token received:", data.token ? "yes" : "no") return data } catch (error) { console.error("[v0] Midtrans Create transaction error:", error) throw error } } } [V0_FILE]typescript:file="lib/unicode-polyfill.ts" export function unicodeBtoa(str: string): string { try { // Use encodeURIComponent to handle Unicode, then btoa return btoa(unescape(encodeURIComponent(str))) } catch (e) { console.error("Error encoding string:", e) return btoa(str) } } export function unicodeAtob(base64: string): string { try { // Reverse the process for decoding return decodeURIComponent(escape(atob(base64))) } catch (e) { console.error("Error decoding string:", e) return atob(base64) } } // Polyfill btoa globally if needed export function setupBtoaPolyfill() { if (typeof window !== 'undefined') { const originalBtoa = window.btoa window.btoa = function(str: string) { try { // Try original btoa first return originalBtoa(str) } catch (e) { // If it fails with Unicode, use our polyfill return unicodeBtoa(str) } } } } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { Poppins } from 'next/font/google' import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" const poppins = Poppins({ subsets: ["latin"], weight: ["400", "500", "600", "700", "800", "900"], variable: "--font-poppins", display: "swap", }) export const metadata: Metadata = { title: "MOMOYO Ice Cream - Petualangan Rasa yang Menyenangkan!", description: "Nikmati petualangan rasa es krim yang menyenangkan dengan berbagai varian unik dari MOMOYO", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {/* Polyfill btoa/atob untuk handle Unicode - MUST run sebelum Snap.js */} {/* Load Snap.js synchronously (tidak async/defer) */} Loading...

}>{children} ) } [V0_FILE]typescript:file="app/api/orders/create/route.ts" isQuickEdit="true" import { type NextRequest, NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" interface OrderItem { id: string name: string price: number quantity: number } interface CreateOrderRequest { buyerEmail: string items: OrderItem[] subtotal: number discount: number total: number paymentMethod?: string } interface CreateOrderResponse { success: boolean message: string orderId?: string } export async function POST(request: NextRequest): Promise> { try { const body: CreateOrderRequest = await request.json() const { buyerEmail, items, subtotal, discount, total, paymentMethod } = body console.log("[v0] Received order request:", { buyerEmail, items, subtotal, discount, total, paymentMethod, }) // Validate input if (!buyerEmail || !items || items.length === 0) { return NextResponse.json({ success: false, message: "Data pesanan tidak valid" }, { status: 400 }) } // Create Supabase client const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // Handle cookie setting errors } }, }, }, ) const { data: orderData, error: orderError } = await supabase .from("orders") .insert([ { buyer_email: buyerEmail, total_price: total, status: "pending", }, ]) .select() if (orderError || !orderData) { console.error("[v0] Order creation error:", orderError) return NextResponse.json({ success: false, message: "Gagal membuat pesanan" }, { status: 500 }) } const orderId = orderData[0].id console.log("[v0] Order created with ID:", orderId) // Create order items const orderItems = items.map((item) => ({ order_id: orderId, menu_item_id: item.id, quantity: item.quantity, price: item.price, })) console.log("[v0] Creating order items:", orderItems) const { error: itemsError } = await supabase.from("order_items").insert(orderItems) if (itemsError) { console.error("[v0] Order items creation error:", itemsError) return NextResponse.json({ success: false, message: "Gagal menambah item pesanan" }, { status: 500 }) } console.log("[v0] Order created successfully:", orderId) console.log("[v0] Order items created:", orderItems.length, "items") return NextResponse.json( { success: true, message: "Pesanan berhasil dibuat", orderId, }, { status: 201 }, ) } catch (error) { console.error("[v0] Order creation error:", error) return NextResponse.json({ success: false, message: "Terjadi kesalahan server" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="lib/cart-store.ts" isQuickEdit="true" "use client" import { create } from "zustand" import { persist } from "zustand/middleware" import type { Product } from "./products" export interface CartItem extends Product { quantity: number } export interface Order { id: string buyerEmail: string items: CartItem[] subtotal: number discount: number total: number status: "pending" | "processing" | "ready" | "completed" createdAt: string voucherCode?: string } interface CartStore { items: CartItem[] isOpen: boolean addItem: (product: Product) => void removeItem: (productId: string) => void updateQuantity: (productId: string, quantity: number) => void clearCart: () => void openCart: () => void closeCart: () => void getTotalItems: () => number getSubtotal: () => number createOrder: (buyerEmail: string, voucherDiscount?: number, voucherCode?: string) => Promise getOrders: () => Order[] getOrdersByEmail: (email: string) => Order[] } export const useCartStore = create()( persist( (set, get) => ({ items: [], isOpen: false, addItem: (product) => { const items = get().items const existingItem = items.find((item) => item.id === product.id) if (existingItem) { set({ items: items.map((item) => (item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item)), }) } else { set({ items: [...items, { ...product, quantity: 1 }] }) } }, removeItem: (productId) => { set({ items: get().items.filter((item) => item.id !== productId) }) }, updateQuantity: (productId, quantity) => { if (quantity <= 0) { get().removeItem(productId) return } set({ items: get().items.map((item) => (item.id === productId ? { ...item, quantity } : item)), }) }, clearCart: () => { set({ items: [] }) }, openCart: () => { set({ isOpen: true }) }, closeCart: () => { set({ isOpen: false }) }, getTotalItems: () => { return get().items.reduce((total, item) => total + item.quantity, 0) }, getSubtotal: () => { return get().items.reduce((total, item) => { const price = item.isPromo && item.promoPrice ? item.promoPrice : item.price return total + price * item.quantity }, 0) }, createOrder: async (buyerEmail: string, voucherDiscount = 0, voucherCode?: string) => { const items = get().items if (items.length === 0) return null const subtotal = get().getSubtotal() const discount = voucherDiscount const total = subtotal - discount try { // Call API to create order in database const response = await fetch("/api/orders/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ buyerEmail, items: items.map((item) => ({ id: item.id, name: item.name, price: item.price, quantity: item.quantity, })), subtotal, discount, total, }), }) if (!response.ok) { throw new Error("Failed to create order") } const data = await response.json() if (data.success && data.orderId) { console.log("[v0] Order created in database:", data.orderId) // Return local order object for immediate UI feedback const order: Order = { id: data.orderId, buyerEmail, items, subtotal, discount, total, status: "pending", createdAt: new Date().toISOString(), voucherCode, } // Also save to localStorage as backup const existingOrders = JSON.parse(localStorage.getItem("momoyo-orders") || "[]") as Order[] const updatedOrders = [order, ...existingOrders] localStorage.setItem("momoyo-orders", JSON.stringify(updatedOrders)) return order } else { throw new Error(data.message || "Failed to create order") } } catch (error) { console.error("[v0] Order creation error:", error) return null } }, getOrders: () => { const orders = JSON.parse(localStorage.getItem("momoyo-orders") || "[]") as Order[] return orders }, getOrdersByEmail: (email: string) => { const orders = get().getOrders() return orders.filter((order) => order.buyerEmail === email) }, }), { name: "momoyo-cart", }, ), ) [V0_FILE]typescriptreact:file="components/featured-products.tsx" "use client" import { ProductCard } from "@/components/product-card" import { Button } from "@/components/ui/button" import Link from "next/link" import { useEffect, useState } from "react" import type { Product } from "@/lib/products" export function FeaturedProducts() { const [products, setProducts] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { const fetchMenu = async () => { try { const response = await fetch("/api/menu", { cache: "no-store" }) if (!response.ok) { throw new Error(`API error: ${response.status}`) } const data = await response.json() console.log("[v0] Featured products fetched:", data) if (data.success && Array.isArray(data.data)) { setProducts(data.data.slice(0, 4)) } else { setError("Failed to load products") } } catch (err) { console.error("[v0] Failed to fetch menu:", err) setError("Could not load products") } finally { setLoading(false) } } fetchMenu() }, []) return (

Produk Favorit Kami

Pilihan terbaik yang paling disukai pelanggan

{loading ? (

Memuat produk...

) : error ? (

{error}

) : products.length > 0 ? ( products.map((product) => ( )) ) : (

Belum ada produk

)}

) } [V0_FILE]typescriptreact:file="app/produk/page.tsx" "use client" import { useEffect, useState } from "react" import { Navbar } from "@/components/navbar" import { ProductCard } from "@/components/product-card" import type { Product } from "@/lib/products" export default function ProdukPage() { const [products, setProducts] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { const fetchMenu = async () => { try { const response = await fetch("/api/menu", { cache: "no-store" }) if (!response.ok) { throw new Error(`API error: ${response.status}`) } const data = await response.json() console.log("[v0] All products fetched:", data) if (data.success && Array.isArray(data.data)) { setProducts(data.data) } else { setError("Failed to load products") } } catch (err) { console.error("[v0] Failed to fetch menu:", err) setError("Could not load products") } finally { setLoading(false) } } fetchMenu() }, []) return (

{/* Header */}

Semua Produk

Jelajahi koleksi lengkap es krim MOMOYO dengan berbagai varian rasa yang unik

{/* Products Grid */}

{loading ? (

Memuat produk...

) : error ? (

{error}

) : (

{products.length > 0 ? ( products.map((product) => ( )) ) : (

Belum ada produk

)}

{/* Footer */}

) } [V0_FILE]png:file="public/colorful-ice-cream-cones.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/colorful-ice-cream-cones-jgEKZ23CxwS4dfzTSQQTxIn2tn8cfT.png" [V0_FILE]typescript:file="components/ui/sidebar.tsx" isQuickEdit="true" 'use client' import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, VariantProps } from 'class-variance-authority' import { PanelLeftIcon } from 'lucide-react' import { useIsMobile } from '@/hooks/use-mobile' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Separator } from '@/components/ui/separator' import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from '@/components/ui/sheet' import { Skeleton } from '@/components/ui/skeleton' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip' const SIDEBAR_COOKIE_NAME = 'sidebar_state' const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 const SIDEBAR_WIDTH = '16rem' const SIDEBAR_WIDTH_MOBILE = '18rem' const SIDEBAR_WIDTH_ICON = '3rem' const SIDEBAR_KEYBOARD_SHORTCUT = 'b' type SidebarContextProps = { state: 'expanded' | 'collapsed' open: boolean setOpen: (open: boolean) => void openMobile: boolean setOpenMobile: (open: boolean) => void isMobile: boolean toggleSidebar: () => void } const SidebarContext = React.createContext(null) function useSidebar() { const context = React.useContext(SidebarContext) if (!context) { throw new Error('useSidebar must be used within a SidebarProvider.') } return context } function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<'div'> & { defaultOpen?: boolean open?: boolean onOpenChange?: (open: boolean) => void }) { const isMobile = useIsMobile() const [openMobile, setOpenMobile] = React.useState(false) // This is the internal state of the sidebar. // We use openProp and setOpenProp for control from outside the component. const [_open, _setOpen] = React.useState(defaultOpen) const open = openProp ?? _open const setOpen = React.useCallback( (value: boolean | ((value: boolean) => boolean)) => { const openState = typeof value === 'function' ? value(open) : value if (setOpenProp) { setOpenProp(openState) } else { _setOpen(openState) } // This sets the cookie to keep the sidebar state. document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` }, [setOpenProp, open], ) // Helper to toggle the sidebar. const toggleSidebar = React.useCallback(() => { return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open) }, [isMobile, setOpen, setOpenMobile]) // Adds a keyboard shortcut to toggle the sidebar. React.useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if ( event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey) ) { event.preventDefault() toggleSidebar() } } window.addEventListener('keydown', handleKeyDown) return () => window.removeEventListener('keydown', handleKeyDown) }, [toggleSidebar]) // We add a state so that we can do data-state="expanded" or "collapsed". // This makes it easier to style the sidebar with Tailwind classes. const state = open ? 'expanded' : 'collapsed' const contextValue = React.useMemo( () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar], ) return (

{children}

) } function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }: React.ComponentProps<'div'> & { side?: 'left' | 'right' variant?: 'sidebar' | 'floating' | 'inset' collapsible?: 'offcanvas' | 'icon' | 'none' }) { const { isMobile, state, openMobile, setOpenMobile } = useSidebar() if (collapsible === 'none') { return (

{children}

) } if (isMobile) { return ( Sidebar Displays the mobile sidebar.

{children}

) } return (

{/* This is what handles the sidebar gap on desktop */}

) } function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps) { const { toggleSidebar } = useSidebar() return ( ) } function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) { const { toggleSidebar } = useSidebar() return ( {buyerEmail ? ( ) : ( )}

{isOpen && (

{navLinks.map((link) => ( setIsOpen(false)} > {link.label} ))} {buyerEmail ? ( setIsOpen(false)} > Akun ) : ( setIsOpen(false)} > Login )} setIsOpen(false)} > Track Order

)}

) } [V0_FILE]typescript:file="app/api/menu/create/route.ts" import { type NextRequest, NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function POST(request: NextRequest) { try { const body = await request.json() const { name, price, description, category, image_url } = body const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch {} }, }, }, ) const { data, error } = await supabase .from("menu_items") .insert([{ name, price, description, category, image_url, is_available: true }]) .select() if (error) { console.error("[v0] Create menu error:", error) return NextResponse.json({ success: false, message: "Gagal menambah menu" }, { status: 500 }) } return NextResponse.json({ success: true, data: data?.[0] }, { status: 201 }) } catch (error) { console.error("[v0] Create menu error:", error) return NextResponse.json({ success: false, message: "Terjadi kesalahan server" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/menu/update/route.ts" import { type NextRequest, NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function PUT(request: NextRequest) { try { const body = await request.json() const { id, name, price, description, category, image_url } = body if (!id) { return NextResponse.json({ success: false, message: "ID diperlukan" }, { status: 400 }) } const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch {} }, }, }, ) const { data, error } = await supabase .from("menu_items") .update({ name, price, description, category, image_url, updated_at: new Date().toISOString() }) .eq("id", id) .select() if (error) { console.error("[v0] Update menu error:", error) return NextResponse.json({ success: false, message: "Gagal update menu" }, { status: 500 }) } return NextResponse.json({ success: true, data: data?.[0] }) } catch (error) { console.error("[v0] Update menu error:", error) return NextResponse.json({ success: false, message: "Terjadi kesalahan server" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/menu/route.ts" isQuickEdit="true" import { NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function GET() { try { const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // Handle cookie setting errors } }, }, }, ) const { data: menuItems, error } = await supabase .from("menu_items") .select("*") .eq("is_available", true) .order("created_at", { ascending: false }) if (error || !menuItems || menuItems.length === 0) { console.error("[v0] Menu fetch error or empty:", error) return NextResponse.json({ success: true, data: [], }) } // Transform database response to match frontend Product interface const formattedMenu = menuItems.map((item: any) => ({ id: item.id.toString(), name: String(item.name || ""), price: Number(item.price || 0), description: String(item.description || ""), category: String(item.category || "signature"), image: String(item.image_url || "/placeholder.svg"), isPromo: Boolean(item.is_promo || false), promoPrice: item.promo_price ? Number(item.promo_price) : undefined, })) return NextResponse.json({ success: true, data: formattedMenu, }) } catch (error) { console.error("[v0] Menu API error:", error) return NextResponse.json({ success: false, message: "Terjadi kesalahan server" }, { status: 500 }) } } [V0_FILE]png:file="public/images/products/ice-cream-cone-strawberry.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ice-cream-cone%20strawberry.png-meEr3H2MqAmGsrEAB28vStCxqKnUXW.jpeg" [V0_FILE]png:file="public/images/products/ice-cream-cone-original.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ice-cream-cone%20original-CbYGWAjcrwzpFsoF5sIg3u4pnuwfK9.png" [V0_FILE]png:file="public/images/products/ice-cream-cone-matcha.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ice-cream-cone%20matcha.png-3mIpXznbrZKpCTh4OJ13ysxCw7Hl0g.jpeg" [V0_FILE]sql:file="scripts/07-add-ice-cream-cone-menu.sql" -- Add 3 new ice cream cone menu items to reach total 13 items -- Using the uploaded ice cream cone images INSERT INTO menu_items (name, description, price, image_url, category, is_available) VALUES ('Es Krim Strawberry', 'Es krim strawberry segar dengan buah asli dalam cone renyah', 28000, '/images/products/ice-cream-cone-strawberry.png', 'signature', true), ('Es Krim Vanilla', 'Es krim vanilla premium dengan rasa yang lembut', 25000, '/images/products/ice-cream-cone-original.png', 'signature', true), ('Es Krim Matcha', 'Es krim matcha premium dari Jepang', 32000, '/images/products/ice-cream-cone-matcha.png', 'premium', true) ON CONFLICT DO NOTHING; [V0_FILE]sql:file="scripts/08-cleanup-duplicates-and-finalize-menu.sql" -- Clean up duplicate menu items and ensure we have exactly 13 unique items -- This script will remove all duplicates and keep only the most recent entry for each menu -- Step 1: Delete all menu items to start fresh DELETE FROM menu_items; -- Step 2: Insert exactly 13 unique menu items -- 10 original items + 3 ice cream cone items = 13 total INSERT INTO menu_items (name, description, price, image_url, category, is_available) VALUES -- Original 10 items ('Strawberry Swirl Soft Serve', 'Creamy vanilla soft serve beautifully swirled with fresh strawberry sauce', 35000, '/images/products/strawberry-swirl-softserve.png', 'signature', true), ('Mango Swirl Soft Serve', 'Tropical mango soft serve topped with fresh mango pieces and popping boba', 38000, '/images/products/mango-swirl-softserve.png', 'signature', true), ('Matcha Red Bean', 'Premium Japanese matcha soft serve topped with sweet red beans', 42000, '/images/products/matcha-redbean.png', 'premium', true), ('Oreo Sundae', 'Vanilla soft serve layered with crushed Oreo cookies and cream', 40000, '/images/products/oreo-sundae.png', 'premium', true), ('Chocolate Sundae', 'Rich chocolate soft serve drizzled with premium chocolate syrup', 38000, '/images/products/chocolate-sundae.png', 'signature', true), ('Dragon Fruit Mango Delight', 'Layered drink with dragon fruit, fresh mango, and coconut jelly', 45000, '/images/products/dragon-fruit-mango-delight.png', 'premium', true), ('Lemon Boba Tea', 'Refreshing lemon tea with chewy boba pearls and fresh citrus slices', 32000, '/images/products/lemon-boba-tea.png', 'refreshing', true), ('Tropical Fruit Paradise', 'Colorful blend of watermelon, mango, and tropical fruits over ice', 40000, '/images/products/tropical-fruit-paradise.png', 'premium', true), ('Orange Iced Tea', 'Classic iced tea infused with fresh orange slices', 28000, '/images/products/orange-iced-tea.png', 'refreshing', true), ('Fresh Lemonade', 'Homemade lemonade with fresh lemon slices and ice', 25000, '/images/products/fresh-lemonade.png', 'refreshing', true), -- New 3 ice cream cone items ('Es Krim Strawberry Cone', 'Es krim strawberry segar dalam cone renyah', 28000, '/images/products/ice-cream-cone-strawberry.png', 'signature', true), ('Es Krim Vanilla Cone', 'Es krim vanilla original dalam cone renyah', 25000, '/images/products/ice-cream-cone-original.png', 'signature', true), ('Es Krim Matcha Cone', 'Es krim matcha premium dari Jepang dalam cone renyah', 32000, '/images/products/ice-cream-cone-matcha.png', 'premium', true); -- Verify the count SELECT COUNT(*) as total_menu_items FROM menu_items; [V0_FILE]sql:file="scripts/09-cleanup-reviews-remove-dummy-data.sql" -- Clean up all dummy/sample data from reviews table -- This ensures the reviews table starts fresh without any dummy data -- Only real customer reviews will appear in the system -- Remove all existing reviews (dummy data) DELETE FROM reviews; -- Reset the table to ensure it's ready for real customer reviews -- The table structure remains intact, just empty of dummy data -- Verify table is empty -- You can run: SELECT COUNT(*) FROM reviews; -- Expected result: 0 -- Note: The reviews table structure from 03-setup-reviews-table.sql remains: -- - id (UUID) -- - buyer_email (VARCHAR) -- - rating (INTEGER 1-5) -- - comment (TEXT) -- - product_id (UUID, references menu_items) -- - created_at (TIMESTAMP) -- - updated_at (TIMESTAMP) -- Customers can now submit real reviews through the website [V0_FILE]typescriptreact:file="app/review/page.tsx" "use client" import { useState, useEffect } from "react" import { Navbar } from "@/components/navbar" import { TestimonialCard } from "@/components/testimonial-card" interface Review { id: string buyer_email: string rating: number comment: string created_at: string } export default function ReviewPage() { const [reviews, setReviews] = useState([]) const [isLoading, setIsLoading] = useState(true) useEffect(() => { const fetchReviews = async () => { try { const response = await fetch("/api/reviews/get") const data = await response.json() if (data.success && data.reviews) { setReviews(data.reviews) } } catch (error) { console.error("[v0] Failed to fetch reviews:", error) } finally { setIsLoading(false) } } fetchReviews() }, []) return (

{/* Header */}

Review Pelanggan

Lihat apa kata pelanggan kami tentang pengalaman mereka dengan MOMOYO

{/* Reviews Grid */}

{isLoading ? (

Memuat review...

) : reviews.length === 0 ? (

Belum ada review. Jadilah yang pertama untuk memberikan review!

) : (

{reviews.map((review) => ( ))}

)}

{/* Footer */}

) } [V0_FILE]typescript:file="app/api/orders/get/route.ts" isQuickEdit="true" import { type NextRequest, NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" interface GetOrdersResponse { success: boolean message: string orders?: Array<{ id: string buyer_email: string total_price: number status: string created_at: string order_items?: Array<{ id: string quantity: number price: number menu_items?: Array<{ name: string }> }> }> } export async function GET(request: NextRequest): Promise> { try { const email = request.nextUrl.searchParams.get("email") if (!email) { return NextResponse.json({ success: false, message: "Parameter email diperlukan" }, { status: 400 }) } // Create Supabase client const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // Handle cookie setting errors } }, }, }, ) let query = supabase .from("orders") .select( ` id, buyer_email, total_price, status, created_at, order_items ( id, quantity, price, menu_items ( name ) ) `, ) .order("created_at", { ascending: false }) // Only filter by email if not requesting all orders if (email !== "all") { query = query.eq("buyer_email", email) } const { data: orders, error } = await query if (error) { console.error("[v0] Get orders error:", error) return NextResponse.json({ success: false, message: "Gagal mengambil pesanan" }, { status: 500 }) } console.log("[v0] Fetched orders:", orders?.length || 0, "orders") return NextResponse.json( { success: true, message: "Pesanan berhasil diambil", orders, }, { status: 200 }, ) } catch (error) { console.error("[v0] Get orders error:", error) return NextResponse.json({ success: false, message: "Terjadi kesalahan server" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/orders/track/route.ts" import { type NextRequest, NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" interface TrackOrderResponse { success: boolean message?: string order?: { id: string buyer_email: string total_price: number status: string created_at: string items: Array<{ id: string name: string quantity: number price: number }> } } export async function GET(request: NextRequest): Promise> { try { const searchParams = request.nextUrl.searchParams const orderId = searchParams.get("orderId") console.log("[v0] Tracking order:", orderId) if (!orderId) { return NextResponse.json({ success: false, message: "ID pesanan tidak ditemukan" }, { status: 400 }) } // Create Supabase client const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // Handle cookie setting errors } }, }, }, ) // Get order details const { data: orderData, error: orderError } = await supabase .from("orders") .select("*") .eq("id", orderId) .single() if (orderError || !orderData) { console.log("[v0] Order not found:", orderId) return NextResponse.json({ success: false, message: "Pesanan tidak ditemukan" }, { status: 404 }) } console.log("[v0] Order found:", orderData) // Get order items with menu details const { data: itemsData, error: itemsError } = await supabase .from("order_items") .select( ` id, quantity, price, menu_items ( id, name ) `, ) .eq("order_id", orderId) if (itemsError) { console.error("[v0] Error fetching order items:", itemsError) return NextResponse.json({ success: false, message: "Gagal mengambil detail pesanan" }, { status: 500 }) } console.log("[v0] Order items found:", itemsData) // Format the response const order = { id: orderData.id, buyer_email: orderData.buyer_email, total_price: orderData.total_price, status: orderData.status, created_at: orderData.created_at, items: itemsData.map((item: any) => ({ id: item.menu_items.id, name: item.menu_items.name, quantity: item.quantity, price: item.price, })), } console.log("[v0] Returning order:", order) return NextResponse.json({ success: true, order }, { status: 200 }) } catch (error) { console.error("[v0] Error tracking order:", error) return NextResponse.json({ success: false, message: "Terjadi kesalahan server" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/tracking/page.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Search } from 'lucide-react' import { useSearchParams } from 'next/navigation' import { Navbar } from "@/components/navbar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { OrderProgress } from "@/components/order-progress" type OrderStatus = "pending" | "processing" | "ready" | "completed" interface DisplayOrder { id: string status: OrderStatus items: Array<{ name: string; quantity: number; price: number }> total: number createdAt: string } export default function TrackingPage() { const searchParams = useSearchParams() const hasProcessedUrlParam = useRef(false) const [orderId, setOrderId] = useState("") const [order, setOrder] = useState(null) const [error, setError] = useState("") const [isLoading, setIsLoading] = useState(false) useEffect(() => { if (hasProcessedUrlParam.current) return const urlOrderId = searchParams.get("orderId") if (urlOrderId) { hasProcessedUrlParam.current = true setOrderId(urlOrderId) handleSearchWithId(urlOrderId) } }, [searchParams]) const handleSearchWithId = async (id: string) => { setError("") setOrder(null) setIsLoading(true) if (!id.trim()) { setError("Masukkan nomor pesanan") setIsLoading(false) return } try { console.log("[v0] Tracking order with ID:", id) const response = await fetch(`/api/orders/track?orderId=${encodeURIComponent(id.trim())}`) const data = await response.json() console.log("[v0] Track API response:", data) if (!response.ok) { setError(data.message || "Pesanan tidak ditemukan") setOrder(null) setIsLoading(false) return } if (data.success && data.order) { const displayOrder: DisplayOrder = { id: data.order.id, status: data.order.status, items: data.order.items.map((item: any) => ({ name: item.name, quantity: item.quantity, price: item.price, })), total: data.order.total_price, createdAt: data.order.created_at, } setOrder(displayOrder) setError("") console.log("[v0] Order found and displayed:", displayOrder) } else { setError("Pesanan tidak ditemukan") setOrder(null) } } catch (error) { console.error("[v0] Error tracking order:", error) setError("Terjadi kesalahan saat mencari pesanan") setOrder(null) } finally { setIsLoading(false) } } const handleSearch = (e: React.FormEvent) => { e.preventDefault() handleSearchWithId(orderId) } return (

{/* Header */}

Lacak Pesanan

Masukkan nomor pesanan Anda untuk melihat status pengiriman

{/* Search Section */}

Cari Pesanan Anda {error &&

{error}

} {/* Order Details */} {order && (

Detail Pesanan

Nomor Pesanan {order.id}

Tanggal Pesanan {new Date(order.createdAt).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric", hour: "2-digit", minute: "2-digit", })}

Item Pesanan

{order.items.map((item, index) => (

{item.name} x{item.quantity} Rp{(item.price * item.quantity).toLocaleString("id-ID")}

))}

Total Rp{order.total.toLocaleString("id-ID")}

{/* Order Progress */} Status Pengiriman

)}

{/* Footer */}

) } [V0_FILE]sql:file="scripts/10-create-vouchers-table.sql" -- Tabel untuk voucher/kode promo CREATE TABLE IF NOT EXISTS vouchers ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), code VARCHAR(50) UNIQUE NOT NULL, discount_type VARCHAR(20) NOT NULL, -- 'percentage' atau 'fixed' discount_value DECIMAL(10, 2) NOT NULL, min_purchase DECIMAL(10, 2) DEFAULT 0, max_discount DECIMAL(10, 2), -- maksimal diskon untuk percentage usage_limit INTEGER, -- jumlah maksimal penggunaan (NULL = unlimited) usage_count INTEGER DEFAULT 0, -- jumlah yang sudah digunakan valid_from TIMESTAMP DEFAULT CURRENT_TIMESTAMP, valid_until TIMESTAMP, is_active BOOLEAN DEFAULT true, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Index untuk performa CREATE INDEX IF NOT EXISTS idx_vouchers_code ON vouchers(code); CREATE INDEX IF NOT EXISTS idx_vouchers_active ON vouchers(is_active); -- Tabel untuk tracking penggunaan voucher per user CREATE TABLE IF NOT EXISTS voucher_usage ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), voucher_id UUID REFERENCES vouchers(id) ON DELETE CASCADE, order_id UUID REFERENCES orders(id) ON DELETE CASCADE, user_email VARCHAR(255), used_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Index untuk voucher usage CREATE INDEX IF NOT EXISTS idx_voucher_usage_voucher ON voucher_usage(voucher_id); CREATE INDEX IF NOT EXISTS idx_voucher_usage_email ON voucher_usage(user_email); [V0_FILE]typescript:file="app/api/vouchers/validate/route.ts" import { type NextRequest, NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" interface ValidateVoucherRequest { code: string subtotal: number userEmail?: string } export async function POST(request: NextRequest) { try { const body: ValidateVoucherRequest = await request.json() const { code, subtotal, userEmail } = body if (!code || !subtotal) { return NextResponse.json({ success: false, message: "Kode voucher dan subtotal diperlukan" }, { status: 400 }) } const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch {} }, }, }, ) // Get voucher const { data: voucher, error: voucherError } = await supabase .from("vouchers") .select("*") .eq("code", code.toUpperCase()) .eq("is_active", true) .single() if (voucherError || !voucher) { return NextResponse.json({ success: false, message: "Kode voucher tidak valid" }, { status: 400 }) } // Check validity period const now = new Date() if (voucher.valid_until && new Date(voucher.valid_until) < now) { return NextResponse.json({ success: false, message: "Voucher sudah kadaluarsa" }, { status: 400 }) } if (new Date(voucher.valid_from) > now) { return NextResponse.json({ success: false, message: "Voucher belum aktif" }, { status: 400 }) } // Check usage limit if (voucher.usage_limit && voucher.usage_count >= voucher.usage_limit) { return NextResponse.json({ success: false, message: "Voucher sudah mencapai batas penggunaan" }, { status: 400 }) } // Check minimum purchase if (subtotal < voucher.min_purchase) { return NextResponse.json( { success: false, message: `Minimum pembelian Rp${voucher.min_purchase.toLocaleString("id-ID")} untuk menggunakan voucher ini`, }, { status: 400 }, ) } // Calculate discount let discount = 0 if (voucher.discount_type === "percentage") { discount = (subtotal * voucher.discount_value) / 100 if (voucher.max_discount && discount > voucher.max_discount) { discount = voucher.max_discount } } else { discount = voucher.discount_value } const total = Math.max(0, subtotal - discount) return NextResponse.json( { success: true, voucher: { id: voucher.id, code: voucher.code, discountType: voucher.discount_type, discountValue: voucher.discount_value, }, discount, total, }, { status: 200 }, ) } catch (error) { console.error("[v0] Validate voucher error:", error) return NextResponse.json({ success: false, message: "Terjadi kesalahan server" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/vouchers/list/route.ts" import { type NextRequest, NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function GET(request: NextRequest) { try { const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch {} }, }, }, ) const { data, error } = await supabase .from("vouchers") .select("*") .order("created_at", { ascending: false }) if (error) { console.error("[v0] Get vouchers error:", error) return NextResponse.json({ success: false, message: "Gagal memuat voucher" }, { status: 500 }) } return NextResponse.json({ success: true, data }, { status: 200 }) } catch (error) { console.error("[v0] Get vouchers error:", error) return NextResponse.json({ success: false, message: "Terjadi kesalahan server" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/vouchers/delete/route.ts" import { type NextRequest, NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function DELETE(request: NextRequest) { try { const { voucherId } = await request.json() if (!voucherId) { return NextResponse.json({ success: false, message: "Voucher ID diperlukan" }, { status: 400 }) } const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch {} }, }, }, ) const { error } = await supabase.from("vouchers").delete().eq("id", voucherId) if (error) { console.error("[v0] Delete voucher error:", error) return NextResponse.json({ success: false, message: "Gagal menghapus voucher" }, { status: 500 }) } return NextResponse.json({ success: true, message: "Voucher berhasil dihapus" }, { status: 200 }) } catch (error) { console.error("[v0] Delete voucher error:", error) return NextResponse.json({ success: false, message: "Terjadi kesalahan server" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/checkout-modal.tsx" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from 'next/navigation' import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { PaymentMethodSelector } from "@/components/payment-method-selector" import { useCartStore } from "@/lib/cart-store" import { Loader2, Tag, ChevronDown, ChevronUp } from 'lucide-react' import { Card, CardContent } from "@/components/ui/card" interface CheckoutModalProps { open: boolean onOpenChange: (open: boolean) => void } interface Voucher { id: string code: string discount_type: 'percentage' | 'fixed' discount_value: number min_purchase: number max_usage: number | null used_count: number valid_until: string is_active: boolean } export function CheckoutModal({ open, onOpenChange }: CheckoutModalProps) { const router = useRouter() const { items, total, clearCart } = useCartStore() const [loading, setLoading] = useState(false) const [step, setStep] = useState<"info" | "payment">("info") const [voucherCode, setVoucherCode] = useState("") const [voucherApplied, setVoucherApplied] = useState(false) const [discount, setDiscount] = useState(0) const [voucherLoading, setVoucherLoading] = useState(false) const [voucherError, setVoucherError] = useState("") const [availableVouchers, setAvailableVouchers] = useState([]) const [showVouchers, setShowVouchers] = useState(false) const [loadingVouchers, setLoadingVouchers] = useState(false) const [formData, setFormData] = useState({ name: "", phone: "", address: "", notes: "", paymentMethod: "", }) const finalTotal = total - discount useEffect(() => { if (open) { fetchAvailableVouchers() } }, [open]) const fetchAvailableVouchers = async () => { setLoadingVouchers(true) try { const response = await fetch("/api/vouchers/available") const data = await response.json() if (data.success) { setAvailableVouchers(data.data) } } catch (error) { console.error("[v0] Error fetching vouchers:", error) } finally { setLoadingVouchers(false) } } const selectVoucher = async (voucher: Voucher) => { setVoucherCode(voucher.code) setShowVouchers(false) // Auto-apply the selected voucher setVoucherLoading(true) setVoucherError("") try { const response = await fetch("/api/vouchers/validate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ code: voucher.code, subtotal: total, }), }) const data = await response.json() if (data.success) { setDiscount(data.discount) setVoucherApplied(true) setVoucherError("") } else { setVoucherError(data.message) setDiscount(0) setVoucherApplied(false) } } catch (error) { setVoucherError("Gagal memvalidasi voucher") setDiscount(0) setVoucherApplied(false) } finally { setVoucherLoading(false) } } const applyVoucher = async () => { if (!voucherCode) return setVoucherLoading(true) setVoucherError("") try { const response = await fetch("/api/vouchers/validate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ code: voucherCode, subtotal: total, }), }) const data = await response.json() if (data.success) { setDiscount(data.discount) setVoucherApplied(true) setVoucherError("") } else { setVoucherError(data.message) setDiscount(0) setVoucherApplied(false) } } catch (error) { setVoucherError("Gagal memvalidasi voucher") setDiscount(0) setVoucherApplied(false) } finally { setVoucherLoading(false) } } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (step === "info") { setStep("payment") return } if (!formData.paymentMethod) { alert("Silakan pilih metode pembayaran") return } setLoading(true) try { const buyerEmail = localStorage.getItem("buyerEmail") || "guest@momoyo.com" console.log("[v0] Creating order with data:", { buyerEmail, itemsCount: items.length, items: items, subtotal: total, discount: discount, total: finalTotal, }) const response = await fetch("/api/orders/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ buyerEmail: buyerEmail, items: items.map((item) => ({ id: item.id, name: item.name, price: item.price, quantity: item.quantity, })), subtotal: total, discount: discount, total: finalTotal, voucherCode: voucherApplied ? voucherCode : null, paymentMethod: formData.paymentMethod, }), }) const data = await response.json() console.log("[v0] Order creation response:", data) if (data.success && data.orderId) { console.log("[v0] Order created successfully with ID:", data.orderId) clearCart() onOpenChange(false) router.push(`/tracking?orderId=${data.orderId}`) } else { console.error("[v0] Order creation failed:", data.message) alert(data.message || "Gagal membuat pesanan") } } catch (error) { console.error("[v0] Error creating order:", error) alert("Gagal membuat pesanan. Silakan coba lagi.") } finally { setLoading(false) } } const formatVoucherDiscount = (voucher: Voucher) => { if (voucher.discount_type === 'percentage') { return `${voucher.discount_value}%` } else { return `Rp${voucher.discount_value.toLocaleString("id-ID")}` } } return (

🍦 ERD SISTEM MOMOYO ICE CREAM 🍦

Produk Favorit Kami

Semua Produk

{typeLabels[type as keyof typeof typeLabels]}

Review Pelanggan

Lacak Pesanan

Item Pesanan