From 80539fd1990a449e342e630502e512a218345aa2 Mon Sep 17 00:00:00 2001
From: Drew Galbraith <drew@tiramisu.one>
Date: Mon, 22 Sep 2025 02:19:04 -0700
Subject: [PATCH] Update plan.

---
 plan/01_CORE_MVP/frontend.md | 56 +++++++++++++++++++-----------------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/plan/01_CORE_MVP/frontend.md b/plan/01_CORE_MVP/frontend.md
index 993ef31..9188f0a 100644
--- a/plan/01_CORE_MVP/frontend.md
+++ b/plan/01_CORE_MVP/frontend.md
@@ -107,7 +107,26 @@ captains-log/
 
 ## Phase 3: Core Components (Days 5-6)
 
-### Task 3.1: Task Card Component
+**UI Framework**: Use Material-UI (MUI) for consistent design system and components alongside Tailwind CSS for custom styling.
+
+### Task 3.1: Main App Component and Routing
+- [ ] **Files**: `frontend/src/App.tsx`, `frontend/src/main.tsx`
+  - Setup React Router with basic navigation
+  - Create main layout with MUI AppBar/Drawer and task area
+  - Implement responsive design with MUI breakpoints and Tailwind utilities
+  - Add MUI loading states (CircularProgress) and error boundaries
+  - Configure MUI theme with custom colors
+  - **Expected outcome**: Full application loads and navigates properly with Material Design
+
+### Task 3.2: Task List Component
+- [ ] **File**: `frontend/src/components/TaskList.tsx`
+  - Display tasks using MUI List/Grid components
+  - Filter tasks by status using MUI Chip/Select components
+  - Sort tasks with MUI Select dropdown
+  - Implement virtual scrolling with MUI virtualization
+  - **Expected outcome**: TaskList displays tasks efficiently with Material Design
+
+### Task 3.3: Task Card Component
 - [ ] **File**: `frontend/src/components/TaskCard.tsx`
   - Display task with title, description, status, dates
   - Implement inline editing for title and description
@@ -116,15 +135,16 @@ captains-log/
   - Mobile-friendly touch interactions
   - **Expected outcome**: TaskCard displays and edits tasks correctly
 
-### Task 3.2: Task Form Component
+### Task 3.4: Task Form Component
 - [ ] **File**: `frontend/src/components/TaskForm.tsx`
-  - Create/edit form with all task properties
-  - Form validation and error display
-  - Handle form submission with API calls
-  - Support both modal and inline modes
-  - **Expected outcome**: TaskForm creates and updates tasks
+  - Create/edit form using Formik for form state management
+  - Use MUI TextField, Select, and Button components
+  - Form validation with Yup schema and error display
+  - Handle form submission with API calls through Formik onSubmit
+  - Support both MUI Dialog modal and inline modes
+  - **Expected outcome**: TaskForm creates and updates tasks with robust form handling
 
-### Task 3.3: Quick Capture Component
+### Task 3.5: Quick Capture Component
 - [ ] **File**: `frontend/src/components/QuickCapture.tsx`
   - Minimal input for rapid task creation
   - Auto-focus and keyboard shortcuts
@@ -132,14 +152,14 @@ captains-log/
   - Smart defaults for new tasks
   - **Expected outcome**: QuickCapture enables fast task entry
 
-### Task 3.4: Status Badge Component
+### Task 3.6: Status Badge Component
 - [ ] **File**: `frontend/src/components/StatusBadge.tsx`
   - Visual status indicators with colors
   - Consistent styling across components
   - Accessible color schemes
   - **Expected outcome**: StatusBadge provides clear status visualization
 
-### Task 3.5: Component Unit Tests
+### Task 3.7: Component Unit Tests
 - [ ] **Files**: `frontend/tests/components/*.test.tsx`
   - Test all components with React Testing Library
   - Test user interactions and state changes
@@ -149,22 +169,6 @@ captains-log/
 
 ## Phase 4: Main Application (Days 7-8)
 
-### Task 4.1: Task List Component
-- [ ] **File**: `frontend/src/components/TaskList.tsx`
-  - Display tasks in organized list/grid layout
-  - Filter tasks by status (Todo, In Progress, Done, Someday)
-  - Sort tasks by created date, priority, due date
-  - Implement virtual scrolling for performance
-  - **Expected outcome**: TaskList displays tasks efficiently
-
-### Task 4.2: Main App Component and Routing
-- [ ] **Files**: `frontend/src/App.tsx`, `frontend/src/main.tsx`
-  - Setup React Router with basic navigation
-  - Create main layout with header and task area
-  - Implement responsive design with Tailwind
-  - Add loading states and error boundaries
-  - **Expected outcome**: Full application loads and navigates properly
-
 ### Task 4.3: State Management and Persistence
 - [ ] **File**: `frontend/src/hooks/useApi.ts`
   - Implement localStorage for offline task caching