H&J Fence Supply feature map — what files, URLs, and rules govern each part of the app. Read this BEFORE working on any feature. Covers quoting, KDS production, delivery, payments, communications, admin, and more.
Read this before touching any code. This maps Joe's words to exact files, URLs, and rules. If you skip this, you WILL go to the wrong file.
| When Joe says... | He means THIS | NOT this |
|---|---|---|
| "quote", "quote builder" | sketch-quote-builder.tsx | quote.tsx, quote-cart.tsx, quote-view.tsx (all deprecated) |
| "order view", "the order" | h2j-order-view.tsx (H&J internal) | order-detail.tsx (also valid but different context) |
| "caps", "cap colors" | Cap logic inside SketchDrawingModal.tsx + CapsSelectionModal.tsx |
| — |
| "KDS", "production screens" | client/src/pages/kds/ folder | production-schedule.tsx (that's the calendar) |
| "TV display", "the big screen" | kds/station-tv.tsx | kds/station.tsx (that's the tablet) |
| "feedback", "bugs from users" | admin/feedback.tsx + feedback.routes.ts | service-feedback.tsx (that's post-pickup satisfaction) |
| "conversations", "texting" | admin/conversations.tsx | — |
| "the portal", "contractor view" | contractor-portal.tsx | contractor-profile.tsx (that's admin viewing a contractor) |
| "dashboard" | dashboard.tsx (role-aware, shows differently per user) | — |
| "settings" | contractor-settings.tsx (contractor) or admin/system-settings.tsx (admin) | — |
| "production schedule" | production-schedule.tsx (the calendar/schedule page) | KDS pages |
| "register", "payment" | register-payment.tsx (counter staff taking payment) | — |
| "pickup", "yard" | yard-dashboard.tsx (runner/loader) or pickup.tsx (contractor pickup flow) | — |
The most-touched part of the app. This is where money starts.
| What | File | Notes |
|---|---|---|
| Main UI | client/src/pages/sketch-quote-builder.tsx | 8,900+ lines. THE quote builder. |
| Drawing modal | client/src/components/sketch/SketchDrawingModal.tsx | Fence layout drawing + auto-calc |
| Caps modal | client/src/components/fence-calculator/CapsSelectionModal.tsx | Color-matched caps selection |
| Save/load API | server/routes/quote-builder.routes.ts | Saves quotes + cart items |
| Quote data | shared/schema.ts → quotes table (~line 1022) | adjustments JSON, metadata JSONB |
| Cart items | shared/schema.ts → quoteCartItems (~line 1260) | productType, variantId, unitPrice |
| PDF generation | client/src/lib/pdf/ | Quote and invoice PDF export |
| Customer-facing view | client/src/pages/customer-quote-view.tsx | What the homeowner sees |
| Public quote link | client/src/pages/public-contractor-quote.tsx | No-login /p/quote/:id |
URL: /sketch-quote-builder (new) or /sketch-quote-builder/:id (edit existing)
Data flow downstream: Quote → handleSubmitOrder → Order (h2jStatus=pending) → KDS Routing → Production → Pick List → Pickup/Delivery → Invoice/Payment → Reports
Recent changes to know about:
validateGateHardwareAndCaps() uses color-based matching, not capIdDesign patterns:
Testing:
http://localhost:3000/sketch-quote-builderWhere orders get built. McDonald's-style kitchen displays.
| What | File | Notes |
|---|---|---|
| Station tablet | client/src/pages/kds/station.tsx | Worker's tablet view |
| Station TV | client/src/pages/kds/station-tv.tsx | Big screen display (no nav) |
| KDS dashboard | client/src/pages/kds/dashboard.tsx | Overview of all stations |
| Verify order | client/src/pages/kds/verify-order.tsx | Tablet verification flow |
| Print order | client/src/pages/kds/print-order.tsx | Print single order |
| KDS admin overview | client/src/pages/admin/kds-overview.tsx | Admin overview |
| KDS station config | client/src/pages/admin/kds-stations.tsx | Station setup |
| Station view | client/src/pages/admin/kds-station-view.tsx | Detailed station view |
| TV preview | client/src/pages/admin/tv-preview.tsx | Test TV display with real data |
| Backend | server/routes/kds.routes.ts | 102KB — all KDS endpoints |
| Routing | server/utils/kds-routing.ts | Routes items to stations by type |
| Station display | client/src/components/kds/StationDisplay.tsx | Shared station UI component |
| Bulk view (posts) | client/src/components/kds/PostStationBulkView.tsx | Post station daily aggregate |
| Photo verify | client/src/components/kds/AIPhotoVerification.tsx | AI auto-verification |
| Picklist tables | client/src/components/production/picklist-tables.tsx | Shared tables for TV + print |
| Station picklist | client/src/components/production/StationPicklist.tsx | Print picklist layout |
URLs:
/kds/dashboard — overview/kds/station/:stationId — tablet/kds/station-tv/:stationId — TV (no sidebar)/kds/verify/:orderId — verificationStation types: Panel, Post, Gate, Hardware, Packer. Sequential dependencies (panel → post → gate → packer).
Testing:
/kds/dashboard to see stations| What | File | Notes |
|---|---|---|
| Dispatch dashboard | client/src/pages/admin/delivery-dispatch.tsx | Assign drivers, track deliveries |
| Driver claiming | client/src/pages/delivery-claim.tsx | Public — driver claims a delivery |
| My deliveries | client/src/pages/my-deliveries.tsx | Driver's portal |
| On My Way | client/src/pages/on-my-way.tsx | Contractor heading to pickup |
| I'm Here | client/src/pages/im-here.tsx | Arrival + payment flow |
| Yard dashboard | client/src/pages/yard-dashboard.tsx | Runner/Loader views |
| Pickup TV board | client/src/pages/pickup-tv-board.tsx | Full-screen pickup status |
| Pickup lookup | client/src/pages/pickup-lookup.tsx | Public kiosk — phone/QR check-in |
| Backend | server/routes/deliveries.routes.ts | 68KB |
| Pickup backend | server/routes/pickup.routes.ts | 48KB |
| Yard backend | server/routes/yard.routes.ts | 31KB |
| SMS flow | server/services/pickup-sms.service.ts | 5-step SMS flow |
| Driver backend | server/routes/drivers.routes.ts | Driver CRUD |
Testing:
/admin/delivery-dispatch/on-my-way/yard/tv-board (no login needed)| What | File | Notes |
|---|---|---|
| Register payment | client/src/pages/register-payment.tsx | Counter staff takes payment (cash/card/tap) |
| Register session | client/src/pages/register-session.tsx | Open/close register |
| Payment backend | server/routes/payment.routes.ts | 50KB |
| Invoice backend | server/routes/payment-invoice.routes.ts | Invoice generation |
| Stripe backend | server/routes/stripe.routes.ts | Stripe integration |
| Stripe terminal | server/routes/stripe-terminal.routes.ts | M2 tap-to-pay |
| Public invoice | client/src/pages/public-invoice.tsx | No-login /p/invoice/:id |
| PDF invoice | client/src/lib/pdf/generatePaymentInvoicePdf.ts | PDF generation |
| Cash reports | client/src/pages/admin/cash-reports.tsx | Cash reconciliation |
Testing:
/register-payment| What | File | Notes |
|---|---|---|
| Conversations page | client/src/pages/admin/conversations.tsx | SMS messaging |
| Conversation thread | client/src/components/conversation-thread.tsx | Thread UI component |
| Conversations API | server/routes/conversations.routes.ts | Messaging endpoints |
| Calls API | server/routes/calls.routes.ts | Click-to-call |
| Twilio webhooks | server/routes/twilio-webhooks.routes.ts | Inbound call handling |
| Webhook service | server/services/twilio-webhook.service.ts | Call routing logic |
| SMS notifications | server/services/sms-notifications.ts | System SMS (order ready, etc.) |
| Translation | server/services/translation.ts | EN↔ES auto-translate |
| What | File | Notes |
|---|---|---|
| Contractor list (admin) | client/src/pages/contractors.tsx | All contractors + registration requests |
| Contractor profile | client/src/pages/contractor-profile.tsx | Admin views ONE contractor (tabs: info, comms, quotes, payments) |
| Contractor settings | client/src/pages/contractor-settings.tsx | Contractor self-service config |
| Contractor portal | client/src/pages/contractor-portal.tsx | Contractor's home screen |
| Registration | client/src/pages/contractor-registration.tsx | New contractor signup |
| Client Hub | client/src/pages/client-hub/ | Jobber-style no-login portal |
| Backend | server/routes/contractors.routes.ts | 38KB |
Key concept: contractors table has isApproved flag. Unapproved = homeowner pricing, no Stripe access.
| What | URL | File |
|---|---|---|
| System settings | /admin/settings | admin/system-settings.tsx |
| Employees | /admin/employees | admin/employees.tsx |
| Users | /admin/users | admin/users.tsx |
| Feedback | /admin/feedback | admin/feedback.tsx |
| Ideas | /admin/ideas | admin/ideas.tsx |
| Ops dashboard | /admin/ops-dashboard | admin/ops-dashboard.tsx |
| Morning setup | /admin/morning-setup | admin/morning-setup.tsx |
| Test simulator | /admin/test-simulator | admin/test-simulator.tsx |
| Automations | /admin/automations | admin/automations.tsx |
| SMS flow editor | /admin/sms-flow-editor | admin/sms-flow-editor.tsx |
| Reports | /admin/reports | admin/reports.tsx |
| Warehouse map | /admin/warehouse-map | admin/warehouse-map.tsx |
| Storage areas | /admin/storage-areas | admin/storage-areas.tsx |
| Announcements | /admin/system-announcements | admin/system-announcements.tsx |
| Tutorials | /admin/tutorials | admin/tutorials.tsx |
| Locations | /admin/locations | admin/locations-admin.tsx |
| Time entries | /admin/time-entries | admin/time-entries.tsx |
| What | File | Notes |
|---|---|---|
| Style attributes | admin/style-attributes.tsx | Fence styles (the big one — 87KB) |
| Product variants | admin/product-variants.tsx | Individual products |
| BOM recipes | admin/bom-recipes.tsx | Bill of materials |
| BOM calculator | admin/bom-calculator.tsx | Calculate materials for a fence |
| Material types | admin/material-types.tsx | Vinyl, Aluminum, Cedar, Chain Link |
| Backend: attributes | server/routes/attributes.routes.ts | 41KB |
| Backend: variants | server/routes/variants.routes.ts | 72KB |
| Backend: BOM | server/routes/bom.routes.ts | 23KB |
| What | File | Notes |
|---|---|---|
| Lead form (public) | client/src/pages/public/homeowner-lead-form.tsx | GPS fence drawing |
| Get quote (public) | client/src/pages/public/get-quote.tsx | Lead capture |
| Leads management | client/src/pages/leads.tsx | Admin lead management |
| Backend | server/routes/homeowner-leads.routes.ts | 26KB |
| County detection | server/services/county-detection.ts | Auto-detect county |
| Lead matching | server/services/lead-matching.ts | Match to contractors |
@/components/ui/*)useToast() from @/hooks/use-toastapiRequest() from @/lib/queryClient + React QueryuseAuth() hook from @/hooks/use-authgetCSRFToken() from @/lib/csrfuseTranslation() hook.| Role | Login Method | Credentials |
|---|---|---|
| Admin | Email + password | See tests/fixtures/test-accounts.ts |
| Contractor (BBB) | Email + password | See tests/fixtures/test-accounts.ts |
| Counter Staff | Employee # + PIN | See tests/fixtures/test-accounts.ts |
| Production Worker | Employee # + PIN | See tests/fixtures/test-accounts.ts |
Dev server: http://localhost:3000 (NOT 5000)
Test data: ONLY "BBB Fence Company" — never touch other contractors
Workflow: Read .agents/workflows/ui-testing.md for full procedure
| File | What | Size |
|---|---|---|
shared/schema.ts | ALL database tables (100+) | 8,659 lines |
client/src/App.tsx | ALL routes | 1,202 lines |
server/routes.ts | Route registration | Central |
server/auth.ts | Auth middleware | — |
server/db.ts | Database connection | — |
CLAUDE.md | Agent context (general) | 254 lines |
HANDOFF.md | What the last agent did | Variable |
docs/active/ORDER_LIFECYCLE.md | Quote → Payment data flow | 120 lines |
docs/active/FEATURE_STATUS.md | Every feature + status | 271 lines |
These exist but are NOT used. Don't touch them:
client/src/pages/quote.tsx — Old quote pageclient/src/pages/quote-cart.tsx — Old cartclient/src/pages/quote-view.tsx — Old viewclient/src/pages/quote-cart-reorganized.tsx — Dead codecontractor-profile.tsx.bak / .bak2 — Backups