Dashboard Component Library

Reusable components for building CRM and analytics dashboards

StatCard

Show important numbers at a glance. Perfect for tracking how many families you're helping, total assistance provided, or applications waiting for review.

Case Management Example: Display "52 Families Served This Month" with a green arrow showing you helped 8 more families than last month. The card can show an icon (like a house 🏠) to make it visually clear what the number represents.

// Props Interface
{
title: string;
value: string | number;
change?: string; // e.g., '+8 from last month'
changeType?: 'positive' | 'negative' | 'neutral';
icon?: string; // emoji
}

Families Served This Month

52

↑ +8 from last month

🏠

ChartCard (Bar)

Compare different categories side-by-side using horizontal bars. Makes it easy to see which type of assistance is most requested or which zip code has the most applicants.

Case Management Example: Show how much money was distributed for each assistance program - Rent $156K, Food $142K, Energy $98K. The bars show proportions so you can instantly see rent assistance is your largest program.

// Props Interface
{
title: string;
data: { label: string; value: number }[];
type: 'bar';
}

Assistance by Program Type

Rental Assistance156000
Food Assistance142000
Energy Assistance98000

ChartCard (Column)

Track trends over time using vertical columns. Great for seeing if applications are increasing, if you're meeting monthly goals, or spotting seasonal patterns.

Case Management Example: Display the number of new applications received each month. You can quickly see that April had 189 applications (your busiest month), while January only had 145. This helps with staffing and resource planning.

// Props Interface
{
title: string;
data: { label: string; value: number }[];
type: 'line';
}

Monthly Applications Received

JanFebMarAprMayJun

LeadsPipeline

Visualize where each case is in your process. See how many applications are at each step, from initial submission through approval, so nothing falls through the cracks.

Case Management Example: Track 52 new applications in intake, 38 waiting for document review, 28 pending eligibility checks, and 50 actively receiving assistance. The colored bar at the top shows the overall breakdown, and the list below shows details for each stage with dollar amounts.

// Props Interface
{
stages: {
name: string;
count: number;
value: string;
color: string;
[];
}

Case Management Pipeline

186 Total Applications
New Applications
28.0%52$124K
Document Review
20.4%38$89K
Eligibility Check
15.1%28$67K
Pending Approval
9.7%18$42K
Approved & Active
26.9%50$118K

RecentActivity

Keep a running log of what's happening in your caseload. See the most recent actions taken by your team - new applications, approvals, home visits, or documents received.

Case Management Example: Shows that Maria Rodriguez just applied for rental assistance 15 minutes ago, the Thompson family was approved 1 hour ago, and Emily completed a home visit 2 hours ago. Each activity shows which case manager handled it and includes color-coded icons.

// Props Interface
{
activities: {
id: string;
type: 'lead' | 'deal' | 'contact' | 'task';
title: string;
description: string;
time: string;
user: string;
[];
}

Recent Activity

👤

New Application

Maria Rodriguez - Rental assistance

by Sarah Chen

15m ago
💰

Assistance Approved

Thompson family - 3 months rent

by John Martinez

1h ago
✓

Home Visit Completed

Anderson household assessment

by Emily Davis

2h ago

PieChart

Show how the whole is divided into parts using a circular pie chart. Makes it easy to see proportions and percentages at a glance.

Case Management Example: Visualize your current caseload by status - 35% are actively receiving assistance, 25% pending approval, 20% in document review, and 20% are new applications. The pie slices are sized proportionally, and hovering shows exact numbers and percentages.

// Props Interface
{
title: string;
data: {
label: string;
value: number;
color: string; // Tailwind bg class
[];
}

Caseload by Status

Active Assistance
35.0%70
Pending Approval
25.0%50
Document Review
20.0%40
New Applications
20.0%40

DonutChart

Similar to a pie chart but with a center area that can display a total or key metric. The donut shape makes it easy to focus on both the overall number and the breakdown.

Case Management Example: Display the total assistance budget ($428K) in the center, with the donut ring showing how funds are split across programs - 36% rental, 33% food, 23% energy, and 8% emergency services. This gives you the big picture (total available) and the breakdown at once.

// Props Interface
{
title: string;
data: {
label: string;
value: number;
color: string; // Tailwind bg class
[];
centerLabel?: string; // Label in center
centerValue?: string; // Value in center
}

Budget Distribution by Program

$428K
Total Budget
Rental Assistance
36.4%156000
Food Assistance
33.2%142000
Energy Assistance
22.9%98000
Emergency Services
7.5%32000

LineChart

Track changes and trends over time with a smooth line graph. Perfect for monitoring growth, spotting patterns, or showing progress toward goals.

Case Management Example: Monitor how your total active cases have changed over the year. The line shows you started with 125 families in January and have grown to 198 by June, helping you see your expanding impact. Hover over any point to see exact numbers for that month.

// Props Interface
{
title: string;
data: { label: string; value: number }[];
color?: 'blue' | 'green' | 'purple' | 'orange';
}

Total Active Cases Over Time

Jan
Feb
Mar
Apr
May
Jun

DataTable

Display detailed information in an organized table format. Perfect for showing your full caseload, priority cases, or generating reports with multiple columns of information.

Case Management Example: List high-priority cases with all key details in one place - household name, contact person, what type of help they need, current status, requested amount, and urgency level. Case managers can quickly scan the table to prioritize their work and see who needs immediate attention (marked as "Critical" or "High" priority).

// Props Interface
{
title: string;
columns: { key: string; label: string; width?: string }[];
data: Record<string, any>[];
}

High Priority Cases

HouseholdContact PersonAssistance TypeStatusPriority
Martinez FamilyRosa MartinezRental + FoodPending ApprovalHigh
Johnson HouseholdDavid JohnsonEnergyDocument ReviewMedium
Chen FamilyWei ChenRentalEligibility CheckHigh

Full Dashboard Example

See these components in action on the Access CRM dashboard, which demonstrates a complete implementation for a social services organization.

View Access CRM Dashboard →