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 CouponData = { id: number; code: string; type: 'percentage' | 'fixed'; value: number; scope: 'global' | 'course'; is_active: boolean; starts_at: string | null; expires_at: string | null; usage_limit: number | null; per_user_limit: number | null; min_purchase: number; course_ids: number[]; }; type Props = { coupon: CouponData; courses: Course[] }; export default function AdminCouponsEdit({ coupon, courses }: Props) { const breadcrumbs: BreadcrumbItem[] = [ { title: 'Admin', href: '/admin' }, { title: 'Kupon', href: '/admin/coupons' }, { title: coupon.code, href: `/admin/coupons/${coupon.id}/edit` }, ]; const { data, setData, patch, processing, errors } = useForm({ code: coupon.code, type: coupon.type, value: String(coupon.value), scope: coupon.scope, is_active: coupon.is_active, starts_at: coupon.starts_at ? coupon.starts_at.slice(0, 16) : '', expires_at: coupon.expires_at ? coupon.expires_at.slice(0, 16) : '', usage_limit: coupon.usage_limit !== null ? String(coupon.usage_limit) : '', per_user_limit: coupon.per_user_limit !== null ? String(coupon.per_user_limit) : '', min_purchase: coupon.min_purchase > 0 ? String(coupon.min_purchase) : '', course_ids: coupon.course_ids, }); function submit(e: React.FormEvent) { e.preventDefault(); patch(`/admin/coupons/${coupon.id}`); } function toggleCourse(id: number) { setData('course_ids', data.course_ids.includes(id) ? data.course_ids.filter((c) => c !== id) : [...data.course_ids, id]); } return ( <>

Edit Kupon

{coupon.code}

setData('code', e.target.value.toUpperCase())} 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
); } AdminCouponsEdit.layout = (page: React.ReactNode) => ( {page} );