import { Head, useForm } from '@inertiajs/react'; import { BadgePercent } from 'lucide-react'; import InputError from '@/components/input-error'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; type Course = { id: number; title: string }; type Props = { courses: Course[] }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Admin', href: '/admin' }, { title: 'Kupon', href: '/admin/coupons' }, { title: 'Buat Kupon', href: '/admin/coupons/create' }, ]; export default function AdminCouponsCreate({ courses }: Props) { const { data, setData, post, processing, errors } = useForm({ code: '', type: 'percentage' as 'percentage' | 'fixed', value: '', scope: 'global' as 'global' | 'course', is_active: true, starts_at: '', expires_at: '', usage_limit: '', per_user_limit: '', min_purchase: '', course_ids: [] as number[], }); function submit(e: React.FormEvent) { e.preventDefault(); post('/admin/coupons'); } function toggleCourse(id: number) { setData('course_ids', data.course_ids.includes(id) ? data.course_ids.filter((c) => c !== id) : [...data.course_ids, id]); } return ( <>

Buat Kupon Baru

Isi semua detail kupon diskon

setData('code', e.target.value.toUpperCase())} placeholder="DISKON50" className="w-full rounded-xl border border-gray-200 px-4 py-2.5 font-mono text-sm uppercase focus:border-[#118AB2] focus:outline-none focus:ring-1 focus:ring-[#118AB2]" />
setData('value', e.target.value)} min="0" max={data.type === 'percentage' ? 100 : undefined} className="w-full rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:border-[#118AB2] focus:outline-none focus:ring-1 focus:ring-[#118AB2]" />
setData('min_purchase', e.target.value)} min="0" placeholder="0" className="w-full rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:border-[#118AB2] focus:outline-none focus:ring-1 focus:ring-[#118AB2]" />
setData('usage_limit', e.target.value)} min="1" placeholder="Tidak terbatas" className="w-full rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:border-[#118AB2] focus:outline-none focus:ring-1 focus:ring-[#118AB2]" />
setData('per_user_limit', e.target.value)} min="1" placeholder="Tidak terbatas" className="w-full rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:border-[#118AB2] focus:outline-none focus:ring-1 focus:ring-[#118AB2]" />
setData('starts_at', e.target.value)} className="w-full rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:border-[#118AB2] focus:outline-none focus:ring-1 focus:ring-[#118AB2]" />
setData('expires_at', e.target.value)} className="w-full rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:border-[#118AB2] focus:outline-none focus:ring-1 focus:ring-[#118AB2]" />
{(['global', 'course'] as const).map((s) => ( ))}
{data.scope === 'course' && (
{courses.map((course) => ( ))}
)}
setData('is_active', e.target.checked)} className="h-4 w-4 rounded border-gray-300 text-[#118AB2] focus:ring-[#118AB2]" />
Batal
); } AdminCouponsCreate.layout = (page: React.ReactNode) => ( {page} );