360 lines
15 KiB
TypeScript
360 lines
15 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
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({
|
|
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),
|
|
requirements: z.string().optional().default(''), // Will be converted to array
|
|
exclusions: z.string().optional().default(''), // Will be converted to array
|
|
})
|
|
|
|
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'),
|
|
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 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',
|
|
modules: product?.modules?.map(m => ({
|
|
name: m.name,
|
|
description: m.description || '',
|
|
price: m.price,
|
|
is_required: false,
|
|
requirements: m.requirements?.join(', ') || '',
|
|
exclusions: m.exclusions?.join(', ') || '',
|
|
})) || [],
|
|
},
|
|
})
|
|
|
|
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,
|
|
requirements: m.requirements ? m.requirements.split(',').map(s => s.trim()).filter(Boolean) : [],
|
|
exclusions: m.exclusions ? m.exclusions.split(',').map(s => s.trim()).filter(Boolean) : [],
|
|
}))
|
|
|
|
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()
|
|
} 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 glass-dark border-white/10 text-white shadow-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-2xl font-bold">
|
|
{product ? 'Produkt bearbeiten' : 'Neues Produkt erstellen'}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-slate-300">
|
|
Definieren Sie das Basisprodukt und fügen Sie optionale oder erforderliche Module hinzu.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 flex-1 overflow-hidden flex flex-col">
|
|
<ScrollArea className="flex-1 max-h-[60vh] pr-4">
|
|
<div className="space-y-6 py-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="name"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-white">Produktname</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="z.B. Basic ERP" className="bg-white/5 border-white/10 text-white" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="base_price"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-white">Basispreis (€)</FormLabel>
|
|
<FormControl>
|
|
<Input type="number" step="0.01" className="bg-white/5 border-white/10 text-white" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="category_id"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-white">Kategorie</FormLabel>
|
|
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
|
<FormControl>
|
|
<SelectTrigger className="bg-white/5 border-white/10 text-white">
|
|
<SelectValue placeholder="Kategorie wählen" className="text-white" />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent className="glass-dark border-white/10 text-white">
|
|
{categories.map(cat => (
|
|
<SelectItem key={cat.id} value={cat.id} className="text-white">{cat.name}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="billing_interval"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="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-white'
|
|
: 'border-white/10 bg-white/5 text-slate-400 hover:bg-white/10'
|
|
}`}
|
|
>
|
|
<span className="text-lg">{opt.icon}</span>
|
|
{opt.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="description"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-white">Beschreibung</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Kurze Beschreibung des Produkts" className="bg-white/5 border-white/10 text-white placeholder:text-slate-400" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<Separator className="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({ name: '', price: 0, is_required: false, description: '', requirements: '', exclusions: '' })}
|
|
>
|
|
<Plus className="w-4 h-4 mr-2" /> Modul hinzufügen
|
|
</Button>
|
|
</div>
|
|
|
|
{fields.map((field, index) => (
|
|
<div key={field.id} className="p-4 rounded-lg bg-white/5 border 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-white">Modulname</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="z.B. Cloud Storage" className="bg-white/10 border-white/10 text-white placeholder:text-slate-400" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.price`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-white">Aufpreis (€)</FormLabel>
|
|
<FormControl>
|
|
<Input type="number" step="0.01" className="bg-white/10 border-white/10 text-white" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.requirements`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-white">Benötigt (IDs, kommagetrennt)</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="UUIDs..." className="bg-white/10 border-white/10 text-xs text-white" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.exclusions`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-white">Schließt aus (IDs, kommagetrennt)</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="UUIDs..." className="bg-white/10 border-white/10 text-xs text-white" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<FormField
|
|
control={form.control}
|
|
name={`modules.${index}.is_required`}
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-start space-x-3 space-y-0">
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<div className="space-y-1 leading-none">
|
|
<FormLabel className="text-white">Erforderlich</FormLabel>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{fields.length === 0 && (
|
|
<div className="text-center py-6 border-2 border-dashed border-white/5 rounded-lg text-slate-400 text-sm">
|
|
Noch keine Module hinzugefügt.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
<DialogFooter className="pt-4 border-t border-white/10">
|
|
<Button type="button" variant="ghost" onClick={() => setOpen(false)}>Abbrechen</Button>
|
|
<Button type="submit" className="bg-primary hover:bg-primary/90">Speichern</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</Form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|