# SPQ-v2 Pitfalls (June 2026)

Bugs discovered and fixed during the spq-v2 porting/deployment phase.

## 1. Nested component input focus loss

The `ServiceRow` was defined as a nested function inside `ServicesTable`. Every store update re-rendered `ServicesTable`, recreating `ServiceRow` as a new React component type, destroying and remounting the DOM inputs. Focus lost on every keystroke.

**Fix:** Extracted to file-level `memo`'d component. See `pocketbase-development` skill.

## 2. Subagent-generated bugs

Subagents dispatched to build feature pages consistently produce the same class of bugs:
- **Missing onClick handlers** — buttons rendered without any action (e.g., "Add as custom service")
- **Wrong collection names** — using `repair_orders` when it's `repairOrders`
- **Missing API wiring** — AI functions imported but not connected
- **Nested components** — components defined inside components (causes focus loss)
- **`sort: '-created'`** — references field that doesn't exist on most PB collections

Post-subagent audit checklist:
- [ ] Every button has an onClick handler
- [ ] Every collection name matches the actual PB collection
- [ ] All import functions are actually called somewhere
- [ ] No components defined inside other components
- [ ] All sort fields exist on the target collection

## 3. PocketBase collection naming

| Code uses | Actual PB name | Status |
|-----------|---------------|--------|
| `repair_orders` | `repairOrders` | Wrong — must match |
| `repairOrders` | `repairOrders` | Correct |
| `invoices` | MISSING | Needs collection created |
| `service_advisors` | MISSING | Needs collection created |
| `vehicles` | MISSING | Needs collection created |

## 4. `created` field doesn't exist

PB collections created via the SDK on first insert don't get system `created`/`updated` fields. Use `sort: '-id'` instead. Also, `createdAt` field was used inconsistently — the QuoteGenerator saves `createdAt` but the Dashboard reads `created`.

## 5. Tesseract.js CDN import fails in Vite prod

`import('https://cdn.jsdelivr.net/npm/tesseract.js@5/...')` — Vite can't bundle external URLs. Use `import Tesseract from 'tesseract.js'` (npm package already in package.json).

## 6. RepairOrders JSON field (services)

PB `json` type fields arrive as strings when the collection was created via certain paths. Always guard with `Array.isArray()` and wrap `JSON.parse()` in try/catch.

## 7. Date formatting crashes

`new Date(undefined)` → `Invalid Date` → `RangeError: Invalid time value` when calling `.toLocaleDateString()`. Always guard with `if (!iso) return '—'`.

## 8. Completed → Reopen

Original bug: once a repair order was marked "completed", all status buttons disappeared. Only "Mark Delivered" was shown. Fixed by adding "Reopen" button that sets status back to "active".

## 9. Promised Completion (Due Time)

The original site shows a "Due" column with formatted promised completion times. Added `promisedTime` field to RepairOrder type, `formatDueDate()` formatter, datetime-local input in create/edit modal, and column in the table.