ray
60 lines
3.0 KiB
Markdown
60 lines
3.0 KiB
Markdown
# 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.
|