All files / src/pages/inventory/hooks useInventoryData.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * @file useInventoryData.ts
 * @module pages/inventory/hooks/useInventoryData
 *
 * @summary
 * Data fetching and processing for inventory page.
 * Handles backend queries, client-side filtering, and derived computations.
 *
 * @enterprise
 * - Separates data concerns from UI state
 * - Encapsulates backend API calls and error handling
 * - Provides processed data ready for rendering
 */

import * as React from 'react';
import { useSuppliersQuery } from '../../../api/inventory/hooks/useInventoryData';
import { getInventoryPage, type InventoryListResponse, type InventoryRow } from '../../../api/inventory';
import type { GridColDef } from '@mui/x-data-grid';
import { useInventoryColumns } from './useInventoryColumns';
import { useInventoryRowStyling } from './useInventoryRowStyling';

/**
 * Inventory data loading and processing results.
 * 
 * @interface InventoryDataResult
 */
export interface InventoryDataResult {
  // Raw data from backend
  server: InventoryListResponse;
  loading: boolean;

  // Suppliers for filter
  suppliers: ReturnType<typeof useSuppliersQuery>['data'];
  supplierLoading: boolean;

  // Processed/filtered items
  filteredItems: InventoryRow[];

  // Column definitions
  columns: GridColDef[];

  // Row styling function
  getRowClassName: (onHand: number, minQty: number) => string;
}

/**
 * Hook for inventory data fetching and processing.
 * 
 * Handles:
 * - Loading inventory from backend with filters/pagination/sorting
 * - Loading suppliers for filter dropdown
 * - Client-side filtering by search query and below-min threshold
 * - Column definitions with proper formatting
 * - Row classification for visual styling
 * 
 * @param supplierId - Selected supplier ID (null to not load)
 * @param q - Search query (debounced)
 * @param belowMinOnly - Whether to filter for below-min items only
 * @param serverPage - Current page (1-based)
 * @param pageSize - Items per page
 * @param serverSort - Sort string (field,direction)
 * @returns Data loading results
 */
export const useInventoryData = (
  supplierId: string | number | null,
  q: string,
  belowMinOnly: boolean,
  serverPage: number,
  pageSize: number,
  serverSort: string
): InventoryDataResult => {
  const [server, setServer] = React.useState<InventoryListResponse>({
    items: [],
    total: 0,
    page: 1,
    pageSize: 10,
  });
  const [loading, setLoading] = React.useState(false);

  // Load suppliers for filter dropdown
  const suppliersQuery = useSuppliersQuery(true);

  // Column definitions
  const columns = useInventoryColumns();

  // Row styling function
  const getRowClassName = useInventoryRowStyling();

  // Load inventory from backend
  const load = React.useCallback(async () => {
    setLoading(true);
    try {
      const res = await getInventoryPage({
        page: serverPage,
        pageSize,
        q,
        supplierId: supplierId ?? undefined,
        sort: serverSort,
      });
      setServer(res);
    } catch (err) {
      console.error('Failed to load inventory:', err);
      setServer({ items: [], total: 0, page: serverPage, pageSize });
    } finally {
      setLoading(false);
    }
  }, [serverPage, pageSize, q, supplierId, serverSort]);

  React.useEffect(() => {
    if (supplierId) {
      void load();
    } else {
      setServer((s) => ({ ...s, items: [], total: 0 }));
    }
  }, [supplierId, load]);

  // Client-side filtering by supplier (fallback)
  const supplierFiltered = React.useMemo(() => {
    if (!supplierId) return server.items;
    const sid = String(supplierId);
    return server.items.filter((r) => String(r.supplierId ?? '') === sid);
  }, [server.items, supplierId]);

  // Final filtered items with search and below-min
  const filteredItems = React.useMemo(() => {
    let rows = supplierFiltered;

    // Search by name
    const qTrim = q.trim().toLowerCase();
    if (qTrim.length > 0) {
      rows = rows.filter((r) => (r.name ?? '').toLowerCase().includes(qTrim));
    }

    // Filter by below-min threshold
    if (belowMinOnly) {
      rows = rows.filter((r) => {
        const minRaw = Number(r.minQty ?? 0);
        const min = Number.isFinite(minRaw) && minRaw > 0 ? minRaw : 5;
        const onHand = Number(r.onHand ?? 0);
        return onHand < min;
      });
    }

    return rows;
  }, [supplierFiltered, q, belowMinOnly]);

  return {
    server,
    loading,
    suppliers: suppliersQuery.data,
    supplierLoading: suppliersQuery.isLoading,
    filteredItems,
    columns,
    getRowClassName,
  };
};