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

refactor(wizard): compress step 1 and step 2 layout
All checks were successful
Staging Build / build (push) Successful in 3m40s
Details

Browse Source
This commit is contained in:
DanielS
2026-09-07 22:55:16 +02:00
parent 694e8dfbc1
commit 2fc4e50ae1
2 changed files with 225 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
shop/components/wizard/step-customer.tsx
View File

@@ -180,44 +180,44 @@ export function StepCustomer({
<>
<Card className="glass-dark border-white/10 h-[calc(100vh-8.5rem)] flex flex-col overflow-hidden relative">
{/* ─── 1. FIXED HEADER (shrink-0) ─── */}
<CardHeader className="pb-3 pt-4 px-6 shrink-0 border-b border-white/10 bg-slate-950/40 space-y-0">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
<CardHeader className="py-2.5 px-4 shrink-0 border-b border-white/10 bg-slate-950/40 space-y-0">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
<div>
<CardTitle className="text-xl font-bold flex items-center gap-2 text-white">
<User className="w-5 h-5 text-primary" />
<CardTitle className="text-lg font-bold flex items-center gap-2 text-white">
<User className="w-4 h-4 text-primary" />
Für wen bestellen Sie?
</CardTitle>
<CardDescription className="text-xs text-slate-300 mt-0.5">
<CardDescription className="text-[11px] text-slate-300 mt-0.5">
Wählen Sie den Endkunden für die Lizenzierung aus oder legen Sie schnell einen neuen Datensatz an.
</CardDescription>
</div>
<Button
onClick={openDrawer}
size="sm"
className="gap-2 shrink-0 bg-primary hover:bg-primary/90 text-white font-medium shadow-md shadow-primary/20 h-8 text-xs"
className="gap-1.5 shrink-0 bg-primary hover:bg-primary/90 text-white font-medium shadow-md shadow-primary/20 h-8 text-xs"
>
<UserPlus className="w-4 h-4" /> Kunde anlegen
<UserPlus className="w-3.5 h-3.5" /> Kunde anlegen
</Button>
</div>
</CardHeader>
{/* ─── 2. SCROLLABLE MIDDLE CONTENT (flex-1 min-h-0 overflow-hidden) ─── */}
<div className="flex-1 min-h-0 overflow-hidden p-6">
<div className={`h-full ${isAdmin ? 'grid grid-cols-1 lg:grid-cols-2 gap-6 items-stretch' : 'flex flex-col'}`}>
<div className="flex-1 min-h-0 overflow-hidden p-3">
<div className={`h-full ${isAdmin ? 'grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch' : 'flex flex-col'}`}>
{/* ─── 2A. ADMIN PARTNER SELECTION ─── */}
{isAdmin && (
<div className="p-4 rounded-2xl bg-white/5 border border-white/10 flex flex-col h-full overflow-hidden justify-between space-y-3">
<div className="flex items-center justify-between gap-4 flex-wrap shrink-0">
<div className="p-3 rounded-xl bg-white/5 border border-white/10 flex flex-col h-full overflow-hidden justify-between space-y-2">
<div className="flex items-center justify-between gap-2 flex-wrap shrink-0">
<div>
<Label className="text-white font-bold text-sm flex items-center gap-2">
<Building2 className="w-4 h-4 text-primary" />
<Label className="text-white font-bold text-xs flex items-center gap-1.5">
<Building2 className="w-3.5 h-3.5 text-primary" />
Partner-Auswahl (Admin)
</Label>
<p className="text-[11px] text-slate-400 mt-0.5">
<p className="text-[10px] text-slate-400">
Filtert die Kundenliste nach Partner
</p>
</div>
<Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-[10px]">
<Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-[9px] px-1.5 py-0">
Admin Modus
</Badge>
</div>
@@ -225,7 +225,7 @@ export function StepCustomer({
{/* Partner Search & Page Size */}
<div className="flex gap-2 items-center shrink-0">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
<Input
placeholder="Partner suchen..."
value={partnerSearchTerm}
@@ -245,34 +245,34 @@ export function StepCustomer({
</div>
{/* Partner Card List (Scrollable) */}
<div className="space-y-1.5 flex-1 min-h-0 overflow-y-auto pr-1 py-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
<div className="space-y-1.5 flex-1 min-h-0 overflow-y-auto pr-1 py-0.5 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{/* Reserved Fixed Card: Alle Partner */}
<div
onClick={() => {
setSelectedCompanyId('all')
setSelectedEndCustomerId(null)
}}
className={`flex items-center justify-between p-2.5 rounded-xl border cursor-pointer transition-all select-none ${
className={`flex items-center justify-between p-2 rounded-lg border cursor-pointer transition-all select-none ${
selectedCompanyId === 'all' || !selectedCompanyId
? 'border-primary bg-primary/10 shadow-sm shadow-primary/10'
: 'border-white/5 bg-white/5 hover:bg-white/10'
}`}
>
<div className="flex items-center gap-2.5">
<div className="w-7 h-7 rounded-lg bg-primary/20 flex items-center justify-center text-primary font-bold shrink-0">
<Users className="w-3.5 h-3.5" />
<div className="flex items-center gap-2">
<div className="w-6 h-6 rounded-md bg-primary/20 flex items-center justify-center text-primary font-bold shrink-0">
<Users className="w-3 h-3" />
</div>
<div>
<p className="font-semibold text-white text-xs">
<p className="font-semibold text-white text-xs leading-tight">
Alle Partner (Firmenübergreifend)
</p>
<p className="text-[11px] text-slate-400">
<p className="text-[10px] text-slate-400 leading-tight">
{endCustomers.filter((c) => !c.is_anonymized).length} Kunden gesamt
</p>
</div>
</div>
{(selectedCompanyId === 'all' || !selectedCompanyId) && (
<Check className="w-4 h-4 text-primary shrink-0" />
<Check className="w-3.5 h-3.5 text-primary shrink-0" />
)}
</div>
@@ -288,20 +288,20 @@ export function StepCustomer({
setSelectedCompanyId(c.id)
setSelectedEndCustomerId(null)
}}
className={`flex items-center justify-between p-2.5 rounded-xl border cursor-pointer transition-all select-none ${
className={`flex items-center justify-between p-2 rounded-lg border cursor-pointer transition-all select-none ${
isSelected
? 'border-primary bg-primary/10 shadow-sm shadow-primary/10'
: 'border-white/5 bg-white/5 hover:bg-white/10'
}`}
>
<div className="flex items-center gap-2.5 min-w-0">
<div className="w-7 h-7 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-300 font-bold shrink-0">
<Building2 className="w-3.5 h-3.5 text-slate-400" />
<div className="flex items-center gap-2 min-w-0">
<div className="w-6 h-6 rounded-md bg-white/5 border border-white/10 flex items-center justify-center text-slate-300 font-bold shrink-0">
<Building2 className="w-3 h-3 text-slate-400" />
</div>
<div className="min-w-0">
<p className="font-semibold text-white text-xs truncate">{c.name}</p>
<p className="font-semibold text-white text-xs truncate leading-tight">{c.name}</p>
{(c.street || c.zip || c.city) && (
<p className="text-[11px] text-slate-400 truncate">
<p className="text-[10px] text-slate-400 truncate leading-tight">
{[c.street, [c.zip, c.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}
</p>
)}
@@ -311,7 +311,7 @@ export function StepCustomer({
<div className="flex items-center gap-1.5 shrink-0 ml-2">
<Badge
variant="outline"
className={`text-[10px] px-1.5 py-0 ${
className={`text-[9px] px-1.5 py-0 ${
customerCount > 0
? 'border-green-500/30 text-green-400 bg-green-500/10'
: 'border-white/10 text-slate-500 bg-white/5'
@@ -319,21 +319,21 @@ export function StepCustomer({
>
{customerCount}
</Badge>
{isSelected && <Check className="w-4 h-4 text-primary shrink-0" />}
{isSelected && <Check className="w-3.5 h-3.5 text-primary shrink-0" />}
</div>
</div>
)
})}
{filteredCompanies.length === 0 && (
<div className="p-3 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5 my-auto">
<div className="p-2 text-center text-slate-400 text-xs bg-white/5 rounded-lg border border-white/5 my-auto">
Keine Partner gefunden.
</div>
)}
</div>
{/* Partner Pagination Footer */}
<div className="flex items-center justify-between border-t border-white/10 pt-2 text-[11px] text-slate-400 shrink-0">
<div className="flex items-center justify-between border-t border-white/10 pt-1.5 text-[10px] text-slate-400 shrink-0">
<div>
{Math.min(partnerCurrentPage * partnerPageSize, totalPartnerCount)} / {totalPartnerCount} Partner
</div>
@@ -343,20 +343,20 @@ export function StepCustomer({
size="sm"
onClick={() => setPartnerCurrentPage(1)}
disabled={partnerCurrentPage === 1}
className="h-6 px-1.5 text-slate-400 hover:text-white"
className="h-5 px-1 text-slate-400 hover:text-white"
>
<ChevronsLeft className="w-3.5 h-3.5" />
<ChevronsLeft className="w-3 h-3" />
</Button>
<Button
variant="outline"
size="sm"
onClick={() => setPartnerCurrentPage((p) => Math.max(1, p - 1))}
disabled={partnerCurrentPage === 1}
className="h-6 px-2 border-white/10 text-white text-[11px]"
className="h-5 px-1.5 border-white/10 text-white text-[10px]"
>
<ChevronLeft className="w-3 h-3 mr-0.5" /> Zurück
<ChevronLeft className="w-2.5 h-2.5 mr-0.5" /> Zurück
</Button>
<span className="px-1.5 text-slate-300">
<span className="px-1 text-slate-300">
{partnerCurrentPage} / {totalPartnerPages}
</span>
<Button
@@ -364,18 +364,18 @@ export function StepCustomer({
size="sm"
onClick={() => setPartnerCurrentPage((p) => Math.min(totalPartnerPages, p + 1))}
disabled={partnerCurrentPage === totalPartnerPages}
className="h-6 px-2 border-white/10 text-white text-[11px]"
className="h-5 px-1.5 border-white/10 text-white text-[10px]"
>
Vor <ChevronRight className="w-3 h-3 ml-0.5" />
Vor <ChevronRight className="w-2.5 h-2.5 ml-0.5" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => setPartnerCurrentPage(totalPartnerPages)}
disabled={partnerCurrentPage === totalPartnerPages}
className="h-6 px-1.5 text-slate-400 hover:text-white"
className="h-5 px-1 text-slate-400 hover:text-white"
>
<ChevronsRight className="w-3.5 h-3.5" />
<ChevronsRight className="w-3 h-3" />
</Button>
</div>
</div>
@@ -383,14 +383,14 @@ export function StepCustomer({
)}
{/* ─── 2B. CUSTOMER SELECTION LIST (Scrollable Panel) ─── */}
<div className="p-4 rounded-2xl bg-white/5 border border-white/10 flex flex-col h-full overflow-hidden justify-between space-y-3">
<div className="flex items-center justify-between gap-3 shrink-0">
<div className="p-3 rounded-xl bg-white/5 border border-white/10 flex flex-col h-full overflow-hidden justify-between space-y-2">
<div className="flex items-center justify-between gap-2 shrink-0">
<div className="min-w-0">
<Label className="text-white font-bold text-sm flex items-center gap-2">
<User className="w-4 h-4 text-primary" />
<Label className="text-white font-bold text-xs flex items-center gap-1.5">
<User className="w-3.5 h-3.5 text-primary" />
Kunden-Auswahl
</Label>
<p className="text-[11px] text-slate-400 mt-0.5 truncate">
<p className="text-[10px] text-slate-400 truncate">
{isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
? `Partner: "${companies.find((c) => c.id === selectedCompanyId)?.name || selectedCompanyId}"`
: 'Alle Endkunden'}
@@ -408,7 +408,7 @@ export function StepCustomer({
{/* Customer Search */}
<div className="relative shrink-0">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
<Input
placeholder="Kunden suchen nach Name, Ort, PLZ, E-Mail..."
value={searchTerm}
@@ -418,10 +418,10 @@ export function StepCustomer({
</div>
{/* Customer Card List (Isolated Scrollable Area) */}
<div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-2 pb-2 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
<div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-1.5 py-0.5 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{customersByCompany.length === 0 ? (
<div className="p-6 rounded-xl bg-white/5 border border-white/10 text-center space-y-3 my-auto">
<Building2 className="w-8 h-8 text-slate-600 mx-auto" />
<div className="p-4 rounded-xl bg-white/5 border border-white/10 text-center space-y-2 my-auto">
<Building2 className="w-6 h-6 text-slate-600 mx-auto" />
<p className="text-slate-400 text-xs">
{isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
? 'Keine Endkunden für den ausgewählten Partner vorhanden.'
@@ -431,13 +431,13 @@ export function StepCustomer({
variant="outline"
size="sm"
onClick={openDrawer}
className="border-white/10 text-white text-xs h-8"
className="border-white/10 text-white text-xs h-7"
>
<UserPlus className="w-3.5 h-3.5 mr-1.5" /> Ersten Kunden anlegen
<UserPlus className="w-3 h-3 mr-1.5" /> Ersten Kunden anlegen
</Button>
</div>
) : filteredCustomers.length === 0 ? (
<div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5 my-auto">
<div className="p-3 text-center text-slate-400 text-xs bg-white/5 rounded-lg border border-white/5 my-auto">
Keine passenden Kunden für &quot;{searchTerm}&quot; gefunden.
</div>
) : (
@@ -448,7 +448,7 @@ export function StepCustomer({
<div
key={customer.id}
onClick={() => handleSelectCustomer(customer)}
className={`flex items-start p-3 rounded-xl border-2 cursor-pointer transition-all select-none ${
className={`flex items-start p-2 rounded-lg border cursor-pointer transition-all select-none ${
isSelected
? 'border-primary bg-primary/10 shadow-md shadow-primary/5'
: 'border-white/5 bg-white/5 hover:bg-white/10'
@@ -463,29 +463,29 @@ export function StepCustomer({
className="sr-only"
/>
<div className="flex-1 min-w-0 pr-2">
<div className="flex items-center gap-2 flex-wrap">
<p className="font-semibold text-white text-xs truncate">{customer.company_name}</p>
<div className="flex items-center gap-1.5 flex-wrap">
<p className="font-semibold text-white text-xs truncate leading-tight">{customer.company_name}</p>
{isAdmin && customer.partner_id && (
<Badge
variant="outline"
className="text-[9px] px-1.5 py-0 border-white/10 text-slate-400 bg-white/5"
className="text-[9px] px-1 py-0 border-white/10 text-slate-400 bg-white/5 leading-tight"
>
Partner: {companies.find((co) => co.id === customer.partner_id)?.name || customer.partner_id}
</Badge>
)}
</div>
<p className="text-[11px] text-slate-400 mt-0.5 truncate">
<p className="text-[10px] text-slate-400 mt-0.5 truncate leading-tight">
{[customer.first_name, customer.last_name].filter(Boolean).join(' ')}
{customer.first_name || customer.last_name ? ' · ' : ''}
{[customer.street, customer.zip, customer.city].filter(Boolean).join(', ')}
</p>
{customer.email && (
<p className="text-[10px] text-slate-500 mt-0.5 flex items-center gap-1 truncate">
<Mail className="w-3 h-3 shrink-0" /> {customer.email}
<p className="text-[10px] text-slate-500 mt-0.5 flex items-center gap-1 truncate leading-tight">
<Mail className="w-2.5 h-2.5 shrink-0" /> {customer.email}
</p>
)}
</div>
{isSelected && <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />}
{isSelected && <Check className="w-3.5 h-3.5 text-primary shrink-0 mt-0.5" />}
</div>
)
})
@@ -494,19 +494,19 @@ export function StepCustomer({
{/* Customer Pagination */}
{totalCustomerCount > 0 && (
<div className="flex items-center justify-between border-t border-white/10 pt-2 text-[11px] text-slate-400 shrink-0 flex-wrap gap-2">
<div className="flex items-center gap-2">
<div className="flex items-center justify-between border-t border-white/10 pt-1.5 text-[10px] text-slate-400 shrink-0 flex-wrap gap-1.5">
<div className="flex items-center gap-1.5">
<span>
{Math.min(currentPage * pageSize, totalCustomerCount)} / {totalCustomerCount} Kunden
</span>
<select
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
className="h-6 rounded border border-white/10 bg-slate-900 px-1 text-[11px] text-white focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
className="h-5 rounded border border-white/10 bg-slate-900 px-1 text-[10px] text-white focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
>
<option value={10}>10 pro Seite</option>
<option value={20}>20 pro Seite</option>
<option value={50}>50 pro Seite</option>
<option value={10}>10</option>
<option value={20}>20</option>
<option value={50}>50</option>
</select>
</div>
@@ -516,20 +516,20 @@ export function StepCustomer({
size="sm"
onClick={() => setCurrentPage(1)}
disabled={currentPage === 1}
className="h-6 px-1.5 text-slate-400 hover:text-white"
className="h-5 px-1 text-slate-400 hover:text-white"
>
<ChevronsLeft className="w-3.5 h-3.5" />
<ChevronsLeft className="w-3 h-3" />
</Button>
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
disabled={currentPage === 1}
className="h-6 px-2 border-white/10 text-white text-[11px]"
className="h-5 px-1.5 border-white/10 text-white text-[10px]"
>
<ChevronLeft className="w-3 h-3 mr-0.5" /> Zurück
<ChevronLeft className="w-2.5 h-2.5 mr-0.5" /> Zurück
</Button>
<span className="px-1.5 text-slate-300">
<span className="px-1 text-slate-300">
{currentPage} / {totalCustomerPages}
</span>
<Button
@@ -537,18 +537,18 @@ export function StepCustomer({
size="sm"
onClick={() => setCurrentPage((p) => Math.min(totalCustomerPages, p + 1))}
disabled={currentPage === totalCustomerPages}
className="h-6 px-2 border-white/10 text-white text-[11px]"
className="h-5 px-1.5 border-white/10 text-white text-[10px]"
>
Vor <ChevronRight className="w-3 h-3 ml-0.5" />
Vor <ChevronRight className="w-2.5 h-2.5 ml-0.5" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => setCurrentPage(totalCustomerPages)}
disabled={currentPage === totalCustomerPages}
className="h-8 px-1.5 text-slate-400 hover:text-white"
className="h-5 px-1 text-slate-400 hover:text-white"
>
<ChevronsRight className="w-3.5 h-3.5" />
<ChevronsRight className="w-3 h-3" />
</Button>
</div>
</div>
@@ -558,17 +558,17 @@ export function StepCustomer({
</div>
{/* ─── 3. FIXED BOTTOM ACTION BAR (shrink-0) ─── */}
<div className="shrink-0 border-t border-white/10 bg-slate-950/90 backdrop-blur-md px-6 py-3.5 flex flex-col sm:flex-row items-center justify-between gap-3 z-10">
<div className="shrink-0 border-t border-white/10 bg-slate-950/90 backdrop-blur-md px-4 py-2.5 flex flex-col sm:flex-row items-center justify-between gap-2 z-10">
{/* Selected Customer Summary Chip */}
<div className="flex items-center gap-2.5 min-w-0">
<div className="flex items-center gap-2 min-w-0">
{activeCustomer ? (
<div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-primary/10 border border-primary/30 text-white min-w-0">
<CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
<div className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-primary/10 border border-primary/30 text-white min-w-0">
<CheckCircle2 className="w-3.5 h-3.5 text-primary shrink-0" />
<div className="text-xs truncate">
<span className="text-slate-400">Ausgewählt:</span>{' '}
<strong className="text-white font-semibold">{activeCustomer.company_name}</strong>
{(activeCustomer.city || activeCustomer.zip) && (
<span className="text-slate-400 ml-1.5">
<span className="text-slate-400 ml-1">
({[activeCustomer.zip, activeCustomer.city].filter(Boolean).join(' ')})
</span>
)}
@@ -576,7 +576,7 @@ export function StepCustomer({
</div>
) : (
<div className="text-xs text-slate-400 flex items-center gap-1.5">
<User className="w-4 h-4 text-slate-500" />
<User className="w-3.5 h-3.5 text-slate-500" />
<span>Bitte wählen Sie einen Kunden aus, um fortzufahren.</span>
</div>
)}
@@ -586,9 +586,9 @@ export function StepCustomer({
<Button
onClick={nextStep}
disabled={!selectedEndCustomerId}
className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-white font-semibold px-6 shadow-lg shadow-primary/20 h-9 text-xs gap-1.5"
className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-white font-semibold px-5 shadow-md shadow-primary/20 h-8 text-xs gap-1.5"
>
Weiter zu Schritt 2 <ChevronRight className="w-4 h-4" />
Weiter zu Schritt 2 <ChevronRight className="w-3.5 h-3.5" />
</Button>
</div>
</Card>