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>
|
</thead>
|
||||||
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
|
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
|
||||||
{filteredCustomers.map((customer) => (
|
{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">
|
<td className="py-4">
|
||||||
<div className="font-semibold text-slate-900 dark:text-white">
|
<div className="font-semibold text-slate-900 dark:text-white">
|
||||||
{customer.company_name}
|
{customer.company_name}
|
||||||
</div>
|
</div>
|
||||||
{(customer.first_name || customer.last_name) && (
|
{(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">
|
<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-slate-400 shrink-0" />
|
<User className="w-3 h-3 text-indigo-500 dark:text-indigo-400 shrink-0" />
|
||||||
<span>{customer.first_name || ''} {customer.last_name || ''}</span>
|
<span>{customer.first_name || ''} {customer.last_name || ''}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</td>
|
</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 ? (
|
{customer.street ? (
|
||||||
<div className="flex items-center gap-2">
|
<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>
|
<span>
|
||||||
{customer.street}, {customer.zip} {customer.city}
|
{customer.street}, {customer.zip} {customer.city}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<span className="text-slate-400 dark:text-slate-600">–</span>
|
<span className="text-slate-400 dark:text-slate-500">–</span>
|
||||||
)}
|
)}
|
||||||
</td>
|
</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.email || <span className="text-slate-400 dark:text-slate-600">–</span>}
|
{customer.email || <span className="text-slate-400 dark:text-slate-500">–</span>}
|
||||||
</td>
|
</td>
|
||||||
<td className="py-4 text-sm text-slate-700 dark:text-slate-300">
|
<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>}
|
{customer.vat_id || <span className="text-slate-400 dark:text-slate-600">–</span>}
|
||||||
|
|||||||
@@ -197,25 +197,25 @@ export default function CompaniesPage() {
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
|
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
|
||||||
{filteredCompanies.map((company) => (
|
{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">
|
<td className="py-4 font-semibold text-slate-900 dark:text-white">
|
||||||
<div className="flex items-center gap-2">
|
<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}
|
{company.name}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</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">
|
<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>
|
<span>
|
||||||
{company.street ? `${company.street}, ${company.zip} ${company.city}` : '–'}
|
{company.street ? `${company.street}, ${company.zip} ${company.city}` : '–'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</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 ? (
|
{company.email ? (
|
||||||
<div className="flex items-center gap-2">
|
<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>
|
<span>{company.email}</span>
|
||||||
</div>
|
</div>
|
||||||
) : '–'}
|
) : '–'}
|
||||||
|
|||||||
@@ -7,8 +7,8 @@ export default async function AdminOrdersPage() {
|
|||||||
<div className="p-8 space-y-6">
|
<div className="p-8 space-y-6">
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex justify-between items-center">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-3xl font-bold tracking-tight text-white">Bestellungen</h1>
|
<h1 className="text-3xl font-bold tracking-tight text-white">Anfragen & Bestellungen</h1>
|
||||||
<p className="text-slate-400">Verwalten Sie alle Kundenbestellungen und greifen Sie auf generierte Annfragesbestätigungen zu.</p>
|
<p className="text-slate-400">Verwalten Sie alle Anfragen, prüfen Sie Details und greifen Sie auf generierte Anfragebestätigungen zu.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -67,7 +67,8 @@ export async function GET() {
|
|||||||
'orders',
|
'orders',
|
||||||
'profiles',
|
'profiles',
|
||||||
'users',
|
'users',
|
||||||
'settings'
|
'settings',
|
||||||
|
'branding_settings'
|
||||||
];
|
];
|
||||||
|
|
||||||
const backupData: Record<string, any[]> = {};
|
const backupData: Record<string, any[]> = {};
|
||||||
|
|||||||
@@ -1,96 +1,76 @@
|
|||||||
// API route for getting and updating SMTP settings (protected by admin check)
|
// API route for getting and updating SMTP settings (protected by admin check)
|
||||||
import { NextResponse } from 'next/server';
|
import { NextResponse } from 'next/server';
|
||||||
import { createServerClient } from '@supabase/ssr';
|
import { verifyAdmin } from '@/lib/actions/auth';
|
||||||
import { cookies } from 'next/headers';
|
import { createAdminClient } from '@/lib/supabase/admin';
|
||||||
|
import { createClient } from '@/lib/supabase/server';
|
||||||
|
|
||||||
export async function GET() {
|
export async function GET() {
|
||||||
const cookieStore = await cookies();
|
try {
|
||||||
|
await verifyAdmin();
|
||||||
|
} catch (err: any) {
|
||||||
|
return NextResponse.json({ error: err.message || 'Not authenticated' }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL || '';
|
try {
|
||||||
const supabase = createServerClient(
|
let client: any;
|
||||||
supabaseUrl,
|
try {
|
||||||
process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
|
client = createAdminClient();
|
||||||
{
|
} catch {
|
||||||
cookies: {
|
client = await createClient();
|
||||||
getAll() {
|
|
||||||
return cookieStore.getAll()
|
|
||||||
},
|
|
||||||
setAll(cookiesToSet) {
|
|
||||||
try {
|
|
||||||
cookiesToSet.forEach(({ name, value, options }) =>
|
|
||||||
cookieStore.set(name, value, options)
|
|
||||||
)
|
|
||||||
} 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();
|
const { data, error } = await client
|
||||||
if (authError || !authUser) {
|
.from('settings')
|
||||||
return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
|
.select('*')
|
||||||
}
|
.eq('id', 'smtp')
|
||||||
const { data: user } = await supabase.from('users').select('role').eq('id', authUser.id).single();
|
.maybeSingle();
|
||||||
if (!user || user.role !== 'admin') {
|
|
||||||
return NextResponse.json({ error: 'Insufficient permissions' }, { status: 403 });
|
|
||||||
}
|
|
||||||
|
|
||||||
const { data, error } = await supabase.from('settings').select('*').maybeSingle();
|
if (error) {
|
||||||
if (error) {
|
console.error('Error fetching SMTP settings:', error);
|
||||||
return NextResponse.json({ error: error.message }, { status: 500 });
|
return NextResponse.json({
|
||||||
|
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: '' }
|
||||||
|
});
|
||||||
}
|
}
|
||||||
return NextResponse.json({
|
|
||||||
settings: data || { host: '', port: 587, secure: false, user: '', pass: '' }
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function POST(request: Request) {
|
export async function POST(request: Request) {
|
||||||
const cookieStore = await cookies();
|
try {
|
||||||
|
await verifyAdmin();
|
||||||
const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL || '';
|
} catch (err: any) {
|
||||||
const supabase = createServerClient(
|
return NextResponse.json({ error: err.message || 'Not authenticated' }, { status: 401 });
|
||||||
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)
|
|
||||||
)
|
|
||||||
} 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 });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const payload = await request.json(); // expect {host, port, secure, user, pass}
|
try {
|
||||||
const { error } = await supabase
|
let client: any;
|
||||||
.from('settings')
|
try {
|
||||||
.upsert({ id: 'smtp', ...payload });
|
client = createAdminClient();
|
||||||
if (error) {
|
} catch {
|
||||||
return NextResponse.json({ error: error.message }, { status: 500 });
|
client = await createClient();
|
||||||
|
}
|
||||||
|
|
||||||
|
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 });
|
||||||
}
|
}
|
||||||
return NextResponse.json({ message: 'SMTP settings saved' });
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -224,43 +224,70 @@ export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Kassen & Produkte Detail-Übersicht */}
|
{/* Kassen & Produkte Detail-Übersicht (Separate Container-Box je Kasse) */}
|
||||||
{items.length > 0 && (
|
{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">
|
<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" />
|
<Monitor className="w-3.5 h-3.5 text-primary" />
|
||||||
Enthaltene Kassen ({items.length}):
|
Kassenaufstellung ({items.length} {items.length === 1 ? 'Kasse' : 'Kassen'}):
|
||||||
</p>
|
</p>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
{items.map((item, idx) => (
|
{items.map((item, idx) => {
|
||||||
<div
|
const devName = item.device_name || `K${idx + 1}`
|
||||||
key={idx}
|
const licNum = item.license_number
|
||||||
className="bg-slate-900/60 border border-white/10 rounded-xl p-3 space-y-1.5 text-xs"
|
const modules = item.selected_modules || []
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between gap-2">
|
return (
|
||||||
<span className="font-bold text-white flex items-center gap-1.5">
|
<div
|
||||||
<Monitor className="w-3.5 h-3.5 text-sky-400 shrink-0" />
|
key={idx}
|
||||||
{item.device_name || `Kasse ${idx + 1}`}
|
className="bg-slate-950/70 border border-slate-800 rounded-xl p-3.5 space-y-2.5 relative overflow-hidden"
|
||||||
</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`}>
|
{/* Kassen Container Header: Name + Lizenznummer daneben */}
|
||||||
{item.billing_interval === 'one_time' ? 'Kauf' : 'Abo'}
|
<div className="flex items-center justify-between gap-2 border-b border-white/5 pb-2">
|
||||||
</span>
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
</div>
|
<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">
|
||||||
<p className="text-slate-300 font-medium">{item.product_name}</p>
|
{devName}
|
||||||
{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>
|
</span>
|
||||||
))}
|
{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>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
{/* 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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -5,15 +5,42 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
|
|||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Input } from "@/components/ui/input";
|
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 {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownMenuContent,
|
DropdownMenuContent,
|
||||||
DropdownMenuItem,
|
DropdownMenuItem,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from "@/components/ui/dropdown-menu";
|
} from "@/components/ui/dropdown-menu";
|
||||||
import { updateOrderStatus } from "@/lib/actions/orders";
|
import {
|
||||||
import { resolveSupabaseUrl } from "@/lib/utils";
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { updateOrderStatus, rejectOrder } from "@/lib/actions/orders";
|
||||||
|
|
||||||
interface OrdersTableProps {
|
interface OrdersTableProps {
|
||||||
initialOrders: any[];
|
initialOrders: any[];
|
||||||
@@ -21,7 +48,10 @@ interface OrdersTableProps {
|
|||||||
|
|
||||||
const statusLabel: Record<string, string> = {
|
const statusLabel: Record<string, string> = {
|
||||||
pending: 'Eingegangen',
|
pending: 'Eingegangen',
|
||||||
active: 'In Bearbeitung',
|
pending_approval: 'Wartet auf Freigabe',
|
||||||
|
in_review: 'In Prüfung',
|
||||||
|
approved: 'Freigegeben',
|
||||||
|
active: 'Aktiviert',
|
||||||
completed: 'Abgeschlossen',
|
completed: 'Abgeschlossen',
|
||||||
cancelled: 'Storniert',
|
cancelled: 'Storniert',
|
||||||
rejected: 'Abgelehnt',
|
rejected: 'Abgelehnt',
|
||||||
@@ -29,27 +59,51 @@ const statusLabel: Record<string, string> = {
|
|||||||
|
|
||||||
const statusClass: Record<string, string> = {
|
const statusClass: Record<string, string> = {
|
||||||
pending: 'bg-amber-500/20 text-amber-400 border border-amber-500/30',
|
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',
|
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',
|
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',
|
cancelled: 'bg-slate-500/20 text-slate-400 border border-slate-500/30',
|
||||||
rejected: 'bg-rose-500/20 text-rose-400 border border-rose-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) {
|
export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
||||||
const [orders, setOrders] = useState(initialOrders);
|
const [orders, setOrders] = useState(initialOrders);
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||||
|
const [sortBy, setSortBy] = useState<SortField>("date_desc");
|
||||||
const [updatingId, setUpdatingId] = useState<string | null>(null);
|
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(() => {
|
useEffect(() => {
|
||||||
setOrders(initialOrders);
|
setOrders(initialOrders);
|
||||||
}, [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);
|
setUpdatingId(orderId);
|
||||||
try {
|
try {
|
||||||
await updateOrderStatus(orderId, newStatus);
|
await updateOrderStatus(orderId, newStatus);
|
||||||
setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: newStatus } : o));
|
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) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
alert("Fehler beim Ändern des Status.");
|
alert("Fehler beim Ändern des Status.");
|
||||||
@@ -58,36 +112,98 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const filteredOrders = orders.filter((order) => {
|
const handleConfirmReject = async () => {
|
||||||
const orderNum = (order.order_number || "").toLowerCase();
|
if (!rejectingOrder) return;
|
||||||
const company = (order.customer_data?.company_name || "").toLowerCase();
|
setIsSubmittingReject(true);
|
||||||
const contact = `${order.customer_data?.first_name || ""} ${order.customer_data?.last_name || ""}`.toLowerCase();
|
try {
|
||||||
|
await rejectOrder(rejectingOrder.id, rejectionReason || "Vom Administrator abgelehnt.");
|
||||||
const matchesSearch =
|
setOrders(prev => prev.map(o => o.id === rejectingOrder.id ? { ...o, status: 'rejected' } : o));
|
||||||
orderNum.includes(search.toLowerCase()) ||
|
if (selectedOrder?.id === rejectingOrder.id) {
|
||||||
company.includes(search.toLowerCase()) ||
|
setSelectedOrder((prev: any) => prev ? { ...prev, status: 'rejected' } : null);
|
||||||
contact.includes(search.toLowerCase());
|
}
|
||||||
|
setRejectingOrder(null);
|
||||||
|
setRejectionReason("");
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
alert("Fehler beim Ablehnen der Anfrage.");
|
||||||
|
} finally {
|
||||||
|
setIsSubmittingReject(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const matchesStatus = statusFilter === "all" || order.status === statusFilter;
|
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());
|
||||||
|
|
||||||
return matchesSearch && matchesStatus;
|
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 (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{/* Filterleiste */}
|
{/* Filter- & Sortierleiste */}
|
||||||
<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="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="relative w-full md:max-w-sm">
|
<div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
<div className="relative w-full sm:w-80">
|
||||||
<Input
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||||
placeholder="Bestellung, Firma oder Name suchen..."
|
<Input
|
||||||
value={search}
|
placeholder="Anfragenr., Firma oder Name..."
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
value={search}
|
||||||
className="pl-10 bg-slate-950/40 border-white/10 text-white placeholder:text-slate-500"
|
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>
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-1.5">
|
||||||
<Button
|
<Button
|
||||||
variant={statusFilter === "all" ? "default" : "outline"}
|
variant={statusFilter === "all" ? "default" : "outline"}
|
||||||
size="sm"
|
size="sm"
|
||||||
@@ -104,35 +220,43 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
|||||||
>
|
>
|
||||||
Eingegangen
|
Eingegangen
|
||||||
</Button>
|
</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
|
<Button
|
||||||
variant={statusFilter === "active" ? "default" : "outline"}
|
variant={statusFilter === "active" ? "default" : "outline"}
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => setStatusFilter("active")}
|
onClick={() => setStatusFilter("active")}
|
||||||
className="text-xs border-blue-500/20 hover:bg-blue-500/10 text-blue-400"
|
className="text-xs border-blue-500/20 hover:bg-blue-500/10 text-blue-400"
|
||||||
>
|
>
|
||||||
In Bearbeitung
|
Aktiviert
|
||||||
</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>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant={statusFilter === "rejected" ? "default" : "outline"}
|
variant={statusFilter === "rejected" ? "default" : "outline"}
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => setStatusFilter("rejected")}
|
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
|
Abgelehnt
|
||||||
</Button>
|
</Button>
|
||||||
@@ -144,31 +268,31 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
|||||||
<Table>
|
<Table>
|
||||||
<TableHeader>
|
<TableHeader>
|
||||||
<TableRow className="border-white/10 bg-white/5 hover:bg-transparent">
|
<TableRow className="border-white/10 bg-white/5 hover:bg-transparent">
|
||||||
<TableHead className="w-[140px] text-slate-200">Bestellnr.</TableHead>
|
<TableHead className="w-[140px] text-slate-200 font-bold">Anfragenr.</TableHead>
|
||||||
<TableHead className="text-slate-200">Datum</TableHead>
|
<TableHead className="text-slate-200 font-bold">Datum</TableHead>
|
||||||
<TableHead className="text-slate-200">Kunde</TableHead>
|
<TableHead className="text-slate-200 font-bold">Kunde / Firma</TableHead>
|
||||||
<TableHead className="text-slate-200">Auswahl</TableHead>
|
<TableHead className="text-slate-200 font-bold">Auswahl / Produkte</TableHead>
|
||||||
<TableHead className="text-slate-200">Betrag</TableHead>
|
<TableHead className="text-slate-200 font-bold">Gesamtbetrag</TableHead>
|
||||||
<TableHead className="text-slate-200">Status</TableHead>
|
<TableHead className="text-slate-200 font-bold">Status</TableHead>
|
||||||
<TableHead className="text-right text-slate-200">Aktionen</TableHead>
|
<TableHead className="text-right text-slate-200 font-bold">Aktionen</TableHead>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{filteredOrders.length === 0 ? (
|
{filteredAndSortedOrders.length === 0 ? (
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell colSpan={7} className="text-center py-16 text-slate-500 italic">
|
<TableCell colSpan={7} className="text-center py-16 text-slate-500 italic">
|
||||||
Keine Bestellungen gefunden.
|
Keine Anfragen gefunden.
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
) : (
|
) : (
|
||||||
filteredOrders.map((order) => {
|
filteredAndSortedOrders.map((order) => {
|
||||||
const items = order.order_data?.items || [];
|
const items = order.order_data?.items || [];
|
||||||
return (
|
return (
|
||||||
<TableRow key={order.id} className="border-white/5 hover:bg-white/5 transition-colors">
|
<TableRow key={order.id} className="border-white/5 hover:bg-white/5 transition-colors group">
|
||||||
<TableCell className="font-mono text-xs text-primary font-semibold">
|
<TableCell className="font-mono text-xs text-primary font-bold">
|
||||||
#{order.order_number || order.id.slice(0, 8)}
|
#{order.order_number || order.id.slice(0, 8)}
|
||||||
</TableCell>
|
</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', {
|
{new Date(order.created_at).toLocaleDateString('de-DE', {
|
||||||
day: '2-digit', month: '2-digit', year: 'numeric'
|
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">
|
<div className="font-semibold text-white text-sm">
|
||||||
{order.customer_data?.company_name || 'Privatkunde'}
|
{order.customer_data?.company_name || 'Privatkunde'}
|
||||||
</div>
|
</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}
|
{order.customer_data?.first_name} {order.customer_data?.last_name}
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="max-w-[200px]">
|
<TableCell className="max-w-[240px]">
|
||||||
<div className="flex flex-col gap-1.5">
|
<div className="flex flex-col gap-1.5">
|
||||||
{items.map((item: any, idx: number) => (
|
{items.slice(0, 2).map((item: any, idx: number) => (
|
||||||
<div
|
<div
|
||||||
key={idx}
|
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">
|
<span className="font-semibold text-white block truncate">
|
||||||
{item.device_name || 'Kasse'}:
|
{item.device_name || 'Kasse'}: {item.product_name}
|
||||||
</span>
|
</span>
|
||||||
<span>{item.product_name}</span>
|
|
||||||
{item.selected_modules?.length > 0 && (
|
{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(', ')}
|
+ {item.selected_modules.map((m: any) => m.module_name || m.name).join(', ')}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
{items.length > 2 && (
|
||||||
|
<span className="text-[10px] text-primary font-semibold">
|
||||||
|
+ {items.length - 2} weitere Kassen
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="font-bold text-white text-sm">
|
<TableCell className="font-bold text-white text-sm whitespace-nowrap">
|
||||||
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price)}
|
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price || 0)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild disabled={updatingId === order.id}>
|
<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">
|
<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 ? (
|
{updatingId === order.id ? (
|
||||||
<Loader2 className="w-3 h-3 animate-spin mr-1" />
|
<Loader2 className="w-3 h-3 animate-spin mr-1" />
|
||||||
) : null}
|
) : null}
|
||||||
@@ -217,7 +346,7 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
|||||||
</Badge>
|
</Badge>
|
||||||
</button>
|
</button>
|
||||||
</DropdownMenuTrigger>
|
</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]) => (
|
{Object.entries(statusLabel).map(([key, label]) => (
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
key={key}
|
key={key}
|
||||||
@@ -233,9 +362,17 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
|||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="text-right">
|
<TableCell className="text-right">
|
||||||
<div className="flex justify-end gap-1.5">
|
<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">
|
<Button
|
||||||
<a href={`/order?id=${order.id}`}>
|
variant="outline"
|
||||||
Bearbeiten
|
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>
|
</a>
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" size="sm" asChild className="h-8 border-white/10 hover:bg-primary/20 text-xs">
|
<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
|
<ExternalLink className="w-3.5 h-3.5 mr-1" /> PDF
|
||||||
</a>
|
</a>
|
||||||
</Button>
|
</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>
|
</div>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
@@ -257,6 +389,248 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
|
|||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -68,13 +68,22 @@ function DeviceCard({
|
|||||||
`&device_id=${encodeURIComponent(device.deviceId)}`
|
`&device_id=${encodeURIComponent(device.deviceId)}`
|
||||||
|
|
||||||
return (
|
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 */}
|
{/* Kassen-Info links */}
|
||||||
<div className="space-y-2 min-w-[200px] flex-1">
|
<div className="space-y-2.5 min-w-[200px] flex-1">
|
||||||
{/* Kassen-Name + Status */}
|
{/* Kassen-Name + Lizenznummer daneben + Status */}
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
<div className="flex items-center gap-2 flex-wrap border-b border-white/5 pb-2">
|
||||||
<Monitor className="w-4 h-4 text-primary shrink-0" />
|
<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">
|
||||||
<span className="font-bold text-white text-base">{device.deviceName}</span>
|
{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
|
<Badge
|
||||||
className={`text-xs ${statusClass[device.orderStatus] ?? 'bg-slate-500/20 text-slate-300'}`}
|
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;
|
const nextParam = typeof window !== 'undefined' ? new URLSearchParams(window.location.search).get('next') : null;
|
||||||
if (nextParam) {
|
if (nextParam) {
|
||||||
router.push(nextParam);
|
router.push(nextParam);
|
||||||
} else if (role === "admin") {
|
|
||||||
router.push("/admin/einstellungen");
|
|
||||||
} else {
|
} else {
|
||||||
router.push("/my-customers");
|
router.push("/");
|
||||||
}
|
}
|
||||||
}, [router]);
|
}, [router]);
|
||||||
|
|
||||||
|
|||||||
@@ -542,7 +542,12 @@ export function OrderWizard({
|
|||||||
|
|
||||||
const nextStep = () => {
|
const nextStep = () => {
|
||||||
if (step === 3 && allCategoriesFilled && productValidationErrors.length === 0) {
|
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()
|
addToBasket()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -738,7 +743,8 @@ export function OrderWizard({
|
|||||||
setIsSubmitting(true)
|
setIsSubmitting(true)
|
||||||
try {
|
try {
|
||||||
let finalItems = [...basketItems]
|
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()
|
const normLicense = licenseNumber.trim().toUpperCase()
|
||||||
if (normLicense) {
|
if (normLicense) {
|
||||||
const isDuplicateInBasket = basketItems.some(
|
const isDuplicateInBasket = basketItems.some(
|
||||||
|
|||||||
Reference in New Issue
Block a user