{"slug":"business/FRONTEND_MAPPING_AND_WIRING","title":"Frontend Architecture: Pin-to-Pin Mapping & L1 Projection Wiring","section":"business","sectionLabel":"Business","status":"unclassified","type":"document","path":"business/FRONTEND_MAPPING_AND_WIRING.mdx","bytes":7815,"description":null,"updated":null,"source":"integratewise/Integratewise-docs-wiki","content":"\n\n> **Tier C — Historical.** This document is a point-in-time snapshot preserved for reference. For current architecture, see [CANONICAL_PLATFORM_ARCHITECTURE.md](../architecture/CANONICAL_PLATFORM_ARCHITECTURE.md).\n\n## Frontend Structure Copied\n\n```\n/apps/web/components/\n├── domains/\n│   ├── account-success/        ← CS workbench\n│   │   ├── dashboard.tsx\n│   │   ├── shell.tsx\n│   │   ├── views/              (15 specialized views)\n│   │   │   ├── account-master-view.tsx\n│   │   │   ├── api-portfolio-view.tsx\n│   │   │   ├── business-context-view.tsx\n│   │   │   ├── capabilities-view.tsx\n│   │   │   ├── company-growth-view.tsx\n│   │   │   ├── engagement-log-view.tsx\n│   │   │   ├── initiatives-view.tsx\n│   │   │   ├── insights-view.tsx\n│   │   │   ├── people-team-view.tsx\n│   │   │   ├── platform-health-view.tsx\n│   │   │   ├── product-client-view.tsx\n│   │   │   ├── risk-register-view.tsx\n│   │   │   ├── stakeholder-outcomes-view.tsx\n│   │   │   ├── strategic-objectives-view.tsx\n│   │   │   ├── success-plans-view.tsx\n│   │   │   ├── task-manager-view.tsx\n│   │   │   └── value-streams-view.tsx\n│   │   ├── accounts-view.tsx\n│   │   ├── contacts-view.tsx\n│   │   ├── csm-calendar.tsx\n│   │   ├── documents-view.tsx\n│   │   ├── meetings-view.tsx\n│   │   ├── projects-view.tsx\n│   │   ├── tasks-view.tsx\n│   │   └── intelligence-overlay.tsx\n│   ├── personal/               ← Personal workspace\n│   │   ├── dashboard.tsx\n│   │   ├── shell.tsx\n│   │   └── personal-views.tsx\n│   ├── revops/                 ← Revenue Operations\n│   │   ├── dashboard.tsx\n│   │   ├── shell.tsx\n│   │   └── revops-views.tsx\n│   ├── salesops/               ← Sales Operations\n│   │   ├── dashboard.tsx\n│   │   ├── shell.tsx\n│   │   └── salesops-views.tsx\n│   ├── domain-sidebar.tsx      ← Navigation sidebar\n│   ├── domain-types.ts         ← Domain configuration\n│   ├── domain-views.tsx        ← View switcher\n│   └── spine-projection.ts     ← Projection utilities\n├── workspace-shell.tsx         ← Main app shell\n├── sidebar.tsx                 ← Left navigation\n├── top-bar.tsx                 ← Header bar\n├── command-palette.tsx         ← Command K interface\n├── intelligence-overlay.tsx    ← AI insights overlay\n├── l1-module-content.tsx       ← L1 projection renderer\n├── integrations-hub.tsx        ← Connectors UI\n├── settings-page.tsx\n├── profile-page.tsx\n└── subscriptions-page.tsx\n```\n\n## Field Mapping: workbench-projections.ts → domain-types.ts\n\n| workbench-projections role | domain-types | spine projection | default role |\n|---|---|---|---|\n| sales_rep | salesops | sales | sales |\n| sales_manager | salesops | sales | sales |\n| cs_specialist | account-success | bizops | business-ops |\n| cs_manager | account-success | bizops | business-ops |\n| finance_manager | revops | sales | business-ops |\n| engineering_lead | personal | bizops | developer |\n| marketing_manager | personal | bizops | developer |\n| ops_manager | integratewise-apac | bizops | admin |\n| ceo | integratewise-apac | bizops | admin |\n| support_lead | account-success | bizops | business-ops |\n\n## L1 Projection System Wiring\n\n### Current Flow (Post-Copy):\n\n```\nUser Role (session)\n  ↓\ngenerateProjectionForRole(role)\n  ↓\nReturns: L1Projection {\n  workbench: \"sales\" | \"cs\" | \"finance\" | etc.\n  metrics: [...]\n  widgets: [...]\n  quick_actions: [...]\n}\n  ↓\nRoleAwareDashboard renders MetricCard, WidgetCard, etc.\n```\n\n### New Flow (With Domains):\n\n```\nUser Role (session)\n  ↓\ngenerateProjectionForRole(role)\n  ↓\nL1Projection + domain routing\n  ↓\nDomainShell (workspace-shell.tsx)\n  ├── sidebar.tsx (domain picker)\n  ├── domain-sidebar.tsx (domain nav)\n  ├── top-bar.tsx (header)\n  └── workspace (domain-specific)\n      ├── account-success/shell.tsx (CS Dashboard)\n      ├── salesops/shell.tsx (Sales Dashboard)\n      ├── revops/shell.tsx (RevOps Dashboard)\n      ├── personal/shell.tsx (Personal Dashboard)\n      └── integratewise-apac/shell.tsx (Console)\n```\n\n## Pin-to-Pin Mapping Points\n\n### 1. Domain Selection\n**File:** `domain-types.ts`\n**Maps to:** `generateProjectionForRole(role)` in `workbench-projections.ts`\n\n**Enhancement needed:**\n```typescript\n// Map role → domain + default dashboard\nfunction getRoleDomainMapping(role: UserRole): {\n  domain: DomainId;\n  defaultView: string;\n  suggestedConnectors: string[];\n} {\n  switch(role) {\n    case \"sales_rep\": return { domain: \"salesops\", defaultView: \"pipeline\", ... }\n    case \"cs_manager\": return { domain: \"account-success\", defaultView: \"health\", ... }\n    // etc\n  }\n}\n```\n\n### 2. Dashboard Widget Mapping\n**File:** `l1-module-content.tsx`\n**Current:** Renders L1Projection metrics/widgets\n**Enhancement:** Map to domain-specific widget components\n\n```typescript\n// In l1-module-content.tsx\nfunction renderWidgetForDomain(widget: WidgetProjection, domain: DomainId) {\n  switch(domain) {\n    case \"account-success\": return <AccountSuccessWidget widget={widget} />\n    case \"salesops\": return <SalesopsWidget widget={widget} />\n    // etc\n  }\n}\n```\n\n### 3. Quick Actions Wiring\n**File:** `workspace-shell.tsx` + domain shells\n**Map:** L1 quick_actions → domain view triggers\n\n```typescript\n// action \"schedule_ebr\" → navigate to account-success/meetings-view\n// action \"create_deal\" → navigate to salesops/pipeline-view\n// etc\n```\n\n### 4. Navigation Integration\n**File:** `domain-sidebar.tsx`\n**Enhancement:** Populate nav from L1 projection\n\n```typescript\n// sidebar items from projection.filters + views\nconst navItems = projection.widgets.map(w => ({\n  id: w.id,\n  label: w.title,\n  icon: domainConfig.icon,\n}))\n```\n\n### 5. Data Source Routing\n**File:** `spine-projection.ts` (shared)\n**Enhancement:** Route data sources by domain\n\n```typescript\n// \"pipeline_by_stage\" → fetch salesops data\n// \"health_by_segment\" → fetch cs data\n// \"cash_flow\" → fetch finance data\nfunction getDataSource(source: string, domain: DomainId) {\n  // Use domain context to fetch correct data\n}\n```\n\n## Implementation Checklist\n\n- [ ] Create `getRoleDomainMapping()` function\n- [ ] Wire L1 quick_actions to domain view navigation\n- [ ] Map L1 metrics to domain data sources\n- [ ] Enhance domain-sidebar.tsx with L1 filter rendering\n- [ ] Update workspace-shell.tsx to use L1 context\n- [ ] Add domain-specific widget renderers\n- [ ] Test role → domain → view navigation flow\n- [ ] Verify metric calculations for each domain\n\n## Files Modified\n\n1. `/apps/web/lib/workbench-projections.ts` — Add domain routing\n2. `/apps/web/components/workspace-shell.tsx` — Use L1 context\n3. `/apps/web/components/domains/domain-sidebar.tsx` — Render L1 nav\n4. `/apps/web/components/l1-module-content.tsx` — Domain-aware rendering\n5. `/apps/web/components/domains/spine-projection.ts` — Domain-scoped data fetching\n\n## Summary\n\nThe frontend has 5 domain workspaces (personal, account-success, revops, salesops, integratewise-apac) that will be populated by the L1 projection system. Each role automatically maps to a domain, which loads a tailored set of metrics, widgets, views, and quick actions. The spine-projection utilities ensure metrics are calculated contextually per domain.\n"}