246 lines
11 KiB
TypeScript
246 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Download, ExternalLink, Search, Loader2 } from "lucide-react";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { updateOrderStatus } from "@/lib/actions/orders";
|
|
|
|
interface OrdersTableProps {
|
|
initialOrders: any[];
|
|
}
|
|
|
|
const statusLabel: Record<string, string> = {
|
|
pending: 'Eingegangen',
|
|
active: 'In Bearbeitung',
|
|
completed: 'Abgeschlossen',
|
|
cancelled: 'Storniert',
|
|
};
|
|
|
|
const statusClass: Record<string, string> = {
|
|
pending: 'bg-amber-500/20 text-amber-400 border border-amber-500/30',
|
|
active: 'bg-blue-500/20 text-blue-400 border border-blue-500/30',
|
|
completed: 'bg-green-500/20 text-green-400 border border-green-500/30',
|
|
cancelled: 'bg-red-500/20 text-red-400 border border-red-500/30',
|
|
};
|
|
|
|
export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
|
const [orders, setOrders] = useState(initialOrders);
|
|
const [search, setSearch] = useState("");
|
|
const [statusFilter, setStatusFilter] = useState<string>("all");
|
|
const [updatingId, setUpdatingId] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
setOrders(initialOrders);
|
|
}, [initialOrders]);
|
|
|
|
const handleStatusChange = async (orderId: string, newStatus: 'pending' | 'active' | 'completed' | 'cancelled') => {
|
|
setUpdatingId(orderId);
|
|
try {
|
|
await updateOrderStatus(orderId, newStatus);
|
|
setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: newStatus } : o));
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert("Fehler beim Ändern des Status.");
|
|
} finally {
|
|
setUpdatingId(null);
|
|
}
|
|
};
|
|
|
|
const filteredOrders = orders.filter((order) => {
|
|
const orderNum = (order.order_number || "").toLowerCase();
|
|
const company = (order.customer_data?.company_name || "").toLowerCase();
|
|
const contact = `${order.customer_data?.first_name || ""} ${order.customer_data?.last_name || ""}`.toLowerCase();
|
|
|
|
const matchesSearch =
|
|
orderNum.includes(search.toLowerCase()) ||
|
|
company.includes(search.toLowerCase()) ||
|
|
contact.includes(search.toLowerCase());
|
|
|
|
const matchesStatus = statusFilter === "all" || order.status === statusFilter;
|
|
|
|
return matchesSearch && matchesStatus;
|
|
});
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Filterleiste */}
|
|
<div className="flex flex-col md:flex-row gap-4 justify-between items-start md:items-center bg-white/5 p-4 rounded-xl border border-white/5">
|
|
<div className="relative w-full md:max-w-sm">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<Input
|
|
placeholder="Bestellung, Firma oder Name suchen..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="pl-10 bg-slate-950/40 border-white/10 text-white placeholder:text-slate-500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
variant={statusFilter === "all" ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setStatusFilter("all")}
|
|
className="text-xs"
|
|
>
|
|
Alle
|
|
</Button>
|
|
<Button
|
|
variant={statusFilter === "pending" ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setStatusFilter("pending")}
|
|
className="text-xs border-amber-500/20 hover:bg-amber-500/10 text-amber-400"
|
|
>
|
|
Eingegangen
|
|
</Button>
|
|
<Button
|
|
variant={statusFilter === "active" ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setStatusFilter("active")}
|
|
className="text-xs border-blue-500/20 hover:bg-blue-500/10 text-blue-400"
|
|
>
|
|
In Bearbeitung
|
|
</Button>
|
|
<Button
|
|
variant={statusFilter === "completed" ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setStatusFilter("completed")}
|
|
className="text-xs border-green-500/20 hover:bg-green-500/10 text-green-400"
|
|
>
|
|
Abgeschlossen
|
|
</Button>
|
|
<Button
|
|
variant={statusFilter === "cancelled" ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setStatusFilter("cancelled")}
|
|
className="text-xs border-red-500/20 hover:bg-red-500/10 text-red-400"
|
|
>
|
|
Storniert
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabelle */}
|
|
<div className="rounded-xl border border-white/5 bg-black/20 overflow-hidden backdrop-blur-xl">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-white/10 bg-white/5 hover:bg-transparent">
|
|
<TableHead className="w-[140px] text-slate-200">Bestellnr.</TableHead>
|
|
<TableHead className="text-slate-200">Datum</TableHead>
|
|
<TableHead className="text-slate-200">Kunde</TableHead>
|
|
<TableHead className="text-slate-200">Auswahl</TableHead>
|
|
<TableHead className="text-slate-200">Betrag</TableHead>
|
|
<TableHead className="text-slate-200">Status</TableHead>
|
|
<TableHead className="text-right text-slate-200">Aktionen</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredOrders.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={7} className="text-center py-16 text-slate-500 italic">
|
|
Keine Bestellungen gefunden.
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredOrders.map((order) => {
|
|
const items = order.order_data?.items || [];
|
|
return (
|
|
<TableRow key={order.id} className="border-white/5 hover:bg-white/5 transition-colors">
|
|
<TableCell className="font-mono text-xs text-primary font-semibold">
|
|
#{order.order_number || order.id.slice(0, 8)}
|
|
</TableCell>
|
|
<TableCell className="text-slate-300 text-sm">
|
|
{new Date(order.created_at).toLocaleDateString('de-DE', {
|
|
day: '2-digit', month: '2-digit', year: 'numeric'
|
|
})}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="font-semibold text-white text-sm">
|
|
{order.customer_data?.company_name || 'Privatkunde'}
|
|
</div>
|
|
<div className="text-xs text-slate-400">
|
|
{order.customer_data?.first_name} {order.customer_data?.last_name}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="max-w-[200px]">
|
|
<div className="flex flex-wrap gap-1">
|
|
{items.map((item: any) => (
|
|
<span
|
|
key={item.product_id}
|
|
className="text-[10px] bg-white/5 border border-white/10 rounded-full px-2 py-0.5 text-slate-300 inline-block"
|
|
>
|
|
{item.product_name}
|
|
{item.selected_modules?.length > 0 && (
|
|
<span className="text-slate-500 ml-1">+{item.selected_modules.length}</span>
|
|
)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="font-bold text-white text-sm">
|
|
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild disabled={updatingId === order.id}>
|
|
<button className="focus:outline-none focus:ring-0 active:scale-95 disabled:pointer-events-none transition-transform duration-100">
|
|
<Badge className={`text-xs px-2 py-0.5 rounded cursor-pointer transition-all duration-200 hover:opacity-85 flex items-center gap-1.5 ${statusClass[order.status] ?? 'bg-slate-500/20 text-slate-300'}`}>
|
|
{updatingId === order.id ? (
|
|
<Loader2 className="w-3 h-3 animate-spin mr-1" />
|
|
) : null}
|
|
{statusLabel[order.status] ?? order.status}
|
|
<span className="text-[9px] opacity-70">▼</span>
|
|
</Badge>
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="bg-slate-900 border-white/10 text-white min-w-[140px]">
|
|
{Object.entries(statusLabel).map(([key, label]) => (
|
|
<DropdownMenuItem
|
|
key={key}
|
|
disabled={updatingId === order.id}
|
|
onClick={() => handleStatusChange(order.id, key as any)}
|
|
className={`text-xs cursor-pointer hover:bg-white/10 transition-colors focus:bg-white/10 focus:text-white ${order.status === key ? 'font-bold text-primary' : ''}`}
|
|
>
|
|
{label}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
{order.pdf_url ? (
|
|
<div className="flex justify-end gap-1.5">
|
|
<Button variant="outline" size="sm" asChild className="h-8 border-white/10 hover:bg-primary/20 text-xs">
|
|
<a href={order.pdf_url} target="_blank" rel="noopener noreferrer">
|
|
<ExternalLink className="w-3.5 h-3.5 mr-1" /> PDF
|
|
</a>
|
|
</Button>
|
|
<Button variant="secondary" size="sm" asChild className="h-8 text-xs">
|
|
<a href={order.pdf_url} download>
|
|
<Download className="w-3.5 h-3.5" />
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<span className="text-xs text-slate-500 italic">Keine Bestätigung</span>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|