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

refactor(wizard): optimize ui ux with no-page-scroll and hub flow
All checks were successful
Staging Build / build (push) Successful in 3m16s
Details

Browse Source
This commit is contained in:
DanielS
2026-09-07 22:26:13 +02:00
parent 2a1897141e
commit 694e8dfbc1
6 changed files with 1523 additions and 1022 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
shop/components/wizard/step-software.tsx
View File

@@ -2,13 +2,13 @@
import React from 'react'
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Checkbox } from '@/components/ui/checkbox'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { ShoppingCart, Check, AlertCircle, Lock } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { ShoppingCart, Check, AlertCircle, Lock, X, Info } from 'lucide-react'
import * as Icons from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'
import { Category, Product, CategorySelection } from '@/lib/types'
@@ -30,6 +30,8 @@ interface StepSoftwareProps {
existingModuleIds?: string[]
activeCategoryId: string | null
editingDeviceName?: string | null
onCancelEdit?: () => void
productValidationErrors?: string[]
}
export function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
@@ -54,6 +56,8 @@ export function StepSoftware({
existingModuleIds = [],
activeCategoryId,
editingDeviceName = null,
onCancelEdit,
productValidationErrors = [],
}: StepSoftwareProps) {
const currentCategory = visibleCategories.find(c => c.id === activeCategoryId) ?? visibleCategories[0] ?? null
@@ -69,24 +73,46 @@ export function StepSoftware({
const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null
return (
<Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl">
<CardHeader className="border-b border-white/5 pb-4">
<CardTitle className="text-xl flex items-center justify-between gap-2 text-white font-bold flex-wrap">
<div className="flex items-center gap-2">
<ShoppingCart className="w-5 h-5 text-primary" />
<span>Optionen wählen</span>
<Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl overflow-hidden">
{/* ─── FIXED CARD HEADER ─── */}
<CardHeader className="border-b border-white/10 pb-3 pt-4 px-5 shrink-0 bg-slate-950/40">
<div className="flex items-center justify-between gap-3 flex-wrap">
<div className="flex items-center gap-2.5">
<div className="p-2 rounded-xl bg-primary/20 text-primary border border-primary/30">
<ShoppingCart className="w-4 h-4" />
</div>
<div>
<CardTitle className="text-base font-bold text-white">
{currentCategory.name}
</CardTitle>
<CardDescription className="text-xs text-slate-400 mt-0.5">
{currentCategory.description || 'Passen Sie die Konfiguration für diese Kategorie an.'}
</CardDescription>
</div>
</div>
{editingDeviceName && (
<Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30 text-xs font-bold gap-1 px-2.5 py-1 rounded-lg animate-pulse shrink-0">
✏️ Bearbeite Kasse: &quot;{editingDeviceName}&quot;
</Badge>
<div className="flex items-center gap-2">
<Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30 text-xs font-bold gap-1.5 px-3 py-1 rounded-lg animate-pulse shrink-0">
✏️ Bearbeite Kasse: &quot;{editingDeviceName}&quot;
</Badge>
{onCancelEdit && (
<Button
size="sm"
variant="ghost"
onClick={onCancelEdit}
className="h-7 text-xs text-slate-400 hover:text-white hover:bg-white/10 px-2"
>
<X className="w-3.5 h-3.5 mr-1" /> Neuer Entwurf
</Button>
)}
</div>
)}
</CardTitle>
<CardDescription className="text-slate-400">
Passen Sie die Konfiguration für {currentCategory.name} an.
</CardDescription>
</div>
</CardHeader>
<CardContent className="flex-1 pt-6 space-y-6">
{/* ─── CONTENT AREA (Inherits scrolling from parent, no nested double scrollbar) ─── */}
<CardContent className="p-5 space-y-5">
<AnimatePresence mode="wait">
<motion.div
key={currentCategory.id}
@@ -94,49 +120,49 @@ export function StepSoftware({
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
transition={{ duration: 0.2 }}
className="space-y-6"
className="space-y-5"
>
{/* Category header */}
{/* Category selection status header */}
{(() => {
const isMissingRequired = currentCategory.is_required && !sel?.productId && (!sel?.productIds || sel.productIds.length === 0)
return (
<div className={`flex items-center gap-3 p-4 rounded-xl border transition-all ${
<div className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all ${
isMissingRequired
? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
: 'bg-white/5 border-white/10'
}`}>
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
<div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${
isMissingRequired ? 'bg-red-500/20 text-red-400' : 'bg-primary/20 text-primary'
}`}>
<CategoryIcon icon={currentCategory.icon} className="w-4 h-4" />
</div>
<div>
<h3 className="font-bold text-white text-sm flex items-center gap-2">
{currentCategory.name}
<div className="min-w-0 flex-1">
<h3 className="font-bold text-white text-xs flex items-center gap-2 flex-wrap">
<span>{currentCategory.name}</span>
{isMissingRequired && (
<span className="text-[10px] bg-red-500/20 text-red-400 border border-red-500/40 px-2 py-0.5 rounded-full font-extrabold animate-pulse tracking-wider">
PFLICHTFELD AUSWÄHLEN!
</span>
)}
</h3>
{currentCategory.description && (
<p className="text-slate-400 text-xs mt-0.5">{currentCategory.description}</p>
)}
<p className="text-slate-400 text-[11px] mt-0.5">
{currentCategory.allow_multiselect ? 'Mehrfachauswahl möglich' : 'Einzelauswahl'}
</p>
</div>
{sel?.productIds && sel.productIds.length > 0 ? (
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full">
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full shrink-0">
<Check className="w-3 h-3 mr-1" /> {sel.productIds.length} Ausgewählt
</Badge>
) : sel?.productId ? (
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full">
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full shrink-0">
<Check className="w-3 h-3 mr-1" /> Ausgewählt
</Badge>
) : currentCategory.is_required ? (
<Badge variant="destructive" className="ml-auto opacity-90 text-xs rounded-full bg-red-500/30 text-red-400 border border-red-500/50 animate-pulse font-extrabold">
<Badge variant="destructive" className="ml-auto opacity-90 text-xs rounded-full bg-red-500/30 text-red-400 border border-red-500/50 animate-pulse font-extrabold shrink-0">
<AlertCircle className="w-3 h-3 mr-1 text-red-400" /> Bitte auswählen!
</Badge>
) : (
<Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-xs rounded-full bg-white/5">
<Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-xs rounded-full bg-white/5 shrink-0">
Optional
</Badge>
)}
@@ -144,12 +170,13 @@ export function StepSoftware({
)
})()}
{/* Products List */}
{catProducts.length === 0 ? (
<p className="text-slate-500 text-sm italic">
<p className="text-slate-500 text-xs italic p-4 bg-white/5 rounded-xl border border-white/5 text-center">
Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
</p>
) : currentCategory.allow_multiselect ? (
<div className="grid gap-3">
<div className="grid gap-2.5">
{catProducts.map(product => {
const isChecked = sel?.productIds?.includes(product.id) ?? false
const disabled = isProductDisabled(product, currentCategory.id)
@@ -157,27 +184,27 @@ export function StepSoftware({
<div key={product.id} className="relative">
<Label
onClick={() => !disabled && selectProduct(currentCategory.id, product.id)}
className={`flex flex-col items-start p-4 rounded-xl border transition-all ${disabled
className={`flex flex-col items-start p-3.5 rounded-xl border transition-all ${disabled
? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
: isChecked
? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.1)]'
? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40'
: 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
}`}
>
<div className="flex justify-between w-full items-center">
<div className="flex items-center gap-3">
<div className="flex items-center gap-2.5">
<Checkbox
checked={isChecked}
disabled={disabled}
onCheckedChange={() => { }}
className="border-white/20 data-[state=checked]:bg-primary rounded"
/>
<span className="font-bold text-sm text-white">{product.name}</span>
<span className="font-bold text-xs text-white">{product.name}</span>
<span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
</span>
</div>
<span className="text-primary font-bold text-sm">
<span className="text-primary font-bold text-xs">
{new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
@@ -186,10 +213,10 @@ export function StepSoftware({
</span>
</div>
{product.description && (
<span className="text-xs text-slate-400 mt-2 pl-7 font-normal leading-relaxed">{product.description}</span>
<span className="text-[11px] text-slate-400 mt-1.5 pl-6 font-normal leading-relaxed">{product.description}</span>
)}
{product.modules && product.modules.length > 0 && (
<span className="text-[10px] text-slate-500 mt-1 pl-7 font-normal">
<span className="text-[10px] text-slate-500 mt-1 pl-6 font-normal">
{product.modules.length} optionale Module verfügbar
</span>
)}
@@ -202,7 +229,7 @@ export function StepSoftware({
<RadioGroup
value={sel?.productId ?? ''}
onValueChange={id => selectProduct(currentCategory.id, id)}
className="grid gap-3"
className="grid gap-2.5"
>
{catProducts.map(product => {
const disabled = isProductDisabled(product, currentCategory.id)
@@ -217,21 +244,21 @@ export function StepSoftware({
/>
<Label
htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
className={`flex flex-col items-start p-4 rounded-xl border transition-all ${disabled
className={`flex flex-col items-start p-3.5 rounded-xl border transition-all ${disabled
? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
: isChecked
? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.1)]'
? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40'
: 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
}`}
>
<div className="flex justify-between w-full items-center">
<div className="flex items-center gap-2">
<span className="font-bold text-sm text-white">{product.name}</span>
<div className="flex items-center gap-2.5">
<span className="font-bold text-xs text-white">{product.name}</span>
<span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
</span>
</div>
<span className="text-primary font-bold text-sm">
<span className="text-primary font-bold text-xs">
{new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
@@ -240,7 +267,7 @@ export function StepSoftware({
</span>
</div>
{product.description && (
<span className="text-xs text-slate-400 mt-2 font-normal leading-relaxed">{product.description}</span>
<span className="text-[11px] text-slate-400 mt-1.5 font-normal leading-relaxed">{product.description}</span>
)}
{product.modules && product.modules.length > 0 && (
<span className="text-[10px] text-slate-500 mt-1 font-normal">
@@ -254,14 +281,14 @@ export function StepSoftware({
</RadioGroup>
)}
{/* Modules */}
{/* Modules Section */}
{selectedProduct?.modules && selectedProduct.modules.length > 0 && (
<div className="mt-6 p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
<p className="text-sm font-bold text-white flex items-center gap-2">
<div className="mt-5 p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3.5">
<p className="text-xs font-bold text-white flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-primary" />
Zusatzmodule für {selectedProduct.name}
</p>
<div className="space-y-2.5">
<div className="space-y-2">
{selectedProduct.modules.map(module => {
const isExistingLicense = existingModuleIds.includes(module.id)
const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
@@ -270,13 +297,13 @@ export function StepSoftware({
<div
key={module.id}
title={isExistingLicense ? "Dieses Modul ist auf dieser Kasse bereits aktiv und dauerhaft lizenziert." : undefined}
className={`flex flex-col p-4 rounded-xl border transition-all duration-200 ${
className={`flex flex-col p-3.5 rounded-xl border transition-all duration-200 ${
isExistingLicense
? 'border-primary/20 bg-primary/5 opacity-75'
: disabled
? 'border-white/5 bg-white/5 opacity-40'
: checked
? 'border-primary bg-primary/10 shadow-[0_0_15px_rgba(59,130,246,0.15)] text-white'
? 'border-primary bg-primary/10 shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40 text-white'
: 'border-white/5 bg-white/5 hover:bg-white/10'
}`}
>
@@ -286,12 +313,12 @@ export function StepSoftware({
checked={checked}
onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
disabled={disabled}
className="rounded border-white/20 data-[state=checked]:bg-primary"
className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5"
/>
<div className="flex-1">
<div className="flex-1 min-w-0">
<Label
htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
className={`font-semibold text-sm flex justify-between text-white ${
className={`font-semibold text-xs flex justify-between text-white ${
isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
}`}
>
@@ -303,9 +330,9 @@ export function StepSoftware({
</span>
)}
</span>
<span className="text-primary font-bold text-sm">
<span className="text-primary font-bold text-xs ml-2 shrink-0">
{isExistingLicense ? (
<span className="text-slate-500 text-xs font-normal">inkl.</span>
<span className="text-slate-500 text-[11px] font-normal">inkl.</span>
) : (
<>+{new Intl.NumberFormat('de-DE', {
style: 'currency',
@@ -315,10 +342,10 @@ export function StepSoftware({
</span>
</Label>
{module.description && (
<p className="text-xs text-slate-400 mt-1 leading-relaxed">{module.description}</p>
<p className="text-[11px] text-slate-400 mt-1 leading-relaxed">{module.description}</p>
)}
{!isExistingLicense && disabled && (
<p className="text-[10px] text-red-400 mt-1.5 font-medium flex items-center gap-1">
<p className="text-[10px] text-red-400 mt-1 font-medium flex items-center gap-1">
<AlertCircle className="w-3 h-3 text-red-400 shrink-0" />
{module.requirements?.length && !module.requirements.some(
reqId => sel?.moduleIds.includes(reqId)
@@ -332,8 +359,8 @@ export function StepSoftware({
{/* Scalable Quantity */}
{checked && !isExistingLicense && module.has_quantity && (
<div className="flex items-center gap-3 mt-4 pl-8 pt-3 border-t border-white/5">
<Label htmlFor={`qty-${module.id}`} className="text-xs text-slate-400 font-medium">Menge:</Label>
<div className="flex items-center gap-3 mt-3 pl-7 pt-2.5 border-t border-white/5">
<Label htmlFor={`qty-${module.id}`} className="text-[11px] text-slate-400 font-medium">Menge:</Label>
<Input
id={`qty-${module.id}`}
type="number"
@@ -344,9 +371,9 @@ export function StepSoftware({
const val = Math.max(1, parseInt(e.target.value) || 1)
setModuleQuantities(prev => ({ ...prev, [module.id]: val }))
}}
className="w-16 h-8 bg-white/5 border-white/10 text-white text-xs text-center rounded-lg focus:border-primary focus:ring-1 focus:ring-primary"
className="w-16 h-7 bg-white/5 border-white/10 text-white text-xs text-center rounded-lg focus:border-primary focus:ring-1 focus:ring-primary"
/>
<span className="text-xs text-slate-400">
<span className="text-[11px] text-slate-400">
Gesamt:{' '}
<span className="text-primary font-bold">
{new Intl.NumberFormat('de-DE', {
@@ -363,6 +390,18 @@ export function StepSoftware({
</div>
</div>
)}
{/* Inline Validation Warnings */}
{productValidationErrors.length > 0 && (
<div className="p-3 rounded-xl bg-red-500/10 border border-red-500/30 space-y-1">
{productValidationErrors.map((err, errIdx) => (
<p key={errIdx} className="text-xs text-red-400 flex items-center gap-1.5 font-medium">
<AlertCircle className="w-3.5 h-3.5 shrink-0 text-red-400" />
{err}
</p>
))}
</div>
)}
</motion.div>
</AnimatePresence>
</CardContent>