546 lines
26 KiB
JavaScript
546 lines
26 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";
|
|
import CreateInvoiceModal from "../components/invoices/CreateInvoiceModal";
|
|
|
|
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 [showCreateModal, setShowCreateModal] = useState(false);
|
|
|
|
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-8 bg-slate-50 min-h-screen">
|
|
<div className="max-w-[1600px] mx-auto">
|
|
<PageHeader
|
|
title="Invoices"
|
|
subtitle={`${filteredInvoices.length} invoices • $${metrics.all.toLocaleString()} total`}
|
|
actions={
|
|
userRole === "vendor" && (
|
|
<Button onClick={() => setShowCreateModal(true)} className="bg-[#0A39DF] hover:bg-[#0A39DF]/90">
|
|
<Plus className="w-5 h-5 mr-2" />
|
|
Create Invoice
|
|
</Button>
|
|
)
|
|
}
|
|
/>
|
|
|
|
{/* Alert Banners */}
|
|
{metrics.disputed > 0 && (
|
|
<div className="mb-6 p-4 bg-red-50 border-l-4 border-red-500 rounded-lg flex items-center gap-3">
|
|
<AlertTriangle className="w-5 h-5 text-red-600" />
|
|
<div>
|
|
<p className="font-semibold text-red-900">Disputed Invoices Require Attention</p>
|
|
<p className="text-sm text-red-700">{getStatusCount("Disputed")} invoices are currently disputed</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{metrics.overdue > 0 && userRole === "client" && (
|
|
<div className="mb-6 p-4 bg-amber-50 border-l-4 border-amber-500 rounded-lg flex items-center gap-3">
|
|
<Clock className="w-5 h-5 text-amber-600" />
|
|
<div>
|
|
<p className="font-semibold text-amber-900">Overdue Payments</p>
|
|
<p className="text-sm text-amber-700">${metrics.overdue.toLocaleString()} in overdue invoices</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Status Tabs */}
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
|
|
<TabsList className="bg-slate-100 border border-slate-200 h-auto p-1.5 flex-wrap gap-1">
|
|
<TabsTrigger
|
|
value="all"
|
|
className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
|
|
>
|
|
<FileText className="w-4 h-4 mr-2" />
|
|
All
|
|
<Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("all")}</Badge>
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="PENDING"
|
|
className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
|
|
>
|
|
<Clock className="w-4 h-4 mr-2" />
|
|
Pending
|
|
<Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("Pending Review")}</Badge>
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="approved"
|
|
className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
|
|
>
|
|
<CheckCircle className="w-4 h-4 mr-2" />
|
|
Approved
|
|
<Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("Approved")}</Badge>
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="disputed"
|
|
className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
|
|
>
|
|
<AlertTriangle className="w-4 h-4 mr-2" />
|
|
Disputed
|
|
<Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("Disputed")}</Badge>
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="overdue"
|
|
className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
|
|
>
|
|
<AlertTriangle className="w-4 h-4 mr-2" />
|
|
Overdue
|
|
<Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("Overdue")}</Badge>
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="paid"
|
|
className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
|
|
>
|
|
<CheckCircle className="w-4 h-4 mr-2" />
|
|
Paid
|
|
<Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("Paid")}</Badge>
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="reconciled"
|
|
className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
|
|
>
|
|
<CheckCircle className="w-4 h-4 mr-2" />
|
|
Reconciled
|
|
<Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("Reconciled")}</Badge>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
|
|
{/* Metric Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
|
<Card className="border-0 bg-blue-50 shadow-sm hover:shadow-md transition-all">
|
|
<CardContent className="p-5">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<FileText className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-blue-600 uppercase tracking-wider font-semibold mb-0.5">Total Value</p>
|
|
<p className="text-2xl font-bold text-blue-700">${metrics.all.toLocaleString()}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-0 bg-amber-50 shadow-sm hover:shadow-md transition-all">
|
|
<CardContent className="p-5">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-amber-500 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<DollarSign className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-amber-600 uppercase tracking-wider font-semibold mb-0.5">Outstanding</p>
|
|
<p className="text-2xl font-bold text-amber-700">${metrics.outstanding.toLocaleString()}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-0 bg-red-50 shadow-sm hover:shadow-md transition-all">
|
|
<CardContent className="p-5">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-red-500 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<AlertTriangle className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-red-600 uppercase tracking-wider font-semibold mb-0.5">Disputed</p>
|
|
<p className="text-2xl font-bold text-red-700">${metrics.disputed.toLocaleString()}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-0 bg-emerald-50 shadow-sm hover:shadow-md transition-all">
|
|
<CardContent className="p-5">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-emerald-500 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<CheckCircle className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-emerald-600 uppercase tracking-wider font-semibold mb-0.5">Paid</p>
|
|
<p className="text-2xl font-bold text-emerald-700">${metrics.paid.toLocaleString()}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Smart Insights Banner */}
|
|
<div className="mb-6 bg-slate-100 rounded-2xl p-6 shadow-sm border border-slate-200">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 bg-amber-500 rounded-xl flex items-center justify-center">
|
|
<Sparkles className="w-5 h-5 text-white" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold text-slate-900">Smart Insights</h3>
|
|
<p className="text-sm text-slate-500">AI-powered analysis of your invoice performance</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="bg-white rounded-xl p-4 border border-slate-200">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium text-slate-500">This Month</span>
|
|
<div className={`flex items-center gap-1 ${insights.isGrowth ? 'text-emerald-600' : 'text-red-600'}`}>
|
|
{insights.isGrowth ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
|
|
<span className="text-xs font-bold">{insights.percentChange}%</span>
|
|
</div>
|
|
</div>
|
|
<p className="text-2xl font-bold text-slate-900">${insights.currentTotal.toLocaleString()}</p>
|
|
<p className="text-xs text-slate-400 mt-1">{insights.currentMonthCount} invoices</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-4 border border-slate-200">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium text-slate-500">Avg. Payment Time</span>
|
|
<Calendar className="w-4 h-4 text-slate-400" />
|
|
</div>
|
|
<p className="text-2xl font-bold text-slate-900">{insights.avgDays} days</p>
|
|
<p className="text-xs text-slate-400 mt-1">From issue to payment</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-4 border border-slate-200">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium text-slate-500">On-Time Rate</span>
|
|
<CheckCircle className="w-4 h-4 text-slate-400" />
|
|
</div>
|
|
<p className="text-2xl font-bold text-slate-900">{insights.onTimeRate}%</p>
|
|
<p className="text-xs text-slate-400 mt-1">Paid before due date</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-4 border border-slate-200">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium text-slate-500">
|
|
{userRole === "client" ? "Best Hub" : "Top Client"}
|
|
</span>
|
|
<ArrowUpRight className="w-4 h-4 text-slate-400" />
|
|
</div>
|
|
{userRole === "client" ? (
|
|
<>
|
|
<p className="text-lg font-bold text-slate-900 truncate">{insights.bestHub?.hub || "—"}</p>
|
|
<p className="text-xs text-slate-400 mt-1">{insights.bestHub?.rate || 0}% on-time</p>
|
|
</>
|
|
) : (
|
|
<>
|
|
<p className="text-lg font-bold text-slate-900 truncate">{insights.topClient?.name || "—"}</p>
|
|
<p className="text-xs text-slate-400 mt-1">${insights.topClient?.amount.toLocaleString() || 0}</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search */}
|
|
<div className="bg-white rounded-lg p-4 mb-6 border border-slate-200">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
|
|
<Input
|
|
placeholder="Search by invoice number, client, event..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Invoices Table */}
|
|
<Card className="border-slate-200 shadow-lg">
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-slate-50 hover:bg-slate-50">
|
|
<TableHead className="text-slate-600 font-semibold uppercase text-xs">Invoice #</TableHead>
|
|
<TableHead className="text-slate-600 font-semibold uppercase text-xs">Hub</TableHead>
|
|
<TableHead className="text-slate-600 font-semibold uppercase text-xs">Event</TableHead>
|
|
<TableHead className="text-slate-600 font-semibold uppercase text-xs">Manager</TableHead>
|
|
<TableHead className="text-slate-600 font-semibold uppercase text-xs">Date & Time</TableHead>
|
|
<TableHead className="text-slate-600 font-semibold uppercase text-xs">Amount</TableHead>
|
|
<TableHead className="text-slate-600 font-semibold uppercase text-xs">Status</TableHead>
|
|
<TableHead className="text-slate-600 font-semibold uppercase text-xs">Action</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredInvoices.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={8} className="text-center py-12 text-slate-500">
|
|
<FileText className="w-12 h-12 mx-auto mb-3 text-slate-300" />
|
|
<p className="font-medium">No invoices found</p>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredInvoices.map((invoice) => {
|
|
const invoiceDate = parseISO(invoice.issue_date);
|
|
const dayOfWeek = format(invoiceDate, 'EEEE');
|
|
const dateFormatted = format(invoiceDate, 'MM.dd.yy');
|
|
|
|
return (
|
|
<TableRow key={invoice.id} className="hover:bg-slate-50 transition-all border-b border-slate-100">
|
|
<TableCell className="font-bold text-slate-900">{invoice.invoice_number}</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<MapPin className="w-4 h-4 text-purple-600" />
|
|
<span className="text-slate-900 font-medium">{invoice.hub || "—"}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-slate-900 font-medium">{invoice.event_name}</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<User className="w-4 h-4 text-slate-400" />
|
|
<span className="text-slate-700">{invoice.manager_name || invoice.created_by || "—"}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="space-y-0.5">
|
|
<div className="text-slate-900 font-medium">{dateFormatted}</div>
|
|
<div className="flex items-center gap-1.5 text-xs text-slate-500">
|
|
<Clock className="w-3 h-3" />
|
|
<span>{dayOfWeek}</span>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
|
|
<DollarSign className="w-3 h-3 text-white" />
|
|
</div>
|
|
<span className="font-bold text-slate-900">${invoice.amount?.toLocaleString()}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge className={`${statusColors[invoice.status]} px-3 py-1 rounded-md text-xs`}>
|
|
{invoice.status}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => navigate(createPageUrl(`InvoiceDetail?id=${invoice.id}`))}
|
|
className="font-semibold hover:bg-blue-50 hover:text-[#0A39DF]"
|
|
>
|
|
<Eye className="w-4 h-4 mr-2" />
|
|
View
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
<CreateInvoiceModal
|
|
open={showCreateModal}
|
|
onClose={() => setShowCreateModal(false)}
|
|
/>
|
|
</>
|
|
);
|
|
} |