Compare commits
7 Commits
c27cb858c1
...
409466af9b
| Author | SHA1 | Date | |
|---|---|---|---|
|
409466af9b | ||
|
|
8f3d6e5569 | ||
|
|
8588eda3c9 | ||
|
|
8a4dbbaf14 | ||
|
|
037e6d749a | ||
|
|
1c8de6e895 | ||
|
|
4296a9106f |
@@ -245,32 +245,32 @@ export default function CompanyCustomersPage() {
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
|
||||
{filteredCustomers.map((customer) => (
|
||||
<tr key={customer.id} className="hover:bg-slate-50 dark:hover:bg-white/3 transition-colors">
|
||||
<tr key={customer.id} className="hover:bg-slate-100 dark:hover:bg-white/10 transition-colors group">
|
||||
<td className="py-4">
|
||||
<div className="font-semibold text-slate-900 dark:text-white">
|
||||
{customer.company_name}
|
||||
</div>
|
||||
{(customer.first_name || customer.last_name) && (
|
||||
<div className="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-1 mt-0.5">
|
||||
<User className="w-3 h-3 text-slate-400 shrink-0" />
|
||||
<div className="text-xs text-slate-600 dark:text-slate-300 font-medium flex items-center gap-1 mt-0.5">
|
||||
<User className="w-3 h-3 text-indigo-500 dark:text-indigo-400 shrink-0" />
|
||||
<span>{customer.first_name || ''} {customer.last_name || ''}</span>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-4 text-sm text-slate-700 dark:text-slate-300">
|
||||
<td className="py-4 text-sm text-slate-800 dark:text-slate-100 font-medium">
|
||||
{customer.street ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" />
|
||||
<MapPin className="w-3.5 h-3.5 text-indigo-500 dark:text-indigo-400 shrink-0" />
|
||||
<span>
|
||||
{customer.street}, {customer.zip} {customer.city}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-slate-400 dark:text-slate-600">–</span>
|
||||
<span className="text-slate-400 dark:text-slate-500">–</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-4 text-sm text-slate-700 dark:text-slate-300">
|
||||
{customer.email || <span className="text-slate-400 dark:text-slate-600">–</span>}
|
||||
<td className="py-4 text-sm text-slate-800 dark:text-slate-100 font-medium">
|
||||
{customer.email || <span className="text-slate-400 dark:text-slate-500">–</span>}
|
||||
</td>
|
||||
<td className="py-4 text-sm text-slate-700 dark:text-slate-300">
|
||||
{customer.vat_id || <span className="text-slate-400 dark:text-slate-600">–</span>}
|
||||
|
||||
@@ -197,25 +197,25 @@ export default function CompaniesPage() {
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
|
||||
{filteredCompanies.map((company) => (
|
||||
<tr key={company.id} className="hover:bg-slate-50 dark:hover:bg-white/3 transition-colors">
|
||||
<tr key={company.id} className="hover:bg-slate-100 dark:hover:bg-white/10 transition-colors group">
|
||||
<td className="py-4 font-semibold text-slate-900 dark:text-white">
|
||||
<div className="flex items-center gap-2">
|
||||
<Building2 className="w-4 h-4 text-blue-500 shrink-0" />
|
||||
<Building2 className="w-4 h-4 text-blue-500 dark:text-blue-400 shrink-0" />
|
||||
{company.name}
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 text-sm text-slate-700 dark:text-slate-300">
|
||||
<td className="py-4 text-sm text-slate-800 dark:text-slate-100 font-medium">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" />
|
||||
<MapPin className="w-3.5 h-3.5 text-blue-500 dark:text-blue-400 shrink-0" />
|
||||
<span>
|
||||
{company.street ? `${company.street}, ${company.zip} ${company.city}` : '–'}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 text-sm text-slate-700 dark:text-slate-300">
|
||||
<td className="py-4 text-sm text-slate-800 dark:text-slate-100 font-medium">
|
||||
{company.email ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="w-3.5 h-3.5 text-slate-400 shrink-0" />
|
||||
<Mail className="w-3.5 h-3.5 text-blue-500 dark:text-blue-400 shrink-0" />
|
||||
<span>{company.email}</span>
|
||||
</div>
|
||||
) : '–'}
|
||||
|
||||
@@ -7,8 +7,8 @@ export default async function AdminOrdersPage() {
|
||||
<div className="p-8 space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-white">Bestellungen</h1>
|
||||
<p className="text-slate-400">Verwalten Sie alle Kundenbestellungen und greifen Sie auf generierte Annfragesbestätigungen zu.</p>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-white">Anfragen & Bestellungen</h1>
|
||||
<p className="text-slate-400">Verwalten Sie alle Anfragen, prüfen Sie Details und greifen Sie auf generierte Anfragebestätigungen zu.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -67,7 +67,8 @@ export async function GET() {
|
||||
'orders',
|
||||
'profiles',
|
||||
'users',
|
||||
'settings'
|
||||
'settings',
|
||||
'branding_settings'
|
||||
];
|
||||
|
||||
const backupData: Record<string, any[]> = {};
|
||||
|
||||
@@ -1,96 +1,76 @@
|
||||
// API route for getting and updating SMTP settings (protected by admin check)
|
||||
import { NextResponse } from 'next/server';
|
||||
import { createServerClient } from '@supabase/ssr';
|
||||
import { cookies } from 'next/headers';
|
||||
import { verifyAdmin } from '@/lib/actions/auth';
|
||||
import { createAdminClient } from '@/lib/supabase/admin';
|
||||
import { createClient } from '@/lib/supabase/server';
|
||||
|
||||
export async function GET() {
|
||||
const cookieStore = await cookies();
|
||||
|
||||
const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL || '';
|
||||
const supabase = createServerClient(
|
||||
supabaseUrl,
|
||||
process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
|
||||
{
|
||||
cookies: {
|
||||
getAll() {
|
||||
return cookieStore.getAll()
|
||||
},
|
||||
setAll(cookiesToSet) {
|
||||
try {
|
||||
cookiesToSet.forEach(({ name, value, options }) =>
|
||||
cookieStore.set(name, value, options)
|
||||
)
|
||||
await verifyAdmin();
|
||||
} catch (err: any) {
|
||||
return NextResponse.json({ error: err.message || 'Not authenticated' }, { status: 401 });
|
||||
}
|
||||
|
||||
try {
|
||||
let client: any;
|
||||
try {
|
||||
client = createAdminClient();
|
||||
} catch {
|
||||
// Kann in einer API-Route ignoriert werden, wenn nur gelesen wird
|
||||
}
|
||||
},
|
||||
},
|
||||
cookieOptions: {
|
||||
name: "webshop-auth-token",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const { data: { user: authUser }, error: authError } = await supabase.auth.getUser();
|
||||
if (authError || !authUser) {
|
||||
return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
|
||||
}
|
||||
const { data: user } = await supabase.from('users').select('role').eq('id', authUser.id).single();
|
||||
if (!user || user.role !== 'admin') {
|
||||
return NextResponse.json({ error: 'Insufficient permissions' }, { status: 403 });
|
||||
client = await createClient();
|
||||
}
|
||||
|
||||
const { data, error } = await supabase.from('settings').select('*').maybeSingle();
|
||||
const { data, error } = await client
|
||||
.from('settings')
|
||||
.select('*')
|
||||
.eq('id', 'smtp')
|
||||
.maybeSingle();
|
||||
|
||||
if (error) {
|
||||
return NextResponse.json({ error: error.message }, { status: 500 });
|
||||
}
|
||||
console.error('Error fetching SMTP settings:', error);
|
||||
return NextResponse.json({
|
||||
settings: data || { host: '', port: 587, secure: false, user: '', pass: '' }
|
||||
settings: { host: '', port: 587, secure: false, user: '', pass: '' }
|
||||
});
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
settings: data || { host: '', port: 587, secure: false, user: '', pass: '' }
|
||||
});
|
||||
} catch (err: any) {
|
||||
console.error('SMTP settings GET error:', err);
|
||||
return NextResponse.json({
|
||||
settings: { host: '', port: 587, secure: false, user: '', pass: '' }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const cookieStore = await cookies();
|
||||
|
||||
const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL || '';
|
||||
const supabase = createServerClient(
|
||||
supabaseUrl,
|
||||
process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
|
||||
{
|
||||
cookies: {
|
||||
getAll() {
|
||||
return cookieStore.getAll()
|
||||
},
|
||||
setAll(cookiesToSet) {
|
||||
try {
|
||||
cookiesToSet.forEach(({ name, value, options }) =>
|
||||
cookieStore.set(name, value, options)
|
||||
)
|
||||
await verifyAdmin();
|
||||
} catch (err: any) {
|
||||
return NextResponse.json({ error: err.message || 'Not authenticated' }, { status: 401 });
|
||||
}
|
||||
|
||||
try {
|
||||
let client: any;
|
||||
try {
|
||||
client = createAdminClient();
|
||||
} catch {
|
||||
// Kann in einer API-Route ignoriert werden, wenn nur gelesen wird
|
||||
}
|
||||
},
|
||||
},
|
||||
cookieOptions: {
|
||||
name: "webshop-auth-token",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const { data: { user: authUser }, error: authError } = await supabase.auth.getUser();
|
||||
if (authError || !authUser) {
|
||||
return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
|
||||
}
|
||||
const { data: user } = await supabase.from('users').select('role').eq('id', authUser.id).single();
|
||||
if (!user || user.role !== 'admin') {
|
||||
return NextResponse.json({ error: 'Insufficient permissions' }, { status: 403 });
|
||||
client = await createClient();
|
||||
}
|
||||
|
||||
const payload = await request.json(); // expect {host, port, secure, user, pass}
|
||||
const { error } = await supabase
|
||||
const payload = await request.json();
|
||||
const { error } = await client
|
||||
.from('settings')
|
||||
.upsert({ id: 'smtp', ...payload });
|
||||
|
||||
if (error) {
|
||||
console.error('Error saving SMTP settings:', error);
|
||||
return NextResponse.json({ error: error.message }, { status: 500 });
|
||||
}
|
||||
|
||||
return NextResponse.json({ message: 'SMTP settings saved' });
|
||||
} catch (err: any) {
|
||||
console.error('SMTP settings POST error:', err);
|
||||
return NextResponse.json({ error: err.message || 'Fehler beim Speichern' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
@@ -224,43 +224,70 @@ export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kassen & Produkte Detail-Übersicht */}
|
||||
{/* Kassen & Produkte Detail-Übersicht (Separate Container-Box je Kasse) */}
|
||||
{items.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-3 pt-2">
|
||||
<p className="text-[11px] font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
|
||||
<Monitor className="w-3.5 h-3.5 text-primary" />
|
||||
Enthaltene Kassen ({items.length}):
|
||||
Kassenaufstellung ({items.length} {items.length === 1 ? 'Kasse' : 'Kassen'}):
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
|
||||
{items.map((item, idx) => (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{items.map((item, idx) => {
|
||||
const devName = item.device_name || `K${idx + 1}`
|
||||
const licNum = item.license_number
|
||||
const modules = item.selected_modules || []
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-slate-900/60 border border-white/10 rounded-xl p-3 space-y-1.5 text-xs"
|
||||
className="bg-slate-950/70 border border-slate-800 rounded-xl p-3.5 space-y-2.5 relative overflow-hidden"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-bold text-white flex items-center gap-1.5">
|
||||
<Monitor className="w-3.5 h-3.5 text-sky-400 shrink-0" />
|
||||
{item.device_name || `Kasse ${idx + 1}`}
|
||||
{/* Kassen Container Header: Name + Lizenznummer daneben */}
|
||||
<div className="flex items-center justify-between gap-2 border-b border-white/5 pb-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="px-2 py-0.5 rounded text-xs font-extrabold bg-blue-500/20 text-blue-400 border border-blue-500/30 font-mono">
|
||||
{devName}
|
||||
</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`}>
|
||||
{licNum && (
|
||||
<span className="text-xs font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20 flex items-center gap-1">
|
||||
<span className="text-[10px] text-slate-400 uppercase font-sans">Lizenz:</span>
|
||||
{licNum}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className={`text-[10px] px-1.5 py-0.5 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 shrink-0`}>
|
||||
{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>
|
||||
|
||||
{/* Inhalt: Hauptprodukt & Module nach Kategorien */}
|
||||
<div className="space-y-2 text-xs">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-bold text-white text-sm">{item.product_name}</span>
|
||||
{((item as any).price || item.base_price) && (
|
||||
<span className="text-slate-300 font-mono">{fmt((item as any).price || item.base_price)}</span>
|
||||
)}
|
||||
{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)` : ''}
|
||||
</div>
|
||||
|
||||
{modules.length > 0 && (
|
||||
<div className="pt-2 border-t border-white/5 space-y-1.5">
|
||||
<span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider block">
|
||||
Enthaltene Zusatzmodule:
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{modules.map((mod: any, mIdx: number) => (
|
||||
<span key={mIdx} className="text-[11px] bg-slate-900 text-slate-200 px-2 py-1 rounded-md border border-white/10 flex items-center gap-1">
|
||||
<span className="text-primary font-bold">+</span> {mod.module_name || mod.name}
|
||||
{mod.quantity > 1 ? <span className="text-slate-400 font-mono ml-0.5">({mod.quantity}x)</span> : ''}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -5,15 +5,42 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
|
||||
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 { 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 { updateOrderStatus } from "@/lib/actions/orders";
|
||||
import { resolveSupabaseUrl } from "@/lib/utils";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { updateOrderStatus, rejectOrder } from "@/lib/actions/orders";
|
||||
|
||||
interface OrdersTableProps {
|
||||
initialOrders: any[];
|
||||
@@ -21,7 +48,10 @@ interface OrdersTableProps {
|
||||
|
||||
const statusLabel: Record<string, string> = {
|
||||
pending: 'Eingegangen',
|
||||
active: 'In Bearbeitung',
|
||||
pending_approval: 'Wartet auf Freigabe',
|
||||
in_review: 'In Prüfung',
|
||||
approved: 'Freigegeben',
|
||||
active: 'Aktiviert',
|
||||
completed: 'Abgeschlossen',
|
||||
cancelled: 'Storniert',
|
||||
rejected: 'Abgelehnt',
|
||||
@@ -29,27 +59,51 @@ const statusLabel: Record<string, string> = {
|
||||
|
||||
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-red-500/20 text-red-400 border border-red-500/30',
|
||||
rejected: 'bg-rose-500/20 text-rose-400 border border-rose-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);
|
||||
|
||||
useEffect(() => {
|
||||
setOrders(initialOrders);
|
||||
}, [initialOrders]);
|
||||
|
||||
const handleStatusChange = async (orderId: string, newStatus: 'pending' | 'active' | 'completed' | 'cancelled' | 'rejected') => {
|
||||
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.");
|
||||
@@ -58,7 +112,27 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const filteredOrders = orders.filter((order) => {
|
||||
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();
|
||||
@@ -71,23 +145,65 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
||||
const matchesStatus = statusFilter === "all" || order.status === statusFilter;
|
||||
|
||||
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">
|
||||
{/* 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">
|
||||
{/* 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="Bestellung, Firma oder Name suchen..."
|
||||
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>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<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"
|
||||
@@ -104,35 +220,43 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
||||
>
|
||||
Eingegangen
|
||||
</Button>
|
||||
<Button
|
||||
variant={statusFilter === "pending_approval" ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setStatusFilter("pending_approval")}
|
||||
className="text-xs border-amber-500/30 hover:bg-amber-500/20 text-amber-300"
|
||||
>
|
||||
Wartet auf Freigabe
|
||||
</Button>
|
||||
<Button
|
||||
variant={statusFilter === "in_review" ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setStatusFilter("in_review")}
|
||||
className="text-xs border-purple-500/20 hover:bg-purple-500/10 text-purple-400"
|
||||
>
|
||||
In Prüfung
|
||||
</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"
|
||||
>
|
||||
Freigegeben
|
||||
</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
|
||||
Aktiviert
|
||||
</Button>
|
||||
<Button
|
||||
variant={statusFilter === "rejected" ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setStatusFilter("rejected")}
|
||||
className="text-xs border-rose-500/20 hover:bg-rose-500/10 text-rose-400"
|
||||
className="text-xs border-red-500/20 hover:bg-red-500/10 text-red-400"
|
||||
>
|
||||
Abgelehnt
|
||||
</Button>
|
||||
@@ -144,31 +268,31 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
||||
<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>
|
||||
<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>
|
||||
{filteredOrders.length === 0 ? (
|
||||
{filteredAndSortedOrders.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center py-16 text-slate-500 italic">
|
||||
Keine Bestellungen gefunden.
|
||||
Keine Anfragen gefunden.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredOrders.map((order) => {
|
||||
filteredAndSortedOrders.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">
|
||||
<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">
|
||||
<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'
|
||||
})}
|
||||
@@ -177,38 +301,43 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
||||
<div className="font-semibold text-white text-sm">
|
||||
{order.customer_data?.company_name || 'Privatkunde'}
|
||||
</div>
|
||||
<div className="text-xs text-slate-400">
|
||||
<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-[200px]">
|
||||
<TableCell className="max-w-[240px]">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{items.map((item: any, idx: number) => (
|
||||
{items.slice(0, 2).map((item: any, idx: number) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="text-[10px] text-slate-300 leading-tight"
|
||||
className="text-[11px] text-slate-300 leading-tight"
|
||||
>
|
||||
<span className="font-semibold text-white block">
|
||||
{item.device_name || 'Kasse'}:
|
||||
<span className="font-semibold text-white block truncate">
|
||||
{item.device_name || 'Kasse'}: {item.product_name}
|
||||
</span>
|
||||
<span>{item.product_name}</span>
|
||||
{item.selected_modules?.length > 0 && (
|
||||
<span className="text-slate-500 block text-[9px] mt-0.5">
|
||||
<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">
|
||||
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price)}
|
||||
<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 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'}`}>
|
||||
<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}
|
||||
@@ -217,7 +346,7 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
||||
</Badge>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="bg-slate-900 border-white/10 text-white min-w-[140px]">
|
||||
<DropdownMenuContent align="start" className="bg-slate-900 border-white/10 text-white min-w-[170px]">
|
||||
{Object.entries(statusLabel).map(([key, label]) => (
|
||||
<DropdownMenuItem
|
||||
key={key}
|
||||
@@ -233,9 +362,17 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-1.5">
|
||||
<Button variant="outline" size="sm" asChild className="h-8 border-amber-500/20 hover:bg-amber-500/10 text-amber-400 text-xs">
|
||||
<a href={`/order?id=${order.id}`}>
|
||||
Bearbeiten
|
||||
<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 bearbeiten
|
||||
</a>
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" asChild className="h-8 border-white/10 hover:bg-primary/20 text-xs">
|
||||
@@ -243,11 +380,6 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
||||
<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={`/api/admin/orders/${order.id}/download`}>
|
||||
<Download className="w-3.5 h-3.5" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
@@ -257,6 +389,248 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
||||
</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">Gesamtsumme</div>
|
||||
<div className="text-2xl font-extrabold text-primary">
|
||||
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(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="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 ({(selectedOrder.order_data?.items || []).length})
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{(selectedOrder.order_data?.items || []).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>
|
||||
{item.price && (
|
||||
<span className="text-xs font-bold text-slate-200">
|
||||
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(item.price)}
|
||||
</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">
|
||||
<span className="text-slate-300 font-medium truncate">
|
||||
{mod.module_name || mod.name}
|
||||
</span>
|
||||
{mod.price && (
|
||||
<span className="text-slate-400 font-mono text-[11px]">
|
||||
+{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price)}
|
||||
</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 bearbeiten
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -68,13 +68,22 @@ function DeviceCard({
|
||||
`&device_id=${encodeURIComponent(device.deviceId)}`
|
||||
|
||||
return (
|
||||
<div 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-start justify-between gap-4">
|
||||
<div className="p-4 rounded-xl bg-slate-950/70 border border-slate-800 hover:border-slate-700 transition-all flex flex-col md:flex-row md:items-start justify-between gap-4 relative overflow-hidden">
|
||||
{/* Kassen-Info links */}
|
||||
<div className="space-y-2 min-w-[200px] flex-1">
|
||||
{/* Kassen-Name + Status */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Monitor className="w-4 h-4 text-primary shrink-0" />
|
||||
<span className="font-bold text-white text-base">{device.deviceName}</span>
|
||||
<div className="space-y-2.5 min-w-[200px] flex-1">
|
||||
{/* Kassen-Name + Lizenznummer daneben + Status */}
|
||||
<div className="flex items-center gap-2 flex-wrap border-b border-white/5 pb-2">
|
||||
<span className="px-2 py-0.5 rounded text-xs font-extrabold bg-blue-500/20 text-blue-400 border border-blue-500/30 font-mono">
|
||||
{device.deviceName}
|
||||
</span>
|
||||
|
||||
{device.items[0]?.license_number && (
|
||||
<span className="text-xs font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20 flex items-center gap-1">
|
||||
<span className="text-[10px] text-slate-400 uppercase font-sans">Lizenz:</span>
|
||||
{device.items[0].license_number}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<Badge
|
||||
className={`text-xs ${statusClass[device.orderStatus] ?? 'bg-slate-500/20 text-slate-300'}`}
|
||||
>
|
||||
|
||||
@@ -64,10 +64,8 @@ export function LoginForm({
|
||||
const nextParam = typeof window !== 'undefined' ? new URLSearchParams(window.location.search).get('next') : null;
|
||||
if (nextParam) {
|
||||
router.push(nextParam);
|
||||
} else if (role === "admin") {
|
||||
router.push("/admin/einstellungen");
|
||||
} else {
|
||||
router.push("/my-customers");
|
||||
router.push("/");
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
|
||||
@@ -542,7 +542,12 @@ export function OrderWizard({
|
||||
|
||||
const nextStep = () => {
|
||||
if (step === 3 && allCategoriesFilled && productValidationErrors.length === 0) {
|
||||
if (hasActiveSelection) {
|
||||
const isDirtyNewDevice = deviceName.trim() !== '' || licenseNumber.trim() !== '' || Object.values(moduleQuantities).some(q => q > 0)
|
||||
if (editingIdx !== null) {
|
||||
addToBasket()
|
||||
} else if (basketItems.length === 0 && hasActiveSelection) {
|
||||
addToBasket()
|
||||
} else if (isDirtyNewDevice && hasActiveSelection) {
|
||||
addToBasket()
|
||||
}
|
||||
}
|
||||
@@ -738,7 +743,8 @@ export function OrderWizard({
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
let finalItems = [...basketItems]
|
||||
if (hasActiveSelection && allCategoriesFilled && productValidationErrors.length === 0) {
|
||||
const isDirtyNewDevice = deviceName.trim() !== '' || licenseNumber.trim() !== '' || Object.values(moduleQuantities).some(q => q > 0)
|
||||
if ((editingIdx !== null || basketItems.length === 0 || isDirtyNewDevice) && hasActiveSelection && allCategoriesFilled && productValidationErrors.length === 0) {
|
||||
const normLicense = licenseNumber.trim().toUpperCase()
|
||||
if (normLicense) {
|
||||
const isDuplicateInBasket = basketItems.some(
|
||||
|
||||
Reference in New Issue
Block a user