feat(dashboard): add customer accordion view and extension flow
All checks were successful
Staging Build / build (push) Successful in 3m1s
All checks were successful
Staging Build / build (push) Successful in 3m1s
This commit is contained in:
DanielS
308
shop/components/customer-accordion-list.tsx
Normal file
308
shop/components/customer-accordion-list.tsx
Normal file
@@ -0,0 +1,308 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import type { EndCustomerWithOrders } from '@/lib/types'
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Building2,
|
||||
Edit2,
|
||||
Sparkles,
|
||||
Download,
|
||||
ExternalLink,
|
||||
Plus,
|
||||
Monitor,
|
||||
AlertTriangle,
|
||||
Search,
|
||||
} from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
|
||||
const statusLabel: Record<string, string> = {
|
||||
pending: 'Eingegangen',
|
||||
in_review: 'In Prüfung',
|
||||
active: 'Aktiv',
|
||||
completed: 'Abgeschlossen',
|
||||
cancelled: 'Storniert',
|
||||
rejected: 'Abgelehnt',
|
||||
}
|
||||
|
||||
const statusClass: Record<string, string> = {
|
||||
pending: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
|
||||
in_review: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
|
||||
active: 'bg-green-500/20 text-green-400 border-green-500/30',
|
||||
completed: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
|
||||
cancelled: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
|
||||
rejected: 'bg-rose-500/20 text-rose-400 border-rose-500/30',
|
||||
}
|
||||
|
||||
interface CustomerAccordionListProps {
|
||||
customers: EndCustomerWithOrders[]
|
||||
}
|
||||
|
||||
export function CustomerAccordionList({ customers }: CustomerAccordionListProps) {
|
||||
const [openCustomerIds, setOpenCustomerIds] = useState<Record<string, boolean>>(() => {
|
||||
// Default open all customers with orders
|
||||
const initial: Record<string, boolean> = {}
|
||||
customers.forEach((c) => {
|
||||
initial[c.id] = true
|
||||
})
|
||||
return initial
|
||||
})
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
|
||||
const toggleCustomer = (id: string) => {
|
||||
setOpenCustomerIds((prev) => ({
|
||||
...prev,
|
||||
[id]: !prev[id],
|
||||
}))
|
||||
}
|
||||
|
||||
const filteredCustomers = customers.filter((c) => {
|
||||
const term = searchTerm.toLowerCase()
|
||||
return (
|
||||
c.company_name.toLowerCase().includes(term) ||
|
||||
(c.first_name && c.first_name.toLowerCase().includes(term)) ||
|
||||
(c.last_name && c.last_name.toLowerCase().includes(term)) ||
|
||||
(c.city && c.city.toLowerCase().includes(term)) ||
|
||||
(c.email && c.email.toLowerCase().includes(term))
|
||||
)
|
||||
})
|
||||
|
||||
if (customers.length === 0) {
|
||||
return (
|
||||
<Card className="glass-dark border-white/10">
|
||||
<CardContent className="flex flex-col items-center justify-center py-16 gap-4">
|
||||
<Building2 className="w-12 h-12 text-slate-600" />
|
||||
<p className="text-slate-400 text-lg">Noch keine Endkunden angelegt.</p>
|
||||
<Link href="/my-customers/new">
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" /> Ersten Kunden anlegen
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Suche */}
|
||||
<div className="relative max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Kunden suchen (Firma, Name, Stadt)..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-9 bg-slate-900/50 border-white/10 text-white placeholder:text-slate-500 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Accordion List */}
|
||||
<div className="space-y-4">
|
||||
{filteredCustomers.map((customer) => {
|
||||
const isOpen = !!openCustomerIds[customer.id]
|
||||
const orders = customer.orders || []
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={customer.id}
|
||||
className="glass-dark border-white/10 overflow-hidden transition-all duration-200"
|
||||
>
|
||||
{/* Accordion Header */}
|
||||
<div
|
||||
onClick={() => toggleCustomer(customer.id)}
|
||||
className="p-5 flex items-center justify-between cursor-pointer hover:bg-white/[0.02] transition-colors select-none gap-4 flex-wrap"
|
||||
>
|
||||
<div className="flex items-center gap-4 min-w-[240px]">
|
||||
<div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center text-primary font-bold">
|
||||
<Building2 className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-bold text-lg text-white">{customer.company_name}</h3>
|
||||
{customer.is_anonymized && (
|
||||
<Badge className="bg-red-500/10 text-red-400 border-red-500/20 text-xs gap-1">
|
||||
<AlertTriangle className="w-3 h-3" /> Anonymisiert
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-slate-400">
|
||||
{[customer.first_name, customer.last_name].filter(Boolean).join(' ') || 'Kein Ansprechpartner'}
|
||||
{customer.city ? ` • ${customer.city}` : ''}
|
||||
{customer.email ? ` • ${customer.email}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 ml-auto">
|
||||
<Badge variant="outline" className="border-white/10 text-slate-300 bg-white/5">
|
||||
<Monitor className="w-3.5 h-3.5 mr-1 text-primary" />
|
||||
{orders.length} {orders.length === 1 ? 'Kasse / Bestellung' : 'Kassen / Bestellungen'}
|
||||
</Badge>
|
||||
|
||||
{!customer.is_anonymized && (
|
||||
<Link
|
||||
href={`/my-customers/${customer.id}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-slate-400 hover:text-white hover:bg-white/10 gap-1 text-xs"
|
||||
>
|
||||
<Edit2 className="w-3.5 h-3.5" /> Bearbeiten
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-slate-400 hover:text-white p-1"
|
||||
>
|
||||
{isOpen ? <ChevronUp className="w-5 h-5" /> : <ChevronDown className="w-5 h-5" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accordion Content (Kassen/Orders) */}
|
||||
{isOpen && (
|
||||
<div className="border-t border-white/5 bg-slate-950/40 p-5 space-y-3">
|
||||
{orders.length === 0 ? (
|
||||
<div className="text-slate-500 text-sm py-4 text-center">
|
||||
Keine Kassen oder Bestellungen für diesen Kunden vorhanden.
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs uppercase tracking-wider text-slate-400 font-semibold mb-2">
|
||||
Zugeordnete Kassen & Systeme ({orders.length})
|
||||
</p>
|
||||
{orders.map((order) => {
|
||||
const items = order.order_data?.items || []
|
||||
|
||||
return (
|
||||
<div
|
||||
key={order.id}
|
||||
className="p-4 rounded-xl bg-slate-900/60 border border-white/10 hover:border-white/20 transition-all flex flex-col md:flex-row md:items-center justify-between gap-4"
|
||||
>
|
||||
{/* Kassen Info */}
|
||||
<div className="space-y-1 min-w-[200px]">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-bold text-white text-base">
|
||||
{order.register_name}
|
||||
</span>
|
||||
<Badge
|
||||
className={`text-xs ${
|
||||
statusClass[order.status] ?? 'bg-slate-500/20 text-slate-300'
|
||||
}`}
|
||||
>
|
||||
{statusLabel[order.status] ?? order.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 font-mono">
|
||||
#{order.order_number} • Erstellt am{' '}
|
||||
{new Date(order.created_at).toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</p>
|
||||
|
||||
{/* Module / Produkte summary */}
|
||||
{items.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 pt-1">
|
||||
{items.map((item, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="text-xs bg-white/5 border border-white/10 rounded-md px-2 py-0.5 text-slate-300"
|
||||
>
|
||||
{item.product_name}
|
||||
{item.selected_modules?.length > 0 && (
|
||||
<span className="text-slate-500 ml-1">
|
||||
(+{item.selected_modules.length} Module)
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Preis & Action Buttons */}
|
||||
<div className="flex items-center gap-3 flex-wrap justify-between md:justify-end border-t md:border-t-0 pt-3 md:pt-0 border-white/5">
|
||||
<div className="text-left md:text-right mr-2">
|
||||
<p className="text-[10px] text-slate-500 uppercase tracking-wider">
|
||||
Gesamtwert
|
||||
</p>
|
||||
<p className="font-bold text-white text-sm">
|
||||
{new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(order.total_price)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Upgrade / Abo Button (Flow Fall B) */}
|
||||
<Link
|
||||
href={`/wizard?mode=extension&orderId=${order.id}`}
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-primary/20 hover:bg-primary/30 text-primary border border-primary/30 text-xs font-semibold gap-1.5"
|
||||
>
|
||||
<Sparkles className="w-3.5 h-3.5" />
|
||||
Upgrade / Abo
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
{/* PDF Download Button */}
|
||||
{order.pdf_url && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
asChild
|
||||
className="border-white/10 hover:bg-white/10 text-xs text-slate-300"
|
||||
>
|
||||
<a
|
||||
href={`/api/orders/${order.id}/download`}
|
||||
download
|
||||
title="Bestellbestätigung PDF herunterladen"
|
||||
>
|
||||
<Download className="w-3.5 h-3.5 mr-1" />
|
||||
PDF
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Details Button */}
|
||||
<Link href={`/order/success?id=${order.id}`}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-slate-400 hover:text-white text-xs p-2"
|
||||
title="Details anzeigen"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user