UI/UX Design Specification
Design Philosophy
The CSM Dashboard follows these core principles:
- Clarity - Information should be immediately understandable
- Speed - Critical insights visible at a glance
- Actionability - Easy to identify what needs attention
- Consistency - Familiar patterns from pivot-kpi dashboard
- Responsiveness - Works on desktop and tablet
Color System
Alert Levels
/* Critical - Red */
--color-critical-bg: #fee2e2; /* Light red background */
--color-critical-border: #fca5a5; /* Red border */
--color-critical-text: #991b1b; /* Dark red text */
--color-critical-accent: #dc2626; /* Red accent */
/* Warning - Yellow */
--color-warning-bg: #fef3c7; /* Light yellow background */
--color-warning-border: #fcd34d; /* Yellow border */
--color-warning-text: #92400e; /* Dark yellow text */
--color-warning-accent: #f59e0b; /* Yellow accent */
/* Healthy - Green */
--color-healthy-bg: #d1fae5; /* Light green background */
--color-healthy-border: #6ee7b7; /* Green border */
--color-healthy-text: #065f46; /* Dark green text */
--color-healthy-accent: #10b981; /* Green accent */
/* Neutral - Gray */
--color-neutral-bg: #f3f4f6; /* Light gray background */
--color-neutral-border: #d1d5db; /* Gray border */
--color-neutral-text: #374151; /* Dark gray text */
Metrics
/* Open Shifts */
--metric-open-shifts: #3b82f6; /* Blue */
/* Unavailable Assignments */
--metric-unavailable: #f59e0b; /* Amber */
/* Conflicting Timecards */
--metric-conflicts: #ef4444; /* Red */
/* Employee Count */
--metric-employees: #8b5cf6; /* Purple */
/* Last Login */
--metric-login: #06b6d4; /* Cyan */
Page Layouts
1. Customer List (Main Dashboard)
┌─────────────────────────────────────────────────────────────────┐
│ CSM Dashboard [Refresh] [⚙] │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌──────────────┐ │
│ │ 🔴 Critical │ │ 🟡 Warning │ │ 🟢 Healthy │ │
│ │ 12 │ │ 45 │ │ 293 │ │
│ └─────────────┘ └─────────────┘ └──────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 🔍 Search companies... [Filters ▼] │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Company Name │Status│Employees│Last Login│Actions │ │
│ ├──────────────────────────────────────────────────────────┤ │
│ │ 🔴 Bloom Sushi QDS │ ⚠️ │ 127 │ 15d ago │ View → │ │
│ │ 🟡 Restaurant ABC │ ⚠ │ 45 │ 3d ago │ View → │ │
│ │ 🟢 Bistro XYZ │ ✓ │ 23 │ 1h ago │ View → │ │
│ │ ... │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ [Export to CSV] Showing 1-50 of 350 │
└─────────────────────────────────────────────────────────────────┘
Features:
- Summary Cards - Quick overview of alert distribution
- Search & Filter
- Free text search (company name, email)
- Filter by alert level (Critical, Warning, Healthy)
- Filter by specific metrics (e.g., show only "No login >14 days")
- AG Grid Table
- Sortable columns
- Color-coded rows by alert level
- Icon indicators for problematic metrics
- Click row to view details
- Pagination - 50 companies per page
- Export - CSV download of current view
2. Customer Detail Page
┌─────────────────────────────────────────────────────────────────┐
│ ← Back to Customers │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Bloom Sushi QDS 🔴 Critical Alert │
│ contact@bloomsushi.com • Montreal, QC • 514-555-1234 │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 🚨 Active Alerts: │ │
│ │ • No master account login in 15 days │ │
│ │ • Unavailable shift assignments >10% (14.3%) │ │
│ │ • Employee count decreased 18% in 30 days (-28 people) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────── Metrics ──────────────────────┐ │
│ │ │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ Employees │ │ Last Login │ │ Open Shifts │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ 127 │ │ 15 days ago │ │ No │ │ │
│ │ │ ↓ -28 (30d) │ │ 🔴 High │ │ 4.2% avg │ │ │
│ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │
│ │ │ │
│ │ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ Unavailable │ │ Conflicts │ │ │
│ │ │ Assignments │ │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ Yes │ │ No │ │ │
│ │ │ 14.3% avg │ │ 32.1% avg │ │ │
│ │ └──────────────┘ └──────────────┘ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────── 90-Day Trends ─────────────────────────┐ │
│ │ │ │
│ │ Employee Count │ │
│ │ 160 ┤ │ │
│ │ 140 ┤ ●●● │ │
│ │ 120 ┤ ●●●●●●●●● │ │
│ │ 100 ┤ ●●●●●● │ │
│ │ 80 ┴────────────────────────────────────────────────── │ │
│ │ Aug Sep Oct Nov │ │
│ │ │ │
│ │ Open Shifts % (14-day average) │ │
│ │ 20 ┤ │ │
│ │ 15 ┤ ● │ │
│ │ 10 ┤ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ (10% threshold) │ │
│ │ 5 ┤ ●●●●●●●●●●●●●●● │ │
│ │ 0 ┴────────────────────────────────────────────────── │ │
│ │ Aug Sep Oct Nov │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────── Recent Activity ────────────────────────┐ │
│ │ Nov 24, 6:00 AM │ Metrics updated (daily cron job) │ │
│ │ Nov 23, 2:30 PM │ Employee archived (Total: 127) │ │
│ │ Nov 22, 9:15 AM │ Schedule published (Week 47) │ │
│ │ Nov 21, 3:45 PM │ 3 new employees hired (Total: 155) │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Features:
- Company Header - Name, contact, location, alert badge
- Alert Summary - Specific reasons for alerts (plain English)
- Metric Cards - All 5 metrics with current value and trend
- Historical Charts - 90-day sparklines/line charts
- Activity Timeline - Recent events affecting metrics
- Quick Actions (future)
- Send email to master account
- Create support ticket
- Schedule CSM call
3. Alerts & Filters Page
┌─────────────────────────────────────────────────────────────────┐
│ Alerts Management │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Active Alerts (57) [Mark All Read] │ │
│ ├──────────────────────────────────────────────────────────┤ │
│ │ 🔴 Bloom Sushi QDS 15 min ago │ │
│ │ No login in 15 days │ │
│ │ [View Details] [Dismiss] │ │
│ │ │ │
│ │ 🔴 Restaurant ABC 2 hours ago │ │
│ │ Employee count decreased 25% │ │
│ │ [View Details] [Dismiss] │ │
│ │ │ │
│ │ 🟡 Bistro XYZ 1 day ago │ │
│ │ Open shifts >10% (12.5% average) │ │
│ │ [View Details] [Dismiss] │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Alert Rules │ │
│ ├──────────────────────────────────────────────────────────┤ │
│ │ No Login │ │
│ │ 🔴 Critical: >14 days 🟡 Warning: 7-14 days │ │
│ │ │ │
│ │ Employee Count │ │
│ │ 🔴 Critical: >20% decrease 🟡 Warning: 10-20% decrease │ │
│ │ │ │
│ │ Open Shifts │ │
│ │ 🔴 Critical: >20% 🟡 Warning: 10-20% │ │
│ │ │ │
│ │ Unavailable Assignments │ │
│ │ 🔴 Critical: >20% 🟡 Warning: 10-20% │ │
│ │ │ │
│ │ Conflicting Timecards │ │
│ │ 🔴 Critical: >70% 🟡 Warning: 50-70% │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Component Design
MetricCard Component
interface MetricCardProps {
title: string;
value: string | number;
trend?: {
direction: 'up' | 'down' | 'stable';
value: string;
period: string;
};
alertLevel: 'critical' | 'warning' | 'healthy';
icon?: React.ReactNode;
}
// Example rendering:
<MetricCard
title="Number of Employees"
value={127}
trend={{ direction: 'down', value: '-28', period: '30d' }}
alertLevel="critical"
icon={<UsersIcon />}
/>
// Renders as:
┌────────────────┐
│ 👥 Employees │
│ │
│ 127 │
│ ↓ -28 (30d) │
│ │
│ 🔴 Critical │
└────────────────┘
AlertBadge Component
interface AlertBadgeProps {
level: 'critical' | 'warning' | 'healthy';
count?: number;
}
// Example:
<AlertBadge level="critical" count={3} />
// Renders as:
🔴 3 Critical Alerts
TrendChart Component
interface TrendChartProps {
data: { date: string; value: number }[];
metric: string;
threshold?: number;
height?: number;
}
// Example:
<TrendChart
data={last90Days}
metric="Open Shifts %"
threshold={10}
height={200}
/>
CustomerRow Component (AG Grid Cell Renderer)
// Custom cell renderer for company name with alert indicator
const CompanyNameRenderer = (props: any) => {
const alertLevel = props.data.alertLevel;
const icon = alertLevel === 'critical' ? '🔴' :
alertLevel === 'warning' ? '🟡' : '🟢';
return (
<div className="flex items-center gap-2">
<span>{icon}</span>
<span className="font-semibold">{props.value}</span>
</div>
);
};
Responsive Design
Desktop (>1024px)
- Full table with all columns
- Side-by-side metric cards (3 per row)
- Full-width charts
Tablet (768px - 1024px)
- Scrollable table
- Metric cards 2 per row
- Compressed navigation
Mobile (<768px)
- Not currently supported (CSM team uses desktop/laptop)
- Future enhancement if mobile access needed
Loading States
Customer List Loading
┌─────────────────────────────────────────┐
│ ▭▭▭▭▭▭▭▭▭▭ Loading customers... │
│ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└─────────────────────────────────────────┘
Metric Calculation in Progress
┌──────────────┐
│ Open Shifts │
│ │
│ Updating... │
│ ⟳ │
└──────────────┘
Empty States
No Alerts
┌─────────────────────────────────────────┐
│ │
│ ✅ All Clear! │
│ │
│ No customers require immediate │
│ attention at this time. │
│ │
│ Last updated: 2 minutes ago │
│ │
└─────────────────────────────────────────┘
No Search Results
┌─────────────────────────────────────────┐
│ │
│ 🔍 No results found │
│ │
│ Try adjusting your search or filters │
│ │
└─────────────────────────────────────────┘
Accessibility
ARIA Labels
- All interactive elements have descriptive labels
- Alert levels announced to screen readers
- Keyboard navigation support
Color Contrast
- All text meets WCAG AA standards
- Color not sole indicator (icons + text)
- High contrast mode support
Keyboard Shortcuts
Ctrl/Cmd + K- Focus searchEsc- Clear filtersArrow keys- Navigate tableEnter- View customer details
Performance Considerations
Virtualization
- AG Grid handles large datasets efficiently
- Only render visible rows (50 at a time)
Lazy Loading
- Load customer details on demand
- Historical data fetched when viewing detail page
Caching
- Customer list cached for 5 minutes
- Metrics updated daily, no need for real-time polling
Progressive Enhancement
- Core functionality works without JavaScript
- Charts/interactivity enhanced with JS
- Graceful degradation for older browsers
Future Enhancements
Phase 2
- Dark Mode - Toggle for CSM team preference
- Custom Dashboards - Save filtered views
- Export to PDF - Customer health reports
- Slack Integration - Send alerts directly to channels
Phase 3
- Mobile App - iOS/Android for CSM team on-the-go
- Predictive Analytics - ML-based churn prediction
- Automated Actions - Trigger workflows based on metrics
- Integration with Support Tickets - Link metrics to open tickets