{"slug":"developers/FRONTEND_ENHANCEMENT_GUIDE","title":"FRONTEND Enhancement Guide","section":"developers","sectionLabel":"Developers","status":"unclassified","type":"document","path":"developers/FRONTEND_ENHANCEMENT_GUIDE.mdx","bytes":8501,"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## Summary\n\nYou've imported a production-quality Vite React frontend with multi-domain support. This document shows how to enhance it and integrate it with the IntegrateWise platform bootstrap.\n\n---\n\n## What You Got\n\n**Reference Implementation** (70+ production components):\n- Account Success domain (20+ views for CS teams)\n- RevOps domain (forecasting, pipeline management)\n- SalesOps domain (leads, opportunities)\n- Personal domain (user dashboard)\n- Admin domain (tenant, RBAC, governance)\n- Auth system (login/signup flows)\n- Intelligence overlay (signal detection)\n- Command palette (global shortcuts)\n- Multi-domain navigation\n- Styling system (Tailwind + shadcn patterns)\n\n**Key Architectural Patterns:**\n1. Domain shells manage views and permissions\n2. Intelligence overlay for real-time signals\n3. RBAC enforces component visibility\n4. Mock data structure for reference\n5. React Router v6 for client-side navigation\n\n---\n\n## 3-Phase Enhancement Plan\n\n### Phase 1: Integrate with Platform Bootstrap\n\n**Goal:** Connect FRONTEND to the Platform Provider you built\n\n**Steps:**\n1. Copy domain shell patterns to `/packages/domain-shells/`\n2. Wrap domain shells with `usePlatform()` hook to read user/permissions\n3. Replace mock signals with `useGateway().getSignals()` calls\n4. Connect RBAC component to actual `permissions` from Platform context\n\n**Outcome:** FRONTEND domains become intelligence-aware and user-aware\n\n---\n\n### Phase 2: Extract Reusable Patterns\n\n**Goal:** Create shareable components for all 12 frontends\n\n**Create `packages/domain-shells/` exports:**\n```typescript\n// Base shell that every domain can extend\nexport { EnhancedDomainShell } from './domain-shell-template';\n\n// Common view components\nexport { IntelligenceOverlay } from './intelligence-overlay';\nexport { SignalDetector } from './signal-detector';\nexport { CommandPalette } from './command-palette';\n\n// Domain examples (reference)\nexport { AccountSuccessShell } from './examples/account-success';\nexport { RevOpsShell } from './examples/revops';\nexport { SalesOpsShell } from './examples/salesops';\n```\n\n**Benefit:** All apps share the same domain architecture\n\n---\n\n### Phase 3: Deploy Multi-App Portfolio\n\n**Goal:** Use domain shells to scaffold all 12 frontends\n\n**Structure:**\n```\napps/\n  ai-workspace/           (existing, enhanced)\n  workbench-cs/          (from account-success shell)\n  workbench-revops/      (from revops shell)\n  workbench-salesops/    (from salesops shell)\n  wise-docs/             (shell + doc storage)\n  wise-ops/              (shell + operations)\n  wise-erms/             (shell + entity management)\n  wise-branding/         (shell + branding/governance)\n  admin-dashboard/       (from admin shell)\n  ... (7 more apps)\n```\n\n**Each app:**\n- Imports domain shells from `packages/domain-shells/`\n- Connects to Platform via `PlatformProvider`\n- Calls Gateway SDK for data\n- Uses same design system\n\n---\n\n## Implementation Template\n\n### Create Enhanced Domain Shell Component\n\n```typescript\n// packages/domain-shells/domain-shell-template.tsx\n\n\nexport interface DomainView {\n  id: string;\n  label: string;\n  icon: React.ReactNode;\n  component: React.ComponentType;\n  requiresPermission?: string;\n}\n\n  domainId: string;\n  domainName: string;\n  views: DomainView[];\n  defaultView: string;\n}> = ({ domainId, domainName, views, defaultView }) => {\n  const [activeView, setActiveView] = useState(defaultView);\n  const { user, permissions } = usePlatform();\n  const { getSignals, getEntityData } = useGateway();\n\n  // Filter views based on permissions\n  const accessibleViews = views.filter(\n    (view) => !view.requiresPermission || permissions.includes(view.requiresPermission)\n  );\n\n  const currentView = accessibleViews.find((v) => v.id === activeView);\n  const CurrentComponent = currentView?.component;\n\n  return (\n    <div className=\"h-screen flex flex-col bg-background\">\n      \n      <div className=\"border-b border-border bg-card px-6 py-4\">\n        <div className=\"flex items-center justify-between\">\n          <h1 className=\"text-xl font-semibold\">{domainName}</h1>\n          <div className=\"text-xs text-muted-foreground\">{user?.role}</div>\n        </div>\n      </div>\n\n      \n      <div className=\"border-b border-border px-6\">\n        {accessibleViews.map((view) => (\n          <button\n            key={view.id}\n            onClick={() => setActiveView(view.id)}\n            className={activeView === view.id ? 'active' : ''}\n          >\n            {view.label}\n          </button>\n        ))}\n      </div>\n\n      \n      <div className=\"flex-1 overflow-auto\">\n        {CurrentComponent && <CurrentComponent />}\n      </div>\n    </div>\n  );\n};\n```\n\n### Example: Account Success Workbench\n\n```typescript\n// apps/workbench-cs/App.tsx\n\n\n  return (\n    <EnhancedDomainShell\n      domainId=\"account-success\"\n      domainName=\"Customer Success\"\n      views={[\n        { id: 'accounts', label: 'Accounts', component: AccountsView },\n        { id: 'contacts', label: 'Contacts', component: ContactsView },\n        { id: 'health', label: 'Health Scores', component: HealthScoresView },\n        { id: 'intelligence', label: 'Intelligence', component: IntelligenceOverlay },\n      ]}\n      defaultView=\"accounts\"\n    />\n  );\n}\n```\n\n---\n\n## Key Integration Points\n\n### 1. Platform Bootstrap\nConnect domain shells to user/permission context:\n```typescript\nconst { user, permissions, orgId, roles } = usePlatform();\n```\n\n### 2. Gateway SDK\nFetch real data instead of mocks:\n```typescript\nconst { getSignals, getEntityData, getConnectedApps } = useGateway();\nconst signals = await getSignals(orgId, user.id);\n```\n\n### 3. RBAC\nShow/hide views based on permissions:\n```typescript\nconst accessibleViews = views.filter(\n  (view) => !view.requiresPermission || permissions.includes(view.requiresPermission)\n);\n```\n\n### 4. Intelligence\nWire real Spine data to overlay:\n```typescript\nconst signalsData = await getSignals(entityId);\n<IntelligenceOverlay signals={signalsData} />\n```\n\n---\n\n## Files to Reference\n\n**Original FRONTEND locations:**\n- `/vercel/share/v0-project/apps/web-frontend-reference/app/components/domains/`\n- Domain shells: `account-success/shell.tsx`, `revops/shell.tsx`, `salesops/shell.tsx`\n- Intelligence: `account-success/intelligence-overlay.tsx`\n- Auth: `auth/login-page.tsx`, `auth/signup-page.tsx`\n\n**Extract and enhance:**\n- Copy domain shells → `packages/domain-shells/examples/`\n- Extract common patterns → `packages/domain-shells/`\n- Create typed hooks → `packages/domain-shells/hooks/`\n\n---\n\n## Deployment Strategy\n\n### Step 1: Create Domain Shells Package\n- Extract reusable patterns\n- Add Platform Provider integration\n- Export TypeScript interfaces\n- Document examples\n\n### Step 2: Scaffold All 12 Apps\n- Each app: `import { EnhancedDomainShell } from '@integratewise/domain-shells'`\n- Each app: wrap with `<PlatformProvider>`\n- Each app: connect to Gateway SDK\n\n### Step 3: Deploy to Vercel\n- One app per Vercel project\n- Share `packages/*` via pnpm workspaces\n- All consume same platform services\n\n---\n\n## Success Criteria\n\n- [ ] Domain shells render with Platform context\n- [ ] RBAC filters views correctly\n- [ ] Intelligence overlay shows real signals\n- [ ] Gateway SDK calls replace mock data\n- [ ] All 12 apps deploy and authenticate\n- [ ] Multi-app navigation works seamlessly\n\n---\n\n## Next: Execute Phase 1\n\n1. Extract Account Success shell from FRONTEND\n2. Integrate with `usePlatform()` hook\n3. Wire Intelligence Overlay to Gateway signals\n4. Test in browser with mock Platform Provider\n\nThis turns the production-quality FRONTEND into a scalable, multi-app platform.\n"}