import { Head, Link } from '@inertiajs/react'; import { useForm } from '@inertiajs/react'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Field } from "@/components/ui/field" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import productRoutes from '@/routes/product'; import React, { useRef, useState } from 'react'; import { toast } from 'sonner'; import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor' import { Category } from '@/types/category'; import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxItem, ComboboxList, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxValue, useComboboxAnchor, } from "@/components/ui/combobox" import { NumericFormat } from 'react-number-format'; import { ImagePlus, X, Upload, ArrowLeft, Save, Loader } from 'lucide-react'; export default function ProductCreate({ categories }: { categories: Category[] }) { const { data, setData, post, processing, errors } = useForm<{ name: string; description: string; category_ids: number[]; prices: { purchase: string; distributor: string; agent: string; reseller: string; retail: string; }; thumbnail: File | null; images: File[]; }>({ name: '', description: '', category_ids: [] as number[], prices: { purchase: '', distributor: '', agent: '', reseller: '', retail: '', }, thumbnail: null, images: [], }); const anchor = useComboboxAnchor(); const thumbnailInputRef = useRef(null); const imagesInputRef = useRef(null); const [thumbnailPreview, setThumbnailPreview] = useState(null); const [imagePreviews, setImagePreviews] = useState<{ file: File; preview: string }[]>([]); const handleThumbnailChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; setData('thumbnail', file); const reader = new FileReader(); reader.onloadend = () => setThumbnailPreview(reader.result as string); reader.readAsDataURL(file); }; const removeThumbnail = () => { setData('thumbnail', null); setThumbnailPreview(null); if (thumbnailInputRef.current) thumbnailInputRef.current.value = ''; }; const handleImagesChange = (e: React.ChangeEvent) => { const files = Array.from(e.target.files ?? []); if (!files.length) return; const newPreviews = files.map(file => ({ file, preview: URL.createObjectURL(file), })); setImagePreviews(prev => [...prev, ...newPreviews]); setData('images', [...data.images, ...files]); if (imagesInputRef.current) imagesInputRef.current.value = ''; }; const removeImage = (index: number) => { const updated = imagePreviews.filter((_, i) => i !== index); setImagePreviews(updated); setData('images', updated.map(p => p.file)); }; const onSubmit = (e: React.FormEvent) => { e.preventDefault(); post(productRoutes.store().url, { forceFormData: true, onSuccess: (response: any) => { toast.success(response.props.flash.success); }, }); }; const filteredCategories = categories.filter((c) => !data.category_ids.includes(c.id)); return (

Tambah Produk

Informasi Produk setData('name', e.target.value)} autoComplete='off' placeholder='Contoh: Gamis Wanita' maxLength={100} /> {errors.name &&

{errors.name}

} data.category_ids.includes(c.id))} onValueChange={(selected) => { setData( "category_ids", selected.map((item: Category) => item.id) ) }} > {(values: Category[]) => ( <> {values.map((value) => ( {value.name} ))} )} Data tidak ditemukan. {(item: Category) => ( {item.name} )} {errors.category_ids &&

{errors.category_ids}

} setData('description', val)} /> {errors.description &&

{errors.description}

} Harga Produk
{ setData('prices', { ...data.prices, purchase: values.value }) }} placeholder="Rp 0" autoComplete='off' /> {errors['prices.purchase'] &&

{errors['prices.purchase']}

} { setData('prices', { ...data.prices, distributor: values.value }) }} placeholder="Rp 0" autoComplete='off' /> {errors['prices.distributor'] &&

{errors['prices.distributor']}

} { setData('prices', { ...data.prices, agent: values.value }) }} placeholder="Rp 0" autoComplete='off' /> {errors['prices.agent'] &&

{errors['prices.agent']}

} { setData('prices', { ...data.prices, reseller: values.value }) }} placeholder="Rp 0" autoComplete='off' /> {errors['prices.reseller'] &&

{errors['prices.reseller']}

} { setData('prices', { ...data.prices, retail: values.value }) }} placeholder="Rp 0" autoComplete='off' /> {errors['prices.retail'] &&

{errors['prices.retail']}

}
Thumbnail {thumbnailPreview ? (
Thumbnail preview
) : ( )} {errors.thumbnail &&

{errors.thumbnail}

} Galeri Gambar
{imagePreviews.map((item, index) => (
{`Gambar
))}
{errors['images'] &&

{errors['images']}

}
); } ProductCreate.layout = { breadcrumbs: [ { title: 'Master', }, ], };