matt/inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rearrange vendors and purchase orders page content, fix pagination

Browse Source
This commit is contained in:
Matt
2025-01-17 00:53:58 -05:00
parent 0ba7d9f533
commit 2235121761
4 changed files with 133 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
inventory/src/pages/Categories.tsx
View File

@@ -37,7 +37,7 @@ export function Categories() {
parent: "all",
performance: "all",
});
const [sorting, setSorting] = useState({
const [] = useState({
column: 'name',
direction: 'asc'
});

35
inventory/src/pages/PurchaseOrders.tsx
View File

@@ -87,7 +87,7 @@ interface PurchaseOrdersResponse {
export default function PurchaseOrders() {
const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrder[]>([]);
const [vendorMetrics, setVendorMetrics] = useState<VendorMetrics[]>([]);
const [, setVendorMetrics] = useState<VendorMetrics[]>([]);
const [costAnalysis, setCostAnalysis] = useState<CostAnalysis | null>(null);
const [summary, setSummary] = useState<ReceivingStatus | null>(null);
const [loading, setLoading] = useState(true);
@@ -391,39 +391,6 @@ export default function PurchaseOrders() {
</div>
)}
{/* Vendor Performance */}
<Card className="mb-6">
<CardHeader>
<CardTitle>Vendor Performance</CardTitle>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Vendor</TableHead>
<TableHead>Total Orders</TableHead>
<TableHead>Avg Delivery Days</TableHead>
<TableHead>Fulfillment Rate</TableHead>
<TableHead>Avg Unit Cost</TableHead>
<TableHead>Total Spend</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{vendorMetrics.map((vendor) => (
<TableRow key={vendor.vendor_name}>
<TableCell>{vendor.vendor_name}</TableCell>
<TableCell>{vendor.total_orders.toLocaleString()}</TableCell>
<TableCell>{vendor.avg_delivery_days?.toFixed(1) || 'N/A'}</TableCell>
<TableCell>{formatPercent(vendor.fulfillment_rate)}</TableCell>
<TableCell>${formatNumber(vendor.avg_unit_cost)}</TableCell>
<TableCell>${formatNumber(vendor.total_spend)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
{/* Cost Analysis */}
<Card>
<CardHeader>

93
inventory/src/pages/Vendors.tsx
View File

@@ -12,15 +12,14 @@ import config from "../config";
interface Vendor {
vendor_id: number;
name: string;
contact_name: string;
email: string;
phone: string;
status: string;
avg_lead_time_days: number;
on_time_delivery_rate: number;
order_fill_rate: number;
total_orders: number;
active_products: number;
avg_unit_cost: number;
total_spend: number;
}
interface VendorFilters {
@@ -38,15 +37,26 @@ export function Vendors() {
status: "all",
performance: "all",
});
const [sorting, setSorting] = useState({
const [] = useState({
column: 'name',
direction: 'asc'
});
const { data, isLoading } = useQuery({
queryKey: ["vendors"],
queryKey: ["vendors", page, filters, sortColumn, sortDirection],
queryFn: async () => {
const response = await fetch(`${config.apiUrl}/vendors`);
const params = new URLSearchParams({
page: page.toString(),
limit: '50',
search: filters.search,
status: filters.status,
performance: filters.performance,
sortColumn,
sortDirection
});
const response = await fetch(`${config.apiUrl}/vendors?${params}`, {
credentials: 'include'
});
if (!response.ok) throw new Error("Failed to fetch vendors");
return response.json();
},
@@ -62,9 +72,7 @@ export function Vendors() {
if (filters.search) {
const searchLower = filters.search.toLowerCase();
filtered = filtered.filter(vendor =>
vendor.name.toLowerCase().includes(searchLower) ||
vendor.contact_name?.toLowerCase().includes(searchLower) ||
vendor.email?.toLowerCase().includes(searchLower)
vendor.name.toLowerCase().includes(searchLower)
);
}
@@ -108,27 +116,15 @@ export function Vendors() {
// Calculate pagination
const paginatedData = useMemo(() => {
const startIndex = (page - 1) * 50;
return filteredData.slice(startIndex, startIndex + 50);
}, [filteredData, page]);
if (!data?.vendors) return [];
return data.vendors;
}, [data?.vendors]);
// Calculate stats from filtered data
const stats = useMemo(() => {
if (!filteredData.length) return data?.stats;
const activeVendors = filteredData.filter(v => v.status === 'active').length;
const leadTimes = filteredData.map(v => v.avg_lead_time_days || 0).filter(lt => lt !== 0);
const fillRates = filteredData.map(v => v.order_fill_rate || 0).filter(fr => fr !== 0);
const onTimeRates = filteredData.map(v => v.on_time_delivery_rate || 0).filter(otr => otr !== 0);
return {
totalVendors: filteredData.length,
activeVendors,
avgLeadTime: leadTimes.length ? leadTimes.reduce((a, b) => a + b, 0) / leadTimes.length : 0,
avgFillRate: fillRates.length ? fillRates.reduce((a, b) => a + b, 0) / fillRates.length : 0,
avgOnTimeDelivery: onTimeRates.length ? onTimeRates.reduce((a, b) => a + b, 0) / onTimeRates.length : 0
};
}, [filteredData, data?.stats]);
if (!data?.stats) return null;
return data.stats;
}, [data?.stats]);
const handleSort = (column: keyof Vendor) => {
setSortDirection(prev => {
@@ -186,36 +182,38 @@ export function Vendors() {
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Avg Lead Time</CardTitle>
<CardTitle className="text-sm font-medium">Total Spend</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{typeof stats?.avgLeadTime === 'number' ? stats.avgLeadTime.toFixed(1) : "..."} days</div>
<div className="text-2xl font-bold">
${typeof stats?.totalSpend === 'number' ? stats.totalSpend.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) : "..."}
</div>
<p className="text-xs text-muted-foreground">
Across all vendors
Avg unit cost: ${typeof stats?.avgUnitCost === 'number' ? stats.avgUnitCost.toFixed(2) : "..."}
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Fill Rate</CardTitle>
<CardTitle className="text-sm font-medium">Performance</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{typeof stats?.avgFillRate === 'number' ? stats.avgFillRate.toFixed(1) : "..."}%</div>
<p className="text-xs text-muted-foreground">
Average order fill rate
Fill rate / {typeof stats?.avgOnTimeDelivery === 'number' ? stats.avgOnTimeDelivery.toFixed(1) : "..."}% on-time
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">On-Time Delivery</CardTitle>
<CardTitle className="text-sm font-medium">Lead Time</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{typeof stats?.avgOnTimeDelivery === 'number' ? stats.avgOnTimeDelivery.toFixed(1) : "..."}%</div>
<div className="text-2xl font-bold">{typeof stats?.avgLeadTime === 'number' ? stats.avgLeadTime.toFixed(1) : "..."} days</div>
<p className="text-xs text-muted-foreground">
Average on-time rate
Average delivery time
</p>
</CardContent>
</Card>
@@ -265,12 +263,13 @@ export function Vendors() {
<Table>
<TableHeader>
<TableRow>
<TableHead onClick={() => handleSort("name")} className="cursor-pointer">Name</TableHead>
<TableHead onClick={() => handleSort("contact_name")} className="cursor-pointer">Contact</TableHead>
<TableHead onClick={() => handleSort("name")} className="cursor-pointer">Vendor</TableHead>
<TableHead onClick={() => handleSort("status")} className="cursor-pointer">Status</TableHead>
<TableHead onClick={() => handleSort("avg_lead_time_days")} className="cursor-pointer">Lead Time</TableHead>
<TableHead onClick={() => handleSort("on_time_delivery_rate")} className="cursor-pointer">On-Time Rate</TableHead>
<TableHead onClick={() => handleSort("on_time_delivery_rate")} className="cursor-pointer">On-Time %</TableHead>
<TableHead onClick={() => handleSort("order_fill_rate")} className="cursor-pointer">Fill Rate</TableHead>
<TableHead onClick={() => handleSort("avg_unit_cost")} className="cursor-pointer">Avg Unit Cost</TableHead>
<TableHead onClick={() => handleSort("total_spend")} className="cursor-pointer">Total Spend</TableHead>
<TableHead onClick={() => handleSort("total_orders")} className="cursor-pointer">Orders</TableHead>
<TableHead onClick={() => handleSort("active_products")} className="cursor-pointer">Products</TableHead>
</TableRow>
@@ -278,17 +277,13 @@ export function Vendors() {
<TableBody>
{isLoading ? (
<TableRow>
<TableCell colSpan={8} className="text-center py-8">
<TableCell colSpan={9} className="text-center py-8">
Loading vendors...
</TableCell>
</TableRow>
) : paginatedData.map((vendor: Vendor) => (
<TableRow key={vendor.vendor_id}>
<TableCell className="font-medium">{vendor.name}</TableCell>
<TableCell>
<div>{vendor.contact_name}</div>
<div className="text-sm text-muted-foreground">{vendor.email}</div>
</TableCell>
<TableCell>{vendor.status}</TableCell>
<TableCell>{typeof vendor.avg_lead_time_days === 'number' ? vendor.avg_lead_time_days.toFixed(1) : "0.0"} days</TableCell>
<TableCell>{typeof vendor.on_time_delivery_rate === 'number' ? vendor.on_time_delivery_rate.toFixed(1) : "0.0"}%</TableCell>
@@ -300,13 +295,15 @@ export function Vendors() {
{getPerformanceBadge(vendor.order_fill_rate ?? 0)}
</div>
</TableCell>
<TableCell>${typeof vendor.avg_unit_cost === 'number' ? vendor.avg_unit_cost.toFixed(2) : "0.00"}</TableCell>
<TableCell>${typeof vendor.total_spend === 'number' ? vendor.total_spend.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) : "0"}</TableCell>
<TableCell>{vendor.total_orders?.toLocaleString() ?? 0}</TableCell>
<TableCell>{vendor.active_products?.toLocaleString() ?? 0}</TableCell>
</TableRow>
))}
{!isLoading && !paginatedData.length && (
<TableRow>
<TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
<TableCell colSpan={9} className="text-center py-8 text-muted-foreground">
No vendors found
</TableCell>
</TableRow>
@@ -315,7 +312,7 @@ export function Vendors() {
</Table>
</div>
{filteredData.length > 0 && (
{data?.pagination && data.pagination.total > 0 && (
<motion.div
layout="position"
transition={{ duration: 0.15 }}
@@ -333,7 +330,7 @@ export function Vendors() {
aria-disabled={page === 1}
/>
</PaginationItem>
{Array.from({ length: Math.ceil(filteredData.length / 50) }, (_, i) => (
{Array.from({ length: data.pagination.pages }, (_, i) => (
<PaginationItem key={i + 1}>
<PaginationLink
href="#"
@@ -352,9 +349,9 @@ export function Vendors() {
href="#"
onClick={(e) => {
e.preventDefault();
if (page < Math.ceil(filteredData.length / 50)) setPage(p => p + 1);
if (page < data.pagination.pages) setPage(p => p + 1);
}}
aria-disabled={page >= Math.ceil(filteredData.length / 50)}
aria-disabled={page >= data.pagination.pages}
/>
</PaginationItem>
</PaginationContent>