Log Table Display

The log table at /inventory/history displays adjustment logs with the following columns:

• Item Name: Product name from inventory product data
• Game: The game/category name (e.g., Magic The Gathering, Pokemon)
• Set/Group/Expansion: Set name, group, or expansion information
• Rarity: Card rarity if applicable
• Number: Card number or identifier
• Type: Import, Deduction, or Adjustment with icon indicator
• Quantity: Amount added (positive) or deducted (negative). Adjustments show + or - prefix
• Price: Price per item at time of log entry, formatted to 2 decimal places
• Cause: User-friendly cause name (e.g., "Import Deduction", "Order Deduction", "Manual Adjustment")
• Date: Timestamp formatted as YYYY-MM-DD HH:mm:ss in UTC
• Comment: Log comment field, displays "No Comment" if empty
• Remark: Log remark field (often contains location/bin info), displays "No Remarks" if empty

Table Features:

• Sticky Header: Table header remains visible when scrolling
• Color Coding: Each row background color matches log type (Import: green tint, Deduction: red tint, Adjustment: blue tint)
• Scrollable: Table has max height of 70vh for long lists
• Pagination: 50 logs per page with pagination controls at bottom
• Sorting: Logs sorted by date descending (most recent first)

Log Type Tabs

Switch between different log types:

• All Logs: View all log types together
• Import Logs: Only show CSV import records
• Deduction Logs: Only show inventory deductions
• Adjustment Logs: Only show manual adjustments
• Tab changes apply filters automatically

Summary Statistics Cards

Four summary cards display at the top of the page showing overview statistics:

• Total Logs Card: Shows total count of all logs matching current filters (formatted with thousand separators), displays History icon with gradient background
• Imports Card: Shows count of import operations and total quantity of items imported (e.g., "150 items"), displays green/purple gradient background with Trending Up icon
• Deductions Card: Shows count of deduction operations and total quantity of items deducted, displays pink/red gradient background with Trending Down icon
• Adjustments Card: Shows count of manual adjustment operations, displays blue gradient background with Adjustment icon

How Statistics Work:

• Real-Time Calculation: Statistics calculated from filtered logs (flattenedLogs array), not from database
• Filter-Dependent: Cards update automatically when filters change - statistics recalculate from filtered results
• Aggregation Logic: Totals computed by iterating through filtered logs and summing quantities by type
• Import Quantity: Sums all log.quantity values where log.type === 'Import'
• Deduction Quantity: Sums absolute values of log.quantity where log.type === 'Deduction'
• Loading State: Skeleton placeholders shown while loading (4 cards in responsive grid: 12 cols on mobile, 6 cols on tablet, 3 cols on desktop)
• Display Logic: Cards only appear when not loading and logs are loaded successfully
• Hover Effects: Cards have transform and shadow hover effects for better UX

Pagination

The log table uses pagination to handle large result sets:

• Page Size: 50 logs displayed per page
• Page Counter: Shows "Page X of Y" chip above table indicating current page and total pages
• Total Logs Display: Header shows total count: "Inventory Logs (X total)"
• Pagination Controls: Material-UI Pagination component at bottom with First, Previous, Next, Last buttons
• Auto-Reset: When filters change, pagination resets to page 1
• Scroll to Top: Page change automatically scrolls window to top
• Conditional Display: Pagination only shows when totalLogPages > 1

Loading States

The page shows different loading indicators:

• Statistics Loading: Skeleton placeholders for 4 stat cards while loading
• Inventories Loading: Card with CircularProgress and "Fetching inventories..." message
• Logs Processing: Shows "Processing logs..." with LinearProgress bar
• Table Skeletons: 5 rectangular skeleton loaders while table data loads
• Loading Card: Loading card disappears when both loadingInventories and loadingLogs are false

Empty States

When no logs match your filters:

• No Logs Found: Card displays with History icon (64px, gray, 30% opacity)
• Message: "No logs found" as heading
• Help Text: "Try adjusting your filters to see more results" as body text
• Conditional Display: Shows when totalLogs === 0 and not loading

Error Handling

Error states and notifications:

• Inventory Error: Red Alert with filled variant displays error message if inventory fetch fails
• Snackbar Notifications: Success/error messages appear in snackbar at bottom center (auto-hide after 6 seconds)
• Error Messages: Common errors: "Failed to fetch inventories."
• User Action: Click away or wait for auto-hide to dismiss snackbar