{"slug":"business/NEXT_STEPS","title":"Next Steps: FRONTEND → Integration","section":"business","sectionLabel":"Business","status":"unclassified","type":"document","path":"business/NEXT_STEPS.mdx","bytes":5441,"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## 📌 You Are Here\n\nYou've successfully:\n1. ✅ Built Platform Bootstrap (PlatformProvider + context)\n2. ✅ Built Gateway SDK (5 essential methods)\n3. ✅ Imported FRONTEND reference (70+ production components)\n4. ✅ Documented 3-phase integration plan\n5. ✅ Created implementation templates\n\n**Current Status:** Ready to execute Phase 1 (Platform integration)\n\n---\n\n## 🎯 Immediate Next Steps (Choose One)\n\n### Option A: Execute Phase 1 Immediately\n**Goal:** Make Account Success domain aware of Platform\n\n**Tasks (1 day):**\n1. Copy `apps/web-frontend-reference/app/components/domains/account-success/shell.tsx`\n2. Create enhanced version in `packages/domain-shells/account-success-shell.tsx`\n3. Add hooks:\n   - `const { user, permissions } = usePlatform()`\n   - `const { getSignals } = useGateway()`\n4. Wire Intelligence Overlay to `getSignals()` calls\n5. Test in browser with mock Platform Provider\n\n**Success Criteria:**\n- [ ] Domain shell renders in browser\n- [ ] Sidebar shows current user role\n- [ ] Tab permissions filter based on role\n- [ ] Intelligence overlay shows mock signals\n\n---\n\n### Option B: Create Domain Shells Package First\n**Goal:** Build foundation for all 12 apps\n\n**Tasks (2 days):**\n1. Analyze all domain shells in FRONTEND\n2. Extract common patterns:\n   - Header with user info\n   - Tab navigation with permission filtering\n   - View switching logic\n   - Signal detection hooks\n3. Create base `EnhancedDomainShell` component\n4. Create example implementations (CS, RevOps, SalesOps)\n5. Document TypeScript interfaces\n\n**Success Criteria:**\n- [ ] Base shell component created\n- [ ] 3 example implementations work\n- [ ] All tests pass\n- [ ] Documentation is complete\n\n---\n\n### Option C: Create Shell App for Each Domain\n**Goal:** Pre-build 12 app scaffolds\n\n**Tasks (3-4 days):**\n1. For each domain (CS, RevOps, SalesOps, etc.):\n   - Create `/apps/workbench-{domain}/`\n   - Set up Vite + React + Tailwind\n   - Import domain shell template\n   - Wire to Platform Provider\n2. Create shared Vercel deployment config\n3. Test local builds for each app\n\n**Success Criteria:**\n- [ ] 4 workbench apps scaffold locally\n- [ ] Each connects to Platform Provider\n- [ ] Each has basic domain views\n- [ ] Ready for Vercel deployment\n\n---\n\n## 📚 Documents to Review Before Starting\n\n1. **FRONTEND_INTEGRATION_SUMMARY.md** — Overview of what you got\n2. **FRONTEND_ENHANCEMENT_GUIDE.md** — Detailed implementation guide\n3. **FRONTEND_STATUS_REPORT.md** — Current status and roadmap\n\n---\n\n## 🗂️ File Locations Reference\n\n**FRONTEND Components:**\n- Account Success shell: `apps/web-frontend-reference/app/components/domains/account-success/shell.tsx`\n- RevOps shell: `apps/web-frontend-reference/app/components/domains/revops/shell.tsx`\n- Intelligence overlay: `apps/web-frontend-reference/app/components/domains/account-success/intelligence-overlay.tsx`\n- RBAC manager: `apps/web-frontend-reference/app/components/admin/rbac-manager.tsx`\n\n**Your Code:**\n- Platform Provider: `packages/bootstrap/platform-provider.tsx`\n- Gateway SDK: `packages/gateway-sdk/client.ts`\n- Gateway API routes: `apps/web/app/api/gateway/*/route.ts`\n\n---\n\n## 🔗 Integration Points\n\n```typescript\n// 1. In domain shell, add Platform awareness\nconst { user, permissions, orgId } = usePlatform();\n\n// 2. Fetch real signals instead of mocks\nconst { getSignals } = useGateway();\nconst signals = await getSignals(orgId, user.id);\n\n// 3. Filter views by permission\nconst accessibleViews = views.filter(\n  (view) => !view.requiresPermission || permissions.includes(view.requiresPermission)\n);\n\n// 4. Render intelligence with real data\n<IntelligenceOverlay signals={signals} />\n```\n\n---\n\n## ⏱️ Estimated Timeline\n\n- **Phase 1 (Now → End of this week):** 3-5 days\n  - Extract Account Success shell\n  - Integrate with Platform\n  - Test end-to-end\n  \n- **Phase 2 (Next week):** 3-5 days\n  - Build `packages/domain-shells/`\n  - Create 3 example implementations\n  - Document interfaces\n  \n- **Phase 3 (Week after):** 5-7 days\n  - Scaffold all 12 apps\n  - Deploy to Vercel\n  - Validate multi-app orchestration\n\n**Total:** 2-3 weeks to production-ready 12-app portfolio\n\n---\n\n## ✅ Recommended Starting Point\n\n**Start with Option A** (Execute Phase 1 immediately):\n- Quickest validation that architecture works\n- Tests Platform Provider in real scenario\n- Produces working Account Success workbench\n- Foundation for Phase 2 extraction\n\n**Then proceed to Option B** (Extract patterns):\n- Ensures consistency across all 12 apps\n- Reduces code duplication\n- Makes future maintenance easier\n\n**Finally Option C** (Scale to all 12):\n- Apply patterns to every domain\n- Deploy multi-app portfolio\n- Celebrate 🎉\n\n---\n\n## 🚀 Ready to Start?\n\nPick one option above and let's go. Which would you prefer:\n\n1. **Phase 1 Now** — Build Account Success workbench with Platform (fast path)\n2. **Phase 2 First** — Extract domain shells package (foundation first)\n3. **Phase 3 Setup** — Scaffold all 12 apps (scale immediately)\n\nOr just tell me to start, and I'll begin with Phase 1.\n"}