503 lines
24 KiB
TypeScript
503 lines
24 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useForm, useFieldArray } from 'react-hook-form'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import * as z from 'zod'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@/components/ui/dialog'
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from '@/components/ui/form'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
import { Plus, Trash2, X, PlusCircle } from 'lucide-react'
|
|
import { createProduct, updateProduct } from '@/lib/actions/products'
|
|
import { ScrollArea } from '@/components/ui/scroll-area'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { Category, Product } from '@/lib/types'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
|
|
const moduleSchema = z.object({
|
|
id: z.string().optional(),
|
|
name: z.string().min(2, 'Name muss mindestens 2 Zeichen lang sein'),
|
|
description: z.string().optional(),
|
|
price: z.coerce.number().min(0, 'Preis darf nicht negativ sein'),
|
|
is_required: z.boolean().default(false),
|
|
has_quantity: z.boolean().default(false),
|
|
requirements: z.array(z.string()).default([]),
|
|
exclusions: z.array(z.string()).default([]),
|
|
})
|
|
|
|
const productSchema = z.object({
|
|
name: z.string().min(2, 'Name muss mindestens 2 Zeichen lang sein'),
|
|
description: z.string().optional(),
|
|
base_price: z.coerce.number().min(0, 'Preis darf nicht negativ sein'),
|
|
category_id: z.string().min(1, 'Bitte wählen Sie eine Kategorie'),
|
|
billing_interval: z.enum(['one_time', 'monthly']).default('monthly'),
|
|
show_in_kauf: z.boolean().default(true),
|
|
show_in_abo: z.boolean().default(true),
|
|
modules: z.array(moduleSchema).default([]),
|
|
})
|
|
|
|
type ProductFormValues = z.infer<typeof productSchema>
|
|
|
|
export function CreateProductDialog({ children, categories, product }: { children?: React.ReactNode, categories: Category[], product?: Product }) {
|
|
const [open, setOpen] = useState(false)
|
|
const router = useRouter()
|
|
|
|
const form = useForm<ProductFormValues>({
|
|
resolver: zodResolver(productSchema) as any,
|
|
defaultValues: {
|
|
name: product?.name || '',
|
|
description: product?.description || '',
|
|
base_price: product?.base_price || 0,
|
|
category_id: product?.category_id || '',
|
|
billing_interval: product?.billing_interval || 'monthly',
|
|
show_in_kauf: product ? (product.show_in_kauf ?? true) : true,
|
|
show_in_abo: product ? (product.show_in_abo ?? true) : true,
|
|
modules: product?.modules?.map(m => ({
|
|
id: m.id,
|
|
name: m.name,
|
|
description: m.description || '',
|
|
price: m.price,
|
|
is_required: false,
|
|
has_quantity: m.has_quantity ?? false,
|
|
requirements: m.requirements || [],
|
|
exclusions: m.exclusions || [],
|
|
})) || [],
|
|
},
|
|
})
|
|
|
|
const { fields, append, remove } = useFieldArray({
|
|
name: 'modules',
|
|
control: form.control,
|
|
})
|
|
|
|
async function onSubmit(values: ProductFormValues) {
|
|
try {
|
|
const { modules, ...productData } = values
|
|
const formattedModules = modules.map(m => ({
|
|
...m,
|
|
id: m.id || (typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).substring(2, 15)),
|
|
}))
|
|
|
|
if (product) {
|
|
await updateProduct(product.id, productData as any, formattedModules as any)
|
|
} else {
|
|
await createProduct(productData as any, formattedModules as any)
|
|
}
|
|
|
|
setOpen(false)
|
|
if (!product) form.reset()
|
|
router.refresh()
|
|
} catch (error) {
|
|
console.error('Error saving product:', error)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
{children || (
|
|
<Button className="bg-primary hover:bg-primary/90">
|
|
<Plus className="mr-2 h-4 w-4" /> Produkt hinzufügen
|
|
</Button>
|
|
)}
|
|
</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">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-2xl font-bold">
|
|
{product ? 'Produkt bearbeiten' : 'Neues Produkt erstellen'}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-slate-500 dark:text-slate-400">
|
|
Definieren Sie das Basisprodukt und fügen Sie optionale oder erforderliche Module hinzu.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<Form {...form}>
|
|
<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="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
|
|
control={form.control}
|
|
name="category_id"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-slate-900 dark:text-white">Kategorie</FormLabel>
|
|
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
|
<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 />
|
|
</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>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="description"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-slate-900 dark:text-white">Beschreibung</FormLabel>
|
|
<FormControl>
|
|
<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>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<Separator className="bg-slate-200 dark:bg-white/10" />
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold flex items-center gap-2">
|
|
<PlusCircle className="w-5 h-5 text-primary" />
|
|
Module
|
|
</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>
|
|
|
|
{fields.map((field, index) => {
|
|
const allModules = form.watch('modules') || []
|
|
const otherModules = allModules
|
|
.map((m, idx) => ({
|
|
id: m.id || field.id,
|
|
name: m.name || `Modul ${idx + 1}`,
|
|
}))
|
|
.filter((_, idx) => idx !== index)
|
|
|
|
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">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute top-2 right-2 h-8 w-8 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onClick={() => remove(index)}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.name`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-slate-900 dark:text-white">Modulname</FormLabel>
|
|
<FormControl>
|
|
<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} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.price`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-slate-900 dark:text-white">Aufpreis (€)</FormLabel>
|
|
<FormControl>
|
|
<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} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</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">
|
|
{/* Requirements Selection Matrix */}
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.requirements`}
|
|
render={({ field: reqField }) => (
|
|
<div className="space-y-2">
|
|
<FormLabel className="text-slate-900 dark:text-white text-xs font-semibold">Benötigt Module</FormLabel>
|
|
<ScrollArea className="h-28 border border-slate-200 dark:border-white/5 rounded p-2 bg-slate-50 dark:bg-white/5">
|
|
{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 => {
|
|
const checked = (reqField.value || []).includes(other.id)
|
|
return (
|
|
<div key={other.id} className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id={`req-${index}-${other.id}`}
|
|
checked={checked}
|
|
onCheckedChange={(checkedState) => {
|
|
const currentVal = reqField.value || []
|
|
if (checkedState) {
|
|
reqField.onChange([...currentVal, other.id])
|
|
} else {
|
|
reqField.onChange(currentVal.filter(id => id !== other.id))
|
|
}
|
|
}}
|
|
/>
|
|
<label
|
|
htmlFor={`req-${index}-${other.id}`}
|
|
className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block max-w-[180px]"
|
|
title={other.name}
|
|
>
|
|
{other.name}
|
|
</label>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
</div>
|
|
)}
|
|
/>
|
|
|
|
{/* Exclusions Selection Matrix */}
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.exclusions`}
|
|
render={({ field: exclField }) => (
|
|
<div className="space-y-2">
|
|
<FormLabel className="text-slate-900 dark:text-white text-xs font-semibold">Schließt aus</FormLabel>
|
|
<ScrollArea className="h-28 border border-slate-200 dark:border-white/5 rounded p-2 bg-slate-50 dark:bg-white/5">
|
|
{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 => {
|
|
const checked = (exclField.value || []).includes(other.id)
|
|
return (
|
|
<div key={other.id} className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id={`excl-${index}-${other.id}`}
|
|
checked={checked}
|
|
onCheckedChange={(checkedState) => {
|
|
const currentVal = exclField.value || []
|
|
if (checkedState) {
|
|
exclField.onChange([...currentVal, other.id])
|
|
} else {
|
|
exclField.onChange(currentVal.filter(id => id !== other.id))
|
|
}
|
|
}}
|
|
/>
|
|
<label
|
|
htmlFor={`excl-${index}-${other.id}`}
|
|
className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block max-w-[180px]"
|
|
title={other.name}
|
|
>
|
|
{other.name}
|
|
</label>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
</div>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6">
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.is_required`}
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer text-xs">Erforderlich</FormLabel>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.has_quantity`}
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer text-xs">Mengeneingabe erlauben</FormLabel>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
{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">
|
|
Noch keine Module hinzugefügt.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="pt-4 border-t border-slate-200 dark:border-white/10">
|
|
<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>
|
|
<Button type="submit" className="bg-primary hover:bg-primary/90 text-white">Speichern</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</Form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|