From f2fecede35b2f82e0a58091946870850972f9996 Mon Sep 17 00:00:00 2001
From: tonym <anthonymoon61@gmail.com>
Date: Thu, 15 Jan 2026 23:34:54 -0600
Subject: [PATCH] fix(home): use correct refine useList API pattern

Fix TypeScript errors by using { result, query } destructuring:
- result.data and result.total for list data
- query.isLoading for loading state

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 client/src/pages/home/index.tsx | 38 ++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/client/src/pages/home/index.tsx b/client/src/pages/home/index.tsx
index 3b8cee4..9136dfa 100644
--- a/client/src/pages/home/index.tsx
+++ b/client/src/pages/home/index.tsx
@@ -31,7 +31,7 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
   const pageSize = 15;
 
   // Fetch all spools (not archived) for the main list
-  const spools = useList<ISpool>({
+  const { result: spoolsResult, query: spoolsQuery } = useList<ISpool>({
     resource: "spool",
     pagination: { current: currentPage, pageSize },
     sorters: [{ field: "last_used", order: "desc" }],
@@ -43,25 +43,25 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
   });
 
   // Fetch counts for stats
-  const filaments = useList<IFilament>({
+  const { result: filamentsResult, query: filamentsQuery } = useList<IFilament>({
     resource: "filament",
     pagination: { pageSize: 1 },
   });
-  const vendors = useList<IVendor>({
+  const { result: vendorsResult, query: vendorsQuery } = useList<IVendor>({
     resource: "vendor",
     pagination: { pageSize: 1 },
   });
 
   // Calculate low stock spools
   const lowStockCount = useMemo(() => {
-    if (!spools.data?.data) return 0;
-    return spools.data.data.filter(
-      (spool) => spool.remaining_weight !== undefined && spool.remaining_weight < LOW_STOCK_THRESHOLD
+    if (!spoolsResult?.data) return 0;
+    return spoolsResult.data.filter(
+      (spool: ISpool) => spool.remaining_weight !== undefined && spool.remaining_weight < LOW_STOCK_THRESHOLD
     ).length;
-  }, [spools.data?.data]);
+  }, [spoolsResult?.data]);
 
   // For accurate low stock count, we need all spools
-  const allSpoolsForLowStock = useList<ISpool>({
+  const { result: lowStockResult } = useList<ISpool>({
     resource: "spool",
     pagination: { pageSize: 1000 },
     filters: [
@@ -78,7 +78,7 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
     },
   });
 
-  const totalLowStock = allSpoolsForLowStock.data?.total ?? lowStockCount;
+  const totalLowStock = lowStockResult?.total ?? lowStockCount;
 
   const spoolColumns = [
     {
@@ -118,7 +118,7 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
       key: "remaining_weight",
       width: 120,
       align: "right" as const,
-      render: (weight: number | undefined, record: ISpool) => {
+      render: (weight: number | undefined) => {
         if (weight === undefined) return t("unknown");
         const isLowStock = weight < LOW_STOCK_THRESHOLD;
         return (
@@ -153,8 +153,8 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
         <Col>
           <Statistic
             title={t("spool.spool")}
-            value={spools.data?.total ?? 0}
-            loading={spools.isLoading}
+            value={spoolsResult?.total ?? 0}
+            loading={spoolsQuery.isLoading}
             valueStyle={{ fontSize: 36, fontWeight: 600 }}
           />
         </Col>
@@ -192,10 +192,10 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
         styles={{ body: { padding: 0 } }}
       >
         <Table
-          dataSource={spools.data?.data}
+          dataSource={spoolsResult?.data}
           columns={spoolColumns}
           rowKey="id"
-          loading={spools.isLoading}
+          loading={spoolsQuery.isLoading}
           pagination={false}
           size="small"
           onRow={(record) => ({
@@ -207,7 +207,7 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
           <Pagination
             current={currentPage}
             pageSize={pageSize}
-            total={spools.data?.total ?? 0}
+            total={spoolsResult?.total ?? 0}
             onChange={setCurrentPage}
             showSizeChanger={false}
             size="small"
@@ -222,8 +222,8 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
             <Card hoverable size="small">
               <Statistic
                 title={t("filament.filament")}
-                value={filaments.data?.total ?? 0}
-                loading={filaments.isLoading}
+                value={filamentsResult?.total ?? 0}
+                loading={filamentsQuery.isLoading}
                 prefix={<HighlightOutlined />}
               />
             </Card>
@@ -234,8 +234,8 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
             <Card hoverable size="small">
               <Statistic
                 title={t("vendor.vendor")}
-                value={vendors.data?.total ?? 0}
-                loading={vendors.isLoading}
+                value={vendorsResult?.total ?? 0}
+                loading={vendorsQuery.isLoading}
                 prefix={<UserOutlined />}
               />
             </Card>