# Task List Admin Enhancement Plan

## Overview
Enhance the existing task list admin page (`/admin/:typeNum/store/taskLists`) with:
1. Ability to create/manage task groups (lists)
2. Task group selector to view one group at a time
3. Drag-and-drop reordering of tasks
4. Mobile responsiveness
5. **Compact task display** - Move day checkboxes to detail/edit view
6. **Task scheduling** - Start date, end date, time of day

## Current State Analysis

### Database Structure
- `taskGroups` table: `id`, `groupName`
- `tasks` table: `id`, `taskName`, `comment`, `taskGroup` (FK), `recurOn`, `priority`, `sortOrder`

### UI Problem
Current task rows show MON-SUN checkboxes inline, taking too much horizontal space:
```
[MON][TUE][WED][THU][FRI][SAT][SUN] Task Name
```

### New Compact Design
```
[Priority Icon] Task Name                    [Edit][Delete]
               "Daily" or "Mon, Wed, Fri"    9:00 AM
```

---

## Database Changes

### Alter `tasks` table
Add new columns for scheduling:
```sql
ALTER TABLE tasks ADD COLUMN startDate DATE DEFAULT NULL;
ALTER TABLE tasks ADD COLUMN endDate DATE DEFAULT NULL;
ALTER TABLE tasks ADD COLUMN timeOfDay TIME DEFAULT NULL;
```

### Migration JSON
Create `userfrosting/migrations/input/20250302_004_tasks_scheduling.json`:
```json
{
  "type": "alter_table",
  "description": "Add scheduling columns to tasks table",
  "database": "{{store}}",
  "check_query": "SHOW COLUMNS FROM tasks LIKE 'startDate'",
  "sql": "ALTER TABLE tasks ADD COLUMN startDate DATE DEFAULT NULL, ADD COLUMN endDate DATE DEFAULT NULL, ADD COLUMN timeOfDay TIME DEFAULT NULL"
}
```

---

## Task 1: Backend - TaskGroup Model & API + Task Scheduling

### New TaskGroup Model
Create `userfrosting/models/Class/TaskGroup.php`:
```php
class TaskGroup extends Store {
    public $id;
    public $groupName;

    public function create();
    public function update();
    public function delete();
    public function get($id);
    public function getAll();
    public function getTaskCount();
}
```

### New/Updated Endpoints
```
POST /api/drs/:typeNum/taskGroups/create
POST /api/drs/:typeNum/taskGroups/:groupID/update
POST /api/drs/:typeNum/taskGroups/:groupID/delete
GET  /api/drs/:typeNum/taskGroups/list

POST /api/drs/:typeNum/tasks/reorder
  - Body: { tasks: [{ taskID, sortOrder, groupID }] }
```

### Update Task Model
Add to `Task.php`:
- `$startDate`
- `$endDate`
- `$timeOfDay`

Update create/update methods to handle new fields.

---

## Task 2: Frontend - Compact Task Display & Group Selector

### New Task Row Layout (Compact)
```html
<li class="task-item" data-task-id="123">
    <span class="drag-handle"><i class="fa fa-bars"></i></span>
    <span class="priority-badge priority-1"><i class="fa fa-exclamation-circle"></i></span>
    <div class="task-content">
        <strong class="task-name">Open All Registers</strong>
        <small class="task-comment text-muted">Test Comment</small>
    </div>
    <div class="task-schedule">
        <span class="days-summary">Daily</span>
        <span class="time-of-day">9:00 AM</span>
    </div>
    <div class="task-actions">
        <button class="btn btn-sm btn-primary edit-btn"><i class="fa fa-edit"></i></button>
        <button class="btn btn-sm btn-danger delete-btn"><i class="fa fa-times"></i></button>
    </div>
</li>
```

### Days Summary Logic
```javascript
function getDaysSummary(recurOn) {
    const days = recurOn.trim().split(' ').filter(d => d);
    if (days.length === 7) return 'Daily';
    if (days.length === 0) return 'Never';
    if (arraysEqual(days, ['MON','TUE','WED','THU','FRI'])) return 'Weekdays';
    if (arraysEqual(days, ['SAT','SUN'])) return 'Weekends';
    return days.join(', ');
}
```

### Group Selector UI
```html
<div class="task-group-selector">
    <select id="groupSelector" class="form-control">
        <option value="all">All Groups</option>
        <option value="1">OPENING</option>
        <option value="2">CLOSING</option>
    </select>
    <button class="btn btn-success" id="addGroupBtn">
        <i class="fa fa-plus"></i> New Group
    </button>
</div>
```

---

## Task 3: Edit Modal with Full Scheduling

### Enhanced Edit Modal
```html
<div class="modal" id="editTaskModal">
    <form id="editTaskForm">
        <div class="form-group">
            <label>Task Name</label>
            <input type="text" name="taskName" class="form-control">
        </div>

        <div class="form-group">
            <label>Comment/Instructions</label>
            <textarea name="comment" class="form-control"></textarea>
        </div>

        <div class="form-group">
            <label>Priority</label>
            <select name="priority" class="form-control">
                <option value="1">High</option>
                <option value="2">Normal</option>
                <option value="3">Low</option>
            </select>
        </div>

        <div class="form-group">
            <label>Recurs On</label>
            <div class="day-checkboxes">
                <label><input type="checkbox" name="days[]" value="MON"> Mon</label>
                <label><input type="checkbox" name="days[]" value="TUE"> Tue</label>
                <label><input type="checkbox" name="days[]" value="WED"> Wed</label>
                <label><input type="checkbox" name="days[]" value="THU"> Thu</label>
                <label><input type="checkbox" name="days[]" value="FRI"> Fri</label>
                <label><input type="checkbox" name="days[]" value="SAT"> Sat</label>
                <label><input type="checkbox" name="days[]" value="SUN"> Sun</label>
            </div>
            <div class="quick-select">
                <button type="button" class="btn btn-xs" data-select="all">Daily</button>
                <button type="button" class="btn btn-xs" data-select="weekdays">Weekdays</button>
                <button type="button" class="btn btn-xs" data-select="weekends">Weekends</button>
                <button type="button" class="btn btn-xs" data-select="none">None</button>
            </div>
        </div>

        <div class="form-group">
            <label>Time of Day (optional)</label>
            <input type="time" name="timeOfDay" class="form-control">
            <small class="text-muted">When should this task be done?</small>
        </div>

        <div class="form-row">
            <div class="form-group col-md-6">
                <label>Start Date</label>
                <input type="date" name="startDate" class="form-control">
                <small class="text-muted">Leave empty for immediate</small>
            </div>
            <div class="form-group col-md-6">
                <label>End Date</label>
                <input type="date" name="endDate" class="form-control">
                <small class="text-muted">Leave empty for indefinite</small>
            </div>
        </div>

        <div class="form-group">
            <label>Task Group</label>
            <select name="taskGroup" class="form-control">
                <!-- Populated dynamically -->
            </select>
        </div>
    </form>
</div>
```

---

## Task 4: Drag-and-Drop Reordering

### Implementation
```javascript
$(".task-list").sortable({
    handle: ".drag-handle",
    placeholder: "task-placeholder",
    connectWith: ".task-list", // Allow moving between groups
    update: function(event, ui) {
        saveSortOrder($(this));
    },
    receive: function(event, ui) {
        // Task moved to different group
        const taskID = ui.item.data('task-id');
        const newGroupID = $(this).data('group-id');
        updateTaskGroup(taskID, newGroupID);
    }
});

function saveSortOrder($list) {
    const tasks = [];
    $list.find('.task-item').each(function(index) {
        tasks.push({
            taskID: $(this).data('task-id'),
            sortOrder: index
        });
    });

    $.post('/api/drs/' + typeNum + '/tasks/reorder', {
        api: storeAPI,
        tasks: JSON.stringify(tasks)
    });
}
```

---

## Task 5: Mobile Responsiveness

### CSS
```css
/* Base task item styles */
.task-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    gap: 10px;
}

.drag-handle {
    cursor: grab;
    color: #ccc;
    padding: 5px;
}

.task-content {
    flex: 1;
    min-width: 0;
}

.task-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-schedule {
    text-align: right;
    font-size: 12px;
    color: #666;
    min-width: 80px;
}

.task-actions {
    display: flex;
    gap: 5px;
}

/* Mobile styles */
@media (max-width: 768px) {
    .task-item {
        flex-wrap: wrap;
    }

    .task-content {
        flex: 1 1 60%;
    }

    .task-schedule {
        flex: 1 1 30%;
    }

    .task-actions {
        flex: 0 0 100%;
        justify-content: flex-end;
        margin-top: 5px;
        padding-top: 5px;
        border-top: 1px dashed #eee;
    }

    /* Touch-friendly buttons */
    .task-actions .btn {
        padding: 10px 15px;
        min-height: 44px;
    }

    /* Always visible on mobile (no hover) */
    .task-actions {
        opacity: 1 !important;
    }
}

@media (max-width: 480px) {
    .task-schedule .days-summary {
        display: block;
    }

    .task-schedule .time-of-day {
        display: block;
    }
}
```

---

## Implementation Order & Agent Assignment

### Agent 1: Backend
1. Create migration for new task columns (startDate, endDate, timeOfDay)
2. Create TaskGroup.php model
3. Update Task.php model with new fields
4. Add TaskGroup API endpoints to drs.php
5. Add task reorder endpoint
6. Run migrations

### Agent 2: Frontend - Template Restructure
1. Redesign task-lists.html with compact layout
2. Add group selector dropdown
3. Add create/edit/delete group modals
4. Update edit task modal with scheduling fields
5. JavaScript for days summary display

### Agent 3: Drag & Drop + Mobile
1. Initialize jQuery UI Sortable with touch support
2. Handle sortable events and save order
3. Add responsive CSS
4. Test on mobile devices

---

## Files to Modify/Create

### New Files
- `userfrosting/models/Class/TaskGroup.php`
- `userfrosting/migrations/input/20250302_004_tasks_scheduling.json`

### Modified Files
- `userfrosting/models/Class/Task.php` - Add scheduling fields
- `userfrosting/models/Class/TaskList.php` - Update queries for new fields
- `userfrosting/routes/groups/drs.php` - Add new endpoints
- `userfrosting/templates/themes/default/store/task-lists.html` - Complete UI overhaul

---

## Testing Checklist
- [ ] Create new task group
- [ ] Edit task group name
- [ ] Delete empty task group
- [ ] Cannot delete group with tasks (or cascade prompt)
- [ ] Switch between groups in selector
- [ ] Create task with scheduling
- [ ] Edit task scheduling
- [ ] Drag-and-drop within same group
- [ ] Drag-and-drop between groups
- [ ] Mobile: touch drag works
- [ ] Mobile: buttons are accessible
- [ ] Mobile: layout is readable