Reference: RepairOrders.tsx Extraction (2026-07-07)

Concrete example of the full extraction pattern on a 1,698-line file.

Source File

src/pages/RepairOrders.tsx — 1,698 lines, 12 inline component definitions, 12 pure helper functions, 5 type aliases, 3 localStorage helpers.

Created Files (15 + 1 barrel)

File	Contents
`src/lib/repairOrders.ts`	`calcDueTime`, `formatTimeRemaining`, `getUrgencyClass`, `formatDueDateTime`, `getCompletedMetricDate`, `isWithinCompletedRange`, `sortCompletedOrders`, `ratingLabel`, `displayCustomerName`, `sortOrders`, `normalizeRO`, `getStatusChips`
`src/components/repairOrders/types.ts`	`TabId`, `CompletedRangeFilter`, `CompletedStatusFilter`, `CompletedRatingFilter`, `SavedView`, `TABS`, `SAVED_VIEWS_KEY`, `loadSavedViews`, `persistSavedViews`
`src/components/repairOrders/StatusBadge.tsx`	Inline badge + `StatusBadgeAuto` convenience wrapper
`src/components/repairOrders/RowProgressBar.tsx`	Inline progress bar (depended on `roProgress` from status lib)
`src/components/repairOrders/TechNames.tsx`	Tech name pills display
`src/components/repairOrders/CustomerTypeBadge.tsx`	Waiter/drop-off toggle badge (calls `useSettings` + `getCustomerTypeLabels`)
`src/components/repairOrders/TimeRemainingCell.tsx`	Countdown with urgency coloring, `AlertTriangle` icon
`src/components/repairOrders/LoadingSkeleton.tsx`	Animated placeholder skeleton
`src/components/repairOrders/EmptyState.tsx`	Per-tab empty state with `Wrench` icon, conditional "Create RO" button
`src/components/repairOrders/ErrorState.tsx`	Delegates to shared `ListError` component
`src/components/repairOrders/TabButton.tsx`	Tab with active/inactive styling and optional count badge
`src/components/repairOrders/ROModal.tsx`	Create/edit modal wrapping shared `ROForm`
`src/components/repairOrders/FragmentRow.tsx`	Already `memo()`'d — active/in-progress table row, 11 columns
`src/components/repairOrders/CompletedRow.tsx`	Already `memo()`'d — completed table row, 9 columns
`src/components/repairOrders/index.ts`	Barrel: all types + all components re-exported

Result

Main file: 1,698 → 923 lines (45.6% reduction)
Build: 0 errors (382ms)
Lint: 0 errors, 0 new warnings (18 pre-existing)
Tests: 86 passed, 12 files (unchanged)

Issues Encountered & Fixes

isVoided not re-exported from lib — FragmentRow and CompletedRow imported isVoided from ../../lib/repairOrders but isVoided belongs to roEvents, not the new lib helpers. Fix: import isVoided directly from ../../lib/roEvents in the component files.
Unused imports in main file — ShopSettings type, TechNames component, and several lucide icons (Wrench, AlertTriangle, ChevronRight, UserX, CheckSquare, Square) were only used by now-extracted components. Fix: removed them from the main file's imports.
Duplicate dependency in useEffect — fetchTechAssignments appeared twice in the dependency array after the rewrite (the original had it once; the rewrite accidentally duplicated it). Fix: removed the duplicate.
Missing dependency in useCallback — handleToggleCustomerType used setOrders in its closure via setOrders but had an empty dependency array. Fix: added [setOrders].

Timeline

Read source file: ~2 minutes
Create lib + types: ~1 minute
Create 12 component files: ~4 minutes
Create barrel: ~30 seconds
Rewrite main file: ~5 minutes
Fix lint errors + verify: ~2 minutes
Total: ~15 minutes (including context gathering)

3.6 KiB Raw Blame History