import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxItem, ComboboxList, ComboboxValue, useComboboxAnchor, } from "@/components/ui/combobox"; import { Field, FieldError } from "@/components/ui/field"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import productRoutes from '@/routes/product'; import type { Category } from '@/types/category'; import { Head, Link, useForm } from '@inertiajs/react'; import { ArrowLeft, ImagePlus, Loader, Save, Upload, X } from 'lucide-react'; import React, { useRef, useState } from 'react'; import { NumericFormat } from 'react-number-format'; import { toast } from 'sonner'; 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) => { const flash = response.props.flash; if (flash?.error) { toast.error(flash.error); } else if (flash?.success) { toast.success(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} /> 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} )} setData('description', val)} /> Harga Produk
{ setData('prices', { ...data.prices, purchase: values.value }) }} placeholder="Rp 0" autoComplete='off' /> { setData('prices', { ...data.prices, distributor: values.value }) }} placeholder="Rp 0" autoComplete='off' /> { setData('prices', { ...data.prices, agent: values.value }) }} placeholder="Rp 0" autoComplete='off' /> { setData('prices', { ...data.prices, reseller: values.value }) }} placeholder="Rp 0" autoComplete='off' /> { setData('prices', { ...data.prices, retail: values.value }) }} placeholder="Rp 0" autoComplete='off' />
Thumbnail {thumbnailPreview ? (
Thumbnail preview
) : ( )} Galeri Gambar
{imagePreviews.map((item, index) => (
{`Gambar
))}
); } ProductCreate.layout = { breadcrumbs: [ { title: 'Master', }, ], };