dashboard-client

Next.js dashboard SPA deployed on Cloudflare via OpenNext. The primary interface for CROW users to view interactions, patterns, products, analytics, chat with the AI, and manage their organization.

Worker name: crow-dashboard-client Domain (prod): app.crowai.dev Domain (dev): dev.app.crowai.dev

Technology

• Framework: Next.js (React) with App Router
• Deployment: OpenNext on Cloudflare Workers
• Styling: Tailwind CSS
• State: React Server Components + client components where needed
• Data fetching: TanStack Query (React Query) with prefetching on layout mount
• UI components: @b3-crow/ui-kit shared component library

Bindings

Binding	Type	Name
DB_MAIN	D1	OpenNext session/cache storage
R2_BUCKET	R2	Static assets and ISR cache
NEXT_INC_CACHE_KV	KV	Next.js Incremental Static Regeneration cache

Environment Variables

Variable	Example
ENVIRONMENT	dev
NEXT_PUBLIC_API_URL	https://dev.api.crowai.dev
NEXT_PUBLIC_API_GATEWAY_URL	https://dev.api.crowai.dev

Authentication

The dashboard reads the better-auth.session_token cookie set by the auth client on .crowai.dev. All API requests go through the gateway at api.crowai.dev, which validates the cookie and resolves the organization.

Navigation

The sidebar provides access to all dashboard pages:

Icon	Label	Path	Description
grid_view	Overview	/	Dashboard home
chat_bubble	Ask CROW	/ask-crow	Conversational AI interface
timeline	Analysis	--	Submenu parent
--	Interactions	/analysis/interactions	Interaction list with filters
--	Patterns	/analysis/patterns	Pattern analysis results
bar_chart	Analytics	/analytics	Usage analytics with charts
group	Team	/team	Team member management
shopping_bag	Products	/catalog	Product catalog management
integrations	Integrations	/integrations	Data source connections
credit_card	Billing	/billing	Subscription and invoice management

Settings is accessed via the avatar menu and redirects to /dashboard/settings.

Key Pages

Overview (/)

Dashboard home with:

• Date range selector in the header (Today, Yesterday, Last 7/14/30 days, This/Last month, This quarter)
• Metrics cards showing total Interactions and Patterns counts with period-over-period change percentages
• Patterns section with recent AI-generated pattern insights
• Latest Interactions feed showing the most recent events
• Data source status cards for Web, CCTV, and Social showing connection status, last event timestamp, and event counts

Ask CROW (/ask-crow)

Conversational AI chat interface connected to the BFF chat service:

• Landing view shown on first load with suggested prompts
• Chat view with message history, streaming responses, and markdown rendering
• Chat history in sidebar with clickable past conversations (via ChatHistoryContext)
• Session management -- creates new chat sessions, loads previous session messages
• Queries go through POST /api/v1/chat/sessions/{sessionId}/messages

Analysis: Interactions (/analysis/interactions)

Filterable, paginated list of customer interactions:

• Source filters -- filter by Web, CCTV, or Social channel
• Text search across interaction content
• Interaction table with source type, title, timestamp, and confidence level
• Detail panel (side panel) showing full interaction data, raw JSON, and metadata
• Paginated at 20 items per page

Analysis: Patterns (/analysis/patterns)

AI-generated pattern analysis results:

• Source filter by Web, CCTV, or Social
• Search across pattern content
• Pattern cards showing type, confidence, severity, and detected date
• Detail panel with description, insights, recommendations, and affected stores
• Paginated at 20 items per page

Analytics (/analytics)

Usage analytics dashboard with:

• Interaction summary metrics cards (total, web, CCTV, social) with trend indicators
• Daily summary charts and breakdowns
• Recent interactions table with confidence scores
• Sub-pages for detailed interaction analytics (/analytics/interactions) and pattern analytics (/analytics/patterns)

Team (/team)

Team management page for viewing and managing organization members.

Products (/catalog)

Product catalog management:

• Search across products with semantic search
• Product list showing title, description, images, price, category, and stock status
• Product detail panel with:
  • Product images and metadata
  • Re-scrape button to trigger a new crawl job for the product's source URL
  • Related interactions linked to the product
  • Related patterns associated with the product
• Products are fetched from GET /api/v1/products/organization/{orgId}

Integrations (/integrations)

Data source connection hub with 5 integration cards organized in two sections:

Data Source Integrations (3 cards):

Card	Description	Setup
Web SDK	Track customer interactions on your website	npm install + code snippet
CCTV CLI	Analyze in-store camera feeds with AI	pip install + CLI commands
Social Webhook	Receive social media interactions via webhooks	Webhook URL + cURL example

AI & Protocol Integrations (2 cards):

Card	Description	Setup
MCP Server	Connect AI assistants like Claude Desktop to CROW data	Claude Desktop JSON config snippet
Agent-to-Agent	Connect external AI agents via the A2A protocol	A2A endpoint URL + Python client example

Each card shows connection status (connected if interactions exist or API key is present, not_started otherwise). Clicking a card expands setup instructions with copyable code blocks. If no API key exists, a prompt directs users to Settings to create one.

Billing (/billing)

Stripe-integrated billing management:

• Plan cards showing available subscription tiers with features
• Current subscription details (status, period, enabled modules: web/cctv/social, pay-as-you-go toggle)
• Usage metrics per module with limits and percentages
• Payment method management (card brand, last 4, expiry)
• Invoice history table with status, amounts, dates, and links to hosted invoices and PDF downloads
• Plan upgrade/downgrade via Stripe Checkout redirect

Settings (/dashboard/settings)

Redirects from the in-app /settings path to /dashboard/settings (separate Next.js route group). Includes organization settings, API key management, and profile configuration.

Organization (/organization)

Organization profile and configuration page.

Data Prefetching

The dashboard layout prefetches critical data in two waves on mount:

• Wave 1 (immediate): Interaction summary, recent patterns, recent interactions, team members, billing plans
• Wave 2 (2s delay): Analysis interactions, analysis patterns, products, analytics data

This reduces perceived loading time when navigating between pages.

Dependencies

• Outbound: gateway API (all data operations), auth client (redirects to sign-in), Stripe (billing checkout)

Build and Deploy

cd dashboard-client
npx opennextjs-cloudflare build
npx wrangler deploy --env dev