FilaOps UI Components Reference¶

Complete UI page and component documentation for FilaOps Core ERP system. Generated for AI consumption and developer reference.

This document covers Core (Open Source) UI components only.

Overview¶

Navigation Structure¶

From AdminLayout.jsx, the sidebar navigation is organized into groups:

Dashboard (No Header)¶

• /admin → Dashboard (end: true)
• /admin/command-center → Command Center

SALES¶

• /admin/orders → Orders
• /admin/quotes → Quotes
• /admin/payments → Payments (adminOnly)
• /admin/customers → Customers (adminOnly)

INVENTORY¶

• /admin/items → Items
• /admin/materials/import → Import Materials (adminOnly)
• /admin/bom → Bill of Materials
• /admin/locations → Locations (adminOnly)
• /admin/inventory/transactions → Transactions (adminOnly)
• /admin/inventory/cycle-count → Cycle Count (adminOnly)
• /admin/spools → Material Spools (adminOnly)

OPERATIONS¶

• /admin/production → Production
• /admin/manufacturing → Manufacturing
• /admin/printers → Printers
• /admin/purchasing → Purchasing
• /admin/shipping → Shipping

QUALITY¶

• /admin/quality/traceability → Material Traceability

ADMIN (adminOnly group)¶

• /admin/accounting → Accounting
• /admin/orders/import → Import Orders
• /admin/users → Team Members
• /admin/scrap-reasons → Scrap Reasons
• /admin/settings → Settings
• /admin/security → Security Audit

Route Definitions¶

From App.jsx:

/
├── /setup                                → Setup (initial setup wizard)
├── /onboarding                           → Onboarding (user onboarding flow)
├── /admin/login                          → AdminLogin
├── /forgot-password                      → ForgotPassword
├── /reset-password/:token                → ResetPassword
├── /admin/password-reset/:action/:token  → AdminPasswordResetApproval
│
└── /admin (AdminLayout wrapper - requires auth)
    ├── / (index)                         → AdminDashboard
    ├── /orders                           → AdminOrders
    ├── /orders/:orderId                  → OrderDetail
    ├── /quotes                           → AdminQuotes
    ├── /payments                         → AdminPayments
    ├── /customers                        → AdminCustomers
    ├── /bom                              → AdminBOM
    ├── /products                         → redirects to /items
    ├── /items                            → AdminItems
    ├── /purchasing                       → AdminPurchasing
    ├── /manufacturing                    → AdminManufacturing
    ├── /production                       → AdminProduction
    ├── /production/:orderId              → ProductionOrderDetail
    ├── /shipping                         → AdminShipping
    ├── /materials/import                 → AdminMaterialImport
    ├── /orders/import                    → AdminOrderImport
    ├── /inventory/transactions           → AdminInventoryTransactions
    ├── /inventory/cycle-count            → AdminCycleCount
    ├── /users                            → AdminUsers
    ├── /locations                        → AdminLocations
    ├── /accounting                       → AdminAccounting
    ├── /printers                         → AdminPrinters
    ├── /scrap-reasons                    → AdminScrapReasons
    ├── /spools                           → AdminSpools
    ├── /quality/traceability             → MaterialTraceability
    ├── /command-center                   → CommandCenter
    ├── /settings                         → AdminSettings
    └── /security                         → AdminSecurity

Pages Catalog¶

Authentication Pages (3)¶

Dashboard & Core Pages (4)¶

AdminDashboard Features¶

• Sales trend chart (WTD, MTD, QTD, YTD, ALL periods)
• Dual-line cumulative chart (sales vs payments)
• Action Items panel (overdue, low stock, pending quotes, ready orders)
• Production Pipeline horizontal bar chart
• Recent Orders table (clickable to detail)
• Pending Purchase Orders list

API Endpoints Used:

• GET /admin/dashboard/ - Main dashboard data
• GET /admin/dashboard/sales-trend/ - Sales trend data
• GET /sales-orders/ - Recent orders
• GET /purchase-orders/ - Pending POs

Sales Management Pages (5)¶

AdminOrders Features¶

• Fulfillment Status filter (fulfillment_priority, fulfillment_state)
• Sort by multiple fields (created_at, due_date, total_amount)
• Client-side search (order #, product, customer, email)
• Card layout (3-column grid)
• Create Order modal
• Cancel Order modal (with reason)
• Delete Order confirmation

OrderDetail Features¶

• Full order summary with customer info
• Material Requirements table (BOM explosion, shortages)
• Capacity Requirements (routing operations)
• Production Status (WO progress bars)
• Payment Summary & History
• Fulfillment Progress widget
• Blocking Issues Panel
• Shipping Address editor
• Activity & Shipping Timeline

Inventory Management Pages (7)¶

AdminItems Features¶

• Hierarchical Category tree (expandable, edit/delete)
• Table AND Card views (sortable)
• Inventory Adjustment with reason codes
• Bulk Update modal (category, type, procurement)
• Quick filter cards (Total, FG, Components, Materials, Supplies, Needs Reorder)
• Search by SKU/name/UPC
• Recost All function
• Pagination (25/50/100/200 per page)
• Item Type filtering
• Active/Inactive toggle

Form Fields (ItemForm):

• SKU (required)
• Name (required)
• Description
• Category (dropdown)
• Item Type (finished_good, component, material, consumable)
• Procurement Type (make, buy)
• Unit of Measure
• Standard Cost, Average Cost, Last Cost
• Reorder Point, Reorder Qty
• Lead Time Days
• Active toggle
• Has BOM toggle
• UPC/Barcode

Manufacturing Pages (4)¶

AdminProduction Features¶

• Production queue list
• Filter by status (Draft, Released, Scheduled, In Progress, Complete)
• Work order cards with progress
• Quick operation actions
• Production Order creation

ProductionOrderDetail Features¶

• Operation timeline visualization
• Material consumption tracking
• QC pass/fail recording
• Scrap entry modal
• Operation scheduling
• Progress bars per operation

Supply Chain Pages (3)¶

AdminPurchasing Features¶

• PO list with vendor, status, amount
• Low Stock items tab
• Vendor management
• PO creation wizard
• Receipt/acceptance workflow

Settings & Admin Pages (5)¶

Quality & Reporting Pages (1)¶

Components Catalog¶

Note: Components are now organized into subdirectories under frontend/src/components/: accounting/, bom/, command-center/, customers/, dashboard/, inventory/, item-wizard/, items/, manufacturing/, orders/, payments/, printers/, production/, purchasing/, quotes/, remediation/, routing/, sales-order/, settings/, ui/. File paths below reflect the subdirectory when applicable.

Layout Components (2)¶

Order Management Components (5)¶

Production Management Components (11)¶

Inventory & Items Components (4)¶

BOM Components (bom/ subdirectory, 9)¶

Routing & Manufacturing Configuration Components (4)¶

Purchasing Components (6)¶

Payment Components (1)¶

Quality Components (2)¶

Modal & Dialog Components (7)¶

Data Display Components (7)¶

Alert & Feedback Components (4)¶

Utility Components (3)¶

Command Center Components (3)¶

Wizard Components (1)¶

Form Fields Reference¶

ItemForm Fields¶

VendorModal Fields¶

CustomerModal Fields¶

Disabled/Hidden Features¶

Navigation Disabled¶

API Call Patterns¶

All API calls use this pattern:

const token = localStorage.getItem("adminToken");
const response = await fetch(`${API_URL}/api/v1/endpoint`, {
  headers: {
    "Authorization": `Bearer ${token}`,
    "Content-Type": "application/json"
  }
});

Common API Hooks¶

• useQuery - React Query for GET requests
• useMutation - React Query for POST/PATCH/DELETE
• useActivityTokenRefresh - Auto-refresh JWT tokens

State Management¶

Local Storage Keys¶

React Context¶

Styling¶

CSS Variables (from theme)¶

--bg-primary      /* Main background */
--bg-secondary    /* Sidebar background */
--bg-card         /* Card background */
--text-primary    /* Primary text */
--text-secondary  /* Secondary text */
--text-muted      /* Muted/disabled text */
--border-subtle   /* Subtle borders */

Tailwind Classes¶

• glass - Glass morphism effect
• nav-item - Navigation item default
• nav-item-active - Navigation item active state
• grid-pattern - Background grid pattern
• logo-glow - Logo glow effect

Last updated: 2026-02-25 Generated for FilaOps Core