Business Intelligence Dashboard
Build a BI dashboard that connects to multiple data sources, tracks KPIs with drill-down analysis, generates automated snapshots, and replaces expensive analytics tools.
What business intelligence means for small teams
Business intelligence (BI) turns raw data into decisions. Enterprise BI tools like Tableau and Looker cost thousands per year and require dedicated analysts. For small teams, the goal is the same — understand what is happening, why, and what to do about it — but the implementation needs to be lean and maintainable. A good BI dashboard answers three questions at a glance: are we growing (revenue, users, engagement trends), is anything broken (alerts, anomalies, threshold breaches), and where should we focus (which metrics need attention, which segments are underperforming). Ask Claude Code: Create a new Next.js project with TypeScript and Tailwind CSS for a business intelligence dashboard. Define the core types at src/types.ts. DataSource (id, name, type as database or api or csv or spreadsheet, connection_config, sync_frequency, last_synced_at). Metric (id, name, description, calculation as a SQL query or function, format as number or currency or percentage or duration, trend_direction as higher_is_better or lower_is_better, target_value optional, warning_threshold optional, critical_threshold optional). Dashboard (id, name, widgets as array of Widget). Widget (id, type as kpi_card or line_chart or bar_chart or table or pie_chart or heatmap, metric_ids, time_range, dimensions for grouping, filters, position with row and column and width and height). Create a sample configuration with 12 metrics covering revenue (MRR, ARR, revenue growth), customers (total, new, churn rate, lifetime value), product (daily active users, feature adoption, support tickets), and operations (response time, uptime, deployment frequency). This configuration-driven approach means adding new metrics is a data change, not a code change.
Connecting data sources
BI dashboards are only as good as their data. Ask Claude Code: Create a data source connector system at src/connectors/. Build connectors for the most common small business data sources. PostgreSQL connector: accepts a connection string, executes parameterised queries, and returns typed results. Use connection pooling with a maximum of 5 connections. CSV connector: reads a CSV file from a URL or local path, parses it with proper header detection, handles quoted fields and various delimiter formats, and caches the result for a configurable duration. API connector: makes authenticated HTTP requests to REST APIs, handles pagination (both cursor-based and offset-based), rate limits requests to avoid hitting API quotas, and transforms the JSON response into a tabular format. Spreadsheet connector: reads Google Sheets via the API using a service account. Each connector implements a common interface: connect(), query(params), and disconnect(). This abstraction means the dashboard code does not care where data comes from. Ask Claude Code: Create a data pipeline at src/pipeline.ts that orchestrates data collection. The pipeline runs on a schedule: hourly for real-time metrics (active users, current revenue), daily for aggregate metrics (churn rate, lifetime value), and weekly for trend metrics (growth rates, forecasts). Each pipeline run logs: which sources were queried, how long each query took, how many rows were returned, and any errors. Store the collected data in a local PostgreSQL database as a data warehouse. Create a metrics table that stores metric_id, date, value, and dimensions (as a JSONB column for flexible grouping). Ask Claude Code: Add data quality checks. After each pipeline run, validate: no null values in required fields, values are within reasonable ranges (revenue is not negative, percentages are between 0 and 100), no duplicate entries for the same metric and date, and the data is fresh (no gaps in the time series). Flag any issues and show them on the dashboard.
KPI cards with trend analysis
KPI cards are the first thing users see — they show the most important numbers at a glance. Ask Claude Code: Create a KPI card component at src/components/KPICard.tsx. Each card displays: the metric name, the current value formatted appropriately (currency with symbol and 2 decimals, percentages with 1 decimal, numbers with thousands separators), a trend arrow (up or down) with the percentage change from the previous period, a sparkline chart showing the last 12 data points (months, weeks, or days depending on the metric), and a colour indicator based on thresholds (green for healthy, yellow for warning, red for critical). The comparison period should be configurable: compare to last month, same month last year, or a custom period. For metrics where lower is better (churn rate, response time, support tickets), invert the colour logic — a decrease is green, an increase is red. Ask Claude Code: Add anomaly detection to KPI cards. Calculate the rolling average and standard deviation for each metric. When the current value is more than 2 standard deviations from the average, show an anomaly indicator with a tooltip explaining: this value is unusually high or low compared to the historical average. Anomaly detection catches issues that fixed thresholds miss — a 5 percent churn rate might be normal for a young product but alarming for a mature one. Ask Claude Code: Make KPI cards interactive. Clicking a card should expand it to show: the full time series as a larger chart, a breakdown by dimension (revenue by plan, users by country, tickets by category), and a mini table of the raw data points. Add a comparison overlay that shows the selected period versus the comparison period on the same chart. This drill-down capability is what separates a BI dashboard from a static report — users can investigate the why behind the what.
Charts, tables, and drill-down analysis
Beyond KPI cards, the dashboard needs charts and tables for deeper analysis. Ask Claude Code: Create a chart system at src/components/charts/. Build reusable chart components for: LineChart (time series data with multiple series, legend, axis labels, hover tooltips showing exact values), BarChart (comparison data with horizontal and vertical orientations, grouped and stacked variants), PieChart (composition data showing percentage breakdown with a legend), HeatMap (two-dimensional data like engagement by day and hour, with colour intensity representing the value), and DataTable (sortable, filterable table with pagination, column resizing, and CSV export). Each chart should accept data in a standardised format: { labels: string[], datasets: { name: string, values: number[], color: string }[] }. Add a date range picker that controls all charts on the page simultaneously. When the user changes the date range, all charts update with the new data. Ask Claude Code: Add drill-down navigation. When a user clicks a data point in a chart, show the next level of detail. For example, clicking the January bar in a monthly revenue chart should show daily revenue for January. Clicking a specific day should show individual transactions. This hierarchical drilling lets users start with the big picture and investigate specific areas. Implement with a breadcrumb trail: Revenue > January 2024 > January 15. Clicking any breadcrumb level navigates back up the hierarchy. Ask Claude Code: Add cross-filtering. When the user selects a segment in one chart (for example, Enterprise plan in a revenue-by-plan chart), all other charts on the page filter to show only data for that segment. This reveals correlations: when you filter to Enterprise, does the support ticket chart spike? Does the feature adoption chart show different patterns? Cross-filtering turns a collection of charts into an interactive analytical tool.
Automated snapshots and scheduled reports
Stakeholders need regular updates without visiting the dashboard. Ask Claude Code: Create a snapshot system at src/snapshots.ts. A snapshot captures the current state of all metrics and generates a summary report. Build three snapshot types. Daily Snapshot: a brief email with the 5 most important KPIs, their values, and any alerts. Sent every morning at 8 AM. Format as a clean HTML email that is scannable in 30 seconds. Weekly Digest: a more detailed report with all KPIs, trend charts for the past week, notable changes (any metric that moved more than 10 percent), and top-performing and worst-performing segments. Include a comparison to the previous week. Sent every Monday morning. Monthly Executive Summary: a comprehensive report suitable for sharing with investors or advisors. Include revenue analysis, customer metrics, product health, and a narrative summary generated from the data. For example: MRR grew 8 percent to 42000 pounds, driven by 15 new enterprise customers. Churn decreased from 4.2 percent to 3.8 percent following the onboarding improvements shipped in week 2. Support volume increased 12 percent, primarily in the billing category, suggesting the new pricing page needs clarification. Ask Claude Code: Create a report scheduler at src/scheduler.ts that runs each snapshot type at the configured frequency. Each snapshot should: collect all metric values, generate the HTML report, convert to PDF for archival, email to the configured recipients, and save to a report archive. Add a manual trigger: the dashboard should have a Generate Report Now button that creates an ad-hoc snapshot for any date range. This is useful for board meetings, investor updates, or investigating a specific period.
Alerts and anomaly notifications
The most valuable BI feature is proactive notification when something needs attention. Ask Claude Code: Create an alerting system at src/alerts.ts. Define alert rules with: the metric to monitor, the condition (above, below, change exceeds percentage), the threshold value, the severity (info, warning, critical), the cooldown period (minimum time between repeated alerts for the same rule), and the notification channels (email, Slack webhook, in-app). Build three categories of alerts. Threshold alerts fire when a metric crosses a predefined boundary: MRR drops below 40000, churn rate exceeds 5 percent, or uptime drops below 99.9 percent. Trend alerts fire when a metric changes significantly: revenue dropped 15 percent week-over-week, new signups doubled (investigate why — is it organic or a bot attack?), or support tickets increased 50 percent in a day. Anomaly alerts fire when the statistical model detects unusual behaviour, even if no threshold is breached: traffic pattern changed (typically peak at 10 AM but today it peaked at 3 AM — could indicate international traffic or a DDoS), feature usage pattern changed (a feature that normally gets 100 daily uses suddenly gets 1000), or data freshness issue (a data source that syncs hourly has not synced in 3 hours). Ask Claude Code: Create an alert dashboard page that shows: active alerts sorted by severity, alert history for the last 30 days, a chart of alert frequency over time (increasing alerts may indicate systemic issues), and alert acknowledgement (a team member can acknowledge an alert indicating they are investigating it). Add a mute function for known issues — if you are aware that a migration will cause a temporary spike in errors, mute the error rate alert for 2 hours to avoid noise.
Custom dashboards and deployment
Different stakeholders need different views. Ask Claude Code: Create a dashboard builder at src/components/DashboardBuilder.tsx. Users can create custom dashboards by selecting widgets from a library, arranging them in a grid layout (drag-and-drop positions and sizes), configuring each widget's data source, time range, and filters, and saving the dashboard with a name and sharing permissions. Create three pre-built dashboards. Executive Dashboard: MRR, ARR, revenue growth, customer count, churn rate, and net revenue retention as KPI cards. Revenue trend and customer growth as line charts. Plan distribution as a pie chart. Product Dashboard: daily active users, feature adoption rates, page load time, error rate, and deployment frequency. Usage heatmap by hour and day. Feature usage comparison as a bar chart. Operations Dashboard: uptime, response time, support ticket volume, resolution time, and deployment success rate. Incident timeline and support category breakdown. Ask Claude Code: Add dashboard sharing. Each dashboard has a unique URL. Shared dashboards can be view-only or editable. Add a presentation mode that cycles through dashboards on a timer — perfect for displaying on a TV in the office. Deploy the entire application to Vercel with a PostgreSQL database on Railway. Set up the data pipeline cron jobs, the alert system, and the report scheduler. Configure environment variables for all data source connections. Run the full pipeline to populate the database with sample data. Test the complete flow: view dashboards, drill into metrics, receive an alert email, and generate a snapshot report. The BI dashboard is now a complete replacement for tools that cost hundreds or thousands per month. It is tailored to your specific business metrics, runs on your infrastructure, and scales with your needs. More importantly, it turns raw data into the decisions that drive your business forward.
Data-Driven Decision Making
This guide is hands-on and practical. The full curriculum covers the conceptual foundations in depth with structured lessons and quizzes.
Go to lesson