104 lines
4.0 KiB
Markdown
104 lines
4.0 KiB
Markdown
# Task Progress Overview — Stacked Multi-Segment Progress Bars
|
|
|
|
Enhance the Project Show Overview tab and Index listing to display detailed task progress with stacked status bars (Pending / In Progress / Completed) and a main progress bar that only tracks completed tasks.
|
|
|
|
## Proposed Changes
|
|
|
|
### Backend — TaskController
|
|
|
|
---
|
|
|
|
#### [MODIFY] [TaskController.php](file:///c:/laragon/www/gsb-cons/Modules/ProjectManagement/app/Http/Controllers/TaskController.php)
|
|
|
|
**`updateProjectCompletion()`** — Change from `avg(completion_percentage)` to count-based:
|
|
|
|
```php
|
|
$completed = $tasks->where('status', 'completed')->count();
|
|
$total = $tasks->count();
|
|
$project->update(['completion_percentage' => $total > 0 ? round(($completed / $total) * 100, 2) : 0]);
|
|
```
|
|
|
|
**`store()`** — Add `$this->updateProjectCompletion($project)` after creating a new task, so adding a task re-dilutes the progress denominator.
|
|
|
|
**`destroy()`** — Add `$this->updateProjectCompletion($project)` after deleting a task, so removing a task recalculates progress.
|
|
|
|
---
|
|
|
|
### Backend — ProjectController
|
|
|
|
#### [MODIFY] [ProjectController.php](file:///c:/laragon/www/gsb-cons/Modules/ProjectManagement/app/Http/Controllers/ProjectController.php)
|
|
|
|
**`show()`** — Compute and pass `taskStats` to the frontend:
|
|
|
|
```php
|
|
'taskStats' => [
|
|
'total' => $project->tasks->count(),
|
|
'pending' => $project->tasks->where('status', 'pending')->count(),
|
|
'in_progress' => $project->tasks->where('status', 'in_progress')->count(),
|
|
'completed' => $project->tasks->where('status', 'completed')->count(),
|
|
],
|
|
```
|
|
|
|
> Tasks are already eager-loaded, so this adds zero extra queries.
|
|
|
|
---
|
|
|
|
### Frontend — Show.tsx Overview Tab
|
|
|
|
#### [MODIFY] [Show.tsx](file:///c:/laragon/www/gsb-cons/Modules/ProjectManagement/resources/js/Pages/Projects/Show.tsx)
|
|
|
|
Replace the current single green progress bar (lines 218-224) with:
|
|
|
|
**1. Main Progress Header**
|
|
```
|
|
Progress 3 / 10 tasks completed 30%
|
|
████████████░░░░░░░░░░░░░░░░░░░░░░░░░
|
|
```
|
|
- Green bar, width = `completed / total * 100`
|
|
- Shows `{completed} / {total} tasks completed` label
|
|
|
|
**2. Stacked Segment Bar**
|
|
```
|
|
[▓▓▓▓▓▓▓▓▓▓▓▓▓▓████████████░░░░░░░░░░]
|
|
[completed] [in-progress] [pending]
|
|
```
|
|
- Three adjacent colored segments in a single bar:
|
|
- **Green** (`emerald-500`) = completed %
|
|
- **Blue** (`blue-500`) = in-progress %
|
|
- **Gray** (`gray-300`) = pending %
|
|
- Height `h-2`, purely visual distribution overview
|
|
|
|
**3. Status Detail Rows**
|
|
```
|
|
● Completed ████████████████ 3 tasks (30%)
|
|
● In Progress ████████░░░░░░░░ 3 tasks (30%)
|
|
● Pending ░░░░░░░░░░░░░░░░ 4 tasks (40%)
|
|
```
|
|
- Each row: colored dot, label, mini progress bar, count + percentage
|
|
- Small text `text-xs`, compact layout with `gap-2`
|
|
|
|
**Implementation notes:**
|
|
- Data from `taskStats` prop (computed server-side)
|
|
- Zero-task edge case: show "No tasks yet" message
|
|
- Smooth CSS transitions on bar widths
|
|
|
|
---
|
|
|
|
### Frontend — Index.tsx Progress Cell
|
|
|
|
#### [MODIFY] [Index.tsx](file:///c:/laragon/www/gsb-cons/Modules/ProjectManagement/resources/js/Pages/Projects/Index.tsx)
|
|
|
|
Minor change: the existing mini progress bar in the table (line 176-184) already uses `completion_percentage` which will now reflect the count-based formula. **No changes needed** — it will automatically show correct values from the backend change.
|
|
|
|
---
|
|
|
|
## Verification Plan
|
|
|
|
### Manual Verification
|
|
1. Create a project with 5 tasks. Verify progress = 0%.
|
|
2. Complete 2 tasks → progress should show 40% (2/5).
|
|
3. Add a new task (now 6 total) → progress drops to 33% (2/6).
|
|
4. Delete a pending task (now 5 total) → progress returns to 40% (2/5).
|
|
5. Check that the stacked bar and detail rows update correctly on each action.
|
|
6. Verify the Index listing mini-bar also reflects the count-based percentage.
|