Filter Overview

CSV History at /inventory/csv-history provides comprehensive filtering in a toolbar above the table:

• Type Dropdown: Filter by import type (Import Inventory, Import Deduction, or All Types)
• Status Dropdown: Filter by status (Completed, Failed, In Progress, Partially-Complete, or All Statuses)
• Start Date Picker: Date input field to filter imports from a specific start date
• End Date Picker: Date input field to filter imports until a specific end date
• Filename Search: Text field with search icon to filter by filename
• Apply Button: Button to apply all selected filters
• Reset Button: Button to clear all filters and reset to defaults

Filename Search

Search for imports by filename using the search field:

• Search Field: Text field labeled "Search Filename" with Search icon in InputAdornment
• Partial Matching: Matches any part of the filename (server-side filtering)
• Case Insensitive: Search is not case-sensitive
• Manual Apply: Click "Apply" button to execute search (doesn't auto-search as you type)
• Filter State: Search term stored in filters.search state variable
• Reset: Click "Reset" button or clear field and apply to show all imports
• Examples: Search for "january", "inventory", "update", "2024" to find related imports

Status Filter

Filter imports by their completion status using the Status dropdown:

• Dropdown Menu: FormControl with Select component, size "small", minWidth 200px
• All Statuses: Default option (empty value) shows all imports
• Completed: Shows only successfully completed imports (status = 'completed')
• Failed: Shows only imports that failed or had errors (status = 'error')
• In Progress: Shows imports currently being processed (status = 'in-progress')
• Partially-Complete: Shows imports with partial success (status = 'Partially-Complete')
• Visual Indicators: Status displayed with color-coded badges in table (green for completed, red for error, yellow for in-progress/partial)
• Use Case: Filter by "Error" to find and retry problematic imports
• Apply Required: Must click "Apply" button for filter to take effect

Type Filter

Filter by import type using the Type dropdown:

• Dropdown Menu: FormControl with Select component, size "small", minWidth 200px
• All Types: Default option (empty value) shows all import types
• Import Inventory: Shows only inventory import operations (type = 'importInventory')
• Import Deduction: Shows only deduction import operations (type = 'importDeduction')
• Single Select: Only one type can be selected at a time
• Apply Required: Must click "Apply" button for filter to take effect

Date Range Filter

Filter imports by date range using date pickers:

• Start Date Field: Date input field labeled "Start Date" (HTML5 date input)
• End Date Field: Date input field labeled "End Date" (HTML5 date input)
• Format: Date format: YYYY-MM-DD
• Empty Values: Empty fields show all dates (no date restriction)
• Range Logic: Shows imports where createdAt is between startDate and endDate (inclusive)
• Apply Required: Must click "Apply" button for date filter to take effect

Table Sorting

Sort the CSV logs table by clicking column headers:

• Sortable Columns: Filename and Date columns are sortable (clickable headers)
• Default Sort: Sorted by createdAt descending (newest first)
• Toggle Behavior: Clicking a column toggles between ascending and descending
• Visual Indicators: ArrowUpwardIcon shows ascending, ArrowDownwardIcon shows descending
• Order State: Sort order stored in 'order' state ('asc' or 'desc')
• OrderBy State: Current sort column stored in 'orderBy' state (default: 'createdAt')
• Server-Side Sorting: Sorting happens server-side via API params (sortBy and order)
• Page Reset: Changing sort resets to page 1

Applying Filters

Step-by-step process for applying filters:

1. Set your desired filter values (Type, Status, Start Date, End Date, Search)
2. Click the "Apply" button (variant="contained", color="primary")
3. System sends API request with filter parameters to /inventory/csvlogs
4. Empty filter values are removed from request parameters
5. Table updates with filtered results
6. Pagination resets to page 1 when filters change
7. Total pages calculated based on filtered result count

Resetting Filters

To clear all filters and show all imports:

1. Click the "Reset" button (variant="outlined", color="secondary")
2. All filter fields are cleared (type, status, startDate, endDate, search)
3. Filters state object resets to empty strings
4. Pagination resets to page 1
5. API request sent with no filter parameters
6. Table shows all CSV logs (unfiltered)

Combining Filters

All filters work together using AND logic:

• AND Logic: Imports must match ALL active filters to appear
• Example: Type "Import Inventory" + Status "Error" + Search "inventory" = failed inventory imports with "inventory" in filename
• Progressive Filtering: Start with one filter, add more to narrow down results
• Server-Side Filtering: All filtering happens server-side for performance
• API Parameters: Filters sent as query params: type, status, startDate, endDate, search, page, limit, sortBy, order

Pagination with Filters

How pagination works with filters:

• Page Size: 20 CSV logs per page (logsPerPage constant)
• Filtered Results: Pagination shows only logs matching active filters
• Total Pages: Calculated from filtered result count returned by API
• Page Reset: Changing filters automatically resets to page 1
• Sort Reset: Changing sort order resets to page 1
• Page Parameter: Current page sent to API as 'page' query param
• Auto-Scroll: Page change scrolls window to top smoothly