import { Form, Head, Link } from '@inertiajs/react'; import { ArrowLeft } from 'lucide-react'; import { useState } from 'react'; import { toast } from 'sonner'; import { FileUpload } from '@/components/inputs'; import { InputError } from '@/components/ui'; import { NumberInput } from '@/components/inputs'; import { RupiahInput } from '@/components/inputs'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { getTemporaryUrl } from '@/lib/upload'; import { index as rawMaterialIndex } from '@/routes/admin/master/raw-materials'; type Props = { variant: { id: number; raw_material_id: number; variant: string; price: number; stock: number; photo_key: string | null; photo_url: string | null; }; }; export default function RawMaterialVariantEdit({ variant }: Props) { const [variantName, setVariantName] = useState(variant.variant); const [price, setPrice] = useState(variant.price); const [stock, setStock] = useState(Number(variant.stock) || 0); const [photo, setPhoto] = useState(variant.photo_key); const [photoUrl, setPhotoUrl] = useState(variant.photo_url); const [uploading, setUploading] = useState(false); function getPayload() { return { variant: variantName, price: Number(price), stock: Number(stock), photo_key: photo, }; } return ( <>

Edit Varian

getPayload()} onError={() => { toast.error('Ada data yang belum sesuai, silakan periksa kembali input Anda.'); }} > {({ errors, processing }) => ( <>
Informasi Varian
setVariantName(e.target.value)} placeholder="Contoh: Ukuran L, Warna Merah" />
Foto Varian * { setPhoto(key); setPhotoUrl(key ? getTemporaryUrl(key) : null); }} folder="raw-material-variant" existingUrl={photoUrl} onUploadingChange={setUploading} />
)}
); }