← nyxcore-systems
5 min read

From Concept to Command Center: Building Our Project Intelligence Dashboard

Dive into the recent development sprint where we crafted a comprehensive 'Executive Intelligence Dashboard' – a new overview tab aggregating vital project metrics into a powerful command center.

TypeScriptNext.jstRPCPrismaRechartsDashboardFrontendBackendDataVisualizationDevelopmentUpdate

Every project manager dreams of a single pane of glass, a command center that distills complex project data into actionable insights. This past week, we turned that dream into a reality, shipping a brand-new "Executive Intelligence Dashboard" as the default Overview tab on every project detail page.

This wasn't just about adding a few charts; it was about creating a rich, data-dense hub that aggregates everything from workflow performance and costs to quality metrics, knowledge assets, open actions, persona engagement, and repository statistics. And I'm thrilled to report: it's fully implemented, type-check-passing, and ready for its visual debut!

The Vision: A Unified Command Center

Our goal was clear: empower users with an immediate, holistic understanding of their projects. Previously, users had to navigate multiple tabs and screens to gather all the necessary information. The new Overview tab changes that, providing an "at-a-glance" summary that makes it easier to track progress, identify bottlenecks, and make informed decisions.

We envisioned a dashboard that wasn't just pretty, but truly intelligent — a place where all the moving parts of a project converge.

Powering the Intelligence: The Backend Aggregation Layer

At the heart of this dashboard lies a powerful backend aggregation service. We introduced a new projects.overview tRPC query within src/server/trpc/routers/projects.ts. This single endpoint is responsible for orchestrating a symphony of data fetches.

To ensure efficiency and responsiveness, this query leverages Promise.all to execute approximately 21 parallel Prisma queries. This allows us to simultaneously fetch:

  • Hero Metrics: Key performance indicators like Total Spend, Tokens Used, Time Saved, Workflows Executed, Success Rate, and Open Actions.
  • 30-day Activity Timeline: A granular view of recent activity across workflows, discussions, fixes, and refactors.
  • Detailed Breakdowns: Deep dives into workflow, quality, knowledge, action, and cost metrics.
  • Usage Statistics: Insights into persona engagement and repository health.

This consolidated approach means the frontend can make one efficient request and receive all the data it needs to populate the dashboard.

Crafting the Frontend Experience: A Symphony of Data Visualizations

With the backend providing a torrent of data, the frontend's task was to transform it into an intuitive and engaging visual experience. We created a dedicated container component, src/components/project/project-overview.tsx, which intelligently fetches the data using trpc.projects.overview.useQuery, handles loading states with elegant skeletons, and automatically refetches data every 30 seconds to keep the dashboard fresh.

Within this container, a suite of new, purpose-built components brings the data to life:

  • hero-metrics.tsx: A prominent bar of 6 MetricCards, responsively arranging into 6, 3, or 2 columns based on screen size, showcasing the most critical project KPIs.
  • activity-pulse.tsx: A vibrant 30-day stacked Recharts AreaChart visualizing trends in workflows, discussions, fixes, and refactors, complete with gradient fills and a custom tooltip for detailed inspection.
  • quality-shield.tsx: A two-column display featuring progress bars for workflow, autofix, and refactor success rates, alongside StatBlocks detailing code health metrics with a unique stacked pattern type bar.
  • knowledge-inventory.tsx: A four-column grid of StatBlocks, providing a quick inventory of knowledge assets like insights, axiom documents, consolidation patterns, memory entries, blogs (published/draft), enriched notes, and exported discussions.
  • cost-intelligence.tsx: Two horizontal BarCharts breaking down costs by provider and by feature, leveraging distinct color palettes for clarity.
  • action-command.tsx: A focused view on project actions, featuring a BigCounter for status distribution (Open/In Progress/Done), priority badges, category chips, and a list of the top 5 most recent open actions.
  • recent-workflows.tsx: A compact table offering a quick glance at the last 5 workflows, complete with status badges, step progress, cost, and relative time.
  • persona-panel.tsx: Engaging cards for each project persona, displaying their avatar/initials, level badge, usage count, and a mini-progress bar for success rate (conditionally hidden if no personas are defined).
  • repo-overview.tsx: Cards for each connected repository, showing owner/repo name, file count, pattern count, and last sync time (also conditionally hidden if no repositories are linked).

Finally, we integrated this entire experience into the application by modifying src/app/(dashboard)/dashboard/projects/[id]/page.tsx, setting "Overview" as the default and first tab, complete with a LayoutDashboard icon.

Lessons Learned: The Curious Case of the Custom Badge

Development sprints are rarely without their minor bumps. One notable "aha!" moment occurred while styling our Badge components. I initially tried to use variant="outline" and variant="secondary", expecting standard Shadcn-like behavior.

The result? A TypeScript error.

It quickly became clear that our project's Badge component, located at src/components/ui/badge.tsx, uses a custom CVA (Class Variance Authority) setup. It only supports default, accent, success, warning, and danger variants. My assumption based on other UI libraries led me astray.

The workaround: I reverted to using variant="default" (or omitting the variant prop entirely) and applied custom className overrides for the desired styling.

The lesson: Always, always check the available props and variants of custom UI components, especially when working in a shared codebase. Don't assume defaults from popular libraries; the local implementation is king!

What's Next on the Horizon

With the core dashboard now live, our immediate next steps involve thorough visual QA across various screen sizes and data scenarios. Beyond that, we have some exciting user-requested features and explorations lined up:

  • Adding ? icons with informative tooltips to explain temperature sliders and other adjustable model settings within workflow configurations.
  • Investigating the possibility of recreating memory from Git commits, further enriching our project intelligence.
  • Designing elegant empty state illustrations for panels that currently have no data, ensuring a friendly user experience from day one.

This new Executive Intelligence Dashboard is a significant step forward in providing unparalleled visibility into project health and performance. We're incredibly excited about the impact it will have on our users' ability to manage and optimize their projects effectively. Stay tuned for more updates as we continue to refine and expand its capabilities!