Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): make product dialog wider and improve module additions layout
Some checks failed
Staging Build / build (push) Failing after 26s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-10 09:28:09 +02:00
parent 27fe6c6eef
commit 0435984c82
1 changed files with 334 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

582
shop/components/admin/create-product-dialog.tsx
View File

@@ -78,8 +78,32 @@ export function CreateProductDialog({
products?: Product[] products?: Product[]
}) { }) {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [step, setStep] = useState(1)
const router = useRouter() const router = useRouter()
function handleOpenChange(isOpen: boolean) {
setOpen(isOpen)
if (isOpen) {
setStep(1)
}
}
async function nextStep() {
let isValid = false
if (step === 1) {
isValid = await form.trigger(['name', 'category_id', 'base_price'])
} else if (step === 2) {
isValid = await form.trigger('billing_interval')
} else if (step === 3) {
isValid = await form.trigger(['show_in_kauf', 'show_in_abo'])
} else if (step === 4) {
isValid = await form.trigger(['requirements', 'exclusions'])
}
if (isValid || step === 5) {
setStep(prev => Math.min(prev + 1, 5))
}
}
const otherProducts = products.filter(p => p.id !== product?.id) const otherProducts = products.filter(p => p.id !== product?.id)
const form = useForm<ProductFormValues>({ const form = useForm<ProductFormValues>({
@@ -136,7 +160,7 @@ export function CreateProductDialog({
} }
return ( return (
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={handleOpenChange}>
<DialogTrigger asChild> <DialogTrigger asChild>
{children || ( {children || (
<Button className="bg-primary hover:bg-primary/90"> <Button className="bg-primary hover:bg-primary/90">
@@ -144,7 +168,7 @@ export function CreateProductDialog({
</Button> </Button>
)} )}
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-hidden flex flex-col bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl"> <DialogContent className="sm:max-w-[900px] max-h-[90vh] overflow-hidden flex flex-col bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-2xl font-bold"> <DialogTitle className="text-2xl font-bold">
{product ? 'Produkt bearbeiten' : 'Neues Produkt erstellen'} {product ? 'Produkt bearbeiten' : 'Neues Produkt erstellen'}
@@ -157,166 +181,201 @@ export function CreateProductDialog({
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4 overflow-hidden flex-1 min-h-0"> <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4 overflow-hidden flex-1 min-h-0">
<div className="flex-1 overflow-y-auto pr-4 space-y-6 py-4 min-h-0"> <div className="flex-1 overflow-y-auto pr-4 space-y-6 py-4 min-h-0">
<div className="grid grid-cols-2 gap-4"> {/* Step Indicator */}
<div className="flex justify-between items-center mb-6 border-b border-slate-100 dark:border-white/5 pb-4">
{[
{ nr: 1, label: 'Allgemein' },
{ nr: 2, label: 'Abrechnung' },
{ nr: 3, label: 'Sichtbarkeit' },
{ nr: 4, label: 'Abhängigkeiten' },
{ nr: 5, label: 'Module' }
].map(s => (
<div key={s.nr} className="flex flex-col items-center gap-1 flex-1">
<div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors ${
step === s.nr
? 'bg-primary text-white'
: step > s.nr
? 'bg-green-500 text-white'
: 'bg-slate-200 dark:bg-slate-800 text-slate-500'
}`}>
{s.nr}
</div>
<span className="text-[10px] text-slate-500 dark:text-slate-400 font-medium">{s.label}</span>
</div>
))}
</div>
{step === 1 && (
<div className="space-y-6">
<div className="grid grid-cols-2 gap-4">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel className="text-slate-900 dark:text-white">Produktname</FormLabel>
<FormControl>
<Input placeholder="z.B. Basic ERP" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="base_price"
render={({ field }) => (
<FormItem>
<FormLabel className="text-slate-900 dark:text-white">Basispreis (€)</FormLabel>
<FormControl>
<Input type="number" step="0.01" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField <FormField
control={form.control} control={form.control}
name="name" name="category_id"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel className="text-slate-900 dark:text-white">Produktname</FormLabel> <FormLabel className="text-slate-900 dark:text-white">Kategorie</FormLabel>
<FormControl> <Select onValueChange={field.onChange} defaultValue={field.value}>
<Input placeholder="z.B. Basic ERP" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} /> <FormControl>
</FormControl> <SelectTrigger className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
<SelectValue placeholder="Kategorie wählen" />
</SelectTrigger>
</FormControl>
<SelectContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
{categories.map(cat => (
<SelectItem key={cat.id} value={cat.id}>{cat.name}</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="base_price" name="description"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel className="text-slate-900 dark:text-white">Basispreis (€)</FormLabel> <FormLabel className="text-slate-900 dark:text-white">Beschreibung</FormLabel>
<FormControl> <FormControl>
<Input type="number" step="0.01" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} /> <Input placeholder="Kurze Beschreibung des Produkts" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
</div> </div>
)}
<FormField {step === 2 && (
control={form.control} <div className="space-y-6">
name="category_id" <FormField
render={({ field }) => ( control={form.control}
<FormItem> name="billing_interval"
<FormLabel className="text-slate-900 dark:text-white">Kategorie</FormLabel> render={({ field }) => (
<Select onValueChange={field.onChange} defaultValue={field.value}> <FormItem>
<FormControl> <FormLabel className="text-slate-900 dark:text-white">Abrechnungsmodell</FormLabel>
<SelectTrigger className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white"> <div className="grid grid-cols-2 gap-2 pt-1">
<SelectValue placeholder="Kategorie wählen" /> {[
</SelectTrigger> { value: 'one_time', label: 'Einmalig', icon: '💳' },
</FormControl> { value: 'monthly', label: 'Monatlich', icon: '🔄' },
<SelectContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white"> ].map(opt => (
{categories.map(cat => ( <button
<SelectItem key={cat.id} value={cat.id}>{cat.name}</SelectItem> key={opt.value}
type="button"
onClick={() => field.onChange(opt.value)}
className={`flex flex-col items-center gap-1 p-3 rounded-xl border-2 text-sm font-medium transition-all ${
field.value === opt.value
? 'border-primary bg-primary/10 text-primary dark:text-white'
: 'border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10'
}`}
>
<span className="text-lg">{opt.icon}</span>
{opt.label}
</button>
))} ))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="billing_interval"
render={({ field }) => (
<FormItem>
<FormLabel className="text-slate-900 dark:text-white">Abrechnungsmodell</FormLabel>
<div className="grid grid-cols-2 gap-2 pt-1">
{[
{ value: 'one_time', label: 'Einmalig', icon: '💳' },
{ value: 'monthly', label: 'Monatlich', icon: '🔄' },
].map(opt => (
<button
key={opt.value}
type="button"
onClick={() => field.onChange(opt.value)}
className={`flex flex-col items-center gap-1 p-3 rounded-xl border-2 text-sm font-medium transition-all ${
field.value === opt.value
? 'border-primary bg-primary/10 text-primary dark:text-white'
: 'border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10'
}`}
>
<span className="text-lg">{opt.icon}</span>
{opt.label}
</button>
))}
</div>
<FormMessage />
</FormItem>
)}
/>
<div className="grid grid-cols-2 gap-4">
<FormField
control={form.control}
name="show_in_kauf"
render={({ field }) => (
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10">
<FormControl>
<Checkbox
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">In Kauf-Auswahl anzeigen</FormLabel>
<FormDescription className="text-xs text-slate-500">Produkt im Kauf-Zweig anzeigen</FormDescription>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="show_in_abo"
render={({ field }) => (
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10">
<FormControl>
<Checkbox
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">In Abo-Auswahl anzeigen</FormLabel>
<FormDescription className="text-xs text-slate-500">Produkt im Abo-Zweig anzeigen</FormDescription>
</div> </div>
<FormMessage />
</FormItem> </FormItem>
)} )}
/> />
</div> </div>
)}
{form.watch('billing_interval') === 'one_time' && ( {step === 3 && (
<FormField <div className="space-y-6">
control={form.control} <div className="grid grid-cols-2 gap-4">
name="allow_update_discount" <FormField
render={({ field }) => ( control={form.control}
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"> name="show_in_kauf"
<FormControl> render={({ field }) => (
<Checkbox <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10">
checked={field.value} <FormControl>
onCheckedChange={field.onChange} <Checkbox
/> checked={field.value}
</FormControl> onCheckedChange={field.onChange}
<div className="space-y-1 leading-none"> />
<FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">Update-Rabatt erlauben</FormLabel> </FormControl>
<FormDescription className="text-xs text-slate-500"> <div className="space-y-1 leading-none">
Kunden erhalten für dieses Produkt den selektiven Update-Rabatt. <FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">In Kauf-Auswahl anzeigen</FormLabel>
</FormDescription> <FormDescription className="text-xs text-slate-500">Produkt im Kauf-Zweig anzeigen</FormDescription>
</div> </div>
</FormItem> </FormItem>
)} )}
/> />
)} <FormField
control={form.control}
name="show_in_abo"
render={({ field }) => (
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10">
<FormControl>
<Checkbox
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">In Abo-Auswahl anzeigen</FormLabel>
<FormDescription className="text-xs text-slate-500">Produkt im Abo-Zweig anzeigen</FormDescription>
</div>
</FormItem>
)}
/>
</div>
{form.watch('billing_interval') === 'one_time' && (
<FormField <FormField
control={form.control} control={form.control}
name="description" name="allow_update_discount"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10">
<FormLabel className="text-slate-900 dark:text-white">Beschreibung</FormLabel> <FormControl>
<FormControl> <Checkbox
<Input placeholder="Kurze Beschreibung des Produkts" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} /> checked={field.value}
</FormControl> onCheckedChange={field.onChange}
<FormMessage /> />
</FormItem> </FormControl>
<div className="space-y-1 leading-none">
<FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">Update-Rabatt erlauben</FormLabel>
<FormDescription className="text-xs text-slate-500">
Kunden erhalten für dieses Produkt den selektiven Update-Rabatt.
</FormDescription>
</div>
</FormItem>
)}
/>
)} )}
/> </div>
)}
{step === 4 && (
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{/* Product Requirements */} {/* Product Requirements */}
<FormField <FormField
@@ -405,38 +464,18 @@ export function CreateProductDialog({
</div> </div>
)} )}
</ScrollArea> </ScrollArea>
<FormMessage />
</FormItem>
)} )}
/> />
</div> </div>
)}
<Separator className="bg-slate-200 dark:bg-white/10" /> {step === 5 && (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h3 className="text-lg font-semibold flex items-center gap-2"> <h3 className="text-lg font-semibold flex items-center gap-2">
<PlusCircle className="w-5 h-5 text-primary" /> <PlusCircle className="w-5 h-5 text-primary" />
Module Module
</h3> </h3>
<Button
type="button"
variant="outline"
size="sm"
className="border-primary/50 text-primary hover:bg-primary/10"
onClick={() => append({
id: typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).substring(2, 15),
name: '',
price: 0,
is_required: false,
has_quantity: false,
description: '',
requirements: [],
exclusions: []
})}
>
<Plus className="w-4 h-4 mr-2" /> Modul hinzufügen
</Button>
</div> </div>
{fields.map((field, index) => { {fields.map((field, index) => {
@@ -449,79 +488,90 @@ export function CreateProductDialog({
.filter((_, idx) => idx !== index) .filter((_, idx) => idx !== index)
return ( return (
<div key={field.id} className="p-4 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 space-y-4 relative group"> <div key={field.id} className="p-4 border border-slate-200 dark:border-white/10 rounded-xl bg-slate-50 dark:bg-white/5 space-y-4">
<Button <div className="flex items-start justify-between gap-4">
type="button" <div className="flex-1 grid grid-cols-2 gap-4">
variant="ghost" <FormField
size="icon" control={form.control}
className="absolute top-2 right-2 h-8 w-8 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity" name={`modules.${index}.name`}
onClick={() => remove(index)} render={({ field }) => (
> <FormItem>
<X className="h-4 w-4" /> <FormLabel className="text-slate-900 dark:text-white text-xs">Modulname</FormLabel>
</Button> <FormControl>
<Input placeholder="z.B. Zusatzlizenz" className="bg-white dark:bg-slate-900 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white text-xs" {...field} />
<div className="grid grid-cols-2 gap-4"> </FormControl>
<FormField <FormMessage />
control={form.control} </FormItem>
name={`modules.${index}.name`} )}
render={({ field }) => ( />
<FormItem> <FormField
<FormLabel className="text-slate-900 dark:text-white">Modulname</FormLabel> control={form.control}
<FormControl> name={`modules.${index}.price`}
<Input placeholder="z.B. Cloud Storage" className="bg-slate-100 dark:bg-white/10 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} /> render={({ field }) => (
</FormControl> <FormItem>
<FormMessage /> <FormLabel className="text-slate-900 dark:text-white text-xs">Preis (€/Monat)</FormLabel>
</FormItem> <FormControl>
)} <Input type="number" step="0.01" className="bg-white dark:bg-slate-900 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white text-xs" {...field} />
/> </FormControl>
<FormField <FormMessage />
control={form.control} </FormItem>
name={`modules.${index}.price`} )}
render={({ field }) => ( />
<FormItem> </div>
<FormLabel className="text-slate-900 dark:text-white">Aufpreis (€)</FormLabel> <Button
<FormControl> type="button"
<Input type="number" step="0.01" className="bg-slate-100 dark:bg-white/10 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} /> variant="ghost"
</FormControl> size="sm"
<FormMessage /> className="text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/20 mt-6"
</FormItem> onClick={() => remove(index)}
)} >
/> <Trash2 className="w-4 h-4" />
</Button>
</div> </div>
<div className="grid grid-cols-2 gap-4 border border-slate-200 dark:border-white/10 rounded-lg p-3 bg-slate-100 dark:bg-black/20"> <FormField
{/* Requirements Selection Matrix */} control={form.control}
<FormField name={`modules.${index}.description`}
control={form.control} render={({ field }) => (
name={`modules.${index}.requirements`} <FormItem>
render={({ field: reqField }) => ( <FormLabel className="text-slate-900 dark:text-white text-xs">Beschreibung</FormLabel>
<div className="space-y-2"> <FormControl>
<FormLabel className="text-slate-900 dark:text-white text-xs font-semibold">Benötigt Module</FormLabel> <Input placeholder="Kurze Beschreibung" className="bg-white dark:bg-slate-900 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white text-xs" {...field} />
<ScrollArea className="h-28 border border-slate-200 dark:border-white/5 rounded p-2 bg-slate-50 dark:bg-white/5"> </FormControl>
{otherModules.length === 0 ? ( <FormMessage />
<p className="text-[10px] text-slate-500 italic">Keine anderen Module vorhanden.</p> </FormItem>
) : ( )}
<div className="space-y-1.5"> />
{otherModules.length > 0 && (
<div className="grid grid-cols-2 gap-4">
<FormField
control={form.control}
name={`modules.${index}.requirements`}
render={({ field: mReqField }) => (
<FormItem className="flex flex-col gap-1">
<FormLabel className="text-slate-900 dark:text-white text-[11px] font-medium">Erfordert Module</FormLabel>
<ScrollArea className="h-24 border border-slate-200 dark:border-white/10 rounded p-2 bg-white dark:bg-slate-900">
<div className="space-y-1">
{otherModules.map(other => { {otherModules.map(other => {
const checked = (reqField.value || []).includes(other.id) const checked = (mReqField.value || []).includes(other.id)
return ( return (
<div key={other.id} className="flex items-center space-x-2"> <div key={other.id} className="flex items-center space-x-2">
<Checkbox <Checkbox
id={`req-${index}-${other.id}`} id={`mod-req-${index}-${other.id}`}
checked={checked} checked={checked}
onCheckedChange={(checkedState) => { onCheckedChange={(checkedState) => {
const currentVal = reqField.value || [] const currentVal = mReqField.value || []
if (checkedState) { if (checkedState) {
reqField.onChange([...currentVal, other.id]) mReqField.onChange([...currentVal, other.id])
} else { } else {
reqField.onChange(currentVal.filter(id => id !== other.id)) mReqField.onChange(currentVal.filter(id => id !== other.id))
} }
}} }}
/> />
<label <label
htmlFor={`req-${index}-${other.id}`} htmlFor={`mod-req-${index}-${other.id}`}
className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block max-w-[180px]" className="text-[10px] text-slate-650 dark:text-slate-350 cursor-pointer truncate block"
title={other.name}
> >
{other.name} {other.name}
</label> </label>
@@ -529,44 +579,38 @@ export function CreateProductDialog({
) )
})} })}
</div> </div>
)} </ScrollArea>
</ScrollArea> </FormItem>
</div> )}
)} />
/>
{/* Exclusions Selection Matrix */} <FormField
<FormField control={form.control}
control={form.control} name={`modules.${index}.exclusions`}
name={`modules.${index}.exclusions`} render={({ field: mExclField }) => (
render={({ field: exclField }) => ( <FormItem className="flex flex-col gap-1">
<div className="space-y-2"> <FormLabel className="text-slate-900 dark:text-white text-[11px] font-medium">Schließt Module aus</FormLabel>
<FormLabel className="text-slate-900 dark:text-white text-xs font-semibold">Schließt aus</FormLabel> <ScrollArea className="h-24 border border-slate-200 dark:border-white/10 rounded p-2 bg-white dark:bg-slate-900">
<ScrollArea className="h-28 border border-slate-200 dark:border-white/5 rounded p-2 bg-slate-50 dark:bg-white/5"> <div className="space-y-1">
{otherModules.length === 0 ? (
<p className="text-[10px] text-slate-500 italic">Keine anderen Module vorhanden.</p>
) : (
<div className="space-y-1.5">
{otherModules.map(other => { {otherModules.map(other => {
const checked = (exclField.value || []).includes(other.id) const checked = (mExclField.value || []).includes(other.id)
return ( return (
<div key={other.id} className="flex items-center space-x-2"> <div key={other.id} className="flex items-center space-x-2">
<Checkbox <Checkbox
id={`excl-${index}-${other.id}`} id={`mod-excl-${index}-${other.id}`}
checked={checked} checked={checked}
onCheckedChange={(checkedState) => { onCheckedChange={(checkedState) => {
const currentVal = exclField.value || [] const currentVal = mExclField.value || []
if (checkedState) { if (checkedState) {
exclField.onChange([...currentVal, other.id]) mExclField.onChange([...currentVal, other.id])
} else { } else {
exclField.onChange(currentVal.filter(id => id !== other.id)) mExclField.onChange(currentVal.filter(id => id !== other.id))
} }
}} }}
/> />
<label <label
htmlFor={`excl-${index}-${other.id}`} htmlFor={`mod-excl-${index}-${other.id}`}
className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block max-w-[180px]" className="text-[10px] text-slate-650 dark:text-slate-350 cursor-pointer truncate block"
title={other.name}
> >
{other.name} {other.name}
</label> </label>
@@ -574,12 +618,12 @@ export function CreateProductDialog({
) )
})} })}
</div> </div>
)} </ScrollArea>
</ScrollArea> </FormItem>
</div> )}
)} />
/> </div>
</div> )}
<div className="flex items-center gap-6"> <div className="flex items-center gap-6">
<FormField <FormField
@@ -617,18 +661,60 @@ export function CreateProductDialog({
</div> </div>
) )
})} })}
{fields.length === 0 && ( {fields.length === 0 && (
<div className="text-center py-6 border-2 border-dashed border-slate-200 dark:border-white/5 rounded-lg text-slate-500 dark:text-slate-400 text-sm"> <div className="text-center py-6 border-2 border-dashed border-slate-200 dark:border-white/5 rounded-lg text-slate-500 dark:text-slate-400 text-sm">
Noch keine Module hinzugefügt. Noch keine Module hinzugefügt.
</div> </div>
)} )}
<div className="flex justify-end pt-2">
<Button
type="button"
variant="outline"
size="sm"
className="border-primary/50 text-primary hover:bg-primary/10"
onClick={() => append({
id: typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).substring(2, 15),
name: '',
price: 0,
is_required: false,
has_quantity: false,
description: '',
requirements: [],
exclusions: []
})}
>
<Plus className="w-4 h-4 mr-2" /> Modul hinzufügen
</Button>
</div>
</div> </div>
)}
</div> </div>
<DialogFooter className="pt-4 border-t border-slate-200 dark:border-white/10"> <DialogFooter className="pt-4 border-t border-slate-200 dark:border-white/10 flex justify-between items-center sm:justify-between">
<Button type="button" variant="ghost" onClick={() => setOpen(false)} className="text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">Abbrechen</Button> <div className="flex gap-2">
<Button type="submit" className="bg-primary hover:bg-primary/90 text-white">Speichern</Button> {step > 1 ? (
<Button type="button" variant="outline" onClick={() => setStep(prev => prev - 1)}>
Zurück
</Button>
) : (
<Button type="button" variant="ghost" onClick={() => setOpen(false)} className="text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
Abbrechen
</Button>
)}
</div>
<div className="flex gap-2">
{step < 5 ? (
<Button type="button" onClick={nextStep} className="bg-primary hover:bg-primary/90 text-white">
Weiter
</Button>
) : (
<Button type="submit" className="bg-primary hover:bg-primary/90 text-white">
Speichern
</Button>
)}
</div>
</DialogFooter> </DialogFooter>
</form> </form>
</Form> </Form>