# 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

1. **`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.

2. **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.

3. **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.

4. **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)