UI Component Prompts

Coditect Activity Dashboard

Document Version: 1.0
Date: November 27, 2025

This document contains prompts for generating each UI component of the Activity Dashboard. Each prompt is designed to be used with an AI UI generator or as specifications for development.

Project Summary Bar
Task Kanban Board
Task Card
Activity Feed
Blocker Panel
Work Distribution Chart
Project Selector
Unified Dashboard

1. Project Summary Bar

Component Name

ProjectSummaryBar

UI Prompt

Create a horizontal project summary bar component for a development dashboard.

LAYOUT:
- Horizontal bar spanning full width of container
- Each project displayed as a row with: name, progress bar, metrics, and status indicator
- Maximum 5 projects visible; scrollable if more
- Compact design: each row approximately 48px height

CONTENT PER PROJECT ROW:
- Project name (left-aligned, bold, 14px)
- Progress bar (horizontal, 200px wide):
  - Fill color: #22c55e (green) for progress
  - Background: #e5e7eb (gray)
  - Show percentage text inside bar (right-aligned, white text)
- Task count: "N/M tasks" format (muted gray text)
- Commit count: "X commits" with git icon (small, muted)
- Blocker indicator: Red dot if project has blocked tasks, hidden otherwise

STYLING:
- Background: White (#ffffff)
- Border: 1px solid #e5e7eb
- Border-radius: 8px
- Shadow: subtle (0 1px 3px rgba(0,0,0,0.1))
- Hover state: Light blue background (#f0f9ff)
- Selected state: Blue left border (3px, #3b82f6)

INTERACTIONS:
- Click on row selects project (triggers onProjectSelect callback)
- Hover shows tooltip with full project name if truncated

DATA PROPS:
- projects: Array of { id, name, progress_pct, tasks_completed, tasks_total, commits_count, has_blockers }
- selectedProjectId: string | null
- onProjectSelect: (projectId: string) => void

RESPONSIVE:
- On mobile (<640px): Stack vertically, hide commit count
- Progress bar shrinks to fit available space

Sample Data

const sampleProjects = [
  {
    id: 'proj-1',
    name: 'Auth System',
    progress_pct: 58,
    tasks_completed: 7,
    tasks_total: 12,
    commits_count: 3,
    has_blockers: true
  },
  {
    id: 'proj-2',
    name: 'Payment Gateway',
    progress_pct: 40,
    tasks_completed: 4,
    tasks_total: 10,
    commits_count: 1,
    has_blockers: false
  },
  {
    id: 'proj-3',
    name: 'User Dashboard',
    progress_pct: 70,
    tasks_completed: 14,
    tasks_total: 20,
    commits_count: 5,
    has_blockers: false
  }
];

2. Task Kanban Board

Component Name

KanbanBoard

UI Prompt

Create a Kanban board component for task management with status columns.

LAYOUT:
- Horizontal columns for each status: PENDING, IN PROGRESS, REVIEW, DONE
- BLOCKED tasks shown as special highlighting within IN PROGRESS column (not separate column)
- Equal column widths, responsive to container
- Column headers with status name and task count badge
- Scrollable task list within each column (max-height: 400px)

COLUMN CONFIGURATION:
1. PENDING (Gray header #6b7280)
   - Tasks with status='pending' AND checked=false
   - Icon: Circle outline
   
2. IN PROGRESS (Blue header #3b82f6)
   - Tasks with status='in_progress'
   - Icon: Play circle
   - Blocked tasks highlighted with orange border
   
3. REVIEW (Purple header #8b5cf6)
   - Tasks with status='review'
   - Icon: Eye
   
4. DONE (Green header #22c55e)
   - Tasks with checked=true
   - Icon: Check circle
   - Tasks show checkmark overlay

COLUMN STYLING:
- Background: #f9fafb (light gray)
- Header: Colored bar (4px) at top matching status color
- Border-radius: 8px
- Gap between columns: 16px
- Min column width: 240px

TASK CARDS:
- Use TaskCard component (see separate prompt)
- Vertically stacked with 8px gap
- Drag handle visible on hover (future: drag-and-drop)

EMPTY STATE:
- Show dashed border placeholder
- Text: "No tasks" in muted gray
- Smaller text: status-specific hint (e.g., "Drag tasks here to start")

INTERACTIONS:
- Click on task card opens task detail
- Column headers clickable to expand/collapse
- Keyboard navigation: Arrow keys to move between cards

DATA PROPS:
- kanban: { columns: Array<{ status, label, tasks, count }> }
- onTaskClick: (taskId: string) => void
- onTaskMove: (taskId: string, newStatus: string) => void (future)

RESPONSIVE:
- On mobile (<768px): Horizontal scroll for columns
- On tablet (768-1024px): 2 columns visible, scroll for others

Sample Data

const sampleKanban = {
  columns: [
    {
      status: 'pending',
      label: 'Pending',
      count: 2,
      tasks: [
        { id: 't1', title: 'Rate Limiting', checked: false, status: 'pending', complexity: 'M' },
        { id: 't2', title: 'Error Handling', checked: false, status: 'pending', complexity: 'S' }
      ]
    },
    {
      status: 'in_progress',
      label: 'In Progress',
      count: 2,
      tasks: [
        { id: 't3', title: 'Refresh Token Logic', checked: false, status: 'in_progress', complexity: 'L', progress: 60 },
        { id: 't4', title: 'MFA Setup', checked: false, status: 'blocked', complexity: 'M', blocked_reason: 'Awaiting API spec' }
      ]
    },
    {
      status: 'review',
      label: 'Review',
      count: 0,
      tasks: []
    },
    {
      status: 'done',
      label: 'Done',
      count: 3,
      tasks: [
        { id: 't5', title: 'JWT Tokens', checked: true, status: 'done', complexity: 'L' },
        { id: 't6', title: 'Auth Schema', checked: true, status: 'done', complexity: 'M' },
        { id: 't7', title: 'Login Form', checked: true, status: 'done', complexity: 'S' }
      ]
    }
  ]
};

3. Task Card

Component Name

TaskCard

UI Prompt

Create a task card component for display within the Kanban board.

LAYOUT:
- Compact card design (full column width, ~80-120px height)
- Checkbox on left side
- Title and metadata stacked vertically
- Status indicators on right side

CONTENT STRUCTURE:
┌─────────────────────────────────────────┐
│ ☐ Task Title                       [M]  │
│   └ 3 commits • 2 sessions              │
│   ████████░░░░░░░░ 60%     [BLOCKED]    │
└─────────────────────────────────────────┘

ELEMENTS:
1. Checkbox (left side)
   - Unchecked: Empty circle outline
   - Checked: Filled green circle with white checkmark
   - Clickable to toggle completion

2. Title (main content)
   - Font: 14px, semi-bold
   - Max 2 lines, ellipsis if longer
   - Color: #111827 (dark gray)

3. Complexity badge (top right)
   - Small pill: S/M/L/XL
   - Colors: S=#d1fae5, M=#fef3c7, L=#fed7aa, XL=#fecaca
   - Font: 10px, bold

4. Evidence line (below title)
   - Format: "N commits • M sessions"
   - Only show if > 0
   - Font: 12px, muted gray (#6b7280)
   - Icons: git-commit, message-circle

5. Progress bar (if in_progress)
   - Only show for tasks with progress value
   - Thin bar (4px height)
   - Percentage text on right

6. Blocked badge (if status='blocked')
   - Orange/amber background (#fef3c7)
   - Text: "BLOCKED" in orange (#d97706)
   - Position: bottom right

STATES:
- Default: White background, subtle shadow
- Hover: Light blue background (#f0f9ff), stronger shadow
- Selected: Blue border (2px, #3b82f6)
- Blocked: Orange left border (3px, #f59e0b)
- Completed: Muted colors, strikethrough on title

INTERACTIONS:
- Click anywhere on card (except checkbox) opens detail view
- Click checkbox toggles completion
- Hover shows full title in tooltip if truncated

DATA PROPS:
- task: { id, title, checked, status, complexity?, progress?, linked_commits_count, linked_sessions_count, blocked_reason? }
- onToggle: (taskId: string, checked: boolean) => void
- onClick: (taskId: string) => void

Sample Data

const sampleTasks = [
  {
    id: 't1',
    title: 'Implement JWT token refresh with automatic retry logic',
    checked: false,
    status: 'in_progress',
    complexity: 'L',
    progress: 60,
    linked_commits_count: 3,
    linked_sessions_count: 2
  },
  {
    id: 't2',
    title: 'MFA Setup',
    checked: false,
    status: 'blocked',
    complexity: 'M',
    linked_commits_count: 0,
    linked_sessions_count: 1,
    blocked_reason: 'Awaiting API spec from auth provider'
  },
  {
    id: 't3',
    title: 'JWT Tokens',
    checked: true,
    status: 'done',
    complexity: 'L',
    linked_commits_count: 5,
    linked_sessions_count: 3
  }
];

4. Activity Feed

Component Name

ActivityFeed

UI Prompt

Create an activity feed component showing recent highlights (max 5 items).

LAYOUT:
- Vertical list of activity items
- Compact design fitting in sidebar or card
- Header: "Recent Activity" with refresh button
- Fixed height, no scroll (exactly 5 items max)

ACTIVITY ITEM STRUCTURE:
┌─────────────────────────────────────────┐
│ 🔷 ☑ JWT tokens complete                │
│      └ 3 commits, 2 sessions            │
│                              2 hours ago│
└─────────────────────────────────────────┘

ELEMENTS PER ITEM:
1. Icon (left side, 20x20px)
   - task_completed: Green checkmark (✓)
   - blocked: Orange warning (⚠)
   - commit: Purple git branch icon
   - session: Blue chat bubble
   - status_change: Gray arrow

2. Title (main text)
   - Font: 14px, regular weight
   - Prefix based on type:
     - task_completed: "☑ {title}"
     - blocked: "⚠️ {title}"
     - commit: "{sha}: {message}"
     - session: "Session: {topic}"

3. Subtitle (secondary text)
   - Font: 12px, muted gray
   - Examples: "3 commits, 2 sessions", "Awaiting review"
   - Only show if present

4. Timestamp (right-aligned)
   - Relative format: "2h ago", "Yesterday", "Nov 25"
   - Font: 11px, light gray

5. Project indicator (if in portfolio view)
   - Small colored dot matching project
   - Project name on hover

STYLING:
- Card background: White
- Item separator: 1px border-bottom #f3f4f6
- Item padding: 12px vertical
- Icon column width: 32px
- Hover: Light gray background (#f9fafb)

INTERACTIONS:
- Click on item navigates to source (task, commit, or session)
- Hover shows project name tooltip
- "View all" link at bottom (optional)

EMPTY STATE:
- Show: "No recent activity"
- Subtext: "Activity will appear here as work progresses"
- Icon: Clock with empty state

DATA PROPS:
- activities: Array<{ id, type, title, subtitle?, project_id, project_name, task_id?, timestamp, icon }>
- onActivityClick: (activityId: string, type: string) => void
- maxItems: number (default: 5)

Sample Data

const sampleActivities = [
  {
    id: 'act-1',
    type: 'task_completed',
    title: '☑ JWT tokens complete',
    subtitle: '3 commits, 2 sessions',
    project_id: 'proj-1',
    project_name: 'Auth System',
    task_id: 't5',
    timestamp: '2025-11-27T14:30:00Z',
    icon: 'check'
  },
  {
    id: 'act-2',
    type: 'commit',
    title: 'abc123: Add refresh token logic',
    subtitle: '+45/-12 lines',
    project_id: 'proj-1',
    project_name: 'Auth System',
    timestamp: '2025-11-27T13:15:00Z',
    icon: 'git'
  },
  {
    id: 'act-3',
    type: 'task_completed',
    title: '☑ Login form merged',
    subtitle: 'PR #42 approved',
    project_id: 'proj-1',
    project_name: 'Auth System',
    task_id: 't7',
    timestamp: '2025-11-27T11:00:00Z',
    icon: 'check'
  },
  {
    id: 'act-4',
    type: 'session',
    title: 'Session: Rate limiting design',
    subtitle: 'Started 2h ago',
    project_id: 'proj-1',
    project_name: 'Auth System',
    timestamp: '2025-11-27T12:30:00Z',
    icon: 'chat'
  },
  {
    id: 'act-5',
    type: 'blocked',
    title: '⚠️ MFA Setup blocked',
    subtitle: 'Awaiting API spec',
    project_id: 'proj-1',
    project_name: 'Auth System',
    task_id: 't4',
    timestamp: '2025-11-27T10:00:00Z',
    icon: 'alert'
  }
];

5. Blocker Panel

Component Name

BlockerPanel

UI Prompt

Create an attention-required panel showing blocked tasks that need intervention.

LAYOUT:
- Card with warning/alert styling
- Header: "⚠️ Attention Required" with count badge
- List of blocked items (expandable if > 3)
- Prominent placement - should catch user's eye

HEADER:
- Icon: Warning triangle (⚠️) in orange/amber
- Title: "Attention Required"
- Count badge: Red circle with number of blockers
- Collapse/expand button if many items

BLOCKER ITEM STRUCTURE:
┌─────────────────────────────────────────┐
│ ⚠️ MFA Setup                            │
│    Blocked: Awaiting API spec           │
│    Project: Auth System                 │
│    Task List: Backend Tasks             │
│    Blocked for: 3 days                  │
│    [View Task] [Mark Resolved]          │
└─────────────────────────────────────────┘

ELEMENTS PER BLOCKER:
1. Task title (bold, 14px)
   - Warning icon prefix
   - Truncate if too long

2. Blocked reason (primary detail)
   - Label: "Blocked:"
   - Value: reason text or "No reason specified"
   - Font: 13px, dark gray

3. Context info (secondary)
   - Project name
   - Task list name
   - Days blocked (highlighted if > 3 days)

4. Quick actions (buttons)
   - "View Task": Opens task detail
   - "Mark Resolved": Quick status change
   - Small, subtle buttons

STYLING:
- Card background: #fffbeb (warm amber tint)
- Border: 1px solid #fcd34d (amber)
- Header background: #fef3c7
- Item separator: Dashed border
- Warning icon: #f59e0b (orange)
- "Days blocked" badge: Red if > 3 days

STATES:
- Empty state: "No blockers - all clear! ✓" with green styling
- 1-3 items: Show all
- 4+ items: Show first 3, "Show N more" expand button

INTERACTIONS:
- Click item expands to show full details
- "View Task" navigates to task detail
- "Mark Resolved" triggers status change with confirmation

DATA PROPS:
- blockers: Array<{ task_id, task_title, project_id, project_name, task_list_name, blocked_reason?, days_blocked }>
- onViewTask: (taskId: string) => void
- onResolve: (taskId: string) => void

RESPONSIVE:
- Full width on mobile
- Side panel on desktop

Sample Data

const sampleBlockers = [
  {
    task_id: 't4',
    task_title: 'MFA Setup',
    project_id: 'proj-1',
    project_name: 'Auth System',
    task_list_name: 'Backend Tasks',
    blocked_reason: 'Awaiting API spec from auth provider',
    days_blocked: 3
  },
  {
    task_id: 't12',
    task_title: 'Payment Webhook Integration',
    project_id: 'proj-2',
    project_name: 'Payment Gateway',
    task_list_name: 'Integration',
    blocked_reason: 'External dependency on Stripe API update',
    days_blocked: 1
  }
];

6. Work Distribution Chart

Component Name

WorkDistributionChart

UI Prompt

Create a work distribution chart showing effort allocation across projects.

LAYOUT:
- Horizontal bar chart (preferred) or pie/donut chart
- Header with title and time range selector
- Legend showing project names and percentages
- Compact design fitting in dashboard card

CHART TYPE: Horizontal Bars (Recommended)
┌─────────────────────────────────────────┐
│ Work Distribution (This Week)    [▼]    │
├─────────────────────────────────────────┤
│ Auth System     ████████████████ 45%    │
│ Payment Gateway █████████░░░░░░░ 25%    │
│ User Dashboard  ███████░░░░░░░░░ 20%    │
│ Documentation   ████░░░░░░░░░░░░ 10%    │
└─────────────────────────────────────────┘

ELEMENTS:
1. Header
   - Title: "Work Distribution"
   - Time range dropdown: Day / Week / Month
   - Info icon with tooltip explaining calculation

2. Bars (per project)
   - Project name (left-aligned, 120px width)
   - Bar (flex-grow, colored by project)
   - Percentage (right-aligned, 40px)
   - Commits badge (optional): "12 commits"

3. Color coding
   - Each project has assigned color
   - Suggested palette:
     - #3b82f6 (blue)
     - #22c55e (green)
     - #f59e0b (amber)
     - #8b5cf6 (purple)
     - #ec4899 (pink)

STYLING:
- Card background: White
- Bar background: #e5e7eb (gray)
- Bar height: 24px
- Bar border-radius: 4px
- Gap between bars: 8px
- Hover: Darken bar, show tooltip with details

TOOLTIP ON HOVER:
"Auth System: 45%
- 12 commits
- 8 sessions  
- 3 tasks completed"

INTERACTIONS:
- Hover shows detailed breakdown tooltip
- Click on bar filters dashboard to that project
- Time range selector updates chart data

DATA PROPS:
- distribution: Array<{ project_id, project_name, percentage, commit_count, session_count, tasks_completed, color }>
- timeRange: 'day' | 'week' | 'month'
- onTimeRangeChange: (range: string) => void
- onProjectClick: (projectId: string) => void

Sample Data

const sampleDistribution = [
  {
    project_id: 'proj-1',
    project_name: 'Auth System',
    percentage: 45,
    commit_count: 12,
    session_count: 8,
    tasks_completed: 3,
    color: '#3b82f6'
  },
  {
    project_id: 'proj-2',
    project_name: 'Payment Gateway',
    percentage: 25,
    commit_count: 4,
    session_count: 5,
    tasks_completed: 1,
    color: '#22c55e'
  },
  {
    project_id: 'proj-3',
    project_name: 'User Dashboard',
    percentage: 20,
    commit_count: 6,
    session_count: 10,
    tasks_completed: 2,
    color: '#f59e0b'
  },
  {
    project_id: 'proj-4',
    project_name: 'Documentation',
    percentage: 10,
    commit_count: 2,
    session_count: 3,
    tasks_completed: 1,
    color: '#8b5cf6'
  }
];

7. Project Selector

Component Name

ProjectSelector

UI Prompt

Create a project selector dropdown for filtering the dashboard view.

LAYOUT:
- Dropdown button showing current selection
- Dropdown menu with project list
- "All Projects" option at top
- Search/filter for many projects

BUTTON (Collapsed State):
┌─────────────────────────────────────────┐
│ 📁 Auth System                    ▼     │
└─────────────────────────────────────────┘

- Or for all projects:
┌─────────────────────────────────────────┐
│ 📊 All Projects (3)               ▼     │
└─────────────────────────────────────────┘

DROPDOWN MENU (Expanded):
┌─────────────────────────────────────────┐
│ 🔍 Search projects...                   │
├─────────────────────────────────────────┤
│ ✓ All Projects                          │
├─────────────────────────────────────────┤
│   📁 Auth System          58% ████░░    │
│   📁 Payment Gateway      40% ███░░░    │
│   📁 User Dashboard       70% █████░    │
└─────────────────────────────────────────┘

ELEMENTS:
1. Selected indicator
   - Icon: Folder for single project, chart for all
   - Project name or "All Projects (N)"
   - Dropdown arrow

2. Search input (if > 5 projects)
   - Placeholder: "Search projects..."
   - Filter list as user types

3. "All Projects" option
   - Always first in list
   - Shows total project count
   - Checkmark if selected

4. Project items
   - Folder icon
   - Project name
   - Mini progress bar (40px wide)
   - Percentage text
   - Checkmark if selected

STYLING:
- Button: White background, border, rounded
- Dropdown: White, shadow, max-height 300px (scroll)
- Selected item: Light blue background
- Hover: Light gray background
- Progress bars: Match project colors

INTERACTIONS:
- Click button toggles dropdown
- Click item selects and closes
- Type to filter (if search enabled)
- Keyboard: Arrow keys navigate, Enter selects
- Click outside closes dropdown

DATA PROPS:
- projects: Array<{ id, name, progress_pct, color }>
- selectedProjectId: string | null (null = all projects)
- onSelect: (projectId: string | null) => void

RESPONSIVE:
- Full width on mobile
- Fixed width (240px) on desktop

8. Unified Dashboard

Component Name

ActivityDashboard

UI Prompt

Create the unified Activity Dashboard that combines all components into a cohesive, non-scrolling view.

OVERALL LAYOUT:
┌─────────────────────────────────────────────────────────────────────────────┐
│  CODITECT                                    [All Projects ▼]  [⚙ Settings] │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  ┌─ PROJECT SUMMARY BAR ────────────────────────────────────────────────┐  │
│  │  [ProjectSummaryBar component - all projects with progress]          │  │
│  └──────────────────────────────────────────────────────────────────────┘  │
│                                                                             │
│  ┌─ TASK JOURNEY ─────────────────────────────────────────────────────────┐│
│  │                                                                         ││
│  │  [KanbanBoard component - PENDING | IN PROGRESS | REVIEW | DONE]       ││
│  │                                                                         ││
│  └─────────────────────────────────────────────────────────────────────────┘│
│                                                                             │
│  ┌─ RECENT ACTIVITY ──────────────┐  ┌─ ATTENTION REQUIRED ──────────────┐ │
│  │                                │  │                                   │ │
│  │  [ActivityFeed - 5 items]      │  │  [BlockerPanel - exceptions]      │ │
│  │                                │  │                                   │ │
│  └────────────────────────────────┘  └───────────────────────────────────┘ │
│                                                                             │
│  ┌─ WORK DISTRIBUTION ──────────────────────────────────────────────────┐  │
│  │  [WorkDistributionChart - horizontal bars by project]                │  │
│  └──────────────────────────────────────────────────────────────────────┘  │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

GRID STRUCTURE:
- Use CSS Grid for responsive layout
- Desktop (>1024px): 
  - Header: full width
  - Project Summary: full width
  - Kanban: full width
  - Activity + Blockers: 2 columns (60% / 40%)
  - Work Distribution: full width

- Tablet (768-1024px):
  - Same as desktop but narrower
  - Kanban horizontally scrollable

- Mobile (<768px):
  - Single column stack
  - Kanban columns horizontal scroll
  - Activity and Blockers stacked

HEADER:
- Logo/brand: "CODITECT" (left)
- Project selector dropdown (center-right)
- Settings gear icon (right)
- Height: 60px
- Background: White with bottom border

SECTION STYLING:
- Each section has:
  - Title bar with label
  - Card container (white, rounded, shadow)
  - Consistent padding (16px)
  - Margin between sections (16px)

COLOR PALETTE:
- Background: #f3f4f6 (light gray)
- Cards: #ffffff (white)
- Primary: #3b82f6 (blue)
- Success: #22c55e (green)
- Warning: #f59e0b (amber)
- Error: #ef4444 (red)
- Text primary: #111827
- Text secondary: #6b7280
- Border: #e5e7eb

TYPOGRAPHY:
- Font family: Inter, system-ui, sans-serif
- Page title: 24px, bold
- Section titles: 16px, semi-bold
- Body text: 14px, regular
- Small text: 12px, regular

KEY CONSTRAINTS:
1. NO SCROLLING on primary view (800px viewport height)
2. Maximum 5 activity items
3. Blockers always visible if any exist
4. Progress visible at a glance
5. Exception-based display (hide uniform data)

STATE MANAGEMENT:
- Dashboard-level state:
  - selectedProjectId: string | null
  - timeRange: 'day' | 'week' | 'month'
  - isLoading: boolean
  - error: string | null

- Data from API:
  - portfolioSummary: ProjectSummary[]
  - kanban: KanbanBoard
  - recentActivity: ActivityHighlight[]
  - blockedTasks: BlockedTask[]
  - workDistribution: WorkDistribution[]

INTERACTIONS:
1. Project selection: Updates Kanban to show selected project
2. Time range: Updates work distribution
3. Task click: Opens task detail modal/drawer
4. Activity click: Navigates to relevant item
5. Blocker actions: Quick resolve or view task

LOADING STATES:
- Skeleton loaders for each section
- Staggered animation (top to bottom)
- Subtle pulse effect

ERROR STATES:
- Error banner at top of dashboard
- Retry button
- Graceful degradation (show cached data if available)

REAL-TIME UPDATES:
- WebSocket connection for live updates
- Subtle animation when data changes
- Toast notifications for significant events

DATA FLOW:
1. On mount: Fetch dashboard data
2. On project select: Refetch with filter
3. On WebSocket event: Update relevant sections
4. Periodic refresh: Every 60 seconds (background)

Component Composition

// ActivityDashboard.tsx
import React from 'react';
import { ProjectSummaryBar } from './ProjectSummaryBar';
import { KanbanBoard } from './KanbanBoard';
import { ActivityFeed } from './ActivityFeed';
import { BlockerPanel } from './BlockerPanel';
import { WorkDistributionChart } from './WorkDistributionChart';
import { ProjectSelector } from './ProjectSelector';
import { useDashboardStore } from '../stores/dashboardStore';
import { useDashboardWebSocket } from '../hooks/useDashboardWebSocket';

export function ActivityDashboard() {
  const {
    portfolioSummary,
    selectedProjectId,
    kanban,
    recentActivity,
    blockedTasks,
    workDistribution,
    isLoading,
    selectProject,
    timeRange,
    setTimeRange
  } = useDashboardStore();

  // Connect WebSocket for real-time updates
  useDashboardWebSocket(portfolioSummary.map(p => p.project_id));

  return (
    <div className="dashboard-container">
      {/* Header */}
      <header className="dashboard-header">
        <h1>CODITECT</h1>
        <ProjectSelector
          projects={portfolioSummary}
          selectedProjectId={selectedProjectId}
          onSelect={selectProject}
        />
        <button className="settings-btn">⚙</button>
      </header>

      {/* Main Content */}
      <main className="dashboard-main">
        {/* Project Summary */}
        <section className="section-summary">
          <ProjectSummaryBar
            projects={portfolioSummary}
            selectedProjectId={selectedProjectId}
            onProjectSelect={selectProject}
          />
        </section>

        {/* Kanban Board */}
        <section className="section-kanban">
          <h2>Task Journey</h2>
          <KanbanBoard
            kanban={kanban}
            onTaskClick={handleTaskClick}
          />
        </section>

        {/* Activity + Blockers Row */}
        <div className="section-row">
          <section className="section-activity">
            <h2>Recent Activity</h2>
            <ActivityFeed
              activities={recentActivity}
              onActivityClick={handleActivityClick}
            />
          </section>

          <section className="section-blockers">
            <BlockerPanel
              blockers={blockedTasks}
              onViewTask={handleViewTask}
              onResolve={handleResolveBlocker}
            />
          </section>
        </div>

        {/* Work Distribution */}
        <section className="section-distribution">
          <WorkDistributionChart
            distribution={workDistribution}
            timeRange={timeRange}
            onTimeRangeChange={setTimeRange}
            onProjectClick={selectProject}
          />
        </section>
      </main>
    </div>
  );
}

CSS Grid Layout

.dashboard-container {
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  flex-direction: column;
}

.dashboard-header {
  height: 60px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.dashboard-main {
  flex: 1;
  padding: 16px 24px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 16px;
  overflow: hidden;
}

.section-summary {
  /* Full width */
}

.section-kanban {
  min-height: 0; /* Allow shrinking */
  overflow: hidden;
}

.section-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
}

.section-distribution {
  /* Full width */
}

/* Responsive */
@media (max-width: 768px) {
  .section-row {
    grid-template-columns: 1fr;
  }
  
  .dashboard-main {
    overflow-y: auto;
  }
}

Usage Notes

For AI UI Generators

When using these prompts with AI UI generation tools (v0, Bolt, etc.):

Provide one component at a time - Start with atomic components (TaskCard), then build up
Include sample data - Paste the sample data with the prompt
Specify framework - Add "Using React with Tailwind CSS" or your preferred stack
Iterate - Refine styling and interactions in follow-up prompts

For Development Teams

Component Library - Build these as a shared component library
Storybook - Create stories for each component with various states
Testing - Use sample data for unit and integration tests
Accessibility - Ensure ARIA labels, keyboard navigation, focus management

Customization Points

Color palette can be theme-customized
Time ranges can be extended (quarter, year)
Activity types can be added/removed
Chart types can be swapped (bar ↔ pie)

Document History

Version	Date	Author	Changes
1.0	2025-11-27	Design Team	Initial 8 component prompts

Coditect Activity Dashboard

Table of Contents​

1. Project Summary Bar​

Component Name​

UI Prompt​

Sample Data​

2. Task Kanban Board​

Component Name​

UI Prompt​

Sample Data​

3. Task Card​

Component Name​

UI Prompt​

Sample Data​

4. Activity Feed​

Component Name​

UI Prompt​

Sample Data​

5. Blocker Panel​

Component Name​

UI Prompt​

Sample Data​

6. Work Distribution Chart​

Component Name​

UI Prompt​

Sample Data​

7. Project Selector​

Component Name​

UI Prompt​

8. Unified Dashboard​

Component Name​

UI Prompt​

Component Composition​

CSS Grid Layout​

Usage Notes​

For AI UI Generators​

For Development Teams​

Customization Points​

Document History​

Table of Contents

1. Project Summary Bar

Component Name

UI Prompt

Sample Data

2. Task Kanban Board

Component Name

UI Prompt

Sample Data

3. Task Card

Component Name

UI Prompt

Sample Data

4. Activity Feed

Component Name

UI Prompt

Sample Data

5. Blocker Panel

Component Name

UI Prompt

Sample Data

6. Work Distribution Chart

Component Name

UI Prompt

Sample Data

7. Project Selector

Component Name

UI Prompt

8. Unified Dashboard

Component Name

UI Prompt

Component Composition

CSS Grid Layout

Usage Notes

For AI UI Generators

For Development Teams

Customization Points

Document History