Krow/Krow-workspace
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new temporal folder to test

Browse Source
This commit is contained in:
José Salazar
2025-12-04 18:02:28 -05:00
parent cf18fdb16b
commit 48d86436e3
252 changed files with 120330 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

546
frontend-web-free/src/pages/Invoices.jsx Normal file
View File

@@ -0,0 +1,546 @@
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)}
/>
</>
);
}