("name");
@@ -37,24 +39,11 @@ export function Vendors() {
status: "all",
performance: "all",
});
- const [] = useState({
- column: 'name',
- direction: 'asc'
- });
const { data, isLoading } = useQuery({
- queryKey: ["vendors", page, filters, sortColumn, sortDirection],
+ queryKey: ["vendors"],
queryFn: async () => {
- 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}`, {
+ const response = await fetch(`${config.apiUrl}/vendors`, {
credentials: 'include'
});
if (!response.ok) throw new Error("Failed to fetch vendors");
@@ -115,16 +104,12 @@ export function Vendors() {
}, [data?.vendors, filters, sortColumn, sortDirection]);
// Calculate pagination
+ const totalPages = Math.ceil(filteredData.length / ITEMS_PER_PAGE);
const paginatedData = useMemo(() => {
- if (!data?.vendors) return [];
- return data.vendors;
- }, [data?.vendors]);
-
- // Calculate stats from filtered data
- const stats = useMemo(() => {
- if (!data?.stats) return null;
- return data.stats;
- }, [data?.stats]);
+ const start = (page - 1) * ITEMS_PER_PAGE;
+ const end = start + ITEMS_PER_PAGE;
+ return filteredData.slice(start, end);
+ }, [filteredData, page]);
const handleSort = (column: keyof Vendor) => {
setSortDirection(prev => {
@@ -147,7 +132,7 @@ export function Vendors() {
transition={{
layout: {
duration: 0.15,
- ease: [0.4, 0, 0.2, 1] // Material Design easing
+ ease: [0.4, 0, 0.2, 1]
}
}}
className="container mx-auto py-6 space-y-4"
@@ -173,9 +158,9 @@ export function Vendors() {
Total Vendors
- {stats?.totalVendors ?? "..."}
+ {data?.stats?.totalVendors ?? "..."}
- {stats?.activeVendors ?? "..."} active
+ {data?.stats?.activeVendors ?? "..."} active
@@ -186,10 +171,10 @@ export function Vendors() {
- ${typeof stats?.totalSpend === 'number' ? stats.totalSpend.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) : "..."}
+ ${typeof data?.stats?.totalSpend === 'number' ? data.stats.totalSpend.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) : "..."}
- Avg unit cost: ${typeof stats?.avgUnitCost === 'number' ? stats.avgUnitCost.toFixed(2) : "..."}
+ Avg unit cost: ${typeof data?.stats?.avgUnitCost === 'number' ? data.stats.avgUnitCost.toFixed(2) : "..."}
@@ -199,9 +184,9 @@ export function Vendors() {
Performance
- {typeof stats?.avgFillRate === 'number' ? stats.avgFillRate.toFixed(1) : "..."}%
+ {typeof data?.stats?.avgFillRate === 'number' ? data.stats.avgFillRate.toFixed(1) : "..."}%
- Fill rate / {typeof stats?.avgOnTimeDelivery === 'number' ? stats.avgOnTimeDelivery.toFixed(1) : "..."}% on-time
+ Fill rate / {typeof data?.stats?.avgOnTimeDelivery === 'number' ? data.stats.avgOnTimeDelivery.toFixed(1) : "..."}% on-time
@@ -211,7 +196,7 @@ export function Vendors() {
Lead Time
- {typeof stats?.avgLeadTime === 'number' ? stats.avgLeadTime.toFixed(1) : "..."} days
+ {typeof data?.stats?.avgLeadTime === 'number' ? data.stats.avgLeadTime.toFixed(1) : "..."} days
Average delivery time
@@ -312,7 +297,7 @@ export function Vendors() {
- {data?.pagination && data.pagination.total > 0 && (
+ {totalPages > 1 && (
- {Array.from({ length: data.pagination.pages }, (_, i) => (
+ {Array.from({ length: totalPages }, (_, i) => (
{
e.preventDefault();
- if (page < data.pagination.pages) setPage(p => p + 1);
+ if (page < totalPages) setPage(p => p + 1);
}}
- aria-disabled={page >= data.pagination.pages}
+ aria-disabled={page >= totalPages}
/>