{"slug":"documentation/FRONTEND_INTEGRATION_SUMMARY","title":"FRONTEND Integration & Enhancement Plan","section":"documentation","sectionLabel":"Documentation","status":"unclassified","type":"document","path":"documentation/FRONTEND_INTEGRATION_SUMMARY.mdx","bytes":4350,"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## What Was Imported\n\nA complete Vite React frontend reference implementation covering:\n\n**Domains Implemented:**\n- Account Success (CS) — 20+ views (accounts, contacts, dashboards, intelligence)\n- RevOps — Sales pipeline, forecasting, intelligence overlay\n- SalesOps — Leads, opportunities, workflow canvas\n- Personal — User dashboard, preferences\n- Admin — Tenant management, RBAC, approval workflows, audit logs\n\n**Core Components:**\n- Auth system (login, signup, forgot password, intelligence activation)\n- Command palette\n- Governance workbench\n- Document storage\n- Intelligence overlay with signal detection\n- Goal framework and alignment\n- Health scoring\n- Continuity shell\n- Multi-domain routing\n\n**Tech Stack:**\n- React Router v6 (client-side routing)\n- Tailwind CSS (styling)\n- Lucide icons\n- TypeScript\n- Vite bundler\n- shadcn/ui patterns\n\n---\n\n## How to Use\n\n### Reference Location\n```\n/vercel/share/v0-project/apps/web-frontend-reference/\n├── app/\n│   ├── components/        (70+ domain-specific components)\n│   ├── context/           (auth, app state)\n│   ├── hooks/             (custom hooks)\n│   ├── routes.tsx         (router config)\n│   └── App.tsx\n├── styles/\n├── imports/\n└── main.tsx\n```\n\n### Import Patterns to Leverage\n\n1. **Domain Shell Architecture** — Each domain (CS, RevOps, SalesOps) has a shell component that manages tabs/views\n2. **Intelligence Overlay** — Real-time signals and alerts system\n3. **Sidebar Navigation** — Domain switcher with persistent state\n4. **Command Palette** — Global keyboard shortcut access to features\n5. **RBAC** — Permission-based component rendering\n\n---\n\n## Enhancement Opportunities\n\n### Phase 1: Integrate with Current AI Workspace\n- Port Account Success shell to the AI Workspace\n- Use domain sidebar to switch between Twin Workbench contexts\n- Connect Intelligence Overlay to real Spine signals\n\n### Phase 2: Extract Shared Components\n- Create `packages/domain-shells/` — Reusable domain UI patterns\n- Extract goal framework, health scoring, signal detection\n- Package intelligence overlay as standalone component\n\n### Phase 3: Connect to Platform Services\n- Replace mock data with Gateway SDK calls\n- Integrate real Entity360 data\n- Wire approvals to Governance service\n- Sync RBAC with actual user roles\n\n### Phase 4: Multi-App Deployment\n- Use domain shells to scaffold Wise Docs, Wise Ops, Wise ERMS\n- Each app imports same shells, different routing roots\n- All apps share platform services via Gateway SDK\n\n---\n\n## Key Files to Study\n\n**Domain Architecture:**\n- `app/components/domains/account-success/shell.tsx` — Complete CS domain example\n- `app/components/domains/domain-sidebar.tsx` — Multi-domain navigation\n\n**Intelligence System:**\n- `app/components/domains/account-success/intelligence-overlay.tsx` — Signal detection UI\n- `app/components/domains/account-success/csm-intelligence-data.ts` — Mock data structure\n\n**Auth & State:**\n- `app/context/auth-context.tsx` — Session management\n- `app/components/auth/intelligence-activation.tsx` — Post-login intelligence setup\n\n**Routing:**\n- `app/routes.tsx` — Complete routing tree\n- `app/App.tsx` — Provider setup and router integration\n\n---\n\n## Integration Checklist\n\n- [ ] Extract domain shell components to shareable package\n- [ ] Port Account Success shell to AI Workspace\n- [ ] Wire Intelligence Overlay to real Spine signals\n- [ ] Connect RBAC to Stack Auth roles\n- [ ] Replace mock data with Gateway SDK\n- [ ] Create Wise Docs shell from template\n- [ ] Create Wise Ops shell from template\n- [ ] Create Wise ERMS shell from template\n- [ ] Deploy multi-app setup to Vercel\n\n---\n\n## Next Steps\n\n1. **Study the shells** — Understand how domain views are composed\n2. **Extract patterns** — Create reusable domain shell component\n3. **Port to AI Workspace** — Use as starting point for multi-domain awareness\n4. **Scale** — Apply to all 12 frontends in the portfolio\n\nThis is a solid foundation for building the \"many applications, one platform\" vision.\n"}