# Whiteboard System - Task Breakdown

## Pre-requisites

- [ ] Section 01 Database Schema completed
- [ ] Fabric.js library available via CDN or local

## Tasks

### Task 1: Create WhiteboardManager Class

**Estimated Complexity**: Medium
**Files**: `userfrosting/models/Class/Daybook/WhiteboardManager.php`

**Acceptance Criteria**:
- [ ] `getTodayCanvas()` returns canvas data or empty object
- [ ] `saveCanvas()` creates or updates canvas record
- [ ] `clearCanvas()` resets canvas and logs action
- [ ] `getItems()` returns non-expired overlay items
- [ ] `addItem()` creates item and logs action
- [ ] `updateItem()` updates specified fields only
- [ ] `deleteItem()` removes item and logs action
- [ ] `cleanupExpired()` removes expired items
- [ ] Tests pass

---

### Task 2: Create WhiteboardApiController

**Estimated Complexity**: Medium
**Files**: `userfrosting/controllers/Daybook/WhiteboardApiController.php`

**Acceptance Criteria**:
- [ ] All canvas endpoints implemented
- [ ] All item endpoints implemented
- [ ] Ably events published on changes
- [ ] Input validation complete
- [ ] Tests pass

---

### Task 3: Create Routes

**Estimated Complexity**: Low
**Files**: `userfrosting/routes/daybook/whiteboard.php`

**Acceptance Criteria**:
- [ ] All endpoints defined
- [ ] Permission checks applied
- [ ] Routes included in bootstrap

---

### Task 4: Create Frontend Whiteboard Class

**Estimated Complexity**: High
**Files**: `public_html/js/workspace/modules/daybook/whiteboard.js`

**Acceptance Criteria**:
- [ ] Fabric.js canvas initialized
- [ ] Drawing tools work (pen, brush, marker)
- [ ] Shape tools work (rectangle, circle, line)
- [ ] Text tool works
- [ ] Eraser tool works
- [ ] Color picker works
- [ ] Brush size slider works
- [ ] Canvas loads existing data
- [ ] Auto-save with debounce
- [ ] Undo/redo support (optional)
- [ ] Tests pass

---

### Task 5: Create Sticky Note Component

**Estimated Complexity**: Medium
**Files**: Part of `whiteboard.js`

**Acceptance Criteria**:
- [ ] Sticky note creation with color options
- [ ] Editable text content
- [ ] Drag to move
- [ ] Resize handles
- [ ] Delete button
- [ ] Real-time sync
- [ ] Tests pass

---

### Task 6: Implement Real-time Sync

**Estimated Complexity**: High
**Files**: `whiteboard.js` + Ably integration

**Acceptance Criteria**:
- [ ] Drawing strokes sync to other clients
- [ ] Sticky notes sync (add, move, edit, delete)
- [ ] Canvas clear syncs
- [ ] No echo (don't process own messages)
- [ ] Graceful handling of conflicts
- [ ] Tests pass

---

### Task 7: Create Whiteboard Template

**Estimated Complexity**: Medium
**Files**: `userfrosting/templates/themes/default/daybook/partials/whiteboard.html`

**Acceptance Criteria**:
- [ ] Canvas container
- [ ] Toolbar with tool buttons
- [ ] Color picker
- [ ] Brush size slider
- [ ] Clear button with confirmation
- [ ] Last edited by indicator
- [ ] Responsive layout

---

### Task 8: Create Whiteboard CSS

**Estimated Complexity**: Low
**Files**: `public_html/css/workspace/modules/whiteboard.css`

**Acceptance Criteria**:
- [ ] Toolbar styling
- [ ] Active tool indicator
- [ ] Color swatches
- [ ] Canvas container styling
- [ ] Sticky note popup styling
- [ ] Mobile/touch friendly

---

### Task 9: Create Cleanup Cron Script

**Estimated Complexity**: Low
**Files**: `userfrosting/scripts/daybook-whiteboard-cleanup.php`

**Acceptance Criteria**:
- [ ] Removes expired items
- [ ] Logs cleanup actions
- [ ] Can be run via cron

---

### Task 10: Add Touch/Stylus Support

**Estimated Complexity**: Medium
**Files**: `whiteboard.js`

**Acceptance Criteria**:
- [ ] Touch drawing works
- [ ] Pressure sensitivity (if supported)
- [ ] Prevent accidental gestures
- [ ] Works on tablets

---

## Testing Tasks

### Test 1: WhiteboardManager Unit Tests

**File**: `userfrosting/tests/Daybook/Unit/WhiteboardManagerTest.php`

**Test Cases**:
- [ ] `test_getTodayCanvas_returns_empty_when_none_exists`
- [ ] `test_saveCanvas_creates_new_record`
- [ ] `test_saveCanvas_updates_existing_record`
- [ ] `test_clearCanvas_resets_data`
- [ ] `test_addItem_creates_item`
- [ ] `test_cleanupExpired_removes_expired_items`

---

### Test 2: WhiteboardApiController Integration Tests

**File**: `userfrosting/tests/Daybook/Integration/WhiteboardApiControllerTest.php`

**Test Cases**:
- [ ] `test_getCanvas_returns_canvas_data`
- [ ] `test_saveCanvas_stores_json`
- [ ] `test_addItem_creates_sticky`
- [ ] `test_updateItem_changes_position`
- [ ] `test_deleteItem_removes_item`

---

## Completion Checklist

- [ ] Backend manager created
- [ ] API controller created
- [ ] Routes defined
- [ ] Frontend JavaScript created
- [ ] Templates created
- [ ] CSS created
- [ ] Real-time sync working
- [ ] Touch support tested
- [ ] Cleanup cron configured
- [ ] All tests passing