Command Center Dashboard
Relevant source files
The following files were used as context for generating this wiki page:
The Command Center Dashboard is the central management hub for Comply-Quick users, specifically designed for paid tiers (Pro, Agency, and Enterprise) to oversee their compliance projects. It serves as a comprehensive interface for monitoring aggregate compliance health, managing active projects, and accessing specialized compliance tools.
The dashboard integrates real-time data from the Clause Engine, billing systems, and regulatory alert feeds. It provides a high-level overview of "Active Projects" while facilitating deep dives into technical scanners, API management, and legal review workflows.
Sources: test-plan-phase6.md:4-5, src/app/dashboard/home/CommandCenterView.tsx:112-118
System Architecture and Data Flow
The Command Center is built using a server-client architecture. The server-side component fetches user entitlements, project lists, and aggregate scores via Supabase, while the client-side view handles user interactions such as project deletion, downloads, and navigation.
Dashboard Data Orchestration
The data flow starts with authentication and entitlement verification before aggregating project metrics for display.
Sources: src/app/dashboard/home/page.tsx:10-31, src/app/dashboard/home/CommandCenterView.tsx:112-140
Key Functional Components
1. Compliance Score Overview
If projects exist, the dashboard displays an aggregate view of compliance health across five key metrics. These metrics are derived from the ComplianceScore data structure.
| Metric | Description |
|---|---|
| Overall Score | Weighted average of all compliance factors. |
| Contract Protection | Strength of inward-facing liability shields. |
| Privacy Coverage | Completeness of privacy policy disclosures and script mapping. |
| Pre-Launch Ready | Percentage of checklist items completed. |
| Regulatory Breadth | Number of jurisdictions and modules covered. |
Sources: src/app/dashboard/home/CommandCenterView.tsx:182-198, src/components/ClauseEngine.tsx:59-65
2. Project Management
Users can view and interact with individual compliance projects. Each project card displays the framework icon (e.g., Shopify, Next.js), the number of detected pixels, target regions, and the specific compliance score for that project.
- Delete Project: Triggers a server action (
deleteProjectAction) to remove the project from the database. - Download: Generates a
.mdfile locally from thepackageMarkdownstored in the project record.
Sources: src/app/dashboard/home/CommandCenterView.tsx:125-140, src/app/dashboard/home/CommandCenterView.tsx:244-290
3. Regulatory Alert System
The dashboard includes a proactive monitoring system that provides alerts based on regional changes (e.g., CCPA amendments or GDPR enforcement updates).
The severity of alerts is categorized as info, warning, or critical, each with distinct visual styling.
Sources: src/app/dashboard/home/CommandCenterView.tsx:43-85, src/app/dashboard/home/CommandCenterView.tsx:327-347
Technical Implementation Details
API and Integration Access
For users on appropriate tiers, the Command Center provides direct access to API management. This includes the ability to generate compliance packages programmatically.
| Feature | Description |
|---|---|
| API Keys | Management of cq_live_ prefixed bearer tokens. |
| Metered Billing | Real-time usage tracking for API calls and extra scans. |
| Rate Limits | Enforced at 120 requests per minute per key. |
Sources: src/app/dashboard/api/ApiView.tsx:104-138, src/app/dashboard/api/ApiView.tsx:280-285
Quick-Launch Tools
The dashboard provides a grid of utilities for compliance workflows:
- Compliance Scanner: Auto-detects tech stacks and issues via URL.
- Package Generator: Direct link to the
DashboardWizardfor creating new liability shields. - Developer API: Access to keys and documentation.
- Marketplace: Access to the Creator Studio for template management.
Sources: src/app/dashboard/home/CommandCenterView.tsx:89-110, src/app/dashboard/marketplace/creator/CreatorView.tsx:135-145
Component Logic Snippet: Score Rendering
The following logic determines the visual color-coding of scores throughout the dashboard:
// src/app/dashboard/home/CommandCenterView.tsx:249-254
const scoreColor =
project.complianceScore.overall >= 80
? "text-emerald-400"
: project.complianceScore.overall >= 60
? "text-yellow-400"
: "text-red-400";
Sources: src/app/dashboard/home/CommandCenterView.tsx:249-254
Conclusion
The Command Center Dashboard is the operational heart of the Comply-Quick platform. By centralizing project management, aggregate scoring, and automated regulatory monitoring, it enables developers and agencies to maintain a continuous compliance posture for their clients. It acts as the gateway to advanced features like the REST API and the Legal Review portal, ensuring scalability for Enterprise-level compliance needs.