49a7a0768d
- format PDF order number as AE- and add upgrade flags - style status emails with sleek modern dark theme - add badge counts to admin table status filter buttons - implement preiskorrektur inline editing inside admin detail modal - trigger DB and total price recalculations on snapshot changes
797 lines
39 KiB
TypeScript
797 lines
39 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 { Label } from "@/components/ui/label";
|
|
import {
|
|
Download,
|
|
ExternalLink,
|
|
Search,
|
|
Loader2,
|
|
Eye,
|
|
ArrowUpDown,
|
|
Building2,
|
|
User,
|
|
Mail,
|
|
MapPin,
|
|
Package,
|
|
FileText,
|
|
Calendar,
|
|
Layers,
|
|
Sparkles,
|
|
XCircle,
|
|
CheckCircle,
|
|
Edit3
|
|
} from "lucide-react";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { updateOrderStatus, rejectOrder, updateOrderPayload } from "@/lib/actions/orders";
|
|
|
|
interface OrdersTableProps {
|
|
initialOrders: any[];
|
|
}
|
|
|
|
const statusLabel: Record<string, string> = {
|
|
pending: 'Eingegangen',
|
|
pending_approval: 'Wartet auf Freigabe',
|
|
in_review: 'In Prüfung',
|
|
approved: 'Freigegeben',
|
|
active: 'Aktiviert',
|
|
completed: 'Abgeschlossen',
|
|
cancelled: 'Storniert',
|
|
rejected: 'Abgelehnt',
|
|
};
|
|
|
|
const statusClass: Record<string, string> = {
|
|
pending: 'bg-amber-500/20 text-amber-400 border border-amber-500/30',
|
|
pending_approval: 'bg-amber-600/20 text-amber-300 border border-amber-500/40',
|
|
in_review: 'bg-purple-500/20 text-purple-400 border border-purple-500/30',
|
|
approved: 'bg-emerald-500/20 text-emerald-400 border border-emerald-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-slate-500/20 text-slate-400 border border-slate-500/30',
|
|
rejected: 'bg-red-500/20 text-red-400 border border-red-500/30',
|
|
};
|
|
|
|
type SortField = 'date_desc' | 'date_asc' | 'price_desc' | 'price_asc' | 'order_num';
|
|
|
|
export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
|
const [orders, setOrders] = useState(initialOrders);
|
|
const [search, setSearch] = useState("");
|
|
const [statusFilter, setStatusFilter] = useState<string>("all");
|
|
const [sortBy, setSortBy] = useState<SortField>("date_desc");
|
|
const [updatingId, setUpdatingId] = useState<string | null>(null);
|
|
const [selectedOrder, setSelectedOrder] = useState<any | null>(null);
|
|
|
|
// Rejection Dialog State
|
|
const [rejectingOrder, setRejectingOrder] = useState<any | null>(null);
|
|
const [rejectionReason, setRejectionReason] = useState("");
|
|
const [isSubmittingReject, setIsSubmittingReject] = useState(false);
|
|
|
|
// Preiskorrektur States
|
|
const [isEditingSnapshot, setIsEditingSnapshot] = useState(false);
|
|
const [editedSnapshot, setEditedSnapshot] = useState<any | null>(null);
|
|
const [isSavingSnapshot, setIsSavingSnapshot] = useState(false);
|
|
|
|
// Initialize editedSnapshot when selectedOrder changes
|
|
useEffect(() => {
|
|
if (selectedOrder) {
|
|
setEditedSnapshot(JSON.parse(JSON.stringify(selectedOrder.order_data || {})));
|
|
setIsEditingSnapshot(false);
|
|
} else {
|
|
setEditedSnapshot(null);
|
|
setIsEditingSnapshot(false);
|
|
}
|
|
}, [selectedOrder]);
|
|
|
|
const updateItemBasePrice = (itemIdx: number, newPrice: number) => {
|
|
if (!editedSnapshot) return;
|
|
const updatedItems = [...editedSnapshot.items];
|
|
const item = { ...updatedItems[itemIdx] };
|
|
item.base_price = newPrice;
|
|
|
|
const moduleTotal = (item.selected_modules || []).reduce((acc: number, m: any) => acc + (m.total_price ?? (m.price * (m.quantity || 1))), 0);
|
|
item.item_total = newPrice + moduleTotal;
|
|
|
|
updatedItems[itemIdx] = item;
|
|
recalculateSnapshot(updatedItems);
|
|
};
|
|
|
|
const updateModulePriceOrQty = (itemIdx: number, modIdx: number, field: 'price' | 'quantity', value: number) => {
|
|
if (!editedSnapshot) return;
|
|
const updatedItems = [...editedSnapshot.items];
|
|
const item = { ...updatedItems[itemIdx] };
|
|
const updatedModules = [...(item.selected_modules || [])];
|
|
const mod = { ...updatedModules[modIdx] };
|
|
|
|
if (field === 'price') {
|
|
mod.price = value;
|
|
} else {
|
|
mod.quantity = value;
|
|
}
|
|
mod.total_price = mod.price * (mod.quantity || 1);
|
|
updatedModules[modIdx] = mod;
|
|
|
|
item.selected_modules = updatedModules;
|
|
const moduleTotal = updatedModules.reduce((acc: number, m: any) => acc + (m.total_price ?? (m.price * (m.quantity || 1))), 0);
|
|
item.item_total = (item.base_price || 0) + moduleTotal;
|
|
|
|
updatedItems[itemIdx] = item;
|
|
recalculateSnapshot(updatedItems);
|
|
};
|
|
|
|
const recalculateSnapshot = (updatedItems: any[]) => {
|
|
if (!editedSnapshot) return;
|
|
const taxRate = editedSnapshot.tax_rate ?? 19;
|
|
const subtotal = updatedItems.reduce((acc: number, item: any) => acc + (item.item_total || 0), 0);
|
|
const taxAmount = Math.round(subtotal * (taxRate / 100) * 100) / 100;
|
|
const total = Math.round((subtotal + taxAmount) * 100) / 100;
|
|
|
|
setEditedSnapshot({
|
|
...editedSnapshot,
|
|
items: updatedItems,
|
|
subtotal,
|
|
tax_amount: taxAmount,
|
|
total
|
|
});
|
|
};
|
|
|
|
const handleSaveSnapshot = async () => {
|
|
if (!editedSnapshot || !selectedOrder) return;
|
|
setIsSavingSnapshot(true);
|
|
try {
|
|
const updated = await updateOrderPayload(selectedOrder.id, {
|
|
orderSnapshot: editedSnapshot
|
|
});
|
|
setOrders(prev => prev.map(o => o.id === selectedOrder.id ? { ...o, order_data: editedSnapshot, total_price: editedSnapshot.total } : o));
|
|
setSelectedOrder({ ...selectedOrder, order_data: editedSnapshot, total_price: editedSnapshot.total });
|
|
setIsEditingSnapshot(false);
|
|
} catch (error: any) {
|
|
console.error(error);
|
|
alert("Fehler beim Speichern der Änderungen: " + error.message);
|
|
} finally {
|
|
setIsSavingSnapshot(false);
|
|
}
|
|
};
|
|
|
|
// Badge-Counter berechnen
|
|
const countAll = orders.length;
|
|
const countOffen = orders.filter(o => ["pending", "pending_approval", "in_review"].includes(o.status)).length;
|
|
const countApproved = orders.filter(o => o.status === "approved").length;
|
|
const countActive = orders.filter(o => ["active", "completed"].includes(o.status)).length;
|
|
const countRejected = orders.filter(o => ["rejected", "cancelled"].includes(o.status)).length;
|
|
|
|
const displaySnapshot = editedSnapshot || selectedOrder?.order_data || {};
|
|
const displayItems = displaySnapshot.items || [];
|
|
|
|
useEffect(() => {
|
|
setOrders(initialOrders);
|
|
}, [initialOrders]);
|
|
|
|
const handleStatusChange = async (orderId: string, newStatus: 'pending' | 'pending_approval' | 'in_review' | 'approved' | 'active' | 'completed' | 'cancelled' | 'rejected') => {
|
|
if (newStatus === 'rejected') {
|
|
const target = orders.find(o => o.id === orderId);
|
|
if (target) {
|
|
setRejectingOrder(target);
|
|
setRejectionReason("");
|
|
return;
|
|
}
|
|
}
|
|
|
|
setUpdatingId(orderId);
|
|
try {
|
|
await updateOrderStatus(orderId, newStatus);
|
|
setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: newStatus } : o));
|
|
if (selectedOrder?.id === orderId) {
|
|
setSelectedOrder((prev: any) => prev ? { ...prev, status: newStatus } : null);
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert("Fehler beim Ändern des Status.");
|
|
} finally {
|
|
setUpdatingId(null);
|
|
}
|
|
};
|
|
|
|
const handleConfirmReject = async () => {
|
|
if (!rejectingOrder) return;
|
|
setIsSubmittingReject(true);
|
|
try {
|
|
await rejectOrder(rejectingOrder.id, rejectionReason || "Vom Administrator abgelehnt.");
|
|
setOrders(prev => prev.map(o => o.id === rejectingOrder.id ? { ...o, status: 'rejected' } : o));
|
|
if (selectedOrder?.id === rejectingOrder.id) {
|
|
setSelectedOrder((prev: any) => prev ? { ...prev, status: 'rejected' } : null);
|
|
}
|
|
setRejectingOrder(null);
|
|
setRejectionReason("");
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert("Fehler beim Ablehnen der Anfrage.");
|
|
} finally {
|
|
setIsSubmittingReject(false);
|
|
}
|
|
};
|
|
|
|
const filteredAndSortedOrders = 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());
|
|
|
|
let matchesStatus = false;
|
|
if (statusFilter === "all") matchesStatus = true;
|
|
else if (statusFilter === "offen") matchesStatus = ["pending", "pending_approval", "in_review"].includes(order.status);
|
|
else if (statusFilter === "approved") matchesStatus = order.status === "approved";
|
|
else if (statusFilter === "active") matchesStatus = ["active", "completed"].includes(order.status);
|
|
else if (statusFilter === "rejected") matchesStatus = ["rejected", "cancelled"].includes(order.status);
|
|
|
|
return matchesSearch && matchesStatus;
|
|
})
|
|
.sort((a, b) => {
|
|
if (sortBy === 'date_desc') return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
|
|
if (sortBy === 'date_asc') return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
|
|
if (sortBy === 'price_desc') return (b.total_price || 0) - (a.total_price || 0);
|
|
if (sortBy === 'price_asc') return (a.total_price || 0) - (b.total_price || 0);
|
|
if (sortBy === 'order_num') return (a.order_number || a.id).localeCompare(b.order_number || b.id);
|
|
return 0;
|
|
});
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Filter- & Sortierleiste */}
|
|
<div className="flex flex-col lg:flex-row gap-4 justify-between items-start lg:items-center bg-white/5 p-4 rounded-xl border border-white/5">
|
|
<div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
|
|
<div className="relative w-full sm:w-80">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<Input
|
|
placeholder="Anfragenr., Firma oder Name..."
|
|
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>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="sm" className="border-white/10 bg-slate-950/40 text-slate-200 gap-2 shrink-0">
|
|
<ArrowUpDown className="w-3.5 h-3.5 text-primary" />
|
|
<span>
|
|
{sortBy === 'date_desc' && 'Datum (Neueste zuerst)'}
|
|
{sortBy === 'date_asc' && 'Datum (Älteste zuerst)'}
|
|
{sortBy === 'price_desc' && 'Betrag (Höchster zuerst)'}
|
|
{sortBy === 'price_asc' && 'Betrag (Niedrigster zuerst)'}
|
|
{sortBy === 'order_num' && 'Anfragenr.'}
|
|
</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="bg-slate-900 border-white/10 text-white">
|
|
<DropdownMenuItem onClick={() => setSortBy('date_desc')} className="text-xs cursor-pointer">
|
|
Datum (Neueste zuerst)
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setSortBy('date_asc')} className="text-xs cursor-pointer">
|
|
Datum (Älteste zuerst)
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setSortBy('price_desc')} className="text-xs cursor-pointer">
|
|
Betrag (Höchster zuerst)
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setSortBy('price_asc')} className="text-xs cursor-pointer">
|
|
Betrag (Niedrigster zuerst)
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setSortBy('order_num')} className="text-xs cursor-pointer">
|
|
Anfragenr.
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-1.5">
|
|
<Button
|
|
variant={statusFilter === "all" ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setStatusFilter("all")}
|
|
className="text-xs gap-1.5"
|
|
>
|
|
Alle <Badge variant="secondary" className="bg-white/10 text-white border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countAll}</Badge>
|
|
</Button>
|
|
<Button
|
|
variant={statusFilter === "offen" ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setStatusFilter("offen")}
|
|
className="text-xs border-amber-500/20 hover:bg-amber-500/10 text-amber-400 gap-1.5"
|
|
>
|
|
Offen / in_review <Badge variant="secondary" className="bg-amber-500/20 text-amber-400 border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countOffen}</Badge>
|
|
</Button>
|
|
<Button
|
|
variant={statusFilter === "approved" ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setStatusFilter("approved")}
|
|
className="text-xs border-emerald-500/20 hover:bg-emerald-500/10 text-emerald-400 gap-1.5"
|
|
>
|
|
Genehmigt <Badge variant="secondary" className="bg-emerald-500/20 text-emerald-400 border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countApproved}</Badge>
|
|
</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 gap-1.5"
|
|
>
|
|
Aktiv <Badge variant="secondary" className="bg-blue-500/20 text-blue-400 border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countActive}</Badge>
|
|
</Button>
|
|
<Button
|
|
variant={statusFilter === "rejected" ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setStatusFilter("rejected")}
|
|
className="text-xs border-red-500/20 hover:bg-red-500/10 text-red-400 gap-1.5"
|
|
>
|
|
Abgelehnt <Badge variant="secondary" className="bg-red-500/20 text-red-400 border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countRejected}</Badge>
|
|
</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 font-bold">Anfragenr.</TableHead>
|
|
<TableHead className="text-slate-200 font-bold">Datum</TableHead>
|
|
<TableHead className="text-slate-200 font-bold">Kunde / Firma</TableHead>
|
|
<TableHead className="text-slate-200 font-bold">Auswahl / Produkte</TableHead>
|
|
<TableHead className="text-slate-200 font-bold">Gesamtbetrag</TableHead>
|
|
<TableHead className="text-slate-200 font-bold">Status</TableHead>
|
|
<TableHead className="text-right text-slate-200 font-bold">Aktionen</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredAndSortedOrders.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={7} className="text-center py-16 text-slate-500 italic">
|
|
Keine Anfragen gefunden.
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredAndSortedOrders.map((order) => {
|
|
const items = order.order_data?.items || [];
|
|
return (
|
|
<TableRow key={order.id} className="border-white/5 hover:bg-white/5 transition-colors group">
|
|
<TableCell className="font-mono text-xs text-primary font-bold">
|
|
#{order.order_number || order.id.slice(0, 8)}
|
|
</TableCell>
|
|
<TableCell className="text-slate-300 text-sm whitespace-nowrap">
|
|
{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 flex items-center gap-1 mt-0.5">
|
|
<User className="w-3 h-3 text-slate-500" />
|
|
{order.customer_data?.first_name} {order.customer_data?.last_name}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="max-w-[240px]">
|
|
<div className="flex flex-col gap-1.5">
|
|
{items.slice(0, 2).map((item: any, idx: number) => (
|
|
<div
|
|
key={idx}
|
|
className="text-[11px] text-slate-300 leading-tight"
|
|
>
|
|
<span className="font-semibold text-white block truncate">
|
|
{item.device_name || 'Kasse'}: {item.product_name}
|
|
</span>
|
|
{item.selected_modules?.length > 0 && (
|
|
<span className="text-slate-500 block text-[10px] truncate">
|
|
+ {item.selected_modules.map((m: any) => m.module_name || m.name).join(', ')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
{items.length > 2 && (
|
|
<span className="text-[10px] text-primary font-semibold">
|
|
+ {items.length - 2} weitere Kassen
|
|
</span>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="font-bold text-white text-sm whitespace-nowrap">
|
|
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price || 0)}
|
|
</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.5 py-1 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-[170px]">
|
|
{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">
|
|
<div className="flex justify-end gap-1.5">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setSelectedOrder(order)}
|
|
className="h-8 border-white/10 hover:bg-white/10 text-slate-200 text-xs gap-1"
|
|
>
|
|
<Eye className="w-3.5 h-3.5 text-primary" /> Details
|
|
</Button>
|
|
<Button variant="outline" size="sm" asChild className="h-8 border-amber-500/20 hover:bg-amber-500/10 text-amber-400 text-xs gap-1">
|
|
<a href={`/order?mode=admin_edit&orderId=${order.id}`}>
|
|
<Edit3 className="w-3 h-3" /> Im Wizard öffnen
|
|
</a>
|
|
</Button>
|
|
<Button variant="outline" size="sm" asChild className="h-8 border-white/10 hover:bg-primary/20 text-xs">
|
|
<a href={`/api/admin/orders/${order.id}/download?inline=true`} target="_blank" rel="noopener noreferrer">
|
|
<ExternalLink className="w-3.5 h-3.5 mr-1" /> PDF
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
{/* Detail-Modal für vollständige Anfragenübersicht & Freigabe-Workflow */}
|
|
{selectedOrder && (
|
|
<Dialog open={!!selectedOrder} onOpenChange={(open) => !open && setSelectedOrder(null)}>
|
|
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto bg-slate-950 border-white/10 text-white p-6 space-y-6">
|
|
<DialogHeader className="border-b border-white/10 pb-4">
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div>
|
|
<div className="flex items-center gap-3">
|
|
<DialogTitle className="text-xl font-bold text-white flex items-center gap-2">
|
|
<FileText className="w-5 h-5 text-primary" />
|
|
Anfragenr. #{selectedOrder.order_number || selectedOrder.id.slice(0, 8)}
|
|
</DialogTitle>
|
|
<Badge className={`text-xs px-2.5 py-0.5 rounded ${statusClass[selectedOrder.status]}`}>
|
|
{statusLabel[selectedOrder.status] ?? selectedOrder.status}
|
|
</Badge>
|
|
</div>
|
|
<DialogDescription className="text-xs text-slate-400 mt-1 flex items-center gap-2">
|
|
<Calendar className="w-3.5 h-3.5 text-slate-500" />
|
|
Erstellt am {new Date(selectedOrder.created_at).toLocaleString('de-DE')}
|
|
</DialogDescription>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-xs text-slate-400 uppercase tracking-wider font-semibold">
|
|
{isEditingSnapshot ? "Vorschau Summe" : "Gesamtsumme"}
|
|
</div>
|
|
<div className="text-2xl font-extrabold text-primary">
|
|
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(
|
|
isEditingSnapshot ? (editedSnapshot?.total || 0) : (selectedOrder.total_price || 0)
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DialogHeader>
|
|
|
|
{/* Kunden & Stammdaten */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="p-4 rounded-xl bg-slate-900/80 border border-white/5 space-y-2">
|
|
<div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5 border-b border-white/5 pb-2">
|
|
<Building2 className="w-4 h-4 text-primary" />
|
|
Kunden- & Firmendaten
|
|
</div>
|
|
<div className="text-sm font-semibold text-white">
|
|
{selectedOrder.customer_data?.company_name || 'Keine Firma angegeben'}
|
|
</div>
|
|
<div className="text-xs text-slate-300 flex items-center gap-1.5">
|
|
<User className="w-3.5 h-3.5 text-slate-500" />
|
|
{selectedOrder.customer_data?.first_name} {selectedOrder.customer_data?.last_name}
|
|
</div>
|
|
{selectedOrder.customer_data?.email && (
|
|
<div className="text-xs text-slate-300 flex items-center gap-1.5">
|
|
<Mail className="w-3.5 h-3.5 text-slate-500" />
|
|
{selectedOrder.customer_data.email}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-4 rounded-xl bg-slate-900/80 border border-white/5 space-y-2">
|
|
<div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5 border-b border-white/5 pb-2">
|
|
<MapPin className="w-4 h-4 text-primary" />
|
|
Adresse & Standort
|
|
</div>
|
|
<div className="text-xs text-slate-300 space-y-1">
|
|
<div>{selectedOrder.customer_data?.street || 'Keine Straße'}</div>
|
|
<div>
|
|
{selectedOrder.customer_data?.zip} {selectedOrder.customer_data?.city}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Geräte & Produktauswahl (Snapshot Aufteilung) */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
|
|
<Package className="w-4 h-4 text-primary" />
|
|
Konfigurierte Kassen & Module ({displayItems.length})
|
|
</div>
|
|
{selectedOrder.status === 'in_review' && !isEditingSnapshot && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setIsEditingSnapshot(true)}
|
|
className="h-7 border-primary/30 text-primary hover:bg-primary/10 text-xs font-bold gap-1 rounded-md"
|
|
>
|
|
<Edit3 className="w-3 h-3" /> Preise anpassen
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{isEditingSnapshot && (
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between bg-amber-500/10 border border-amber-500/20 p-3 rounded-xl gap-4 animate-pulse">
|
|
<span className="text-xs text-amber-400 font-semibold">Sie befinden sich im Preiskorrektur-Modus.</span>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => {
|
|
setEditedSnapshot(JSON.parse(JSON.stringify(selectedOrder.order_data || {})));
|
|
setIsEditingSnapshot(false);
|
|
}}
|
|
className="h-7 text-xs text-slate-300 hover:text-white"
|
|
>
|
|
Abbrechen
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={handleSaveSnapshot}
|
|
disabled={isSavingSnapshot}
|
|
className="h-7 text-xs bg-amber-600 hover:bg-amber-500 text-white font-bold"
|
|
>
|
|
{isSavingSnapshot ? <Loader2 className="w-3 h-3 animate-spin mr-1" /> : null}
|
|
Änderungen speichern
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-3">
|
|
{displayItems.map((item: any, idx: number) => (
|
|
<div key={idx} className="p-4 rounded-xl bg-slate-900/90 border border-white/10 space-y-3">
|
|
<div className="flex items-center justify-between border-b border-white/5 pb-2">
|
|
<div className="flex items-center gap-2">
|
|
<span className="px-2 py-0.5 rounded text-[10px] font-bold bg-primary/20 text-primary border border-primary/30">
|
|
{item.device_name || `Kasse #${idx + 1}`}
|
|
</span>
|
|
<span className="font-bold text-sm text-white">{item.product_name}</span>
|
|
</div>
|
|
|
|
{isEditingSnapshot ? (
|
|
<div className="flex items-center gap-2">
|
|
<Label htmlFor={`price-${idx}`} className="text-[10px] text-slate-400">Preis (€):</Label>
|
|
<Input
|
|
id={`price-${idx}`}
|
|
type="number"
|
|
value={item.base_price || 0}
|
|
onChange={(e) => updateItemBasePrice(idx, parseFloat(e.target.value) || 0)}
|
|
className="w-20 h-7 bg-slate-950 border-white/10 text-white text-xs px-2"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<span className="text-xs font-bold text-slate-200">
|
|
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(item.base_price || 0)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Ausgewählte Module & Lizenzen */}
|
|
{item.selected_modules?.length > 0 && (
|
|
<div className="space-y-1.5">
|
|
<div className="text-[11px] font-semibold text-slate-400 flex items-center gap-1">
|
|
<Layers className="w-3 h-3 text-slate-500" />
|
|
Zusatzmodule ({item.selected_modules.length}):
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
|
{item.selected_modules.map((mod: any, mIdx: number) => (
|
|
<div key={mIdx} className="p-2 rounded-lg bg-slate-950/60 border border-white/5 text-xs flex items-center justify-between gap-3">
|
|
<span className="text-slate-300 font-medium truncate">
|
|
{mod.module_name || mod.name}
|
|
</span>
|
|
|
|
{isEditingSnapshot ? (
|
|
<div className="flex items-center gap-1.5 shrink-0">
|
|
<Input
|
|
type="number"
|
|
title="Einzelpreis"
|
|
value={mod.price || 0}
|
|
onChange={(e) => updateModulePriceOrQty(idx, mIdx, 'price', parseFloat(e.target.value) || 0)}
|
|
className="w-14 h-6 bg-slate-900 border-white/10 text-white text-[10px] px-1"
|
|
/>
|
|
<span className="text-[10px] text-slate-500">x</span>
|
|
<Input
|
|
type="number"
|
|
title="Menge"
|
|
value={mod.quantity || 1}
|
|
onChange={(e) => updateModulePriceOrQty(idx, mIdx, 'quantity', parseInt(e.target.value) || 1)}
|
|
className="w-10 h-6 bg-slate-900 border-white/10 text-white text-[10px] px-1"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<span className="text-slate-400 font-mono text-[11px] shrink-0">
|
|
+{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price * (mod.quantity || 1))}
|
|
</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Workflow Freigabe & Aktionen */}
|
|
<div className="p-4 rounded-xl bg-slate-900/90 border border-white/10 space-y-3">
|
|
<div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
|
|
<Sparkles className="w-4 h-4 text-amber-400" />
|
|
Freigabe-Workflow & Verwalter-Aktionen
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
onClick={() => handleStatusChange(selectedOrder.id, 'in_review')}
|
|
disabled={updatingId === selectedOrder.id}
|
|
className="bg-purple-600 hover:bg-purple-500 text-white text-xs gap-1.5"
|
|
>
|
|
In Prüfung versetzen
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => handleStatusChange(selectedOrder.id, 'approved')}
|
|
disabled={updatingId === selectedOrder.id}
|
|
className="bg-emerald-600 hover:bg-emerald-500 text-white text-xs gap-1.5 font-bold"
|
|
>
|
|
<CheckCircle className="w-3.5 h-3.5" /> Anfrage Freigeben
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => handleStatusChange(selectedOrder.id, 'active')}
|
|
disabled={updatingId === selectedOrder.id}
|
|
className="bg-blue-600 hover:bg-blue-500 text-white text-xs gap-1.5 font-bold"
|
|
>
|
|
Sofort Aktivieren
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="destructive"
|
|
onClick={() => handleStatusChange(selectedOrder.id, 'rejected')}
|
|
disabled={updatingId === selectedOrder.id}
|
|
className="text-xs gap-1.5"
|
|
>
|
|
<XCircle className="w-3.5 h-3.5" /> Ablehnen
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="border-t border-white/10 pt-4 flex flex-col sm:flex-row justify-between items-center gap-3">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setSelectedOrder(null)}
|
|
className="text-slate-400 hover:text-white text-xs"
|
|
>
|
|
Schließen
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="outline" size="sm" asChild className="h-8 border-amber-500/20 hover:bg-amber-500/10 text-amber-400 text-xs gap-1">
|
|
<a href={`/order?mode=admin_edit&orderId=${selectedOrder.id}`}>
|
|
<Edit3 className="w-3 h-3" /> Im Wizard öffnen
|
|
</a>
|
|
</Button>
|
|
<Button variant="outline" size="sm" asChild className="h-8 border-white/10 hover:bg-primary/20 text-xs">
|
|
<a href={`/api/admin/orders/${selectedOrder.id}/download?inline=true`} target="_blank" rel="noopener noreferrer">
|
|
<ExternalLink className="w-3.5 h-3.5 mr-1" /> PDF Vorschau
|
|
</a>
|
|
</Button>
|
|
<Button variant="secondary" size="sm" asChild className="h-8 text-xs">
|
|
<a href={`/api/admin/orders/${selectedOrder.id}/download`}>
|
|
<Download className="w-3.5 h-3.5 mr-1" /> PDF Download
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)}
|
|
|
|
{/* Dialog für Ablehnungsbegründung */}
|
|
{rejectingOrder && (
|
|
<Dialog open={!!rejectingOrder} onOpenChange={(open) => !open && setRejectingOrder(null)}>
|
|
<DialogContent className="max-w-md bg-slate-950 border-white/10 text-white p-6 space-y-4">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-lg font-bold text-red-400 flex items-center gap-2">
|
|
<XCircle className="w-5 h-5" />
|
|
Anfrage Ablehnen
|
|
</DialogTitle>
|
|
<DialogDescription className="text-xs text-slate-400">
|
|
Bitte geben Sie einen Grund für die Ablehnung der Anfrage #{rejectingOrder.order_number || rejectingOrder.id.slice(0, 8)} an.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-xs text-slate-300">Begründung für den Partner</Label>
|
|
<Input
|
|
placeholder="z.B. Ungültiges Kundenprofil / Modul-Konflikt..."
|
|
value={rejectionReason}
|
|
onChange={(e) => setRejectionReason(e.target.value)}
|
|
className="bg-slate-900 border-white/10 text-white text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<DialogFooter className="gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setRejectingOrder(null)}
|
|
disabled={isSubmittingReject}
|
|
className="text-xs text-slate-400"
|
|
>
|
|
Abbrechen
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
onClick={handleConfirmReject}
|
|
disabled={isSubmittingReject}
|
|
className="text-xs gap-1 font-bold"
|
|
>
|
|
{isSubmittingReject ? <Loader2 className="w-3 h-3 animate-spin" /> : null}
|
|
Anfrage definitiv ablehnen
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|