Robo-Hub Architecture

This document describes the monorepo structure, deployment configuration, and how the 4 products are organized.

---

Products Overview

Product	Location	Domain	Status
FleetOS	Root / + /components/fleetos/	fleetos.us	LIVE
Robo-Dapp	/Robo-Dapp/	-	Dashboard (Next.js)
Products Page	/Robo-Dapp/app/(landing)/products/	products.t420.io	LIVE
Learn-App	/Learn-App/	learn.t420.io	LIVE (separate git repo)

---

Repository Structure

robo-hub/                      # Monorepo root
├── App.tsx                    # Master router (FleetOS + Robo-Hub views)
├── index.html                 # Vite entry point
├── fleetos.html               # FleetOS standalone entry
├── vite.config.ts             # Vite configuration
├── vercel.json                # Root deployment config (FleetOS)
│
├── components/
│   ├── fleetos/               # FleetOS UI components
│   │   ├── pages/             # FleetOS page components
│   │   ├── components/        # Reusable FleetOS components
│   │   ├── forms/             # Form components
│   │   ├── feedback/          # Feedback/notification components
│   │   └── theme.ts           # FleetOS theming
│   ├── robo-hub/              # Robo-Hub UI components
│   └── shared/                # Shared components
│
├── services/                  # Backend services (shared)
│   ├── AuthService.ts         # Authentication
│   ├── KPIService.ts          # KPI tracking
│   ├── NotificationService.ts # Notifications
│   ├── RelationshipService.ts # Fleet/Supplier relationships
│   ├── fleetos/               # FleetOS-specific services
│   └── shared/                # Shared service utilities
│
├── lib/                       # Shared utilities
├── database/                  # SQL schemas
├── types/                     # TypeScript type definitions
├── types.ts                   # Core type definitions
│
├── Robo-Dapp/                 # Next.js dashboard + Products page
│   ├── app/
│   │   ├── (landing)/
│   │   │   └── products/      # Products marketing page
│   │   └── dashboard/         # Fleet management dashboard
│   ├── vercel.json            # Products page domain rewrite
│   └── ...
│
└── Learn-App/                 # Education site (separate git history)
    └── ...

---

View Routing (App.tsx)

The root App.tsx (77K+ lines) serves as a master router handling multiple products via URL query parameters.

FleetOS Views (18 views)

Accessed via ?view=FLEETOS* or through fleetos.html:

View	Purpose
FLEETOS	Main landing page
FLEETOS_ALT	Alternative landing
FLEETOS_QUICK_ACCESS	Quick access portal
FLEETOS_LOGIN	Authentication
FLEETOS_AUTH_VERIFY	Auth verification
FLEETOS_SUPPLIER_ONBOARDING	Supplier onboarding flow
FLEETOS_FLEET_ONBOARDING	Fleet onboarding flow
FLEETOS_SUPPLIER_DASHBOARD	Supplier dashboard
FLEETOS_FLEET_DASHBOARD	Fleet dashboard
FLEETOS_SUPPLIER_ADD_MANUAL_REQUEST	Manual request entry
FLEETOS_FLEET_CREATE_REQUEST	Create service request
FLEETOS_INVITE_FLEET	Fleet invitation
FLEETOS_INVITE_SUPPLIER	Supplier invitation
FLEETOS_MOBILE_TIRES	Mobile tire service
FLEETOS_WHATSAPP_TEST	WhatsApp integration test
FLEETOS_PUBLIC_REQUEST	Public request form
FLEETOS_REQUEST_SUCCESS	Request confirmation
FLEETOS_REQUEST_TRACKING	Request tracking
FLEETOS_REQUEST_RESPONSE	Supplier response
FLEETOS_ANALYTICS	Analytics dashboard

Robo-Hub Views

Content and marketing views:

View	Purpose
LANDING	Main Robo-Hub landing
DASHBOARD	Role-based dashboard
SHEPHERD_LEARN	Shepherd learning content
SUPPLIER_LEARN	Supplier learning content
ZONE_DETAIL	Zone detail page
ZONE_DIRECTORY	Zone listing
CITY_OVERVIEW	City overview
SUPPLIER_PROFILE	Supplier profile page
SUPPLIER_DIRECTORY	Supplier listing
BLOG	Blog listing
BLOG_POST	Individual blog post
ZONE_COMPARISON	Zone comparison tool
SIMULATION	Simulation view
ABOUT	About page
LEGAL	Legal documents
WHITEPAPER	Whitepaper page
DEVELOPERS	Developer documentation

URL Pattern Examples

fleetos.us                     → FLEETOS (via fleetos.html default)
fleetos.us/?view=FLEETOS_LOGIN → FLEETOS_LOGIN
/?view=LANDING                 → Robo-Hub landing
/?view=DASHBOARD               → Role-based dashboard
/?view=SUPPLIER_PROFILE&slug=x → Supplier profile

---

Vercel Deployment Configuration

Project Mapping

Vercel Project	Domain	App	Root Directory
fleet-os	fleetos.us	FleetOS (Vite)	`` (repo root)
fleetos	products.t420.io	Robo-Dapp (Next.js)	Robo-Dapp
v0-june-2-ui	learn.t420.io	Learn-App	(separate repo)

Root vercel.json (FleetOS)

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Robo-Dapp/vercel.json (Products Page)

{
  "rewrites": [
    {
      "source": "/",
      "destination": "/products",
      "has": [
        { "type": "host", "value": "products.t420.io" }
      ]
    }
  ]
}

This rewrite works with the middleware below to ensure products.t420.io serves the Products page.

Robo-Dapp/middleware.ts (Products Domain Redirect)

The root page.tsx in Robo-Dapp redirects to /dashboard by default. To override this for products.t420.io, middleware intercepts requests and redirects to /products:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const hostname = request.headers.get('host') || ''

  // For products.t420.io, redirect root to /products
  if (hostname.includes('products.t420.io') && request.nextUrl.pathname === '/') {
    return NextResponse.redirect(new URL('/products', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/',
}

Why middleware? The vercel.json rewrite happens at the edge, but the Next.js page.tsx redirect (redirect("/dashboard")) executes after. Middleware runs before page components, allowing us to intercept and redirect based on hostname.

---

Vercel Project Settings

fleet-os Project (FleetOS)

Configure in Vercel Dashboard → fleet-os → Settings → General:

• Root Directory: `` (empty = repo root)

• Build Command: npm run build

• Output Directory: dist

• Framework Preset: Vite

• Install Command: npm install

Domain: fleetos.us

fleetos Project (Products Page / Dashboard)

Configure in Vercel Dashboard → fleetos → Settings → General:

• Root Directory: Robo-Dapp

• Framework Preset: Next.js (auto-detected)

Domain: products.t420.io

---

Why FleetOS is Not Extracted

FleetOS remains embedded in the root App.tsx for several reasons:

1. 18 views deeply integrated with shared state management

2. 20+ services in /services/ used by both FleetOS and Robo-Hub

3. fleetos.us is LIVE - extraction would risk breaking production

4. Authentication, navigation, and user context are shared

Future Extraction (If Needed)

Would require:

1. Create /FleetOS/ directory with own Vite config

2. Extract 18 views from App.tsx

3. Duplicate or abstract shared services

4. Separate deployment pipeline

5. Extensive testing before DNS switch

Recommendation: Only extract if there's a specific need. Current architecture works.

---

Critical Files

File	Purpose
vercel.json	Root Vite deployment config
Robo-Dapp/vercel.json	Products page domain rewrite
Robo-Dapp/middleware.ts	Products domain redirect (products.t420.io → /products)
App.tsx	Master router (FleetOS + Robo-Hub views)
fleetos.html	FleetOS standalone entry point
vite.config.ts	Vite build configuration

---

Deployment Verification Checklist

After configuring Vercel:

• FleetOS: fleet-os-theta.vercel.app → shows FleetOS landing

• FleetOS domain: fleetos.us → shows FleetOS landing

• Products page: fleetos-tan.vercel.app/products → shows Products page

• Products domain: products.t420.io → shows Products page

• Learn-App: learn.t420.io → still works (no changes needed)