TaskMaster Flow

Employee Task & Project Tracker — assign work, watch projects progress, track time, spot bottlenecks and balance team workload. Built as a Vue 3 single-page app on a Laravel 12 REST API, with MySQL in production and a frappe-gantt timeline.

Stack: Vue.js · Laravel · MySQL · Gantt.js (frappe-gantt) · Chart.js

---

Features

Area	What you get
Tasks	Create/assign tasks with title, description, priority (high/medium/low), status (pending / in-progress / done), start date, deadline, hour estimate and tags.
Task board	A drag-and-drop kanban (Pending → In Progress → Done) with live filters: search, priority, project, assignee and tag.
Projects	Project cards with a live progress bar, task counts, status and due date; a detail page with a per-project Gantt timeline and a radial progress ring.
Time tracking	Start/stop a timer on any task (single active timer, shown live in the top bar); tracked hours roll up per task, project and person.
Bottleneck report	A dashboard alert counting delayed tasks (past deadline, not done), grouped by project and listed with how many days late.
Team workload	Per-member load bars — open hours vs weekly capacity — so you can rebalance before anyone is overloaded.
Gantt chart	A portfolio timeline (frappe-gantt) with Day/Week/Month views; bars are coloured by priority and dashed when overdue.
Calendar	A month grid placing every task on its deadline; click to open.
Email reminders	A scheduled command e-mails each assignee a digest of tasks due soon. Runs weekdays at 08:00, or on demand from the dashboard.
Dashboard	KPIs, project progress, bottleneck alert, workload, status & priority doughnut charts and the next 7 days of deadlines.

---

Tech stack

• Backend: Laravel 12 (REST API), Eloquent, form-request validation, a scheduled Artisan command + Mailable for reminders.
• Frontend: Vue 3 (<script setup>), Vue Router, Pinia, Axios, frappe-gantt, Chart.js, date-fns — bundled with Vite.
• Database: MySQL 8 (via Docker); SQLite supported for a zero-config local run.
• Design: a bespoke "Indigo Flow" light theme (indigo primary, coral/teal/amber semantics) — hand-written CSS design tokens, no UI framework.

---

Getting started

Option A — MySQL (the intended stack)

composer install
npm install

cp .env.example .env
php artisan key:generate

docker compose up -d          # MySQL 8 on :3306 (+ Adminer on :8788)
php artisan migrate --seed    # schema + demo data (6 people, 5 projects, ~55 tasks)

npm run build                 # or `npm run dev` for HMR
php artisan serve --port=8787 # http://localhost:8787

Option B — zero-config (SQLite, no Docker)

composer install && npm install
cp .env.example .env
sed -i 's/^DB_CONNECTION=mysql/DB_CONNECTION=sqlite/' .env   # or edit by hand
php artisan key:generate
touch database/database.sqlite
php artisan migrate --seed
npm run build && php artisan serve --port=8787

Open http://localhost:8787.

Scripts

Command	Description
php artisan serve --port=8787	Run the app (API + SPA)
npm run dev	Vite dev server with hot reload
npm run build	Production asset build
php artisan migrate:fresh --seed	Rebuild and reseed the database
php artisan tasks:remind	Send deadline-reminder emails now (--days=N to widen the window)
php artisan schedule:work	Run the scheduler locally (fires tasks:remind weekdays at 08:00)

---

API

All endpoints are under /api (stateless JSON).

Method	Endpoint	Purpose
GET	/api/dashboard	KPIs, project progress, bottleneck, workload, distributions, upcoming
GET/POST	/api/tasks	List (with search, priority, status, project_id, employee_id, tag_id) / create
GET/PUT/DELETE	/api/tasks/{id}	Show / update / delete
POST	/api/tasks/{id}/timer/start · /stop	Time tracking
GET	/api/timer/active	The currently running timer
CRUD	/api/projects, /api/employees, /api/tags	Resource endpoints
GET/POST	/api/reminders/preview · /api/reminders/run	Inspect / send deadline reminders

---

Architecture

app/
├── Models/                # Employee, Project, Task, Tag, TimeEntry (Eloquent + accessors)
├── Http/Controllers/Api/  # Dashboard, Task, Project, Employee, Tag, TimeEntry, Reminder
├── Services/ReminderService.php   # due-soon digest logic (shared by command + API)
├── Console/Commands/SendDeadlineReminders.php   # tasks:remind
└── Mail/DeadlineReminder.php      # markdown reminder email

database/
├── migrations/            # employees, projects, tags, tasks, task_tag, time_entries
└── seeders/DatabaseSeeder.php     # realistic demo data incl. overdue tasks

resources/
├── css/app.css            # "Indigo Flow" design tokens + shell + primitives
├── views/app.blade.php    # SPA shell (mounts Vue)
└── js/
    ├── app.js · router.js · api.js · format.js
    ├── stores/            # Pinia: meta, tasks, ui
    ├── components/        # Sidebar, TopBar, TaskCard, TaskModal, GanttChart, ChartView, …
    └── views/             # Dashboard, Board, Projects, ProjectDetail, Gantt, Calendar, Team

The API layer is the only thing that touches the database; the Vue SPA talks to it exclusively over /api, so the backend could be swapped without touching the UI.

License

Apache License 2.0.