lime-website

As an admin, I want to use the backend API for projects so that I can create projects, invite members, and manage team composition. Implement FastAPI endpoints: POST /projects (create project with name, description, color, visibility), GET /projects (list all projects with stats), GET /projects/{id} (detail with members, task count, progress), POST /projects/{id}/invite (invite member by email with role assignment: admin/employee), DELETE /projects/{id}/members/{user_id} (remove member), PATCH /projects/{id} (update), DELETE /projects/{id} (archive/delete). Include MySQL models with Alembic migrations.

As a user, I want to use the frontend Login page so that I can sign in to my lime workspace. Implement the Login page based on the existing JSX design (v2). The page consists of two panels: BrandPanel (left, hidden on mobile) with logo, tagline 'Track Time. Drive Growth.', animated task card with progress ring, and trust points; and LoginFormPanel (right) with frosted-glass card, email input, password input with show/hide toggle, Forgot Password link, Sign In CTA with ripple effect, and Request Access link. Includes animated particle background via PageShell. References the Login (v2) design.

As a user, I want to use the backend API for tasks so that I can create, assign, view, and manage tasks on the board. Implement FastAPI endpoints: POST /tasks (admin creates task with name, description, project, assignee, priority, status), GET /tasks (list by project/assignee with filters), GET /tasks/{id} (task detail with timer logs and comments), PATCH /tasks/{id} (update status, assignee, priority), DELETE /tasks/{id}, POST /tasks/{id}/comments (add comment), PATCH /tasks/reorder (drag-drop board reorder). Include MySQL models and Alembic migrations.

As a user, I want to use the frontend Dashboard page so that I can view my task timers, progress rings, and (for admins) heatmap report visualizations. Implement the Dashboard page based on the existing JSX design (v2). Includes: TopBar with IST live clock, Sidebar with navigation, real-time animated task timer with start/pause/stop ripple effect, dynamic draggable task cards with progress rings that fill in real-time, and admin heatmap-style report visualization with color gradients. Micro-interactions: card bounce on drag, timer button ripple, progress ring glow near completion. Entry point after login for both Employee and Admin personas.

As a user, I want to use the frontend Task Board page so that I can view assigned tasks, create tickets, and clock in/out of tasks. Implement the Task Board page based on the existing JSX design (v2). Includes: TopBar, Sidebar (with Reports as active state for admin), Kanban columns (To Do, In Progress, Done) with draggable task cards that bounce on drag, each card with progress ring, timer icon animating when active, assignee avatar, priority badge, and a clock-in/clock-out button. Admin view includes 'Create Task' CTA and task assignment. Employee view shows only assigned tasks. Connects to Task Detail page on card click.

As an admin, I want to use the frontend Projects page so that I can create projects and invite team members. Implement the Projects page based on the existing JSX design (v2). Includes: ProjectsPageHeader with 'Create Project' CTA, ProjectsStatsStrip with Total/Active Projects, Team Members, Hours Logged stat cards, ProjectsToolbar with filter pills and view toggle, ProjectsGrid with glassmorphism project cards (progress ring, member avatars, task count, context menu), CreateProjectModal (form with name, description, color picker, visibility toggle), and InviteMembersModal (email input queue with pills, role selector, current members list, Send Invites CTA with checkmark burst animation). Admin-only components hidden for Employee role.

As an employee, I want to use the backend API for timers so that I can clock in and clock out of tasks and have my time tracked in IST. Implement FastAPI endpoints: POST /tasks/{id}/clock-in (start timer, record IST start timestamp), POST /tasks/{id}/clock-out (stop timer, calculate duration), GET /tasks/{id}/timer-logs (history of all clock-in/out entries for a task), GET /timers/active (get currently active timer for logged-in user). All timestamps stored and returned in IST (UTC+5:30). Admin endpoints: GET /timers (all active timers across projects), PATCH /timers/{log_id} (admin manual adjustment).

As an admin, I want to use the frontend Reports page so that I can generate reports on time spent per task, per employee, and per project. Implement the Reports page based on the existing JSX design (v2). Includes: ReportHeader with 'Generate Report' CTA, ReportFilters bar (date range IST, project multi-select, employee multi-select, report type toggle By Task/Employee/Project, Apply Filters with active chips), SummaryStatsStrip (Total Hours, Active Projects, Top Contributor, Avg Task Duration), HeatmapVisualization (full-width grid, color gradients near-black to lime-green, hover tooltip with IST timestamp, animated cell fade-in), BreakdownCharts (donut + bar chart with animated draw-on-mount), DetailedReportTable (paginated, sortable, IST times, card-list on mobile), and ExportActions (Export CSV, Export PDF, Share Report with IST note).

As a user, I want the frontend Task Board page to be connected to the backend APIs so that I can view, create, assign, and manage tasks in real time. Wire up: GET /tasks for board columns filtered by project/assignee, POST /tasks for admin task creation, PATCH /tasks/{id} for status updates and drag-drop reorder via PATCH /tasks/reorder, clock-in/clock-out buttons to POST /tasks/{id}/clock-in and /clock-out with optimistic timer animation. Role-based rendering: admin sees create/assign controls, employee sees only assigned tasks.

As an admin, I want the frontend Projects page to be connected to the backend APIs so that I can create projects and invite members with real data. Wire up: GET /projects for ProjectsGrid, POST /projects for CreateProjectModal form submission with validation, POST /projects/{id}/invite for InviteMembersModal send invites, DELETE /projects/{id}/members/{user_id} for member removal, GET /projects stats for ProjectsStatsStrip. Handle optimistic UI updates, error toasts, and loading skeletons.

As an admin, I want to use the backend API for reports so that I can generate and export time-tracking reports per task, employee, and project. Implement FastAPI endpoints: GET /reports/summary (total hours, active projects, top contributor, avg task duration for a date range), GET /reports/heatmap (time intensity grid by employee/project x day, IST), GET /reports/by-task (detailed time entries grouped by task), GET /reports/by-employee (hours per employee), GET /reports/by-project (hours per project), GET /reports/export/csv and GET /reports/export/pdf (generate downloadable reports). All date filters use IST. Supports query params: date_from, date_to, project_id, employee_id, report_type.

As an employee, I want to use the frontend Task Detail page so that I can start and stop a timer for a specific task. Implement the Task Detail page based on the existing JSX design (v2). Includes: task title, description, assignee, project breadcrumb, status badge, animated real-time timer display (IST formatted), Start Timer / Stop Timer buttons with ripple effect, progress ring visualization filling in real-time, time log history entries, and comments section. Navigated to from Task Board card click. Back navigation returns to Task Board.

As a user, I want the frontend Dashboard page to be connected to the backend APIs so that the task timer, progress rings, and heatmap visualizations show real data. Wire up the Dashboard page to: GET /auth/me for user context and role-based view, GET /timers/active for the real-time animated timer display, GET /tasks for the dynamic task board with live progress, and GET /reports/heatmap for the admin heatmap visualization. Implement polling or WebSocket for real-time timer updates. Handle loading states and error boundaries.

As an employee, I want the frontend Task Detail page to be connected to the backend APIs so that I can start/stop timers and see my time logs in real time. Wire up: GET /tasks/{id} for task metadata and description, GET /tasks/{id}/timer-logs for time log history displayed in IST, POST /tasks/{id}/clock-in and /clock-out for Start/Stop Timer buttons with ripple effect and progress ring animation, POST /tasks/{id}/comments for comment submission. Real-time timer counter that increments live using setInterval. Handle concurrent session conflicts gracefully.

As an admin, I want the frontend Reports page to be connected to the backend APIs so that I can generate and view real reports. Wire up: GET /reports/summary for SummaryStatsStrip metrics, GET /reports/heatmap for HeatmapVisualization grid with IST cell tooltips, GET /reports/by-task, /by-employee, /by-project for BreakdownCharts and DetailedReportTable based on active ReportFilters, Apply Filters button triggers API re-fetch with filter params, Export CSV/PDF buttons to GET /reports/export/csv and /pdf triggering file download. Handle empty states and loading skeletons.