Compare commits
5 Commits
8b698e42ec
...
73e046e959
| Author | SHA1 | Date | |
|---|---|---|---|
|
73e046e959 | ||
|
|
3ba7c91e1f | ||
|
|
6177c0cde1 | ||
|
|
696528283a | ||
|
|
cab64028f6 |
@@ -939,6 +939,39 @@ export function OrderWizard({
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Left Sidebar Status Stepper */}
|
||||||
|
<div className="space-y-4 py-4 border-t border-b border-white/5">
|
||||||
|
<p className="text-xs font-bold uppercase tracking-wider text-slate-500">
|
||||||
|
Schritt 3 von 4 — Software konfigurieren
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col gap-3 pl-1">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
|
||||||
|
<Check className="w-3.5 h-3.5" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-slate-400 font-medium">Kunde</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
|
||||||
|
<Check className="w-3.5 h-3.5" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-slate-400 font-medium">Modell</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-primary/20 border border-primary text-primary flex items-center justify-center text-xs font-bold shadow-[0_0_10px_rgba(59,130,246,0.2)]">
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-white font-bold">Software</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-white/5 border border-white/10 text-slate-500 flex items-center justify-center text-xs">
|
||||||
|
4
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-slate-600 font-medium">Abschluss</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
{visibleCategories.map((cat) => {
|
{visibleCategories.map((cat) => {
|
||||||
const sel = selections[cat.id]
|
const sel = selections[cat.id]
|
||||||
@@ -1031,7 +1064,7 @@ export function OrderWizard({
|
|||||||
<ProgressStepper step={step} basketItemsCount={basketItems.length} />
|
<ProgressStepper step={step} basketItemsCount={basketItems.length} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 overflow-y-auto pr-1">
|
<div className="flex-1 overflow-hidden">
|
||||||
<SummarySidebar
|
<SummarySidebar
|
||||||
visibleCategories={visibleCategories}
|
visibleCategories={visibleCategories}
|
||||||
selections={selections}
|
selections={selections}
|
||||||
@@ -1080,7 +1113,7 @@ export function OrderWizard({
|
|||||||
initial={{ opacity: 0, scale: 0.98 }}
|
initial={{ opacity: 0, scale: 0.98 }}
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
exit={{ opacity: 0, scale: 0.98 }}
|
exit={{ opacity: 0, scale: 0.98 }}
|
||||||
className="w-full"
|
className="h-[calc(100vh-140px)] overflow-hidden w-full"
|
||||||
>
|
>
|
||||||
<StepSummary
|
<StepSummary
|
||||||
finalItemsToShow={finalItemsToShow}
|
finalItemsToShow={finalItemsToShow}
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import React from 'react'
|
|||||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
|
||||||
import { Separator } from '@/components/ui/separator'
|
import { Separator } from '@/components/ui/separator'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
import { ShieldCheck, Building2, Calendar, Loader2, CheckCircle2 } from 'lucide-react'
|
import { ShieldCheck, Building2, Calendar, Loader2, CheckCircle2 } from 'lucide-react'
|
||||||
import * as Icons from 'lucide-react'
|
import * as Icons from 'lucide-react'
|
||||||
import { Category, Product, EndCustomer, Profile } from '@/lib/types'
|
import { Category, Product, EndCustomer, Profile } from '@/lib/types'
|
||||||
@@ -64,104 +65,140 @@ export function StepSummary({
|
|||||||
setOrderNotes,
|
setOrderNotes,
|
||||||
}: StepSummaryProps) {
|
}: StepSummaryProps) {
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start max-w-6xl mx-auto text-left">
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 h-full items-stretch text-left">
|
||||||
{/* LINKER BEREICH: Linksbündige Überschrift & Notizfeld */}
|
{/* LINKER BEREICH: Scrollbares Bedienfeld */}
|
||||||
<div className="lg:col-span-5 space-y-6">
|
<div className="lg:col-span-5 flex flex-col h-full overflow-hidden pr-4 space-y-6">
|
||||||
<div className="space-y-3">
|
<div className="flex-1 overflow-y-auto pr-1 space-y-6 pb-4 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/50 shrink-0">
|
{/* Header & Status Stepper */}
|
||||||
<ShieldCheck className="w-6 h-6 text-primary" />
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/50 shrink-0">
|
||||||
|
<ShieldCheck className="w-6 h-6 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-extrabold text-white tracking-tight">
|
||||||
|
Anfrage prüfen
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-400 text-xs mt-0.5">
|
||||||
|
Fast fertig! Bitte überprüfen Sie Ihre ausgewählte Konfiguration.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Vertikaler Status-Stepper */}
|
||||||
|
<div className="space-y-4 py-4 border-t border-b border-white/5">
|
||||||
|
<p className="text-[10px] font-bold uppercase tracking-wider text-slate-500">
|
||||||
|
Schritt 4 von 4 — Zusammenfassung & Abschluss
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col gap-3 pl-1">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
|
||||||
|
<Icons.Check className="w-3.5 h-3.5" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-slate-400 font-medium">Kunde</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
|
||||||
|
<Icons.Check className="w-3.5 h-3.5" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-slate-400 font-medium">Modell</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
|
||||||
|
<Icons.Check className="w-3.5 h-3.5" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-slate-400 font-medium">Software</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-primary/20 border border-primary text-primary flex items-center justify-center text-xs font-bold shadow-[0_0_10px_rgba(59,130,246,0.2)]">
|
||||||
|
4
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-white font-bold">Abschluss</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-xs font-bold uppercase tracking-widest text-sky-400 bg-sky-500/10 px-3 py-1 rounded-full border border-sky-500/20">
|
|
||||||
Schritt 4 von 4 — Abschluss
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
|
|
||||||
Anfrage prüfen
|
{/* Kunden-Info Card */}
|
||||||
</h2>
|
{selectedEndCustomer && (
|
||||||
<p className="text-slate-300 text-base leading-relaxed">
|
<div className="p-4 rounded-xl bg-white/5 border border-white/10 space-y-2">
|
||||||
Fast fertig! Bitte überprüfen Sie Ihre ausgewählte Konfiguration vor dem Absenden.
|
<div className="flex items-center gap-2 text-primary font-bold text-xs uppercase tracking-wider">
|
||||||
|
<Building2 className="w-4 h-4" />
|
||||||
|
<span>Ausgewählter Endkunde</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-white font-bold text-sm">{selectedEndCustomer.company_name}</p>
|
||||||
|
<p className="text-slate-400 text-xs">Ansprechpartner: {[selectedEndCustomer.first_name, selectedEndCustomer.last_name].filter(Boolean).join(' ')}</p>
|
||||||
|
<p className="text-slate-400 text-xs">Adresse: {[selectedEndCustomer.street, [selectedEndCustomer.zip, selectedEndCustomer.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Anmerkungen / Notizfeld */}
|
||||||
|
<div className="space-y-2 pt-2">
|
||||||
|
<label htmlFor="order-notes" className="block text-xs font-bold text-white uppercase tracking-wider">
|
||||||
|
Anmerkungen / Hinweise (optional)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="order-notes"
|
||||||
|
rows={4}
|
||||||
|
value={orderNotes}
|
||||||
|
onChange={e => setOrderNotes(e.target.value)}
|
||||||
|
placeholder="Besondere Hinweise, Ansprechpartner oder Terminwünsche hier eintragen..."
|
||||||
|
className="w-full p-3 rounded-xl bg-white/5 border border-white/10 text-xs text-white placeholder-slate-500 focus:border-primary focus:outline-none transition-colors duration-200 resize-none shadow-inner"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-[10px] text-slate-500 leading-relaxed">
|
||||||
|
Mit dem Klick auf „{initialOrder ? 'Anfrage aktualisieren' : 'Kostenpflichtig bestellen'}“ akzeptieren Sie unsere AGB und die{' '}
|
||||||
|
<a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-400">
|
||||||
|
Datenschutzerklärung
|
||||||
|
</a>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Kunden-Info Card */}
|
{/* Aktions-Buttons */}
|
||||||
{selectedEndCustomer && (
|
<div className="space-y-3 pt-2">
|
||||||
<div className="p-5 rounded-2xl bg-slate-900/80 border border-slate-800 space-y-2">
|
<Button
|
||||||
<div className="flex items-center gap-2 text-sky-400 font-bold text-sm">
|
className="w-full h-12 text-sm font-bold bg-primary hover:bg-primary/90 shadow-[0_0_15px_rgba(59,130,246,0.2)] rounded-xl"
|
||||||
<Building2 className="w-4 h-4" />
|
onClick={handleSubmit}
|
||||||
<span>Ausgewählter Endkunde</span>
|
disabled={isSubmitting}
|
||||||
</div>
|
>
|
||||||
<p className="text-white font-bold text-base">{selectedEndCustomer.company_name}</p>
|
{isSubmitting ? (
|
||||||
<p className="text-slate-400 text-xs">{selectedEndCustomer.first_name} {selectedEndCustomer.last_name}</p>
|
initialOrder ? (
|
||||||
<p className="text-slate-400 text-xs">{selectedEndCustomer.zip} {selectedEndCustomer.city}</p>
|
<><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Anfrage wird aktualisiert...</>
|
||||||
</div>
|
) : (
|
||||||
)}
|
<><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Anfrage wird versendet...</>
|
||||||
|
)
|
||||||
{/* Anmerkungen / Notizfeld (Links) */}
|
|
||||||
<div className="space-y-2 pt-2">
|
|
||||||
<label htmlFor="order-notes" className="block text-sm font-bold text-white">
|
|
||||||
Anmerkungen / Hinweise (optional)
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
id="order-notes"
|
|
||||||
rows={4}
|
|
||||||
value={orderNotes}
|
|
||||||
onChange={e => setOrderNotes(e.target.value)}
|
|
||||||
placeholder="Besondere Hinweise, Ansprechpartner oder Terminwünsche hier eintragen..."
|
|
||||||
className="w-full p-4 rounded-xl bg-slate-900/90 border border-slate-800 text-sm text-white placeholder-slate-500 focus:border-sky-400 focus:outline-none transition-colors duration-200 resize-none shadow-inner"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-xs text-slate-500 italic">
|
|
||||||
Mit dem Klick auf „{initialOrder ? 'Anfrage aktualisieren' : 'Kostenpflichtig bestellen'}“ akzeptieren Sie unsere AGB und die{' '}
|
|
||||||
<a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-400">
|
|
||||||
Datenschutzerklärung
|
|
||||||
</a>.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Aktions-Buttons Links */}
|
|
||||||
<div className="space-y-3 pt-2">
|
|
||||||
<Button
|
|
||||||
className="w-full h-14 text-lg font-bold bg-primary hover:bg-primary/90 shadow-[0_0_20px_rgba(59,130,246,0.3)] rounded-xl"
|
|
||||||
onClick={handleSubmit}
|
|
||||||
disabled={isSubmitting}
|
|
||||||
>
|
|
||||||
{isSubmitting ? (
|
|
||||||
initialOrder ? (
|
|
||||||
<><Loader2 className="mr-2 h-5 w-5 animate-spin" /> Anfrage wird aktualisiert...</>
|
|
||||||
) : (
|
) : (
|
||||||
<><Loader2 className="mr-2 h-5 w-5 animate-spin" /> Anfrage wird versendet...</>
|
initialOrder ? 'Anfrage aktualisieren' : 'Kostenpflichtig bestellen'
|
||||||
)
|
)}
|
||||||
) : (
|
</Button>
|
||||||
initialOrder ? 'Anfrage aktualisieren' : 'Kostenpflichtig bestellen'
|
<Button variant="ghost" className="w-full text-slate-400 hover:text-white text-xs h-10" onClick={prevStep}>
|
||||||
)}
|
Noch etwas ändern
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" className="w-full text-slate-400 hover:text-white" onClick={prevStep}>
|
</div>
|
||||||
Noch etwas ändern
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* RECHTER BEREICH: Eigenständig scrollbare Zusammenfassung der Anfrage */}
|
{/* RECHTER BEREICH: Eigenständig scrollbare Zusammenfassung der Anfrage */}
|
||||||
<div className="lg:col-span-7">
|
<div className="lg:col-span-7 flex flex-col h-full overflow-hidden pl-4">
|
||||||
<Card className="glass-dark border-primary/30 shadow-primary/10 shadow-2xl overflow-hidden rounded-2xl flex flex-col max-h-[calc(100vh-6rem)]">
|
<Card className="glass-dark border-white/10 shadow-2xl overflow-hidden rounded-2xl flex flex-col h-full">
|
||||||
<CardHeader className="shrink-0 border-b border-white/10 pb-4">
|
<CardHeader className="shrink-0 border-b border-white/5 pb-4">
|
||||||
<CardTitle className="text-xl text-white flex items-center justify-between">
|
<CardTitle className="text-lg text-white flex items-center justify-between font-bold">
|
||||||
<span>Zusammenfassung der Positionen</span>
|
<span>Zusammenfassung der Positionen</span>
|
||||||
<span className="text-xs font-normal text-sky-400 bg-sky-500/10 px-3 py-1 rounded-full border border-sky-500/20">
|
<Badge className="bg-primary/20 text-primary border border-primary/30 text-xs rounded-full">
|
||||||
{finalItemsToShow.length} {finalItemsToShow.length === 1 ? 'Kasse' : 'Kassen'}
|
{finalItemsToShow.length} {finalItemsToShow.length === 1 ? 'Kasse' : 'Kassen'}
|
||||||
</span>
|
</Badge>
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|
||||||
{/* Scrollbarer Content der Aufschlüsselung */}
|
{/* Scrollbarer Content der Aufschlüsselung */}
|
||||||
<CardContent className="space-y-6 text-left flex-1 overflow-y-auto pt-6 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent pr-2">
|
<CardContent className="space-y-6 text-left flex-1 overflow-y-auto pt-6 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent pr-2">
|
||||||
<div className="p-4 rounded-xl bg-white/5 space-y-6">
|
<div className="space-y-6">
|
||||||
{finalItemsToShow.map((item, itemIdx) => (
|
{finalItemsToShow.map((item, itemIdx) => (
|
||||||
<div key={itemIdx} className="space-y-3 border-b border-white/10 pb-4 last:border-0 last:pb-0">
|
<div key={itemIdx} className="space-y-3 border-b border-white/5 pb-5 last:border-0 last:pb-0">
|
||||||
<div className="flex justify-between items-center bg-white/5 p-2.5 rounded-lg border border-white/5">
|
<div className="flex justify-between items-center bg-white/5 p-3 rounded-xl border border-white/10">
|
||||||
<span className="text-white font-bold text-sm">Kasse: {item.deviceName}</span>
|
<span className="text-white font-bold text-sm">Kasse: {item.deviceName}</span>
|
||||||
<span className="text-xs text-sky-400 font-semibold uppercase px-2 py-0.5 rounded bg-sky-500/10 border border-sky-500/20">
|
<span className={`text-[10px] px-2 py-0.5 rounded border ${item.billingInterval === 'one_time' ? 'border-amber-500/30 text-amber-400 bg-amber-500/10' : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'} font-semibold uppercase`}>
|
||||||
{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
|
{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -185,8 +222,8 @@ export function StepSummary({
|
|||||||
const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0
|
const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={cat.id} className="text-sm space-y-1.5 pl-2">
|
<div key={cat.id} className="text-sm space-y-2 pl-2">
|
||||||
<span className="text-slate-400 text-xs font-semibold uppercase tracking-wider block">{cat.name}:</span>
|
<span className="text-slate-500 text-[10px] font-bold uppercase tracking-wider block">{cat.name}:</span>
|
||||||
{sortedProds.map((prod, idx) => {
|
{sortedProds.map((prod, idx) => {
|
||||||
const isFree = idx < freeLimit
|
const isFree = idx < freeLimit
|
||||||
const isAbo = item.billingInterval === 'monthly'
|
const isAbo = item.billingInterval === 'monthly'
|
||||||
@@ -196,9 +233,9 @@ export function StepSummary({
|
|||||||
<span className="flex items-center gap-1.5">
|
<span className="flex items-center gap-1.5">
|
||||||
<CategoryIcon icon={cat.icon} className="w-3.5 h-3.5 text-primary shrink-0" />
|
<CategoryIcon icon={cat.icon} className="w-3.5 h-3.5 text-primary shrink-0" />
|
||||||
{prod.name}
|
{prod.name}
|
||||||
{isFree && <span className="text-[10px] bg-green-500/20 text-green-400 px-1.5 py-0.5 rounded border border-green-500/30">Inklusive</span>}
|
{isFree && <span className="text-[9px] bg-green-500/20 text-green-400 px-1.5 py-0.5 rounded border border-green-500/30 font-bold uppercase">Inklusive</span>}
|
||||||
</span>
|
</span>
|
||||||
<span className="font-mono text-xs">
|
<span className="font-bold text-xs text-white">
|
||||||
{isFree ? '0,00 €' : new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(displayPrice)}
|
{isFree ? '0,00 €' : new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(displayPrice)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -207,7 +244,7 @@ export function StepSummary({
|
|||||||
|
|
||||||
{/* Selected Modules */}
|
{/* Selected Modules */}
|
||||||
{sel?.moduleIds && sel.moduleIds.length > 0 && (
|
{sel?.moduleIds && sel.moduleIds.length > 0 && (
|
||||||
<div className="pl-4 space-y-1 pt-1">
|
<div className="pl-4 space-y-1.5 pt-1">
|
||||||
{sel.moduleIds.map((mId: string) => {
|
{sel.moduleIds.map((mId: string) => {
|
||||||
let modObj: any = null
|
let modObj: any = null
|
||||||
products.forEach(p => {
|
products.forEach(p => {
|
||||||
@@ -224,7 +261,7 @@ export function StepSummary({
|
|||||||
return (
|
return (
|
||||||
<div key={mId} className="flex justify-between text-slate-400 text-xs">
|
<div key={mId} className="flex justify-between text-slate-400 text-xs">
|
||||||
<span>+ {modObj.name} {qty > 1 ? `(${qty}x)` : ''}</span>
|
<span>+ {modObj.name} {qty > 1 ? `(${qty}x)` : ''}</span>
|
||||||
<span className="font-mono">
|
<span className="font-semibold text-slate-300">
|
||||||
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalPrice)}
|
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalPrice)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -240,12 +277,12 @@ export function StepSummary({
|
|||||||
|
|
||||||
{/* Gebühren & Zusatz-Positionen */}
|
{/* Gebühren & Zusatz-Positionen */}
|
||||||
{linkedFeeProducts.length > 0 && (
|
{linkedFeeProducts.length > 0 && (
|
||||||
<div className="border-t border-white/10 pt-3 space-y-2">
|
<div className="border-t border-white/5 pt-4 space-y-2">
|
||||||
<span className="text-slate-400 text-xs font-semibold uppercase tracking-wider block">Service & Gebühren:</span>
|
<span className="text-slate-500 text-[10px] font-bold uppercase tracking-wider block">Service & Gebühren:</span>
|
||||||
{linkedFeeProducts.map(fp => (
|
{linkedFeeProducts.map(fp => (
|
||||||
<div key={fp.id} className="flex justify-between text-xs text-slate-300">
|
<div key={fp.id} className="flex justify-between text-xs text-slate-300">
|
||||||
<span>{fp.name}</span>
|
<span>{fp.name}</span>
|
||||||
<span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(fp.base_price)}</span>
|
<span className="font-bold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(fp.base_price)}</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -254,38 +291,38 @@ export function StepSummary({
|
|||||||
|
|
||||||
{/* Summen-Berechnung */}
|
{/* Summen-Berechnung */}
|
||||||
{oneTimeTotal > 0 ? (
|
{oneTimeTotal > 0 ? (
|
||||||
<div className="space-y-1.5 border-t border-white/10 pt-4">
|
<div className="space-y-2 border-t border-white/10 pt-5">
|
||||||
<div className="flex justify-between text-sm text-slate-400">
|
<div className="flex justify-between text-xs text-slate-400">
|
||||||
<span>Netto-Gesamtbetrag:</span>
|
<span>Netto-Gesamtbetrag:</span>
|
||||||
<span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
|
<span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between text-sm text-slate-400">
|
<div className="flex justify-between text-xs text-slate-400">
|
||||||
<span>zzgl. 19% MwSt.:</span>
|
<span>zzgl. 19% MwSt.:</span>
|
||||||
<span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
|
<span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
|
||||||
</div>
|
</div>
|
||||||
{updatePriceModifier.label && (
|
{updatePriceModifier.label && (
|
||||||
<div className="text-sm text-green-400 font-semibold bg-green-500/10 p-2 rounded border border-green-500/20 my-1">
|
<div className="text-xs text-green-400 font-semibold bg-green-500/10 p-2.5 rounded-xl border border-green-500/20 my-1">
|
||||||
{updatePriceModifier.label}
|
{updatePriceModifier.label}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="flex justify-between text-lg font-bold text-sky-400 pt-2 border-t border-white/5">
|
<div className="flex justify-between text-base font-bold text-primary pt-3 border-t border-white/5">
|
||||||
<span>Gesamtbetrag (brutto):</span>
|
<span>Gesamtbetrag (brutto):</span>
|
||||||
<span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
|
<span className="font-bold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="space-y-1.5 border-t border-white/10 pt-4">
|
<div className="space-y-2 border-t border-white/10 pt-5">
|
||||||
<div className="flex justify-between text-sm text-slate-400">
|
<div className="flex justify-between text-xs text-slate-400">
|
||||||
<span>Netto-Gesamtbetrag:</span>
|
<span>Netto-Gesamtbetrag:</span>
|
||||||
<span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
|
<span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between text-sm text-slate-400">
|
<div className="flex justify-between text-xs text-slate-400">
|
||||||
<span>zzgl. 19% MwSt.:</span>
|
<span>zzgl. 19% MwSt.:</span>
|
||||||
<span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
|
<span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between text-lg font-bold text-sky-400 pt-2 border-t border-white/5">
|
<div className="flex justify-between text-base font-bold text-primary pt-3 border-t border-white/5">
|
||||||
<span>Gesamtbetrag (brutto):</span>
|
<span>Gesamtbetrag (brutto):</span>
|
||||||
<span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
|
<span className="font-bold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -73,164 +73,170 @@ export function SummarySidebar({
|
|||||||
prevStep,
|
prevStep,
|
||||||
}: SummarySidebarProps) {
|
}: SummarySidebarProps) {
|
||||||
return (
|
return (
|
||||||
<div className="sticky top-6">
|
<div className="h-full flex flex-col">
|
||||||
<Card className="bg-[oklch(0.145_0.01_148)]/90 backdrop-blur-md border border-slate-800 shadow-[0_0_30px_rgba(0,0,0,0.5)] rounded-2xl overflow-hidden flex flex-col max-h-[80vh]">
|
<Card className="bg-[oklch(0.145_0.01_148)]/90 backdrop-blur-md border border-slate-800 shadow-[0_0_30px_rgba(0,0,0,0.5)] rounded-2xl overflow-hidden flex flex-col h-full">
|
||||||
<CardHeader className="shrink-0">
|
<CardHeader className="shrink-0">
|
||||||
<CardTitle className="text-white">Zusammenfassung</CardTitle>
|
<CardTitle className="text-white">Zusammenfassung</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4 flex-1 overflow-y-auto subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
|
<CardContent className="p-5 flex-1 flex flex-col overflow-hidden space-y-4">
|
||||||
{visibleCategories.map(cat => {
|
|
||||||
const sel = selections[cat.id]
|
{/* Active Selections & Price Calculation (Fixed) */}
|
||||||
const selectedProds: Product[] = []
|
<div className="space-y-4 shrink-0 overflow-y-auto max-h-[40%] pr-1 scrollbar-thin">
|
||||||
if (cat.allow_multiselect && sel?.productIds) {
|
{visibleCategories.map(cat => {
|
||||||
sel.productIds.forEach(pId => {
|
const sel = selections[cat.id]
|
||||||
const p = products.find(prod => prod.id === pId)
|
const selectedProds: Product[] = []
|
||||||
|
if (cat.allow_multiselect && sel?.productIds) {
|
||||||
|
sel.productIds.forEach(pId => {
|
||||||
|
const p = products.find(prod => prod.id === pId)
|
||||||
|
if (p) selectedProds.push(p)
|
||||||
|
})
|
||||||
|
} else if (sel?.productId) {
|
||||||
|
const p = products.find(prod => prod.id === sel.productId)
|
||||||
if (p) selectedProds.push(p)
|
if (p) selectedProds.push(p)
|
||||||
})
|
}
|
||||||
} else if (sel?.productId) {
|
|
||||||
const p = products.find(prod => prod.id === sel.productId)
|
|
||||||
if (p) selectedProds.push(p)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedProds.length === 0) return (
|
if (selectedProds.length === 0) return (
|
||||||
<div key={cat.id} className="text-xs text-slate-500 italic flex items-center gap-1">
|
<div key={cat.id} className="text-xs text-slate-500 italic flex items-center gap-1">
|
||||||
{cat.is_required ? (
|
{cat.is_required ? (
|
||||||
<AlertCircle className="w-3 h-3 text-destructive" />
|
<AlertCircle className="w-3 h-3 text-destructive" />
|
||||||
) : (
|
) : (
|
||||||
<span className="w-3 h-3 inline-block" />
|
<span className="w-3 h-3 inline-block" />
|
||||||
)}
|
)}
|
||||||
{cat.name}: {cat.is_required ? 'nicht gewählt' : 'nicht gewählt (optional)'}
|
{cat.name}: {cat.is_required ? 'nicht gewählt' : 'nicht gewählt (optional)'}
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
const sortedProds = [...selectedProds].sort((a, b) => a.base_price - b.base_price)
|
|
||||||
const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={cat.id} className="space-y-1">
|
|
||||||
<div className="flex justify-between text-sm">
|
|
||||||
<span className="text-slate-400 font-medium">{cat.name}</span>
|
|
||||||
</div>
|
</div>
|
||||||
{sortedProds.map((prod, idx) => {
|
)
|
||||||
const isFree = idx < freeLimit
|
|
||||||
const actualPrice = isFree ? 0 : prod.base_price
|
const sortedProds = [...selectedProds].sort((a, b) => a.base_price - b.base_price)
|
||||||
return (
|
const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0
|
||||||
<div key={prod.id} className="space-y-0.5 pl-2">
|
|
||||||
<div className="flex justify-between text-sm">
|
return (
|
||||||
<span className="text-white">{prod.name} {isFree && <span className="text-[10px] text-green-400">(Frei)</span>}</span>
|
<div key={cat.id} className="space-y-1">
|
||||||
<span className="text-white">
|
<div className="flex justify-between text-sm">
|
||||||
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(actualPrice)}
|
<span className="text-slate-400 font-medium">{cat.name}</span>
|
||||||
{' '}<span className="text-slate-400 text-xs">{billingLabel(prod.billing_interval)}</span>
|
</div>
|
||||||
</span>
|
{sortedProds.map((prod, idx) => {
|
||||||
|
const isFree = idx < freeLimit
|
||||||
|
const actualPrice = isFree ? 0 : prod.base_price
|
||||||
|
return (
|
||||||
|
<div key={prod.id} className="space-y-0.5 pl-2">
|
||||||
|
<div className="flex justify-between text-sm">
|
||||||
|
<span className="text-white">{prod.name} {isFree && <span className="text-[10px] text-green-400">(Frei)</span>}</span>
|
||||||
|
<span className="text-white">
|
||||||
|
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(actualPrice)}
|
||||||
|
{' '}<span className="text-slate-400 text-xs">{billingLabel(prod.billing_interval)}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{sel.moduleIds.map(mId => {
|
||||||
|
const mod = prod.modules?.find(m => m.id === mId)
|
||||||
|
const qty = moduleQuantities[mId] || 1
|
||||||
|
return mod ? (
|
||||||
|
<div key={mId} className="flex justify-between text-xs pl-2">
|
||||||
|
<span className="text-slate-300">+ {mod.name} {mod.has_quantity ? `(x${qty})` : ''}</span>
|
||||||
|
<span className="text-slate-300">
|
||||||
|
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price * qty)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : null
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
{sel.moduleIds.map(mId => {
|
)
|
||||||
const mod = prod.modules?.find(m => m.id === mId)
|
})}
|
||||||
const qty = moduleQuantities[mId] || 1
|
</div>
|
||||||
return mod ? (
|
)
|
||||||
<div key={mId} className="flex justify-between text-xs pl-2">
|
})}
|
||||||
<span className="text-slate-300">+ {mod.name} {mod.has_quantity ? `(x${qty})` : ''}</span>
|
<Separator className="bg-white/10" />
|
||||||
<span className="text-slate-300">
|
{oneTimeTotal > 0 && monthlyTotal > 0 ? (
|
||||||
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price * qty)}
|
<div className="space-y-3">
|
||||||
</span>
|
<div className="space-y-1">
|
||||||
</div>
|
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Einmalig:</p>
|
||||||
) : null
|
<div className="flex justify-between text-xs text-slate-400">
|
||||||
})}
|
<span>Netto:</span>
|
||||||
</div>
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
|
||||||
)
|
</div>
|
||||||
})}
|
<div className="flex justify-between text-xs text-slate-400">
|
||||||
|
<span>zzgl. 19% MwSt.:</span>
|
||||||
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-sm font-bold text-white">
|
||||||
|
<span>Gesamt (brutto):</span>
|
||||||
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1 pt-2 border-t border-white/10">
|
||||||
|
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Monatlich:</p>
|
||||||
|
<div className="flex justify-between text-xs text-slate-400">
|
||||||
|
<span>Netto:</span>
|
||||||
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-xs text-slate-400">
|
||||||
|
<span>zzgl. 19% MwSt.:</span>
|
||||||
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-sm font-bold text-white">
|
||||||
|
<span>Gesamt (brutto):</span>
|
||||||
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
) : oneTimeTotal > 0 ? (
|
||||||
})}
|
|
||||||
<Separator className="bg-white/10" />
|
|
||||||
{oneTimeTotal > 0 && monthlyTotal > 0 ? (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Einmalig:</p>
|
|
||||||
<div className="flex justify-between text-xs text-slate-400">
|
<div className="flex justify-between text-xs text-slate-400">
|
||||||
<span>Netto:</span>
|
<span>Netto-Gesamtbetrag:</span>
|
||||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between text-xs text-slate-400">
|
<div className="flex justify-between text-xs text-slate-400">
|
||||||
<span>zzgl. 19% MwSt.:</span>
|
<span>zzgl. 19% MwSt.:</span>
|
||||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between text-sm font-bold text-white">
|
<div className="flex justify-between text-base font-bold text-blue-500 dark:text-blue-400">
|
||||||
<span>Gesamt (brutto):</span>
|
<span>Gesamtbetrag (brutto):</span>
|
||||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1 pt-2 border-t border-white/10">
|
) : (
|
||||||
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Monatlich:</p>
|
<div className="space-y-1">
|
||||||
<div className="flex justify-between text-xs text-slate-400">
|
<div className="flex justify-between text-xs text-slate-400">
|
||||||
<span>Netto:</span>
|
<span>Netto-Gesamtbetrag:</span>
|
||||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between text-xs text-slate-400">
|
<div className="flex justify-between text-xs text-slate-400">
|
||||||
<span>zzgl. 19% MwSt.:</span>
|
<span>zzgl. 19% MwSt.:</span>
|
||||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between text-sm font-bold text-white">
|
<div className="flex justify-between text-base font-bold text-blue-500 dark:text-blue-400">
|
||||||
<span>Gesamt (brutto):</span>
|
<span>Gesamtbetrag (brutto):</span>
|
||||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
) : oneTimeTotal > 0 ? (
|
{updatePriceModifier.label && (
|
||||||
<div className="space-y-1">
|
<div className="text-xs text-green-400 bg-green-500/10 p-2.5 rounded-lg border border-green-500/20 space-y-1">
|
||||||
<div className="flex justify-between text-xs text-slate-400">
|
<p className="font-semibold flex items-center gap-1">
|
||||||
<span>Netto-Gesamtbetrag:</span>
|
<Check className="w-3.5 h-3.5" />
|
||||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
|
Update-Rabatt aktiv
|
||||||
|
</p>
|
||||||
|
<p>{updatePriceModifier.label}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between text-xs text-slate-400">
|
)}
|
||||||
<span>zzgl. 19% MwSt.:</span>
|
{!allCategoriesFilled && (
|
||||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
|
<p className="text-xs text-destructive flex items-center gap-1">
|
||||||
</div>
|
<AlertCircle className="w-3 h-3" />
|
||||||
<div className="flex justify-between text-base font-bold text-blue-500 dark:text-blue-400">
|
Bitte aus jeder Pflichtkategorie einen Artikel wählen.
|
||||||
<span>Gesamtbetrag (brutto):</span>
|
|
||||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-1">
|
|
||||||
<div className="flex justify-between text-xs text-slate-400">
|
|
||||||
<span>Netto-Gesamtbetrag:</span>
|
|
||||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between text-xs text-slate-400">
|
|
||||||
<span>zzgl. 19% MwSt.:</span>
|
|
||||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between text-base font-bold text-blue-500 dark:text-blue-400">
|
|
||||||
<span>Gesamtbetrag (brutto):</span>
|
|
||||||
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{updatePriceModifier.label && (
|
|
||||||
<div className="text-xs text-green-400 bg-green-500/10 p-2.5 rounded-lg border border-green-500/20 space-y-1">
|
|
||||||
<p className="font-semibold flex items-center gap-1">
|
|
||||||
<Check className="w-3.5 h-3.5" />
|
|
||||||
Update-Rabatt aktiv
|
|
||||||
</p>
|
</p>
|
||||||
<p>{updatePriceModifier.label}</p>
|
)}
|
||||||
</div>
|
{productValidationErrors.map((err, errIdx) => (
|
||||||
)}
|
<p key={errIdx} className="text-xs text-destructive flex items-center gap-1">
|
||||||
{!allCategoriesFilled && (
|
<AlertCircle className="w-3 h-3 text-destructive" />
|
||||||
<p className="text-xs text-destructive flex items-center gap-1">
|
{err}
|
||||||
<AlertCircle className="w-3 h-3" />
|
</p>
|
||||||
Bitte aus jeder Pflichtkategorie einen Artikel wählen.
|
))}
|
||||||
</p>
|
</div>
|
||||||
)}
|
|
||||||
{productValidationErrors.map((err, errIdx) => (
|
{/* Warenkorb List (Scrollable) */}
|
||||||
<p key={errIdx} className="text-xs text-destructive flex items-center gap-1">
|
|
||||||
<AlertCircle className="w-3 h-3 text-destructive" />
|
|
||||||
{err}
|
|
||||||
</p>
|
|
||||||
))}
|
|
||||||
{basketItems.length > 0 && (
|
{basketItems.length > 0 && (
|
||||||
<div className="pt-4 border-t border-white/10 space-y-2">
|
<div className="flex-1 flex flex-col min-h-0 pt-3 border-t border-white/10 space-y-2 overflow-hidden">
|
||||||
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Warenkorb ({basketItems.length}):</p>
|
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider shrink-0">Warenkorb ({basketItems.length}):</p>
|
||||||
<div className="space-y-1.5">
|
<div className="flex-1 overflow-y-auto pr-1 space-y-1.5 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
|
||||||
{basketItems.map((item, idx) => (
|
{basketItems.map((item, idx) => (
|
||||||
<div key={idx} className={`flex justify-between items-center text-xs bg-white/5 p-2 rounded border transition-all duration-300 ${idx === editingIdx ? 'border-blue-500/50 shadow-[0_0_10px_rgba(59,130,246,0.3)]' : 'border-white/10'}`}>
|
<div key={idx} className={`flex justify-between items-center text-xs bg-white/5 p-2 rounded border transition-all duration-300 ${idx === editingIdx ? 'border-blue-500/50 shadow-[0_0_10px_rgba(59,130,246,0.3)]' : 'border-white/10'}`}>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
|
|||||||
@@ -35,8 +35,23 @@ export async function signIn(email: string, password: string) {
|
|||||||
.from('users')
|
.from('users')
|
||||||
.update({ role: 'gesperrt' })
|
.update({ role: 'gesperrt' })
|
||||||
.eq('email', email)
|
.eq('email', email)
|
||||||
// Notify admin
|
// Notify all admins
|
||||||
await sendLockoutEmail('info@hephex.de')
|
try {
|
||||||
|
const adminClient = createAdminClient()
|
||||||
|
const { data: admins } = await adminClient
|
||||||
|
.from('users')
|
||||||
|
.select('email')
|
||||||
|
.eq('role', 'admin')
|
||||||
|
|
||||||
|
if (admins && admins.length > 0) {
|
||||||
|
const adminEmails = admins.map(a => a.email).filter(Boolean)
|
||||||
|
for (const adminEmail of adminEmails) {
|
||||||
|
await sendLockoutEmail(adminEmail)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (mailError) {
|
||||||
|
console.error('Failed to notify admins of lockout:', mailError)
|
||||||
|
}
|
||||||
return { success: false, error: 'Konto gesperrt nach 5 Fehlversuchen.' }
|
return { success: false, error: 'Konto gesperrt nach 5 Fehlversuchen.' }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -6,6 +6,9 @@ interface EmailDetails {
|
|||||||
totalDetailsHtml: string
|
totalDetailsHtml: string
|
||||||
itemsDetailsText?: string
|
itemsDetailsText?: string
|
||||||
itemsDetailsHtml?: string
|
itemsDetailsHtml?: string
|
||||||
|
partnerCompanyName?: string
|
||||||
|
partnerUserName?: string
|
||||||
|
partnerUserEmail?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getOrderEmailTemplate(
|
export function getOrderEmailTemplate(
|
||||||
@@ -18,7 +21,47 @@ export function getOrderEmailTemplate(
|
|||||||
? `Deine Anfrage ${details.orderNumber} wurde aktualisiert.`
|
? `Deine Anfrage ${details.orderNumber} wurde aktualisiert.`
|
||||||
: `Deine Anfrage ${details.orderNumber} ist bei uns eingegangen und wird bearbeitet.`
|
: `Deine Anfrage ${details.orderNumber} ist bei uns eingegangen und wird bearbeitet.`
|
||||||
|
|
||||||
const text = `Hallo,\n\n${isUpdate ? 'Deine Anfrage wurde aktualisiert.' : 'Deine Anfrage ist bei uns eingegangen.'}\n\nDetails:\n- Nummer: ${details.orderNumber}\n- Datum: ${details.formattedDate}\n- Kunde: ${details.customerCompanyName}\n${details.itemsDetailsText || ''}\n${details.totalDetailsText}\n\nDeine Anfragebestätigung findest du im Anhang als PDF.\n\nPDF-Link: ${siteUrl}/api/orders/${details.orderNumber}/download\n\nViele Grüße,\nDein CASPOS Team`
|
let partnerText = ''
|
||||||
|
let partnerHtml = ''
|
||||||
|
if (details.partnerCompanyName || details.partnerUserName || details.partnerUserEmail) {
|
||||||
|
partnerText = `\nPartner-Informationen:`
|
||||||
|
if (details.partnerCompanyName) partnerText += `\n- Firma: ${details.partnerCompanyName}`
|
||||||
|
if (details.partnerUserName) partnerText += `\n- Benutzer: ${details.partnerUserName}`
|
||||||
|
if (details.partnerUserEmail) partnerText += `\n- E-Mail: ${details.partnerUserEmail}`
|
||||||
|
partnerText += `\n`
|
||||||
|
|
||||||
|
partnerHtml = `
|
||||||
|
<tr>
|
||||||
|
<td colspan="2" style="padding: 8px 0; border-top: 1px solid #e2e8f0; font-weight: bold; color: #0f172a;">Partner-Informationen:</td>
|
||||||
|
</tr>
|
||||||
|
`
|
||||||
|
if (details.partnerCompanyName) {
|
||||||
|
partnerHtml += `
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 4px 0; padding-left: 10px; color: #475569; font-weight: bold;">Firma:</td>
|
||||||
|
<td style="padding: 4px 0; color: #475569;">${details.partnerCompanyName}</td>
|
||||||
|
</tr>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
if (details.partnerUserName) {
|
||||||
|
partnerHtml += `
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 4px 0; padding-left: 10px; color: #475569; font-weight: bold;">Benutzer:</td>
|
||||||
|
<td style="padding: 4px 0; color: #475569;">${details.partnerUserName}</td>
|
||||||
|
</tr>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
if (details.partnerUserEmail) {
|
||||||
|
partnerHtml += `
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 4px 0; padding-left: 10px; color: #475569; font-weight: bold;">E-Mail:</td>
|
||||||
|
<td style="padding: 4px 0; color: #475569;">${details.partnerUserEmail}</td>
|
||||||
|
</tr>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const text = `Hallo,\n\n${isUpdate ? 'Deine Anfrage wurde aktualisiert.' : 'Deine Anfrage ist bei uns eingegangen.'}\n\nDetails:\n- Nummer: ${details.orderNumber}\n- Datum: ${details.formattedDate}\n- Kunde: ${details.customerCompanyName}\n${partnerText}${details.itemsDetailsText || ''}\n${details.totalDetailsText}\n\nDeine Anfragebestätigung findest du im Anhang als PDF.\n\nPDF-Link: ${siteUrl}/api/orders/${details.orderNumber}/download\n\nViele Grüße,\nDein CASPOS Team`
|
||||||
|
|
||||||
const html = `
|
const html = `
|
||||||
<div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
|
<div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
|
||||||
@@ -40,6 +83,7 @@ export function getOrderEmailTemplate(
|
|||||||
<td style="padding: 4px 0; font-weight: bold;">Kunde:</td>
|
<td style="padding: 4px 0; font-weight: bold;">Kunde:</td>
|
||||||
<td style="padding: 4px 0;">${details.customerCompanyName}</td>
|
<td style="padding: 4px 0;">${details.customerCompanyName}</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
${partnerHtml}
|
||||||
${details.itemsDetailsHtml || ''}
|
${details.itemsDetailsHtml || ''}
|
||||||
${details.totalDetailsHtml}
|
${details.totalDetailsHtml}
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
@@ -68,7 +68,7 @@ export async function submitOrder(params: {
|
|||||||
// Check if user is assigned to a company or is admin
|
// Check if user is assigned to a company or is admin
|
||||||
const { data: dbUser } = await supabase
|
const { data: dbUser } = await supabase
|
||||||
.from('users')
|
.from('users')
|
||||||
.select('role, company_id')
|
.select('role, company_id, first_name, last_name, email')
|
||||||
.eq('id', user.id)
|
.eq('id', user.id)
|
||||||
.single()
|
.single()
|
||||||
|
|
||||||
@@ -77,6 +77,22 @@ export async function submitOrder(params: {
|
|||||||
throw new Error('Sie müssen einer Firma zugewiesen sein, um eine Anfrage zu erstellen.')
|
throw new Error('Sie müssen einer Firma zugewiesen sein, um eine Anfrage zu erstellen.')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let partnerCompanyName = ''
|
||||||
|
if (dbUser?.company_id) {
|
||||||
|
const { data: comp } = await supabase
|
||||||
|
.from('companies')
|
||||||
|
.select('name')
|
||||||
|
.eq('id', dbUser.company_id)
|
||||||
|
.single()
|
||||||
|
if (comp) {
|
||||||
|
partnerCompanyName = comp.name
|
||||||
|
}
|
||||||
|
} else if (isAdminUser) {
|
||||||
|
partnerCompanyName = 'Administrator / Direktbestellung'
|
||||||
|
}
|
||||||
|
const partnerUserName = dbUser ? [dbUser.first_name, dbUser.last_name].filter(Boolean).join(' ') : ''
|
||||||
|
const partnerUserEmail = dbUser?.email || user.email
|
||||||
|
|
||||||
// Fetch catalog directly from DB to prevent client tampering
|
// Fetch catalog directly from DB to prevent client tampering
|
||||||
const dbProducts = await getProducts()
|
const dbProducts = await getProducts()
|
||||||
const dbCategories = await getCategories()
|
const dbCategories = await getCategories()
|
||||||
@@ -267,7 +283,10 @@ export async function submitOrder(params: {
|
|||||||
totalDetailsText,
|
totalDetailsText,
|
||||||
totalDetailsHtml,
|
totalDetailsHtml,
|
||||||
itemsDetailsText: itemsSection.text,
|
itemsDetailsText: itemsSection.text,
|
||||||
itemsDetailsHtml: itemsSection.html
|
itemsDetailsHtml: itemsSection.html,
|
||||||
|
partnerCompanyName,
|
||||||
|
partnerUserName,
|
||||||
|
partnerUserEmail
|
||||||
}, `${process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'}`, false)
|
}, `${process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'}`, false)
|
||||||
|
|
||||||
await sendMail({
|
await sendMail({
|
||||||
@@ -283,6 +302,37 @@ export async function submitOrder(params: {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Notify all admins
|
||||||
|
try {
|
||||||
|
const adminClient = createAdminClient()
|
||||||
|
const { data: admins } = await adminClient
|
||||||
|
.from('users')
|
||||||
|
.select('email')
|
||||||
|
.eq('role', 'admin')
|
||||||
|
if (admins) {
|
||||||
|
const adminEmails = admins.map((a: any) => a.email).filter(Boolean)
|
||||||
|
for (const adminEmail of adminEmails) {
|
||||||
|
if (adminEmail !== user.email) {
|
||||||
|
await sendMail({
|
||||||
|
to: adminEmail,
|
||||||
|
subject: `[Admin-Kopie] Anfragebestätigung ${orderNumber}`,
|
||||||
|
text: emailTemplate.text,
|
||||||
|
html: emailTemplate.html,
|
||||||
|
attachments: [
|
||||||
|
{
|
||||||
|
filename: `Anfragebestaetigung_${orderNumber}.pdf`,
|
||||||
|
content: buffer,
|
||||||
|
contentType: 'application/pdf',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (adminMailError) {
|
||||||
|
console.error('Failed to notify admins of new order:', adminMailError)
|
||||||
|
}
|
||||||
} catch (mailError) {
|
} catch (mailError) {
|
||||||
console.error('Failed to send order confirmation mail:', mailError)
|
console.error('Failed to send order confirmation mail:', mailError)
|
||||||
}
|
}
|
||||||
@@ -407,6 +457,29 @@ export async function updateOrderStatus(
|
|||||||
}
|
}
|
||||||
|
|
||||||
await sendMail(mailOptions)
|
await sendMail(mailOptions)
|
||||||
|
|
||||||
|
// Notify admins
|
||||||
|
try {
|
||||||
|
const adminClient = createAdminClient()
|
||||||
|
const { data: admins } = await adminClient
|
||||||
|
.from('users')
|
||||||
|
.select('email')
|
||||||
|
.eq('role', 'admin')
|
||||||
|
if (admins) {
|
||||||
|
const adminEmails = admins.map((a: any) => a.email).filter(Boolean)
|
||||||
|
for (const adminEmail of adminEmails) {
|
||||||
|
if (adminEmail !== user.email) {
|
||||||
|
await sendMail({
|
||||||
|
...mailOptions,
|
||||||
|
to: adminEmail,
|
||||||
|
subject: `[Admin-Kopie] Statusänderung Ihrer Anfrage ${orderNumber}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (adminMailError) {
|
||||||
|
console.error('Failed to notify admins of status update:', adminMailError)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} catch (mailError) {
|
} catch (mailError) {
|
||||||
console.error('Failed to send status update email:', mailError)
|
console.error('Failed to send status update email:', mailError)
|
||||||
@@ -545,6 +618,30 @@ export async function rejectOrder(
|
|||||||
text: statusEmail.text,
|
text: statusEmail.text,
|
||||||
html: statusEmail.html
|
html: statusEmail.html
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Notify admins
|
||||||
|
try {
|
||||||
|
const adminClient = createAdminClient()
|
||||||
|
const { data: admins } = await adminClient
|
||||||
|
.from('users')
|
||||||
|
.select('email')
|
||||||
|
.eq('role', 'admin')
|
||||||
|
if (admins) {
|
||||||
|
const adminEmails = admins.map((a: any) => a.email).filter(Boolean)
|
||||||
|
for (const adminEmail of adminEmails) {
|
||||||
|
if (adminEmail !== orderUser.email) {
|
||||||
|
await sendMail({
|
||||||
|
to: adminEmail,
|
||||||
|
subject: `[Admin-Kopie] Anfrage abgelehnt: ${orderNumber}`,
|
||||||
|
text: statusEmail.text,
|
||||||
|
html: statusEmail.html
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (adminMailError) {
|
||||||
|
console.error('Failed to notify admins of order rejection:', adminMailError)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} catch (mailError) {
|
} catch (mailError) {
|
||||||
console.error('Failed to send rejection email:', mailError)
|
console.error('Failed to send rejection email:', mailError)
|
||||||
@@ -772,6 +869,32 @@ export async function updateOrder(
|
|||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Load partner details for update email
|
||||||
|
let partnerCompanyName = ''
|
||||||
|
let partnerUserName = ''
|
||||||
|
let partnerUserEmail = ''
|
||||||
|
if (order?.user_id) {
|
||||||
|
const { data: orderDbUser } = await supabase
|
||||||
|
.from('users')
|
||||||
|
.select('first_name, last_name, email, company_id')
|
||||||
|
.eq('id', order.user_id)
|
||||||
|
.single()
|
||||||
|
if (orderDbUser) {
|
||||||
|
partnerUserName = [orderDbUser.first_name, orderDbUser.last_name].filter(Boolean).join(' ')
|
||||||
|
partnerUserEmail = orderDbUser.email || ''
|
||||||
|
if (orderDbUser.company_id) {
|
||||||
|
const { data: comp } = await supabase
|
||||||
|
.from('companies')
|
||||||
|
.select('name')
|
||||||
|
.eq('id', orderDbUser.company_id)
|
||||||
|
.single()
|
||||||
|
if (comp) {
|
||||||
|
partnerCompanyName = comp.name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const itemsSection = buildEmailItemsSection(items)
|
const itemsSection = buildEmailItemsSection(items)
|
||||||
|
|
||||||
const emailTemplate = getOrderEmailTemplate({
|
const emailTemplate = getOrderEmailTemplate({
|
||||||
@@ -781,7 +904,10 @@ export async function updateOrder(
|
|||||||
totalDetailsText,
|
totalDetailsText,
|
||||||
totalDetailsHtml,
|
totalDetailsHtml,
|
||||||
itemsDetailsText: itemsSection.text,
|
itemsDetailsText: itemsSection.text,
|
||||||
itemsDetailsHtml: itemsSection.html
|
itemsDetailsHtml: itemsSection.html,
|
||||||
|
partnerCompanyName,
|
||||||
|
partnerUserName,
|
||||||
|
partnerUserEmail
|
||||||
}, `${process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'}`, true)
|
}, `${process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'}`, true)
|
||||||
|
|
||||||
await sendMail({
|
await sendMail({
|
||||||
@@ -797,6 +923,37 @@ export async function updateOrder(
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Notify admins
|
||||||
|
try {
|
||||||
|
const adminClient = createAdminClient()
|
||||||
|
const { data: admins } = await adminClient
|
||||||
|
.from('users')
|
||||||
|
.select('email')
|
||||||
|
.eq('role', 'admin')
|
||||||
|
if (admins) {
|
||||||
|
const adminEmails = admins.map((a: any) => a.email).filter(Boolean)
|
||||||
|
for (const adminEmail of adminEmails) {
|
||||||
|
if (adminEmail !== orderUserEmail) {
|
||||||
|
await sendMail({
|
||||||
|
to: adminEmail,
|
||||||
|
subject: `[Admin-Kopie] Anfrageänderung ${order.order_number}`,
|
||||||
|
text: emailTemplate.text,
|
||||||
|
html: emailTemplate.html,
|
||||||
|
attachments: [
|
||||||
|
{
|
||||||
|
filename: `Anfragebestaetigung_${order.order_number}.pdf`,
|
||||||
|
content: buffer,
|
||||||
|
contentType: 'application/pdf',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (adminMailError) {
|
||||||
|
console.error('Failed to notify admins of order update:', adminMailError)
|
||||||
|
}
|
||||||
} catch (mailError) {
|
} catch (mailError) {
|
||||||
console.error('Failed to send order update confirmation mail:', mailError)
|
console.error('Failed to send order update confirmation mail:', mailError)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user