538 lines
28 KiB
JavaScript
538 lines
28 KiB
JavaScript
import React, { useState } from "react";
|
|
import { base44 } from "@/api/base44Client";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { FileText, Plus, Search, Eye, AlertTriangle, CheckCircle, Clock, DollarSign, Edit, TrendingUp, TrendingDown, Calendar, ArrowUpRight, Sparkles, BarChart3, PieChart, MapPin, User } from "lucide-react";
|
|
import { format, parseISO, isPast } from "date-fns";
|
|
import PageHeader from "@/components/common/PageHeader";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { createPageUrl } from "@/utils";
|
|
import AutoInvoiceGenerator from "@/components/invoices/AutoInvoiceGenerator";
|
|
|
|
|
|
const statusColors = {
|
|
'Draft': 'bg-slate-100 text-slate-600 font-medium',
|
|
'Open': 'bg-blue-100 text-blue-700 font-medium',
|
|
'Pending Review': 'bg-blue-100 text-blue-700 font-medium',
|
|
'Confirmed': 'bg-amber-100 text-amber-700 font-medium',
|
|
'Approved': 'bg-emerald-100 text-emerald-700 font-medium',
|
|
'Disputed': 'bg-red-100 text-red-700 font-medium',
|
|
'Under Review': 'bg-orange-100 text-orange-700 font-medium',
|
|
'Resolved': 'bg-cyan-100 text-cyan-700 font-medium',
|
|
'Overdue': 'bg-red-100 text-red-700 font-medium',
|
|
'Paid': 'bg-emerald-100 text-emerald-700 font-medium',
|
|
'Reconciled': 'bg-purple-100 text-purple-700 font-medium',
|
|
'Cancelled': 'bg-slate-100 text-slate-600 font-medium',
|
|
};
|
|
|
|
export default function Invoices() {
|
|
const navigate = useNavigate();
|
|
const [activeTab, setActiveTab] = useState("all");
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
|
|
|
|
const { data: user } = useQuery({
|
|
queryKey: ['current-user-invoices'],
|
|
queryFn: () => base44.auth.me(),
|
|
});
|
|
|
|
const { data: invoices = [], isLoading } = useQuery({
|
|
queryKey: ['invoices'],
|
|
queryFn: () => base44.entities.Invoice.list('-issue_date'),
|
|
initialData: [],
|
|
});
|
|
|
|
const userRole = user?.user_role || user?.role;
|
|
|
|
// Auto-mark overdue invoices
|
|
React.useEffect(() => {
|
|
invoices.forEach(async (invoice) => {
|
|
if (invoice.status === "Approved" && isPast(parseISO(invoice.due_date))) {
|
|
try {
|
|
await base44.entities.Invoice.update(invoice.id, { status: "Overdue" });
|
|
} catch (error) {
|
|
console.error('Failed to mark invoice as overdue:', error);
|
|
}
|
|
}
|
|
});
|
|
}, [invoices]);
|
|
|
|
// Filter invoices based on user role
|
|
const visibleInvoices = React.useMemo(() => {
|
|
if (userRole === "client") {
|
|
return invoices.filter(inv =>
|
|
inv.business_name === user?.company_name ||
|
|
inv.manager_name === user?.full_name ||
|
|
inv.created_by === user?.email
|
|
);
|
|
}
|
|
if (userRole === "vendor") {
|
|
return invoices.filter(inv =>
|
|
inv.vendor_name === user?.company_name ||
|
|
inv.vendor_id === user?.vendor_id
|
|
);
|
|
}
|
|
return invoices;
|
|
}, [invoices, userRole, user]);
|
|
|
|
const getFilteredInvoices = () => {
|
|
let filtered = visibleInvoices;
|
|
|
|
if (activeTab !== "all") {
|
|
const statusMap = {
|
|
'pending': 'Pending Review',
|
|
'approved': 'Approved',
|
|
'disputed': 'Disputed',
|
|
'overdue': 'Overdue',
|
|
'paid': 'Paid',
|
|
'reconciled': 'Reconciled',
|
|
};
|
|
filtered = filtered.filter(inv => inv.status === statusMap[activeTab]);
|
|
}
|
|
|
|
if (searchTerm) {
|
|
filtered = filtered.filter(inv =>
|
|
inv.invoice_number?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
inv.business_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
inv.manager_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
inv.event_name?.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
}
|
|
|
|
return filtered;
|
|
};
|
|
|
|
const filteredInvoices = getFilteredInvoices();
|
|
|
|
const getStatusCount = (status) => {
|
|
if (status === "all") return visibleInvoices.length;
|
|
return visibleInvoices.filter(inv => inv.status === status).length;
|
|
};
|
|
|
|
const getTotalAmount = (status) => {
|
|
const filtered = status === "all"
|
|
? visibleInvoices
|
|
: visibleInvoices.filter(inv => inv.status === status);
|
|
return filtered.reduce((sum, inv) => sum + (inv.amount || 0), 0);
|
|
};
|
|
|
|
const metrics = {
|
|
all: getTotalAmount("all"),
|
|
pending: getTotalAmount("Pending Review"),
|
|
approved: getTotalAmount("Approved"),
|
|
disputed: getTotalAmount("Disputed"),
|
|
overdue: getTotalAmount("Overdue"),
|
|
paid: getTotalAmount("Paid"),
|
|
outstanding: getTotalAmount("Pending Review") + getTotalAmount("Approved") + getTotalAmount("Overdue"),
|
|
};
|
|
|
|
// Smart Insights
|
|
const insights = React.useMemo(() => {
|
|
const currentMonth = visibleInvoices.filter(inv => {
|
|
const issueDate = parseISO(inv.issue_date);
|
|
const now = new Date();
|
|
return issueDate.getMonth() === now.getMonth() && issueDate.getFullYear() === now.getFullYear();
|
|
});
|
|
|
|
const lastMonth = visibleInvoices.filter(inv => {
|
|
const issueDate = parseISO(inv.issue_date);
|
|
const now = new Date();
|
|
const lastMonthDate = new Date(now.getFullYear(), now.getMonth() - 1);
|
|
return issueDate.getMonth() === lastMonthDate.getMonth() && issueDate.getFullYear() === lastMonthDate.getFullYear();
|
|
});
|
|
|
|
const currentTotal = currentMonth.reduce((sum, inv) => sum + (inv.amount || 0), 0);
|
|
const lastTotal = lastMonth.reduce((sum, inv) => sum + (inv.amount || 0), 0);
|
|
const percentChange = lastTotal > 0 ? ((currentTotal - lastTotal) / lastTotal * 100).toFixed(1) : 0;
|
|
|
|
const avgPaymentTime = visibleInvoices
|
|
.filter(inv => inv.status === "Paid" && inv.paid_date && inv.issue_date)
|
|
.map(inv => {
|
|
const days = Math.floor((parseISO(inv.paid_date) - parseISO(inv.issue_date)) / (1000 * 60 * 60 * 24));
|
|
return days;
|
|
});
|
|
const avgDays = avgPaymentTime.length > 0 ? Math.round(avgPaymentTime.reduce((a, b) => a + b, 0) / avgPaymentTime.length) : 0;
|
|
|
|
const onTimePayments = visibleInvoices.filter(inv =>
|
|
inv.status === "Paid" && inv.paid_date && inv.due_date && parseISO(inv.paid_date) <= parseISO(inv.due_date)
|
|
).length;
|
|
const totalPaid = visibleInvoices.filter(inv => inv.status === "Paid").length;
|
|
const onTimeRate = totalPaid > 0 ? ((onTimePayments / totalPaid) * 100).toFixed(0) : 0;
|
|
|
|
const topClient = Object.entries(
|
|
visibleInvoices.reduce((acc, inv) => {
|
|
const client = inv.business_name || "Unknown";
|
|
acc[client] = (acc[client] || 0) + (inv.amount || 0);
|
|
return acc;
|
|
}, {})
|
|
).sort((a, b) => b[1] - a[1])[0];
|
|
|
|
// For clients: calculate best hub by reconciliation rate
|
|
const bestHub = userRole === "client" ? (() => {
|
|
const hubStats = visibleInvoices.reduce((acc, inv) => {
|
|
const hub = inv.hub || "Unknown";
|
|
if (!acc[hub]) {
|
|
acc[hub] = { total: 0, reconciled: 0, paid: 0 };
|
|
}
|
|
acc[hub].total++;
|
|
if (inv.status === "Reconciled") acc[hub].reconciled++;
|
|
if (inv.status === "Paid" || inv.status === "Reconciled") acc[hub].paid++;
|
|
return acc;
|
|
}, {});
|
|
|
|
const sortedHubs = Object.entries(hubStats)
|
|
.map(([hub, stats]) => ({
|
|
hub,
|
|
rate: stats.total > 0 ? ((stats.paid / stats.total) * 100).toFixed(0) : 0,
|
|
total: stats.total
|
|
}))
|
|
.sort((a, b) => b.rate - a.rate);
|
|
|
|
return sortedHubs[0] || null;
|
|
})() : null;
|
|
|
|
return {
|
|
percentChange,
|
|
isGrowth: percentChange > 0,
|
|
avgDays,
|
|
onTimeRate,
|
|
topClient: topClient ? { name: topClient[0], amount: topClient[1] } : null,
|
|
bestHub,
|
|
currentMonthCount: currentMonth.length,
|
|
currentTotal,
|
|
};
|
|
}, [visibleInvoices, userRole]);
|
|
|
|
return (
|
|
<>
|
|
<AutoInvoiceGenerator />
|
|
|
|
<div className="p-4 md:p-6 bg-slate-100 min-h-screen">
|
|
<div className="max-w-[1800px] mx-auto">
|
|
<div className="flex gap-6">
|
|
{/* Left Sidebar - Summary */}
|
|
<div className="hidden lg:block w-72 flex-shrink-0 space-y-4">
|
|
{/* Logo Card */}
|
|
<Card className="border-0 bg-gradient-to-br from-[#0A39DF] to-[#1C323E] text-white overflow-hidden">
|
|
<CardContent className="p-5">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
|
|
<FileText className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h2 className="font-bold">Invoices</h2>
|
|
<p className="text-xs text-white/70">{visibleInvoices.length} total</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-white/70">Total Value</span>
|
|
<span className="font-bold text-lg">${metrics.all.toLocaleString()}</span>
|
|
</div>
|
|
<div className="h-2 bg-white/20 rounded-full overflow-hidden">
|
|
<div className="h-full bg-emerald-400 rounded-full" style={{ width: `${(metrics.paid / metrics.all) * 100 || 0}%` }} />
|
|
</div>
|
|
<p className="text-xs text-white/60">{((metrics.paid / metrics.all) * 100 || 0).toFixed(0)}% collected</p>
|
|
</div>
|
|
{userRole === "vendor" && (
|
|
<Button onClick={() => navigate(createPageUrl("InvoiceEditor"))} size="sm" className="w-full mt-4 bg-white text-[#0A39DF] hover:bg-white/90">
|
|
<Plus className="w-4 h-4 mr-1" /> New Invoice
|
|
</Button>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Status Breakdown */}
|
|
<Card className="border-0 shadow-sm">
|
|
<CardContent className="p-4">
|
|
<h3 className="font-semibold text-slate-900 mb-3 text-sm">Status Breakdown</h3>
|
|
<div className="space-y-2">
|
|
{[
|
|
{ label: "Pending", status: "Pending Review", color: "bg-blue-500", value: getStatusCount("Pending Review"), amount: getTotalAmount("Pending Review") },
|
|
{ label: "Approved", status: "Approved", color: "bg-emerald-500", value: getStatusCount("Approved"), amount: getTotalAmount("Approved") },
|
|
{ label: "Disputed", status: "Disputed", color: "bg-red-500", value: getStatusCount("Disputed"), amount: getTotalAmount("Disputed") },
|
|
{ label: "Overdue", status: "Overdue", color: "bg-amber-500", value: getStatusCount("Overdue"), amount: getTotalAmount("Overdue") },
|
|
{ label: "Paid", status: "Paid", color: "bg-green-500", value: getStatusCount("Paid"), amount: getTotalAmount("Paid") },
|
|
{ label: "Reconciled", status: "Reconciled", color: "bg-purple-500", value: getStatusCount("Reconciled"), amount: getTotalAmount("Reconciled") },
|
|
].map(item => (
|
|
<button
|
|
key={item.status}
|
|
onClick={() => setActiveTab(item.label.toLowerCase())}
|
|
className={`w-full flex items-center gap-3 p-2 rounded-lg transition-all hover:bg-slate-50 ${activeTab === item.label.toLowerCase() ? 'bg-slate-100' : ''}`}
|
|
>
|
|
<div className={`w-2 h-2 rounded-full ${item.color}`} />
|
|
<span className="text-sm text-slate-700 flex-1 text-left">{item.label}</span>
|
|
<span className="text-xs text-slate-500 mr-1">${item.amount.toLocaleString()}</span>
|
|
<Badge variant="outline" className="text-xs">{item.value}</Badge>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Sales & Revenue - Vendor Focused */}
|
|
<Card className="border-0 shadow-sm bg-emerald-50">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<TrendingUp className="w-4 h-4 text-emerald-600" />
|
|
<h3 className="font-semibold text-emerald-900 text-sm">Sales & Revenue</h3>
|
|
</div>
|
|
<div className="space-y-3 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-emerald-700">Total Sales</span>
|
|
<span className="font-semibold text-emerald-900">${metrics.all.toLocaleString()}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-emerald-700">Collected</span>
|
|
<span className="font-semibold text-emerald-900">${metrics.paid.toLocaleString()}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-emerald-700">Pending Revenue</span>
|
|
<span className="font-semibold text-emerald-900">${metrics.outstanding.toLocaleString()}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-emerald-700">Collection Rate</span>
|
|
<span className="font-semibold text-emerald-900">{((metrics.paid / metrics.all) * 100 || 0).toFixed(0)}%</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-emerald-700">Avg. Invoice</span>
|
|
<span className="font-semibold text-emerald-900">${visibleInvoices.length > 0 ? Math.round(metrics.all / visibleInvoices.length).toLocaleString() : 0}</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Quick Insights */}
|
|
<Card className="border-0 shadow-sm bg-amber-50">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Sparkles className="w-4 h-4 text-amber-600" />
|
|
<h3 className="font-semibold text-amber-900 text-sm">Performance</h3>
|
|
</div>
|
|
<div className="space-y-3 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-amber-700">Avg. Payment</span>
|
|
<span className="font-semibold text-amber-900">{insights.avgDays} days</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-amber-700">On-Time Rate</span>
|
|
<span className="font-semibold text-amber-900">{insights.onTimeRate}%</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-amber-700">This Month</span>
|
|
<span className="font-semibold text-amber-900">${insights.currentTotal.toLocaleString()}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-amber-700">Monthly Count</span>
|
|
<span className="font-semibold text-amber-900">{insights.currentMonthCount} invoices</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-amber-700">MoM Change</span>
|
|
<span className={`font-semibold ${insights.isGrowth ? 'text-emerald-700' : 'text-red-700'}`}>
|
|
{insights.isGrowth ? '+' : ''}{insights.percentChange}%
|
|
</span>
|
|
</div>
|
|
{insights.topClient && (
|
|
<div className="flex justify-between">
|
|
<span className="text-amber-700">Top Client</span>
|
|
<span className="font-semibold text-amber-900 truncate max-w-[100px]" title={insights.topClient.name}>
|
|
{insights.topClient.name}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Alerts */}
|
|
{(metrics.disputed > 0 || metrics.overdue > 0) && (
|
|
<Card className="border-0 shadow-sm border-l-4 border-l-red-500 bg-red-50">
|
|
<CardContent className="p-4">
|
|
<h3 className="font-semibold text-red-900 text-sm mb-2">Requires Attention</h3>
|
|
{metrics.disputed > 0 && (
|
|
<p className="text-xs text-red-700 mb-1">• {getStatusCount("Disputed")} disputed (${metrics.disputed.toLocaleString()})</p>
|
|
)}
|
|
{metrics.overdue > 0 && (
|
|
<p className="text-xs text-red-700">• {getStatusCount("Overdue")} overdue (${metrics.overdue.toLocaleString()})</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 min-w-0">
|
|
{/* Top Bar */}
|
|
<div className="bg-white rounded-xl shadow-sm mb-4 p-3 flex items-center gap-3 flex-wrap">
|
|
<div className="relative flex-1 min-w-[200px] max-w-md">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<Input
|
|
placeholder="Search by invoice #, client, event..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-9 h-10 bg-slate-50 border-0"
|
|
/>
|
|
</div>
|
|
<div className="lg:hidden">
|
|
{userRole === "vendor" && (
|
|
<Button onClick={() => navigate(createPageUrl("InvoiceEditor"))} size="sm" className="bg-[#0A39DF]">
|
|
<Plus className="w-4 h-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Row - Mobile */}
|
|
<div className="lg:hidden grid grid-cols-4 gap-2 mb-4">
|
|
<Card className="border-0 shadow-sm">
|
|
<CardContent className="p-3 text-center">
|
|
<p className="text-lg font-bold text-slate-900">${(metrics.all / 1000).toFixed(0)}K</p>
|
|
<p className="text-[10px] text-slate-500">Total</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-0 shadow-sm">
|
|
<CardContent className="p-3 text-center">
|
|
<p className="text-lg font-bold text-amber-600">${(metrics.outstanding / 1000).toFixed(0)}K</p>
|
|
<p className="text-[10px] text-slate-500">Pending</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-0 shadow-sm">
|
|
<CardContent className="p-3 text-center">
|
|
<p className="text-lg font-bold text-red-600">{getStatusCount("Disputed")}</p>
|
|
<p className="text-[10px] text-slate-500">Disputed</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-0 shadow-sm">
|
|
<CardContent className="p-3 text-center">
|
|
<p className="text-lg font-bold text-emerald-600">${(metrics.paid / 1000).toFixed(0)}K</p>
|
|
<p className="text-[10px] text-slate-500">Paid</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Invoice Table */}
|
|
<Card className="border-0 shadow-sm overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-slate-50 hover:bg-slate-50 border-b border-slate-200">
|
|
<TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide py-4">Invoice</TableHead>
|
|
<TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide">Client</TableHead>
|
|
<TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide">Event / Hub</TableHead>
|
|
<TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide">Date</TableHead>
|
|
<TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide text-right">Amount</TableHead>
|
|
<TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide text-center">Status</TableHead>
|
|
<TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide text-center">Due</TableHead>
|
|
<TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredInvoices.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={8} className="text-center py-16">
|
|
<FileText className="w-12 h-12 mx-auto mb-3 text-slate-200" />
|
|
<p className="font-medium text-slate-500">No invoices found</p>
|
|
<p className="text-sm text-slate-400 mt-1">Try adjusting your search or filters</p>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredInvoices.map((invoice) => {
|
|
const invoiceDate = invoice.issue_date ? parseISO(invoice.issue_date) : new Date();
|
|
const dateFormatted = format(invoiceDate, 'MMM d, yyyy');
|
|
const dueDate = invoice.due_date ? format(parseISO(invoice.due_date), 'MMM d') : '—';
|
|
const isOverdue = invoice.due_date && isPast(parseISO(invoice.due_date)) && invoice.status !== "Paid" && invoice.status !== "Reconciled";
|
|
|
|
return (
|
|
<TableRow
|
|
key={invoice.id}
|
|
className={`hover:bg-blue-50/50 cursor-pointer transition-all border-b border-slate-100 ${isOverdue ? 'bg-red-50/30' : ''}`}
|
|
onClick={() => navigate(createPageUrl(`InvoiceDetail?id=${invoice.id}`))}
|
|
>
|
|
<TableCell className="py-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
|
invoice.status === 'Paid' || invoice.status === 'Reconciled' ? 'bg-emerald-100' :
|
|
invoice.status === 'Disputed' ? 'bg-red-100' :
|
|
invoice.status === 'Overdue' ? 'bg-amber-100' : 'bg-blue-100'
|
|
}`}>
|
|
<FileText className={`w-4 h-4 ${
|
|
invoice.status === 'Paid' || invoice.status === 'Reconciled' ? 'text-emerald-600' :
|
|
invoice.status === 'Disputed' ? 'text-red-600' :
|
|
invoice.status === 'Overdue' ? 'text-amber-600' : 'text-blue-600'
|
|
}`} />
|
|
</div>
|
|
<div>
|
|
<p className="font-bold text-slate-900">{invoice.invoice_number}</p>
|
|
<p className="text-xs text-slate-500">{invoice.manager_name || '—'}</p>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<p className="font-medium text-slate-900 truncate max-w-[150px]">{invoice.business_name || '—'}</p>
|
|
</TableCell>
|
|
<TableCell>
|
|
<p className="font-medium text-slate-900 truncate max-w-[200px]">{invoice.event_name || 'Untitled'}</p>
|
|
<div className="flex items-center gap-1 mt-0.5">
|
|
<MapPin className="w-3 h-3 text-slate-400" />
|
|
<span className="text-xs text-slate-500">{invoice.hub || '—'}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="text-sm text-slate-700">{dateFormatted}</span>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<span className="font-bold text-slate-900 text-lg">${invoice.amount?.toLocaleString() || 0}</span>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<Badge className={`${statusColors[invoice.status]} px-2.5 py-1`}>
|
|
{invoice.status}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<span className={`text-sm font-medium ${isOverdue ? 'text-red-600' : 'text-slate-600'}`}>
|
|
{dueDate}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button size="sm" variant="ghost" className="hover:bg-blue-100 hover:text-blue-700">
|
|
<Eye className="w-4 h-4" />
|
|
</Button>
|
|
<Button size="sm" variant="ghost" className="hover:bg-slate-100">
|
|
<Edit className="w-4 h-4" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
{/* Table Footer */}
|
|
{filteredInvoices.length > 0 && (
|
|
<div className="p-4 border-t border-slate-100 bg-slate-50 flex items-center justify-between">
|
|
<p className="text-sm text-slate-500">
|
|
Showing <span className="font-medium text-slate-700">{filteredInvoices.length}</span> of <span className="font-medium text-slate-700">{visibleInvoices.length}</span> invoices
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-slate-500">Total: </span>
|
|
<span className="font-bold text-slate-900">${filteredInvoices.reduce((sum, inv) => sum + (inv.amount || 0), 0).toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</>
|
|
);
|
|
} |