{"slug":"developers/V0_DASHBOARD_STYLE_GUIDE","title":"V0 Dashboard Style Guide — Account Success Shell","section":"developers","sectionLabel":"Developers","status":"unclassified","type":"document","path":"developers/V0_DASHBOARD_STYLE_GUIDE.mdx","bytes":9111,"description":null,"updated":null,"source":"integratewise/Integratewise-docs-wiki","content":"\n\n> **Tier C — Historical.** This document is a point-in-time snapshot preserved for reference. For current architecture, see [CANONICAL_PLATFORM_ARCHITECTURE.md](../architecture/CANONICAL_PLATFORM_ARCHITECTURE.md).\n\n## Overview\n\nThe `AccountSuccessShellV0` component implements the clean, minimal V0 dashboard aesthetic. This guide documents the design system, component patterns, and implementation details.\n\n---\n\n## Visual Design Principles\n\n### Core Aesthetic\n\n✓ **Minimal & Clean** — No clutter, maximum clarity\n✓ **Soft Colors** — Green accents on neutral backgrounds\n✓ **Card-Based Layout** — Distinct visual blocks with breathing room\n✓ **Professional Spacing** — Generous padding and margins\n✓ **Subtle Shadows** — Soft hover effects, no harsh borders\n✓ **Dark Mode Ready** — Full light/dark mode support\n\n### Color Palette\n\n**Light Mode:**\n- Background: `#ffffff` (white)\n- Foreground: `#0f172a` (slate-900)\n- Muted: `#64748b` (slate-500)\n- Primary: `#22c55e` (green-500)\n- Accent: `#10b981` (green-600)\n\n**Dark Mode:**\n- Background: `#020617` (slate-950)\n- Foreground: `#f1f5f9` (slate-100)\n- Muted: `#94a3b8` (slate-400)\n- Primary: `#22c55e` (green-500)\n- Accent: `#10b981` (green-600)\n\n### Typography\n\n- **Headlines:** Bold, large, dark\n- **Body:** Regular weight, medium size, slate-600\n- **Labels:** Small, uppercase, muted\n- **Data/Metrics:** Large, bold, prominent\n\n---\n\n## Component Architecture\n\n### Layout Structure\n\n```\n┌─────────────────────────────────────────────────────────┐\n│  Command Bar (Search, Notifications, Settings)          │\n├──────────────────────────────────────────────────────────┤\n│          │                                               │\n│ Sidebar  │  Main Content                                 │\n│ Navigation  ├── Page Header                             │\n│          │  ├── KPI Cards Grid                          │\n│          │  └── Content View                            │\n│          │                                               │\n└──────────────────────────────────────────────────────────┘\n```\n\n### Components\n\n#### 1. Command Bar\n- Fixed sticky header (h-16)\n- Left: Menu toggle + logo\n- Center: Search input\n- Right: Notifications, settings, user avatar\n- Keyboard shortcut display (⌘K)\n\n#### 2. Sidebar\n- Collapsible (toggle via button)\n- Navigation items with icons\n- Workbench switcher\n- User info footer\n- Smooth transitions\n\n#### 3. KPI Cards\n- 4-column grid on desktop\n- Green gradient backgrounds\n- Large metric values\n- Change indicators\n- Hover effects\n\n#### 4. Content Views\n- Card-based containers\n- Consistent padding (p-8)\n- Table support with striped rows\n- Empty states\n\n---\n\n## Implementation Details\n\n### File Location\n```\npackages/domain-shells/account-success-shell-v0.tsx\n```\n\n### Key Features\n\n1. **Responsive Design**\n   - Mobile: Single column\n   - Tablet: 2 columns\n   - Desktop: Full layout\n\n2. **Dark Mode Support**\n   - All colors have dark variants\n   - Uses `dark:` Tailwind prefixes\n   - Smooth transitions\n\n3. **Integration Hooks**\n   - `useDomainNavigation()` — Multi-app switching\n   - `useSignalDetection()` — Critical signals\n   - `useSpineData()` — Account data\n   - Full type safety\n\n4. **State Management**\n   - Active view tracking\n   - Sidebar toggle\n   - Search focus state\n\n---\n\n## Usage\n\n### Basic Implementation\n\n```typescript\n\n  return <AccountSuccessShellV0 />;\n}\n```\n\n### With Custom Props (Future)\n\n```typescript\n<AccountSuccessShellV0\n  defaultView=\"dashboard\"\n  theme=\"light\"\n  showBrandLogo={true}\n/>\n```\n\n---\n\n## Design Tokens\n\n### Spacing Scale\n- `p-2` = 8px\n- `p-4` = 16px\n- `p-6` = 24px\n- `p-8` = 32px\n- `gap-3` = 12px\n- `gap-4` = 16px\n\n### Border Radius\n- Small: `rounded-lg` = 8px\n- Medium: `rounded-xl` = 12px\n- Large: `rounded-2xl` = 16px\n\n### Typography Sizes\n- `text-3xl` = 32px (metrics)\n- `text-lg` = 18px (headings)\n- `text-base` = 16px (body)\n- `text-sm` = 14px (labels)\n- `text-xs` = 12px (captions)\n\n### Transitions\n- `transition-colors` — 150ms color changes\n- `transition-shadow` — 150ms shadow effects\n- `transition-all` — Smooth duration-300\n\n---\n\n## Navigation Structure\n\n### Main Views\n\n1. **Home (Dashboard)**\n   - KPI metrics overview\n   - Recent activity\n   - Quick actions\n\n2. **Account Master**\n   - All accounts table\n   - Filtering options\n   - Add/edit actions\n\n3. **People & Team**\n   - Team members\n   - Roles and permissions\n   - Engagement metrics\n\n4. **Objectives**\n   - Strategic goals\n   - Progress tracking\n   - Milestone view\n\n5. **Health Metrics**\n   - Score visualizations\n   - Trend indicators\n   - Benchmark comparison\n\n6. **Initiatives**\n   - Active projects\n   - Timeline view\n   - Resource allocation\n\n### Workbenches\n\nQuick links to:\n- RevOps Dashboard\n- SalesOps Dashboard\n- Personal Dashboard\n\n---\n\n## KPI Metrics (Home View)\n\nFour key metrics displayed in card grid:\n\n1. **Active Accounts**\n   - Count of all active accounts\n   - Change indicator\n   - Green tint background\n\n2. **Avg Health Score**\n   - Portfolio average\n   - Percentage format\n   - Trend comparison\n\n3. **At-Risk Accounts**\n   - Count of accounts below threshold\n   - Warning indicator\n   - Action link available\n\n4. **Critical Signals**\n   - Intelligence alerts\n   - Real-time count\n   - Notification badge\n\n---\n\n## Dark Mode Implementation\n\nAll components include dark mode support:\n\n```tsx\nclassName=\"bg-white dark:bg-slate-900\"\nclassName=\"text-slate-900 dark:text-white\"\nclassName=\"border-slate-200 dark:border-slate-800\"\n```\n\nUsers can toggle dark mode via settings panel.\n\n---\n\n## Accessibility Features\n\n✓ Semantic HTML elements\n✓ Proper heading hierarchy (h1 → h2 → p)\n✓ Keyboard navigation (Tab, Enter, Escape)\n✓ WCAG AA contrast ratios (4.5:1 minimum)\n✓ Icon + text labels\n✓ Focus states on all interactive elements\n✓ ARIA labels where appropriate\n\n---\n\n## Performance Optimizations\n\n✓ Image optimization (next/image)\n✓ Lazy loading for views\n✓ Memoized components\n✓ CSS-in-JS minimal overhead\n✓ Efficient re-renders\n\n---\n\n## Customization Guide\n\n### Modify Colors\n\nEdit `packages/domain-shells/utils/branding.ts`:\n\n```typescript\nconst themeConfig = {\n  colors: {\n    primary: '#your-color',\n    accent: '#your-accent',\n  }\n}\n```\n\n### Add New Navigation Items\n\nUpdate `navItems` array in component:\n\n```typescript\nconst navItems = [\n  { id: \"custom\", label: \"Custom View\", icon: CustomIcon },\n  // ...\n];\n```\n\n### Adjust Spacing\n\nModify Tailwind classes:\n\n```tsx\n// Increase padding\np-8  // increase from 32px to 40px\ngap-4 // increase from 16px to 20px\n```\n\n---\n\n## Browser Support\n\n- Chrome/Edge: Latest 2 versions\n- Firefox: Latest 2 versions\n- Safari: Latest 2 versions\n- Mobile browsers: Full support\n\n---\n\n## Future Enhancements\n\n- [ ] Customizable KPI metrics\n- [ ] Drag-and-drop dashboard builder\n- [ ] Advanced filtering on tables\n- [ ] Real-time data updates (WebSocket)\n- [ ] Export functionality\n- [ ] Custom chart integrations\n- [ ] Advanced analytics panel\n\n---\n\n## File Reference\n\n**Main Component:**\n- `packages/domain-shells/account-success-shell-v0.tsx` (414 lines)\n\n**Dependencies:**\n- `packages/domain-shells/hooks/use-workbench-integration.ts`\n- `packages/domain-shells/utils/branding.ts`\n- `packages/domain-shells/components/theme-switcher.tsx`\n\n**Exports:**\n```typescript\nexport { AccountSuccessShellV0 } from '@integratewise/domain-shells';\n```\n\n---\n\n## Migration Guide (From Redesigned to V0)\n\nIf upgrading from `AccountSuccessShellRedesigned`:\n\n1. **Replace import:**\n   ```typescript\n   // Old\n   // New\n   ```\n\n2. **No prop changes needed** — Both use same integration hooks\n\n3. **Visual differences:**\n   - V0 has cleaner card-based layout\n   - Green accent color dominant\n   - Sidebar more minimal\n   - Command bar simplified\n\n---\n\n## Testing Checklist\n\n- [ ] Render on desktop/tablet/mobile\n- [ ] Dark mode toggle works\n- [ ] All navigation items functional\n- [ ] Search input receives focus\n- [ ] Keyboard shortcuts work (⌘K)\n- [ ] KPI cards display data\n- [ ] Table renders with accounts\n- [ ] Sidebar collapse/expand smooth\n- [ ] No console errors\n- [ ] All hover states visible\n\n---\n\n## Summary\n\nThe `AccountSuccessShellV0` component provides a clean, professional dashboard matching the V0 aesthetic. It's production-ready, fully typed, and integrates with all 7 integration hooks for real backend connectivity.\n\nDeploy with confidence. 🚀\n"}