stash

Author: rob-at-cortex

.github/instructions/development.md.instructions.md

@@ -12,6 +12,21 @@ make all components responsive by default. Use CSS media queries or utility clas
 Use CSS Grid or Flexbox for layout. Avoid using fixed widths or heights unless absolutely necessary.
 All components should be composable with all props and actions being passed down to child components. This allows for greater flexibility and reusability. Do not hardcode test data within the components. where sensible, put test data within a "tests" folder in the root of the project.
 
+Testing is vitest and should be done using the Vitest framework. Write unit tests for all components, focusing on functionality, rendering, and interactions. Use the `@testing-library/react` library for testing React components.
+Use the `@testing-library/jest-dom` library for custom matchers like `toBeInTheDocument`, `toHaveClass`, and `toHaveStyle`. This helps make tests more readable and expressive.
+Use the `@testing-library/user-event` library for simulating user interactions in tests. This allows for more realistic testing of component behavior.
+Use the `@testing-library/react-hooks` library for testing custom hooks. This allows for isolated testing of hook logic without the need for a full component render.
+Use the `@testing-library/react` library's `render` function to render components in tests. This provides a clean and isolated environment for testing component behavior.
+Use the `@testing-library/react` library's `screen` object to query elements in tests. This provides a consistent and readable way to access elements in the rendered component.
+Use the `@testing-library/react` library's `fireEvent` function for simulating events in tests. This allows for testing of user interactions and component behavior in response to those interactions.
+Use the `@testing-library/react` library's `waitFor` function for asynchronous tests. This allows for waiting for elements to appear or change state before making assertions.
+Use the `@testing-library/react` library's `act` function for wrapping state updates in tests. This ensures that all updates are processed before making assertions.
+Use the `@testing-library/react` library's `cleanup` function to unmount components after each test. This helps prevent memory leaks and ensures a clean testing environment.
+Use the `@testing-library/react` library's `debug` function to log the current state of the component in tests.
+This can be useful for debugging test failures and understanding the component's state at the time of the failure.
+
+Don't try and guess command line tests to run. pnpm run build pnpm run typecheck and pnpm run test will run the tests we need.
+Dont run storybook as i have it running in a docker container. If you need to test components, use the Storybook instance running in the container.
 
 Use Framer Motion for animations and transitions. Ensure that animations are smooth and enhance the user experience without being distracting.
 Use Shadcn UI components where possible for consistency in design and behavior. If a component does not exist in Shadcn UI, create a custom component that adheres to the design system.

src/components/DigitalColleagues/ManagementSidebar.tsx

@@ -18,7 +18,7 @@ interface ManagementSidebarProps {
   projects: Project[];
   epics: Epic[];
   sprints: Sprint[];
-  currentView: 'kanban' | 'planning' | 'files' | 'epics';
+  currentView: 'kanban' | 'planning' | 'tasks' | 'files' | 'epics';
   onUpdateProject: (projectId: string, updates: Partial<Project>) => void;
   onDeleteProject: (projectId: string) => void;
   onAddProject: (project: Omit<Project, 'id'>) => void;
@@ -28,7 +28,7 @@ interface ManagementSidebarProps {
   onAddSprint: (sprint: Omit<Sprint, 'id'>) => void;
   onUpdateSprint: (sprintId: string, updates: Partial<Sprint>) => void;
   onDeleteSprint: (sprintId: string) => void;
-  onViewChange: (view: 'kanban' | 'planning' | 'files' | 'epics') => void;
+  onViewChange: (view: 'kanban' | 'planning' | 'tasks' | 'files' | 'epics') => void;
   mobileMenuOpen: boolean;
   onToggleMobileMenu: () => void;
 }
@@ -368,6 +368,22 @@ const ManagementSidebarContent: React.FC<ManagementSidebarProps> = ({
             Files
           </span>
         </button>
+        
+        <button
+          onClick={() => {
+            onViewChange('tasks');
+            setActiveSection(null);
+          }}
+          className={`flex-1 w-12 flex items-center justify-center text-white transition-all duration-200 relative overflow-hidden group/btn ${
+            currentView === 'tasks' ? 'bg-purple-600' : 'bg-purple-500 hover:bg-purple-600'
+          } hover:w-28 hover:justify-start hover:pl-3`}
+          title="Tasks"
+        >
+          <Calendar className="h-4 w-4 flex-shrink-0" />
+          <span className="text-xs font-medium whitespace-nowrap opacity-0 group-hover/btn:opacity-100 transition-opacity duration-200 absolute left-8">
+            Tasks
+          </span>
+        </button>
       </div>
 
       {/* Mobile Overlay - Truly full screen */}

src/components/DigitalColleagues/TasksView.stories.tsx

@@ -0,0 +1,198 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { TasksView } from './TasksView';
+import type { Reminder, DigitalColleague } from './TasksView';
+
+const meta: Meta<typeof TasksView> = {
+  title: 'DC/Views/TasksView',
+  component: TasksView,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof TasksView>;
+
+const mockColleagues: DigitalColleague[] = [
+  { id: '1', name: 'Alex AI', department: 'Development', role: 'Senior Developer' },
+  { id: '2', name: 'Maya Bot', department: 'Design', role: 'UX Designer' },
+  { id: '3', name: 'Sam Assistant', department: 'Marketing', role: 'Marketing Specialist' },
+  { id: '4', name: 'Jordan Helper', department: 'Support', role: 'Customer Success' },
+  { id: '5', name: 'Riley Automation', department: 'Operations', role: 'DevOps Engineer' },
+];
+
+const mockReminders: Reminder[] = [
+  {
+    id: '1',
+    title: 'Review quarterly report',
+    description: 'Go through Q4 performance metrics and prepare summary for the team meeting',
+    dueDate: new Date(2024, 2, 15), // March 15, 2024
+    dueTime: '14:30',
+    colleague: mockColleagues[0],
+    isCompleted: false,
+    isRecurring: false,
+    priority: 'high',
+    reminderEnabled: true,
+    reminderMinutes: 30,
+    createdAt: new Date(2024, 2, 10),
+    tags: ['quarterly', 'review', 'urgent']
+  },
+  {
+    id: '2',
+    title: 'Weekly team standup',
+    description: 'Join the weekly team synchronization meeting to discuss progress and blockers',
+    dueDate: new Date(2024, 2, 18), // March 18, 2024
+    dueTime: '10:00',
+    colleague: mockColleagues[1],
+    isCompleted: false,
+    isRecurring: true,
+    recurrencePattern: 'weekly',
+    recurrenceInterval: 1,
+    priority: 'medium',
+    reminderEnabled: true,
+    reminderMinutes: 15,
+    createdAt: new Date(2024, 2, 11),
+    tags: ['meeting', 'standup', 'weekly']
+  },
+  {
+    id: '3',
+    title: 'Update project documentation',
+    description: 'Refresh the README and add new API documentation for the latest features',
+    dueDate: new Date(2024, 2, 20), // March 20, 2024
+    colleague: mockColleagues[2],
+    isCompleted: true,
+    isRecurring: false,
+    priority: 'low',
+    reminderEnabled: false,
+    createdAt: new Date(2024, 2, 12),
+    completedAt: new Date(2024, 2, 19),
+    tags: ['documentation', 'api']
+  },
+  {
+    id: '4',
+    title: 'Follow up on customer feedback',
+    description: 'Reach out to customers who provided feedback last week and discuss next steps',
+    dueDate: new Date(2024, 2, 14), // March 14, 2024 (overdue)
+    dueTime: '16:00',
+    colleague: mockColleagues[3],
+    isCompleted: false,
+    isRecurring: false,
+    priority: 'high',
+    reminderEnabled: true,
+    reminderMinutes: 60,
+    createdAt: new Date(2024, 2, 8),
+    tags: ['customer', 'feedback', 'follow-up']
+  },
+  {
+    id: '5',
+    title: 'Monthly backup verification',
+    description: 'Verify that all systems are backing up correctly and data integrity is maintained',
+    dueDate: new Date(), // Today
+    dueTime: '09:00',
+    colleague: mockColleagues[4],
+    isCompleted: false,
+    isRecurring: true,
+    recurrencePattern: 'monthly',
+    recurrenceInterval: 1,
+    priority: 'medium',
+    reminderEnabled: true,
+    reminderMinutes: 1440, // 1 day before
+    createdAt: new Date(2024, 1, 15),
+    tags: ['backup', 'verification', 'monthly', 'system']
+  },
+  {
+    id: '6',
+    title: 'Design review session',
+    description: 'Review the latest mockups and prototypes with the design team',
+    dueDate: new Date(Date.now() + 24 * 60 * 60 * 1000), // Tomorrow
+    dueTime: '11:30',
+    colleague: mockColleagues[1],
+    isCompleted: false,
+    isRecurring: false,
+    priority: 'medium',
+    reminderEnabled: true,
+    reminderMinutes: 30,
+    createdAt: new Date(),
+    tags: ['design', 'review', 'mockups']
+  }
+];
+
+export const Default: Story = {
+  args: {
+    initialReminders: mockReminders,
+    initialColleagues: mockColleagues,
+    onAddReminder: action('onAddReminder'),
+    onUpdateReminder: action('onUpdateReminder'),
+    onDeleteReminder: action('onDeleteReminder'),
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    initialReminders: [],
+    initialColleagues: mockColleagues,
+    onAddReminder: action('onAddReminder'),
+    onUpdateReminder: action('onUpdateReminder'),
+    onDeleteReminder: action('onDeleteReminder'),
+  },
+};
+
+export const CompletedOnly: Story = {
+  args: {
+    initialReminders: mockReminders.filter(r => r.isCompleted),
+    initialColleagues: mockColleagues,
+    onAddReminder: action('onAddReminder'),
+    onUpdateReminder: action('onUpdateReminder'),
+    onDeleteReminder: action('onDeleteReminder'),
+  },
+};
+
+export const OverdueOnly: Story = {
+  args: {
+    initialReminders: mockReminders.filter(r => {
+      const now = new Date();
+      const due = new Date(r.dueDate);
+      if (r.dueTime) {
+        const [hours, minutes] = r.dueTime.split(':');
+        due.setHours(parseInt(hours), parseInt(minutes));
+      }
+      return due < now && !r.isCompleted;
+    }),
+    initialColleagues: mockColleagues,
+    onAddReminder: action('onAddReminder'),
+    onUpdateReminder: action('onUpdateReminder'),
+    onDeleteReminder: action('onDeleteReminder'),
+  },
+};
+
+export const HighPriorityOnly: Story = {
+  args: {
+    initialReminders: mockReminders.filter(r => r.priority === 'high'),
+    initialColleagues: mockColleagues,
+    onAddReminder: action('onAddReminder'),
+    onUpdateReminder: action('onUpdateReminder'),
+    onDeleteReminder: action('onDeleteReminder'),
+  },
+};
+
+export const RecurringOnly: Story = {
+  args: {
+    initialReminders: mockReminders.filter(r => r.isRecurring),
+    initialColleagues: mockColleagues,
+    onAddReminder: action('onAddReminder'),
+    onUpdateReminder: action('onUpdateReminder'),
+    onDeleteReminder: action('onDeleteReminder'),
+  },
+};
+
+export const WithInteractions: Story = {
+  args: {
+    initialReminders: mockReminders,
+    initialColleagues: mockColleagues,
+    onAddReminder: action('onAddReminder'),
+    onUpdateReminder: action('onUpdateReminder'),
+    onDeleteReminder: action('onDeleteReminder'),
+  },
+};

src/components/DigitalColleagues/TasksView.test.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { TasksView } from './TasksView';
+import type { Reminder, DigitalColleague } from './TasksView';
+
+// Mock colleagues for testing
+const mockColleagues: DigitalColleague[] = [
+  { id: '1', name: 'Alex AI', department: 'Development', role: 'Senior Developer' },
+  { id: '2', name: 'Maya Bot', department: 'Design', role: 'UX Designer' },
+];
+
+// Mock reminders for testing
+const mockReminders: Reminder[] = [
+  {
+    id: '1',
+    title: 'Test reminder',
+    description: 'This is a test reminder',
+    dueDate: new Date(2024, 2, 15),
+    dueTime: '14:30',
+    colleague: mockColleagues[0],
+    isCompleted: false,
+    isRecurring: false,
+    priority: 'high',
+    reminderEnabled: true,
+    reminderMinutes: 30,
+    createdAt: new Date(2024, 2, 10),
+    tags: ['test']
+  },
+];
+
+describe('TasksView', () => {
+  it('renders the TasksView component', () => {
+    render(
+      <TasksView
+        initialReminders={mockReminders}
+        initialColleagues={mockColleagues}
+      />
+    );
+    
+    expect(screen.getByText('Task Reminders')).toBeInTheDocument();
+    expect(screen.getByText('Test reminder')).toBeInTheDocument();
+  });
+
+  it('displays stats correctly', () => {
+    render(
+      <TasksView
+        initialReminders={mockReminders}
+        initialColleagues={mockColleagues}
+      />
+    );
+    
+    expect(screen.getByText('1')).toBeInTheDocument(); // Total count
+    expect(screen.getByText('Total')).toBeInTheDocument();
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+  });
+
+  it('can toggle reminder completion', () => {
+    const mockOnUpdate = jest.fn();
+    
+    render(
+      <TasksView
+        initialReminders={mockReminders}
+        initialColleagues={mockColleagues}
+        onUpdateReminder={mockOnUpdate}
+      />
+    );
+    
+    const checkButton = screen.getByRole('button', { name: /toggle complete/i });
+    fireEvent.click(checkButton);
+    
+    expect(mockOnUpdate).toHaveBeenCalledWith('1', {
+      isCompleted: true,
+      completedAt: expect.any(Date)
+    });
+  });
+
+  it('can filter reminders', () => {
+    render(
+      <TasksView
+        initialReminders={mockReminders}
+        initialColleagues={mockColleagues}
+      />
+    );
+    
+    const filterSelect = screen.getByRole('combobox');
+    fireEvent.click(filterSelect);
+    
+    expect(screen.getByText('All (1)')).toBeInTheDocument();
+    expect(screen.getByText('Pending (1)')).toBeInTheDocument();
+  });
+
+  it('can search reminders', () => {
+    render(
+      <TasksView
+        initialReminders={mockReminders}
+        initialColleagues={mockColleagues}
+      />
+    );
+    
+    const searchInput = screen.getByPlaceholderText('Search reminders...');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+    
+    expect(screen.getByText('Test reminder')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no reminders', () => {
+    render(
+      <TasksView
+        initialReminders={[]}
+        initialColleagues={mockColleagues}
+      />
+    );
+    
+    expect(screen.getByText('No reminders yet')).toBeInTheDocument();
+    expect(screen.getByText('Create your first reminder to get started')).toBeInTheDocument();
+  });
+});