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

style(my-orders): refine order view with end-customer badges, structured device cards, notes and smart search

Browse Source
This commit is contained in:
DanielS
2026-08-11 23:30:05 +02:00
parent 5561dfa708
commit 16ca9611d7
1 changed files with 147 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
shop/app/my-orders/MyOrdersClient.tsx
View File

@@ -2,7 +2,7 @@
import React, { useState, useMemo } from 'react' import React, { useState, useMemo } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { Download, ExternalLink, ShoppingBag, ArrowLeft, Package, Search, ChevronLeft, ChevronRight } from 'lucide-react' import { Download, ExternalLink, ShoppingBag, ArrowLeft, Package, Search, ChevronLeft, ChevronRight, Building2, Monitor, RefreshCw, FileText } from 'lucide-react'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card' import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
@@ -35,24 +35,38 @@ export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
const [currentPage, setCurrentPage] = useState(1) const [currentPage, setCurrentPage] = useState(1)
const pageSize = 10 const pageSize = 10
const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
// Volltextsuche filtern // Volltextsuche filtern
const filteredOrders = useMemo(() => { const filteredOrders = useMemo(() => {
const term = searchTerm.toLowerCase().trim() const term = searchTerm.toLowerCase().trim()
if (!term) return orders if (!term) return orders
return orders.filter(o => { return orders.filter(o => {
// Order number // Anfragenummer
if (o.order_number?.toString().toLowerCase().includes(term)) return true if (o.order_number?.toString().toLowerCase().includes(term)) return true
// Status label or raw status // Status
const label = statusLabel[o.status] || o.status const label = statusLabel[o.status] || o.status
if (label.toLowerCase().includes(term) || o.status.toLowerCase().includes(term)) return true if (label.toLowerCase().includes(term) || o.status.toLowerCase().includes(term)) return true
// Date // Datum
const dateStr = new Date(o.created_at).toLocaleDateString('de-DE') const dateStr = new Date(o.created_at).toLocaleDateString('de-DE')
if (dateStr.includes(term)) return true if (dateStr.includes(term)) return true
// Order items (device name, product name, module name) // Endkunde (Firma / Name)
const customer = (o as any).end_customer_data || o.order_data?.end_customer
if (customer) {
if (customer.company_name?.toLowerCase().includes(term)) return true
if (customer.first_name?.toLowerCase().includes(term)) return true
if (customer.last_name?.toLowerCase().includes(term)) return true
if (customer.customer_number?.toLowerCase().includes(term)) return true
}
// Notizen
if (o.notes?.toLowerCase().includes(term)) return true
// Kassen & Module
const items = o.order_data?.items ?? [] const items = o.order_data?.items ?? []
for (const item of items) { for (const item of items) {
if (item.device_name?.toLowerCase().includes(term)) return true if (item.device_name?.toLowerCase().includes(term)) return true
@@ -82,23 +96,30 @@ export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
return ( return (
<div className="min-h-screen bg-[#020617] text-white px-4 py-12"> <div className="min-h-screen bg-[#020617] text-white px-4 py-12">
<div className="max-w-4xl mx-auto space-y-8"> <div className="max-w-5xl mx-auto space-y-8">
{/* Header */} {/* Header */}
<div className="flex items-center gap-4"> <div className="flex items-center justify-between gap-4 flex-wrap">
<Link href="/"> <div className="flex items-center gap-4">
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-white"> <Link href="/">
<ArrowLeft className="w-4 h-4 mr-2" /> Startseite <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white">
<ArrowLeft className="w-4 h-4 mr-2" /> Startseite
</Button>
</Link>
<div>
<h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
<ShoppingBag className="w-8 h-8 text-primary" />
Meine Anfragen
</h1>
<p className="text-slate-400 text-sm mt-1">
Alle Ihre Bestellungen und Konfigurationen auf einen Blick.
</p>
</div>
</div>
<Link href="/order">
<Button className="bg-primary hover:bg-primary/90 text-white font-bold gap-2 shadow-[0_0_20px_rgba(59,130,246,0.3)]">
+ Neue Anfrage erstellen
</Button> </Button>
</Link> </Link>
<div>
<h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
<ShoppingBag className="w-8 h-8 text-primary" />
Meine Anfragen
</h1>
<p className="text-slate-400 text-sm mt-1">
Alle Ihre Anfragen auf einen Blick – inkl. aktuellem Status.
</p>
</div>
</div> </div>
{/* Suche & Statistik */} {/* Suche & Statistik */}
@@ -107,14 +128,16 @@ export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
<Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" /> <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
<Input <Input
type="text" type="text"
placeholder="Volltextsuche nach Anfragenr., Produkt, Kasse, Status..." placeholder="Suchen nach Anfragenr., Kunde, Kasse, Produkt, Lizenz..."
value={searchTerm} value={searchTerm}
onChange={handleSearchChange} onChange={handleSearchChange}
className="pl-10 bg-slate-900/80 border-white/10 text-white placeholder:text-slate-500 rounded-xl h-11 text-sm focus:border-primary" className="pl-10 bg-slate-900/80 border-white/10 text-white placeholder:text-slate-500 rounded-xl h-11 text-sm focus:border-primary"
/> />
</div> </div>
<div className="text-xs text-slate-400 bg-slate-900/50 px-3 py-2.5 rounded-xl border border-white/5 shrink-0 text-center"> <div className="text-xs text-slate-400 bg-slate-900/50 px-4 py-2.5 rounded-xl border border-white/10 shrink-0 text-center flex items-center justify-center gap-2">
Gefunden: <span className="text-white font-bold">{filteredOrders.length}</span> von <span className="text-white font-bold">{orders.length}</span> Anfragen <span>Anfragen:</span>
<span className="text-white font-bold text-sm">{filteredOrders.length}</span>
{searchTerm && <span className="text-slate-500">(gefiltert aus {orders.length})</span>}
</div> </div>
</div> </div>
@@ -156,84 +179,130 @@ export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
<div className="space-y-4"> <div className="space-y-4">
{paginatedOrders.map((o) => { {paginatedOrders.map((o) => {
const items = o.order_data?.items ?? [] const items = o.order_data?.items ?? []
const customer = (o as any).end_customer_data || o.order_data?.end_customer
return ( return (
<Card key={o.id} className="glass-dark border-white/10 hover:border-white/20 transition-colors"> <Card key={o.id} className="glass-dark border-white/10 hover:border-white/20 transition-all duration-300 rounded-2xl overflow-hidden shadow-xl">
<CardContent className="p-6 space-y-4"> <CardContent className="p-6 space-y-5">
{/* Kopfzeile */} {/* Header-Zeile der Karte */}
<div className="flex items-start justify-between gap-4 flex-wrap"> <div className="flex items-start justify-between gap-4 flex-wrap pb-4 border-b border-white/5">
<div className="space-y-1"> <div className="space-y-1">
<p className="text-xs text-slate-500 uppercase tracking-wider">Anfragenummer</p> <div className="flex items-center gap-2">
<p className="font-mono font-bold text-primary text-lg">#{o.order_number}</p> <span className="text-xs text-slate-500 uppercase tracking-wider font-semibold">Anfragenummer</span>
<Badge className={statusClass[o.status] ?? 'bg-slate-500/20 text-slate-300'}>
{statusLabel[o.status] ?? o.status}
</Badge>
</div>
<p className="font-mono font-extrabold text-primary text-xl">#{o.order_number}</p>
</div> </div>
<div className="space-y-1 text-right">
<p className="text-xs text-slate-500 uppercase tracking-wider">Datum</p> {/* Endkunde Details (falls vorhanden) */}
<p className="text-white text-sm"> {customer && (
<div className="bg-white/5 border border-white/10 rounded-xl p-2.5 px-3 flex items-center gap-3">
<Building2 className="w-4 h-4 text-sky-400 shrink-0" />
<div className="text-xs">
<p className="text-white font-bold">{customer.company_name || `${customer.first_name} ${customer.last_name}`}</p>
{(customer.first_name || customer.city) && (
<p className="text-slate-400 text-[11px]">
{[customer.first_name && customer.last_name ? `${customer.first_name} ${customer.last_name}` : null, customer.city].filter(Boolean).join(' · ')}
</p>
)}
</div>
</div>
)}
<div className="space-y-1 text-right ml-auto">
<p className="text-xs text-slate-500 uppercase tracking-wider font-semibold">Datum & Preis</p>
<p className="text-slate-300 text-xs">
{new Date(o.created_at).toLocaleDateString('de-DE', { {new Date(o.created_at).toLocaleDateString('de-DE', {
day: '2-digit', month: '2-digit', year: 'numeric', day: '2-digit', month: '2-digit', year: 'numeric',
})} })}
</p> </p>
</div> <p className="font-extrabold text-white text-lg">
<div className="space-y-1"> {fmt(o.total_price)}
<p className="text-xs text-slate-500 uppercase tracking-wider">Status</p>
<Badge className={statusClass[o.status] ?? 'bg-slate-500/20 text-slate-300'}>
{statusLabel[o.status] ?? o.status}
</Badge>
</div>
<div className="space-y-1 text-right">
<p className="text-xs text-slate-500 uppercase tracking-wider">Gesamt</p>
<p className="font-bold text-white text-lg">
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(o.total_price)}
</p> </p>
</div> </div>
</div> </div>
{/* Produkte kurz */} {/* Kassen & Produkte Detail-Übersicht */}
{items.length > 0 && ( {items.length > 0 && (
<div className="flex flex-wrap gap-2 pt-1"> <div className="space-y-2">
{items.map((item, idx) => ( <p className="text-[11px] font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
<span <Monitor className="w-3.5 h-3.5 text-primary" />
key={idx} Enthaltene Kassen ({items.length}):
className="text-xs bg-white/5 border border-white/10 rounded-xl px-3 py-1.5 text-slate-300" </p>
> <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
<span className="font-semibold text-white mr-1">{item.device_name || 'Kasse'}:</span> {items.map((item, idx) => (
{item.product_name} <div
{item.selected_modules.length > 0 && ( key={idx}
<span className="text-slate-500 ml-1"> className="bg-slate-900/60 border border-white/10 rounded-xl p-3 space-y-1.5 text-xs"
(+{item.selected_modules.length} {item.selected_modules.length === 1 ? 'Modul' : 'Module'}) >
</span> <div className="flex items-center justify-between gap-2">
)} <span className="font-bold text-white flex items-center gap-1.5">
</span> <Monitor className="w-3.5 h-3.5 text-sky-400 shrink-0" />
))} {item.device_name || `Kasse ${idx + 1}`}
</span>
<span className={`text-[9px] px-1.5 py-0.2 rounded border ${item.billing_interval === '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.billing_interval === 'one_time' ? 'Kauf' : 'Abo'}
</span>
</div>
<p className="text-slate-300 font-medium">{item.product_name}</p>
{item.license_number && (
<p className="text-[10px] text-slate-400 font-mono">Lizenz: {item.license_number}</p>
)}
{item.selected_modules && item.selected_modules.length > 0 && (
<div className="pt-1 border-t border-white/5 flex flex-wrap gap-1">
{item.selected_modules.map((mod: any, mIdx: number) => (
<span key={mIdx} className="text-[10px] bg-white/5 text-slate-400 px-1.5 py-0.5 rounded border border-white/5">
+ {mod.module_name || mod.name} {mod.quantity > 1 ? `(${mod.quantity}x)` : ''}
</span>
))}
</div>
)}
</div>
))}
</div>
</div> </div>
)} )}
{/* Aktionen */} {/* Notizen (falls vorhanden) */}
<div className="flex gap-2 flex-wrap pt-1"> {o.notes && (
<Link href={`/order/success?id=${o.id}`}> <div className="bg-slate-900/40 p-2.5 rounded-xl border border-white/5 text-xs text-slate-400 flex items-start gap-2">
<Button variant="outline" size="sm" className="border-white/10 hover:bg-white/10 text-xs"> <FileText className="w-3.5 h-3.5 text-slate-500 shrink-0 mt-0.5" />
Details ansehen <p><span className="font-semibold text-slate-300">Anmerkungen:</span> {o.notes}</p>
</Button> </div>
</Link> )}
{o.status !== 'completed' && (
<Link href={`/order?id=${o.id}`}> {/* Aktionsleiste */}
<Button variant="outline" size="sm" className="border-amber-500/20 hover:bg-amber-500/10 hover:border-amber-500/40 text-amber-400 text-xs"> <div className="flex gap-2 flex-wrap pt-2 border-t border-white/5 items-center justify-between">
Bearbeiten <div className="flex gap-2 flex-wrap">
<Link href={`/order/success?id=${o.id}`}>
<Button variant="outline" size="sm" className="border-white/10 hover:bg-white/10 text-xs font-bold rounded-xl h-8">
Details ansehen
</Button> </Button>
</Link> </Link>
)} {o.status !== 'completed' && (
<Link href={`/order?id=${o.id}`}>
<Button variant="outline" size="sm" className="border-amber-500/30 hover:bg-amber-500/10 hover:border-amber-500/50 text-amber-400 text-xs font-bold gap-1 rounded-xl h-8">
<RefreshCw className="w-3 h-3" /> Konfiguration bearbeiten
</Button>
</Link>
)}
</div>
{o.pdf_url && ( {o.pdf_url && (
<> <div className="flex gap-1">
<Button variant="ghost" size="sm" asChild className="text-xs text-slate-400 hover:text-white"> <Button variant="ghost" size="sm" asChild className="text-xs text-slate-400 hover:text-white h-8">
<a href={`/api/orders/${o.id}/download?inline=true`} target="_blank" rel="noopener noreferrer"> <a href={`/api/orders/${o.id}/download?inline=true`} target="_blank" rel="noopener noreferrer">
<ExternalLink className="w-3 h-3 mr-1" /> Anfrage ansehen <ExternalLink className="w-3.5 h-3.5 mr-1" /> PDF Ansehen
</a> </a>
</Button> </Button>
<Button variant="ghost" size="sm" asChild className="text-xs text-slate-400 hover:text-white"> <Button variant="ghost" size="sm" asChild className="text-xs text-slate-400 hover:text-white h-8">
<a href={`/api/orders/${o.id}/download`} download> <a href={`/api/orders/${o.id}/download`} download>
<Download className="w-3 h-3 mr-1" /> PDF <Download className="w-3.5 h-3.5 mr-1" /> Download
</a> </a>
</Button> </Button>
</> </div>
)} )}
</div> </div>
</CardContent> </CardContent>
@@ -255,7 +324,7 @@ export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
size="sm" size="sm"
onClick={() => setCurrentPage(p => Math.max(1, p - 1))} onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
disabled={currentPage === 1} disabled={currentPage === 1}
className="border-white/10 text-xs gap-1" className="border-white/10 text-xs gap-1 rounded-xl"
> >
<ChevronLeft className="w-4 h-4" /> Vorherige <ChevronLeft className="w-4 h-4" /> Vorherige
</Button> </Button>
@@ -264,7 +333,7 @@ export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
size="sm" size="sm"
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
className="border-white/10 text-xs gap-1" className="border-white/10 text-xs gap-1 rounded-xl"
> >
Nächste <ChevronRight className="w-4 h-4" /> Nächste <ChevronRight className="w-4 h-4" />
</Button> </Button>