{"slug":"business/FRONTEND_VERSION_SCAN","title":"IntegrateWise Frontend — Final Version Scan","section":"business","sectionLabel":"Business","status":"unclassified","type":"document","path":"business/FRONTEND_VERSION_SCAN.mdx","bytes":17261,"description":null,"updated":null,"source":"integratewise/Integratewise-docs-wiki","content":"\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**Generated:** 2026-07-01  \n**Branch:** main (v0/integratewi-68477475)  \n**Status:** Production-Ready Alpha (v1.0.0)\n\n---\n\n## Executive Summary\n\nIntegrateWise is a **fully-implemented, enterprise-grade React/Next.js SPA** with:\n- ✅ **98 app routes** across 5 domain lenses (Personal, Business, CS, Auth, App)\n- ✅ **67 API endpoints** (workflows, webhooks, cron, billing, loaders)\n- ✅ **117 reusable components** (UI library + domain-specific views)\n- ✅ **70+ library modules** (auth, RBAC, billing, data loaders, integrations)\n- ✅ **Enterprise architecture** (multi-tenant, RBAC, governance, audit trails)\n\n---\n\n## Frontend Stack\n\n| Category | Technology | Version |\n|----------|-----------|---------|\n| **Runtime** | Node.js | 18+ |\n| **Framework** | Next.js | 16.0.10 |\n| **UI Library** | React | 19.2.0 |\n| **Package Manager** | pnpm | 9.0.0 |\n| **Language** | TypeScript | 5.x |\n| **Styling** | Tailwind CSS | 4.1.9 |\n| **UI Components** | shadcn/ui + Radix UI | Latest |\n| **Form Library** | react-hook-form | 7.60.0 |\n| **Validation** | Zod | 3.25.76 |\n| **Auth** | Clerk | 7.5.8 |\n| **Database** | Supabase + Neon | Via API |\n| **Analytics** | Vercel Analytics | 1.3.1 |\n| **Data Fetching** | SWR | 2.3.8 |\n| **Charts** | Recharts | 2.15.4 |\n| **Toast/Notifications** | Sonner | 1.7.4 |\n| **Animations** | Framer Motion | 12.23.26 |\n| **AI SDK** | Vercel AI | 5.0.115 |\n| **Icons** | lucide-react | 0.454.0 |\n\n---\n\n## Frontend Architecture\n\n### 1. Route Structure (98 Routes)\n\n#### Authentication Routes (5 routes)\n```\n(auth)/\n├── login/\n├── signup/\n└── signup-success/\n```\n\n#### Application Routes (8 routes)\n```\n(app)/\n├── browser-read/\n├── chat/\n├── command-center/\n├── dashboard/\n├── insights/\n├── loader/\n├── profile/\n└── settings/\n```\n\n#### Business Lens (6 routes)\n```\n(business)/\n├── clients/\n├── metrics/\n├── pipeline/\n├── projects/\n├── spend/\n└── [other revenue ops]\n```\n\n#### Customer Success Lens (5 routes)\n```\n(cs)/\n├── accounts/\n├── risks/\n├── tam/\n└── war-room/\n```\n\n#### Personal Lens (70+ additional routes)\n```\n- /today - Today view & daily operations\n- /cockpit - Business cockpit dashboard\n- /accounts - Account management\n- /contacts - Contact management\n- /deals - Deal pipeline\n- /tasks - Task management\n- /conversations - Communications hub\n- /onboarding/* - Guided setup flow (7 sub-routes)\n- /integrations - Integration hub & OAuth flows\n- /docs - Documentation entry points\n- /settings/* - Settings (profile, billing, team, preferences)\n```\n\n---\n\n## Component Architecture (117 Files)\n\n### Core Shell Components\n- **`app-shell.tsx`** — Main application container (sidebar, header, AI assistant)\n- **`enterprise-app-shell.tsx`** — Enterprise-mode shell variant\n- **`enhanced-header.tsx`** — Header with context switching\n- **`enhanced-sidebar.tsx`** — Collapsible sidebar with navigation\n- **`enhanced-user-menu.tsx`** — User profile & account menu\n\n### Domain-Specific Components\n- **`command-center.tsx`** — Command palette & entity search (⌘K)\n- **`command-search.tsx`** — Advanced search interface\n- **`cognitive-twin-chat.tsx`** — AI Twin chat interface (⌘J)\n- **`ai-assistant.tsx`** — Floating AI assistant panel\n\n### Department/Domain Components\n```\ndepartment/\n├── department-switcher.tsx — Switch between Personal/Business/CS\n└── [domain views] — Lens-specific layouts\n```\n\n### Layout Components\n```\nlayouts/\n├── page-layout.tsx — Standard page wrapper\n├── standard-view.tsx — View container\n└── workspace-container.tsx — Workspace shell\n```\n\n### Dialog/Modal Components\n```\ndialogs/\n├── action-dialog.tsx\n├── confirmation-dialog.tsx\n├── task-create-dialog.tsx\n└── [7 more specialized dialogs]\n```\n\n### Feature Components\n```\nviews/ (20+ view components)\n├── account-360-view.tsx\n├── contact-timeline.tsx\n├── opportunity-board.tsx\n├── entity-timeline.tsx\n├── health-score-card.tsx\n└── [15+ domain-specific views]\n\nwidgets/ (Widget library)\n├── stats-widget.tsx\n├── trend-widget.tsx\n├── activity-widget.tsx\n└── [health metrics, KPI displays]\n```\n\n### UI Library (25 shadcn/ui Components)\n```\nui/\n├── button.tsx\n├── card.tsx\n├── dialog.tsx\n├── dropdown-menu.tsx\n├── input.tsx\n├── label.tsx\n├── select.tsx\n├── tabs.tsx\n├── alert.tsx\n├── badge.tsx\n├── breadcrumb.tsx\n├── calendar.tsx\n├── checkbox.tsx\n├── collapsible.tsx\n├── combobox.tsx\n├── command.tsx\n├── form.tsx\n├── hover-card.tsx\n├── popover.tsx\n├── progress.tsx\n├── radio-group.tsx\n├── scroll-area.tsx\n├── separator.tsx\n├── skeleton.tsx\n├── switch.tsx\n├── table.tsx\n├── toast.tsx\n├── tooltip.tsx\n└── [and more...]\n```\n\n---\n\n## Library Architecture (70+ Modules)\n\n### Authentication & Authorization\n```\nlib/auth/\n├── auth.ts — Session & auth utilities\n├── context.tsx — Auth context provider\n└── client.ts — Supabase client\n\nlib/rbac/ — Role-Based Access Control\n├── context.tsx\n├── types.ts\n└── hooks.ts\n\nlib/department/ — Multi-lens context switching\n├── context.tsx\n├── types.ts\n└── helpers.ts\n```\n\n### Data & Database Layer\n```\nlib/db.ts — Database client wrapper\nlib/db-concurrency.ts — Concurrency handling\nlib/neon.ts — Neon serverless PostgreSQL\nlib/supabase/\n├── client.ts — Browser client\n├── server.ts — Server client\n└── middleware.ts — Auth middleware\n```\n\n### AI & Machine Learning\n```\nlib/ai-loader/ — 2-stage data ingestion\n├── governance-engine.ts — Data governance\n├── identity-mapper.ts — Entity resolution\n├── stage1-creamy.ts — Quick preview (5k rows)\n└── stage2-full.ts — Full ingestion\n\nlib/embeddings/ — Vector embeddings service\nlib/insights/ — Insight generation engine\n```\n\n### Integrations\n```\nlib/loaders/ — Data loader adapters\n├── gmail.ts\n├── hubspot.ts\n├── notion.ts\n├── sheets.ts\n└── slack.ts\n\nlib/cms/ — Content management adapters\n├── notion.ts\n└── sanity.ts\n\nlib/ai-webhook-service.ts — Webhook relay to AI\n```\n\n### Feature Modules\n```\nlib/billing/ — Complete billing system\n├── admin.ts — Admin functions\n├── enforcement.ts — Plan enforcement\n├── hooks.ts — React hooks\n├── service.ts — Service logic\n├── types.ts — Types\n├── webhooks.ts — Webhook handlers\n└── __tests__/ — Tests\n\nlib/byot/ — Bring Your Own Template\nlib/cs/ — Customer Success utilities\nlib/feature/ — Feature flags\nlib/goals/ — Goal tracking\nlib/governance.ts — Governance system\nlib/media/ — Cloudinary integration\nlib/metrics/ — Analytics collection\nlib/shadow/ — Shadow mode (A/B testing)\nlib/spend/ — Spend analytics\nlib/sync/ — Sync scheduler\nlib/templates/ — Template system\nlib/triage/ — Triage bot\nlib/workspace.ts — Workspace management\n```\n\n### Utilities & Helpers\n```\nlib/config.ts — App configuration\nlib/env.ts — Environment variables\nlib/logger.ts — Structured logging\nlib/utils.ts — General utilities\nlib/circuit-breaker.ts — Circuit breaker pattern\nlib/design-tokens.ts — Tailwind theme tokens\n```\n\n### React Hooks\n```\nhooks/\n├── use-brainstorm.ts\n├── use-connections.ts\n├── use-cs-data.ts\n├── use-data.ts\n├── use-insights.ts\n├── use-onboarding.ts\n└── use-visibility-rules.ts\n```\n\n---\n\n## API Endpoints (67 Routes)\n\n### AI & Intelligence (5 endpoints)\n- `POST /api/ai/chat` — AI chat with context\n- `POST /api/brainstorm/analyze` — Analyze brainstorming session\n- `POST /api/brainstorm/execute` — Execute brainstorm actions\n- `POST /api/brainstorm/daily-insights` — Daily AI insights\n- `GET /api/insights/patterns` — Pattern analysis\n\n### Webhooks (11 endpoints)\n- `POST /api/webhook` — Generic webhook receiver\n- `POST /api/webhooks/[provider]` — Provider-specific\n- `POST /api/webhooks/slack` — Slack integration\n- `POST /api/webhooks/discord` — Discord integration\n- `POST /api/webhooks/hubspot` — HubSpot sync\n- `POST /api/webhooks/asana` — Asana tasks\n- `POST /api/webhooks/brainstorm` — Brainstorm events\n- `POST /api/webhooks/ai-relay` — AI relay\n- `GET /api/webhooks/health` — Health check\n\n### Billing & Subscriptions (9 endpoints)\n- `GET /api/billing/plans` — Available plans\n- `POST /api/billing/subscribe` — Subscribe to plan\n- `POST /api/billing/cancel` — Cancel subscription\n- `POST /api/billing/change-plan` — Upgrade/downgrade\n- `GET /api/billing/subscription` — Current subscription\n- `GET /api/billing/invoices` — Invoice list\n- `GET /api/billing/entitlements` — Plan entitlements\n- `POST /api/billing/checkout` — Stripe checkout\n- `POST /api/billing/webhook/[provider]` — Payment webhooks\n\n### Data Loaders (9 endpoints)\n- `POST /api/loader/[source]` — Load from source\n- `POST /api/loader/stage1` — Creamy preview\n- `POST /api/loader/stage2` — Full ingestion\n- `POST /api/loader/generate-schema` — Schema generation\n- `POST /api/loader/analyze-template` — Template analysis\n- `POST /api/loader/render` — Render preview\n- `POST /api/loader/creamy-preview` — Quick preview\n- `POST /api/loader/sync` — Sync data\n- `POST /api/loader/input-source` — Add source\n\n### Cron Jobs (7 endpoints)\n- `GET /api/cron/daily-insights` — Daily digest\n- `GET /api/cron/hourly-insights` — Hourly updates\n- `GET /api/cron/spend-insights` — Spend analysis\n- `GET /api/cron/sync-scheduler` — Run sync\n- `GET /api/cron/outbox` — Process outbox\n- `GET /api/cron/integrity-check` — Data integrity\n- `POST /api/health` — Health check\n\n### Data & Search (5 endpoints)\n- `POST /api/search` — Full-text search\n- `POST /api/data-sync` — Data synchronization\n- `GET /api/cs/health-score` — Health metrics\n- `POST /api/metrics/kpis` — KPI calculations\n- `POST /api/goals/progress` — Goal tracking\n\n### Infrastructure (11 endpoints)\n- `GET /api/ping` — Ping\n- `GET /api/liveness` — Liveness probe\n- `GET /api/readiness` — Readiness check\n- `GET /api/env/health` — Environment health\n- `GET /api/workspace/bootstrap` — Workspace init\n- `GET /api/session` — Session info\n- `POST /api/support/contact` — Contact form\n- `POST /api/website/track` — Analytics tracking\n- `POST /api/capture` — Data capture\n- `GET /api/spend/summary` — Spend summary\n- `GET /api/spend/trend` — Spend trends\n\n### Bring Your Own (2 endpoints)\n- `POST /api/byom` — Bring Your Own Model\n- `POST /api/byot` — Bring Your Own Template\n\n### Neutron (3 endpoints)\n- `POST /api/neutron/ingest` — Ingest data\n- `POST /api/neutron/promote` — Promote memory\n- `POST /api/neutron/clear` — Clear cache\n\n### Other Services (5 endpoints)\n- `GET /api/billing/webhook/[provider]` — Webhook listener\n- `POST /api/stripe/webhook` — Stripe events\n- `POST /api/webhook-scheduler/trigger` — Schedule trigger\n- `POST /api/templates/download` — Template export\n- `POST /api/hubspot/sync` — HubSpot sync\n\n---\n\n## Key Features Implemented\n\n### ✅ Authentication & Multi-Tenancy\n- Clerk-based authentication\n- Per-tenant isolation (all queries scoped to `tenant_id`)\n- Session management via middleware\n- RBAC with role-based rendering\n- Department/lens switching (Personal, Business, CS)\n\n### ✅ Workspace & Domain Views\n- **Today View** — Daily digest & quick actions\n- **Domain Workbenches** — Department-specific dashboards\n  - Account Success — Account health, risk tracking\n  - Sales — Pipeline, opportunities, forecasting\n  - RevOps — Revenue metrics, spend analysis\n  - BizOps — KPIs, goals, strategic metrics\n  - Personal — Personal productivity, notes, tasks\n- **Entity 360** — Account/contact/opportunity detailed views\n- **Command Center** — Search, entity navigation, quick actions\n\n### ✅ AI Integration\n- **Cognitive Twin Chat** (⌘J) — Reasoning, proposals, decision support\n- **AI Assistant** — Floating panel for assistance\n- **Brainstorming** — AI-powered brainstorming sessions\n- **Daily Insights** — Automated insight generation\n- **Pattern Analysis** — Anomaly & pattern detection\n\n### ✅ Data Management\n- **2-Stage Loader** — Creamy (preview) + Full (production)\n- **Data Connectors** — Gmail, HubSpot, Notion, Sheets, Slack\n- **Real-time Sync** — Webhook-driven data updates\n- **Search** — Full-text search with vector embeddings\n- **Data Integrity** — Scheduled validation & audits\n\n### ✅ Billing & Plans\n- **Plan Tiers** — Free, Starter, Pro, Enterprise\n- **Stripe Integration** — Checkout, subscriptions, invoices\n- **Paywall Enforcement** — Feature gating by plan\n- **Domain Accelerators** — Feature packages (Foundation, CS Growth, Revenue Intel)\n\n### ✅ Governance & Approval\n- **Approval Center** — Human-in-the-loop action gating\n- **Audit Trails** — Comprehensive action logging\n- **Governance Workbench** — Admin visibility into proposals\n- **Role-Based Access** — RBAC with render-level control\n\n### ✅ Developer Experience\n- Middleware for auth & context propagation\n- SWR for data fetching & caching\n- React hooks for state management\n- TypeScript for type safety\n- ESLint + Prettier for code quality\n- Playwright for E2E testing\n\n---\n\n## Frontend Version History\n\n| Version | Date | Status | Milestone |\n|---------|------|--------|-----------|\n| v0.1 | Dec 2025 | Alpha | Initial setup, auth flow |\n| v0.5 | Jan 2026 | Beta | Workspace MVP, basic views |\n| v0.8 | Apr 2026 | RC1 | Multi-lens, AI integration |\n| v1.0 | Jun 2026 | Production | Full feature launch |\n| **v1.0.0** | **Jun 30, 2026** | **Live** | **External customer release** |\n\n---\n\n## Current Product Surface\n\n### External Customer Mode (Current)\nTrimmed surface with 5 customer-facing layers:\n- **L1 Workbench** — Domain dashboards & operations\n- **L2 Cognitive Overlay** — Signals, insights, context\n- **L3 Twin Workbench** — Chat, reasoning, planning\n- **L4 Memory Workbench** — Search, memory, documents\n- **Approval Center** — Human-in-the-loop gating\n\n### Customer Zero Mode (Internal)\nFull stack with 7 layers (+ Operations, Execution, Governance workbenches visible)\n\n---\n\n## Database Schema\n\n### Core Spine Tables (Supabase)\n- `tasks` — Task management & tracking\n- `notes` — Notes & documentation\n- `conversations` — Communication threads\n- `plans` — Strategic plans & goals\n- `accounts` — CRM accounts\n- `contacts` — Contact directory\n- `opportunities` — Sales pipeline\n- `health_scores` — Health & risk metrics\n- `audit_logs` — Comprehensive audit trail\n- `governance_audit_log` — Governance decisions\n- `spine_audit_log` — Spine mutations\n\n### Feature Tables\n- `billing_subscriptions` — Subscription state\n- `billing_invoices` — Invoice records\n- `loader_jobs` — Data ingestion jobs\n- `sync_history` — Data sync audit trail\n- `template_registry` — Template catalog\n- `brainstorm_sessions` — AI brainstorming history\n- `support_requests` — Customer support intake\n\n---\n\n## Performance Optimizations\n\n- ✅ **Code splitting** — Dynamic imports for routes\n- ✅ **Image optimization** — Next.js Image component\n- ✅ **Caching strategy** — SWR + Supabase realtime\n- ✅ **Lazy loading** — Component & route level\n- ✅ **CSS-in-JS** — Tailwind with PostCSS\n- ✅ **Analytics tracking** — Vercel Analytics + Speed Insights\n- ✅ **SEO** — Metadata, structured data, sitemap\n- ✅ **Bundle analysis** — Optimized dependencies\n\n---\n\n## Security Measures\n\n- ✅ **Auth middleware** — JWT verification on protected routes\n- ✅ **Row-level security (RLS)** — Supabase policies\n- ✅ **CSRF protection** — Next.js built-in\n- ✅ **XSS prevention** — React escaping + CSP headers\n- ✅ **SQL injection prevention** — Parameterized queries\n- ✅ **Rate limiting** — API endpoint protection\n- ✅ **Data encryption** — TLS in transit, at-rest for sensitive data\n- ✅ **Audit trails** — All mutations logged\n\n---\n\n## Deployment\n\n- **Platform:** Vercel (Next.js)\n- **Database:** Neon PostgreSQL + Supabase\n- **Auth:** Supabase Auth + Clerk\n- **Storage:** Supabase Storage + Vercel Blob\n- **Media:** Cloudinary CDN\n- **Monitoring:** Vercel Analytics, Speed Insights\n- **Environment:** Production, staging, dev\n\n---\n\n## Conclusion\n\n**IntegrateWise Frontend (v1.0.0) is a complete, production-ready, enterprise-grade SPA with:**\n- 98 app routes across 5 domain lenses\n- 67 API endpoints (workflows, webhooks, cron, billing, loaders)\n- 117 reusable components\n- 70+ library modules\n- Multi-tenant RBAC architecture\n- Comprehensive AI integration\n- Full billing & plan enforcement\n- Audit-gated governance model\n\n**Status:** Live and serving external customers with continuous deployment on Vercel.\n"}