Skip to main content

Dashboard Features

Overview​

The CROW Dashboard provides a comprehensive interface for managing organizations, analyzing data, and interacting with the platform. The dashboard is designed to serve multiple roles within an organization, from executives viewing high-level analytics to developers managing integrations.

Dashboard Pages​

Overview​

The Overview page is a unified view combining key metrics and insights from all other dashboard sections.

Features (Working):

  • Organization-level analytics summary via MetricsCard components (Total, Web, CCTV, Social interactions)
  • Component status indicators (Web, Social, CCTV) with StatusIndicator
  • Quick action cards linking to Interactions, Ask CROW, Integrations, and Settings
  • Recent interactions list with source icons and summaries
  • Recent patterns list with confidence levels and timestamps
  • Real-time data fetched from interaction summary and pattern APIs

Purpose: Provides a single pane of glass for quick platform status assessment without navigating through multiple pages.

Ask CROW AI​

A conversational AI interface for querying and analyzing interaction data using natural language.

Features (Working):

  • Multi-turn Conversations: Full conversation memory within a session using bff-chat-service context messages (last 10 messages)
  • Landing View: Initial view with search input and suggested prompts
  • Chat View: Scrollable message thread with user and assistant bubbles
  • Markdown Rendering: Assistant responses rendered as HTML from markdown (headings, bold, lists, code blocks, tables)
  • Copy Message Buttons: Each assistant message has a hover-reveal copy button with success feedback
  • Thinking Indicator: GeneratingState component displays "CROW is thinking" with avatar while processing
  • Chat History Sidebar: Clickable conversation list in the sidebar, synced via ChatHistoryContext. Sessions fetched from bff-chat-service per organization. Clicking a session loads its messages.
  • Session Management: Automatic session creation on first message, title derived from first user message
  • Sources/References: Agent loop returns footnoted source references (products, interactions, patterns, org context) appended to responses

AI Backend: Uses Cloudflare Workers AI with @cf/meta/llama-3.3-70b-instruct-fp8-fast model, routed through Cloudflare AI Gateway (crow-ai-gateway). The agent uses a tool-calling loop (up to 5 iterations) with 5 tools: search_products, search_interactions, search_patterns, search_org_context, get_interaction_summary.

-> Learn more about Chat System

Analytics​

The Analytics page provides channel performance and interaction insights across all sources.

Features (Working):

  • Channel Breakdown: MetricsCard grid showing Total, Web, CCTV, and Social interaction counts with percentage share per channel
  • Interaction Timeline: Last 7 days visualization with per-channel bar charts (Web blue, CCTV red, Social purple) and daily totals
  • Top Insights: Top 5 highest-confidence interactions across all channels, ranked with source icons, confidence badges (high/medium/low), and links to full interaction view
  • Source Performance: Per-channel event counts with percentage share bars and trend indicators (up/flat)

Analysis​

Interactions Page​

Displays raw interaction records from all data sources.

Features (Working):

  • View individual interaction records in a table layout
  • Source Filters: Filter by source type (All, Web, CCTV, Social) via InteractionsFilterBar
  • Semantic Search: Full-text search that uses the vectorize-backed search endpoint
  • Interaction Detail Panel: Side panel showing channel, confidence level (high/medium/low), timestamp, summary description, and raw source data fields
  • Debounced search input (300ms delay)
  • Total interaction count displayed in page header
  • Pagination support (20 items per page)

Use Cases:

  • Debugging integration issues
  • Auditing specific user sessions
  • Analyzing individual customer journeys
  • Quality assurance of data collection

Patterns Page​

Displays discovered patterns across interactions.

Features (Working):

  • View pattern records as cards in a responsive grid
  • Source Filters: Filter by source (All, Web, CCTV, Social) via PatternsFilterBar
  • Time Period Options: 1 Hour, Today, Yesterday, Last 24h, Last 7d, Last 30d
  • Search: Client-side text search across pattern titles and descriptions
  • Pattern Detail Panels: Side panel showing description, recommendations list, and extracted metrics from raw data
  • CSV Export: Download filtered patterns as CSV
  • Pattern confidence scores (high/medium/low badges)
  • Relative timestamps (e.g., "5 min ago", "2 days ago")

Use Cases:

  • Identifying customer behavior trends
  • Strategic planning with long-term patterns
  • Product optimization based on usage patterns
  • Marketing insights from social patterns

Products (Catalog)​

Comprehensive product catalog management.

Features (Working):

  • Product Grid: Responsive grid (2-6 columns) with product images, titles, prices, categories
  • Semantic Search: Search products using vectorize-backed semantic search endpoint
  • Product Detail Panel: Side panel showing full image, description, price, stock status
  • Re-scrape Button: Working "Re-scrape" button in the product detail panel. Creates a crawler job via POST /api/v1/crawler-jobs with the product's source URL. Shows loading state ("Re-scraping...") and toast notifications on success/failure. Invalidates product cache after 5 seconds.
  • AI Analysis Section: Displays AI-generated descriptions for the selected product (fetched from /api/v1/products/:id/ai-descriptions)
  • Related Interactions: Shows interactions linked to the selected product with source type and timestamp
  • Related Patterns: Shows patterns linked to the selected product with type and confidence
  • Pagination: Previous/Next buttons when more than 24 products exist

Data Sources:

  • Initial CSV upload during signup
  • Web scraping during signup
  • Re-scrape via dashboard (working)

Integrations Page​

Configure data source connections and AI protocol integrations.

Features (Working):

  • 5 Integration Cards organized in two sections:
    • Data Source Integrations (3 cards):
      • Web SDK: Shows connection status based on web interaction count. Expandable setup with npm install command and TypeScript initialization code snippet.
      • CCTV CLI: Shows connection status based on CCTV interaction count. Expandable setup with pip install, configure, and stream commands.
      • Social Webhook: Shows connection status based on social interaction count. Expandable setup with webhook URL, JSON payload example, and cURL command.
    • AI & Protocol Integrations (2 cards):
      • MCP Server: Shows Claude Desktop JSON configuration with https://mcp.crowai.dev/mcp endpoint. Lists all 6 available tools: crow_search_products, crow_search_interactions, crow_get_interaction_summary, crow_search_patterns, crow_get_product_ai_descriptions, crow_search_org_context.
      • Agent-to-Agent (A2A): Shows endpoint URL (https://a2a.crowai.dev/a2a/jsonrpc), Agent Card discovery URL (https://a2a.crowai.dev/.well-known/agent-card.json), and Python client example code.
  • All cards use ConnectionOption component with status indicators (connected/not_started)
  • Each card expands to show setup instructions with copyable CodeBlock snippets
  • API key placeholder auto-populated from user's first API key
  • Warning panel displayed when no API key exists, linking to Settings

Billing Page​

Full subscription and billing management with Stripe integration.

Features (Working):

  • Current Plan Panel: Shows billing period, status badge (active/cancelled/past_due), next renewal date, active modules (Web/CCTV/Social), and pay-as-you-go status
  • Manage Subscription Button: Opens Stripe Customer Portal via POST /api/v1/billing/portal-session
  • Cancel Subscription Button: Opens confirmation dialog with period-end date; cancels via POST /api/v1/billing/subscriptions/:orgId/cancel
  • Resume Subscription Button: Appears when subscription is cancelled; resumes via POST /api/v1/billing/subscriptions/:orgId/resume
  • Usage Section: Per-module progress bars (color-coded: green < 70%, yellow 70-90%, red > 90%) with current/limit counts and percentage
  • Invoice History Table: Lists invoices with number, date, amount, status badge, and download/view links
  • Payment Method Panel: Shows card brand, last 4 digits, expiry. Update button opens Stripe portal.
  • Available Plans: 3 plan cards (Web, CCTV, Social at $60/mo each) with feature lists (1M interactions/mo, 1M patterns/mo, plus module-specific features). Upgrade button triggers Stripe Checkout via billing builder + checkout session flow.
  • Interaction Summary Cards: Shown when no subscription exists, displaying total/web/cctv/social counts

Team​

Manage organization team members and their permissions.

Features (Working):

  • Invite Members: Send email invitations to new team members
  • View Members: List all organization members
  • Edit Permissions: Modify user permission levels
  • Remove Members: Remove users from organization
  • Permission Templates: Quick apply common permission sets
  • Invitation Status: Track pending invitations

Permission Management:

  • Toggle feature access on/off
  • Set chat duration constraints
  • Configure component access
  • Assign permission levels

Validation:

  • Check if invitee already has an organization (1:1 constraint)
  • Verify email validity
  • Prevent duplicate invitations

-> Learn more about User Permission Levels

Notifications​

View and manage all user notifications.

Features (Working):

  • Notification history (all past notifications)
  • Unread notification count
  • Mark as read/unread
  • Filter by type (system, alerts, updates, invitations)
  • Clear notification history

Notification Types:

  • System updates and maintenance
  • Usage alerts (approaching limits)
  • Processing completion notifications
  • Team invitation notifications
  • Integration status changes
  • Error alerts

Settings​

A collection of configuration and management features organized into tabbed sections (Profile, API Keys, Billing, Notifications).

Profile​

Features (Working):

  • View and update display name
  • Email display (read-only)
  • Profile picture upload via POST /api/v1/users/:id/profile-picture
  • Save changes via PATCH /api/v1/users/:id/profile

API Keys​

Manage API keys for external integrations.

Features (Working):

  • Create new API keys with custom names (1 year expiration)
  • List all keys with name, creation date, and key prefix
  • Revoke keys instantly
  • One-time key display on creation with copy support via ApiKeyInput component
  • Uses Better Auth apiKey client for key management

-> Learn more about Integration API

Billing (Settings Tab)​

Features (Working):

  • Quick view of subscription plan, status, and renewal date
  • Link to full Billing page for management

Notification Preferences​

Features (Working):

  • 4 Toggle Settings with individual enable/disable switches:
    • Pattern Alerts: Receive alerts when new patterns are identified
    • Billing Updates: Notifications about subscription and billing changes
    • Team Invites: Updates when team members join or change roles
    • Weekly Digest: Receive a weekly summary of activity
  • Preferences persisted via PATCH /api/v1/users/:id/preferences
  • Defaults to all enabled

Dashboard Architecture​

Client Technology​

  • Next.js App Router with React, deployed on Cloudflare
  • TanStack Query for server state management
  • @b3-crow/ui-kit shared component library (Header, GlassPanel, MetricsCard, PatternCard, SidePanel, SearchInput, etc.)
  • react-hot-toast for toast notifications
  • lucide-react for icons
  • Responsive layouts with Tailwind CSS
  • Persistent sidebar with main menu items: Overview, Ask CROW, Analysis (Interactions/Patterns), Analytics, Team, Products, Integrations, Billing
  • Chat history section in sidebar with clickable past conversations
  • Mobile sidebar with hamburger menu toggle
  • Settings accessible via avatar click

Data Flow​

  1. User interacts with dashboard
  2. Request sent to API Gateway (with credentials: 'include' for session cookies)
  3. Session validated via Auth Service
  4. Request routed to appropriate service
  5. Data fetched and returned
  6. Dashboard updates UI via TanStack Query cache

Prefetching​

  • Dashboard layout prefetches critical data on mount (interaction summary, recent patterns, recent interactions, team members, billing plans)
  • Wave 2 prefetching after 2-second delay for secondary page data

State Management​

  • TanStack Query for server state with configurable stale times
  • React state for UI-local state (filters, selections, panels)
  • Context providers for cross-component state (ChatHistory, MobileSidebar, SidebarCollapse)
  • Optimistic updates for better UX