-
-
TaskFlow
-
-
-
- +
- Create Task
-
-
-
- {currentUser.full_name.split(" \).map(n => n[0]).join(\)}
-
-
{currentUser.full_name}
-
+/** Header + team sidebar + main region, per the approved desktop dashboard mockup. */
+const AppShell: React.FC
= ({ currentUser, users, children }) => (
+
+
+ Skip to task list
+
+
+
+
+
+
TaskFlow
+
+
+
+ {currentUser.full_name}
-
+
-
- {/* Sidebar - Desktop only */}
-
-
-
Team Members
-
- {users.map(user => (
-
-
- {user.full_name.split(" \).map(n => n[0]).join(\)}
-
-
{user.full_name}
-
-
- ))}
-
-
+
+
+
+
+ Team Members
+
+
+ {users.map((user) => (
+
+ {user.full_name}
+ Online
+
+ ))}
+
+
- {/* Main Content */}
-
- {children}
-
-
-
- );
-};
+
+ {children}
+
+
+);
export default AppShell;
diff --git a/frontend/src/components/common/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary.tsx
new file mode 100644
index 0000000..44df331
--- /dev/null
+++ b/frontend/src/components/common/ErrorBoundary.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface ErrorBoundaryState {
+ hasError: boolean;
+}
+
+/**
+ * Last line of defence: a render crash shows a recovery screen instead of a
+ * blank page, so a user never loses sight of their work without an explanation.
+ */
+class ErrorBoundary extends React.Component<{ children: React.ReactNode }, ErrorBoundaryState> {
+ state: ErrorBoundaryState = { hasError: false };
+
+ static getDerivedStateFromError(): ErrorBoundaryState {
+ return { hasError: true };
+ }
+
+ componentDidCatch(error: Error, info: React.ErrorInfo): void {
+ // Kept in the console for now; a real logging endpoint is a Backend concern.
+ console.error('TaskFlow crashed while rendering', error, info.componentStack);
+ }
+
+ render(): React.ReactNode {
+ if (this.state.hasError) {
+ return (
+
+
TaskFlow ran into a problem
+
Nothing was lost. Reload the page to pick up where you left off.
+
window.location.reload()}
+ >
+ Reload TaskFlow
+
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
+
+export default ErrorBoundary;
diff --git a/frontend/src/components/common/TaskFields.tsx b/frontend/src/components/common/TaskFields.tsx
new file mode 100644
index 0000000..bea7be9
--- /dev/null
+++ b/frontend/src/components/common/TaskFields.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import { format, isBefore, parseISO, startOfToday } from 'date-fns';
+import {
+ PRIORITY_LABELS,
+ STATUS_LABELS,
+ TASK_STATUSES,
+ TaskPriority,
+ TaskStatus,
+ User,
+} from '../../types';
+
+/** Initials avatar. Falls back to a neutral glyph when a task is unassigned. */
+export const UserAvatar: React.FC<{ user?: User; size?: 'sm' | 'md' | 'lg' }> = ({
+ user,
+ size = 'md',
+}) => {
+ const initials = user
+ ? user.full_name
+ .split(' ')
+ .filter(Boolean)
+ .map((part) => part[0])
+ .join('')
+ .slice(0, 2)
+ .toUpperCase()
+ : '?';
+
+ return (
+
+ {initials}
+
+ );
+};
+
+/** Coloured dot plus label, matching the priority column in the approved mockup. */
+export const PriorityIndicator: React.FC<{ priority: TaskPriority }> = ({ priority }) => (
+
+
+);
+
+/**
+ * Status pill that is also the control for changing status. A native select keeps
+ * keyboard and screen reader behaviour correct for free.
+ */
+export const StatusSelect: React.FC<{
+ status: TaskStatus;
+ taskTitle: string;
+ disabled?: boolean;
+ onChange: (status: TaskStatus) => void;
+}> = ({ status, taskTitle, disabled = false, onChange }) => (
+
+ onChange(event.target.value as TaskStatus)}
+ >
+ {TASK_STATUSES.map((value) => (
+
+ {STATUS_LABELS[value]}
+
+ ))}
+
+
+);
+
+/** Assignee cell: avatar plus shortened name, or an explicit unassigned state. */
+export const AssigneeLabel: React.FC<{ user?: User }> = ({ user }) => {
+ if (!user) {
+ return
Unassigned ;
+ }
+
+ const [first, ...rest] = user.full_name.split(' ');
+ const last = rest.length > 0 ? `${rest[rest.length - 1][0]}.` : '';
+
+ return (
+
+ {`${first} ${last}`.trim()}
+
+ );
+};
+
+const parseDue = (value?: string): Date | null => {
+ if (!value) {
+ return null;
+ }
+ const parsed = parseISO(value);
+ return Number.isNaN(parsed.getTime()) ? null : parsed;
+};
+
+/** Due date in the mockup's "Oct 15, 2023" format, flagged when overdue. */
+export const DueDate: React.FC<{ value?: string }> = ({ value }) => {
+ const date = parseDue(value);
+
+ if (!date) {
+ return
No due date ;
+ }
+
+ const overdue = isBefore(date, startOfToday());
+
+ return (
+
+ {format(date, 'MMM d, yyyy')}
+ {overdue && (overdue) }
+
+ );
+};
diff --git a/frontend/src/index.js b/frontend/src/index.js
deleted file mode 100644
index d563c0f..0000000
--- a/frontend/src/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-
-
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
new file mode 100644
index 0000000..bd233b2
--- /dev/null
+++ b/frontend/src/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import ErrorBoundary from './components/common/ErrorBoundary';
+import './index.css';
+
+const container = document.getElementById('root');
+
+if (!container) {
+ throw new Error('TaskFlow could not start: #root is missing from index.html');
+}
+
+ReactDOM.createRoot(container).render(
+
+
+
+
+);
diff --git a/frontend/src/logo.svg b/frontend/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/frontend/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/frontend/src/reportWebVitals.js b/frontend/src/reportWebVitals.js
deleted file mode 100644
index 5253d3a..0000000
--- a/frontend/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
- if (onPerfEntry && onPerfEntry instanceof Function) {
- import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
- }
-};
-
-export default reportWebVitals;
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 467edae..4a91ce6 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -1,114 +1,259 @@
-import { Task, User } from " ../types\;
+import {
+ Task,
+ TaskDraft,
+ TASK_PRIORITIES,
+ TASK_STATUSES,
+ TITLE_MAX_LENGTH,
+ DESCRIPTION_MAX_LENGTH,
+ User,
+} from '../types';
-// Mock data for development - will be replaced with real API calls
-const mockUsers: User[] = [
- { id: 1, username: \sarah.chen\, full_name: \Sarah Chen\, avatar_url: \/avatars/sarah.jpg\ },
- { id: 2, username: \mike.johnson\, full_name: \Mike Johnson\, avatar_url: \/avatars/mike.jpg\ },
- { id: 3, username: \alex.kim\, full_name: \Alex Kim\, avatar_url: \/avatars/alex.jpg\ },
- { id: 4, username: \emma.davis\, full_name: \Emma Davis\, avatar_url: \/avatars/emma.jpg\ }
+/**
+ * In-memory stand-in for the REST API described in
+ * architect/03-feasibility/frontend-handoff.md. Method names and payload shapes
+ * match the documented endpoints so the Backend phase can swap the bodies for
+ * fetch/axios calls without touching any component.
+ *
+ * GET /api/auth/me -> getCurrentUser()
+ * GET /api/users -> getUsers()
+ * GET /api/tasks -> getTasks()
+ * POST /api/tasks -> createTask(draft)
+ * PUT /api/tasks/:id -> updateTask(id, changes)
+ * DELETE /api/tasks/:id -> deleteTask(id)
+ */
+
+/** Error type carrying a message that is safe to show a user. */
+export class ApiError extends Error {
+ status: number;
+
+ constructor(message: string, status = 400) {
+ super(message);
+ this.name = 'ApiError';
+ this.status = status;
+ }
+}
+
+const users: User[] = [
+ { id: 1, username: 'sarah.chen', full_name: 'Sarah Chen' },
+ { id: 2, username: 'alex.rivera', full_name: 'Alex Rivera' },
+ { id: 3, username: 'david.kim', full_name: 'David Kim' },
+ { id: 4, username: 'maria.garcia', full_name: 'Maria Garcia' },
+ { id: 5, username: 'ben.carter', full_name: 'Ben Carter' },
];
-const mockTasks: Task[] = [
- {
- id: 1,
- title: \Update client documentation\,
- description: \Review and update onboarding docs for new client portal\,
- assigned_to: mockUsers[0],
- status: \in_progress\,
- priority: \high\,
- due_date: \2024-09-15\,
- created_by: mockUsers[1],
- created_at: \2024-09-01T10:00:00Z\,
- updated_at: \2024-09-05T14:22:00Z },
- {
- id: 2,
- title: \Fix login validation bug\,
- description: \Users are experiencing issues with password validation on the login form\,
- assigned_to: mockUsers[2],
- status: \blocked\,
- priority: \high\,
- due_date: \2024-09-10\,
- created_by: mockUsers[0],
- created_at: \2024-09-02T09:15:00Z\,
- updated_at: \2024-09-04T16:30:00Z },
- {
- id: 3,
- title: \Design new dashboard layout\,
- description: \Create wireframes and mockups for the updated dashboard interface\,
- assigned_to: mockUsers[3],
- status: \open\,
- priority: \medium\,
- due_date: \2024-09-20\,
- created_by: mockUsers[1],
- created_at: \2024-09-03T11:45:00Z\,
- updated_at: \2024-09-03T11:45:00Z },
- {
- id: 4,
- title: \Set up automated testing\,
- description: \Configure CI/CD pipeline with automated test suite\,
- assigned_to: mockUsers[0],
- status: \open\,
- priority: \medium\,
- due_date: \2024-09-25\,
- created_by: mockUsers[2],
- created_at: \2024-09-04T08:20:00Z\,
- updated_at: \2024-09-04T08:20:00Z }
-];
+/** Signed-in user. Real implementation reads this from GET /api/auth/me. */
+const currentUser = users[0];
-// Simulate API delay
-const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
-
-export const taskService = {
- async getTasks(): Promise
{
- await delay(500);
- return [...mockTasks];
- },
-
- async getUsers(): Promise {
- await delay(300);
- return [...mockUsers];
- },
-
- async createTask(taskData: Partial): Promise {
- await delay(400);
- const newTask: Task = {
- id: Math.max(...mockTasks.map(t => t.id)) + 1,
- title: taskData.title || \,
- description: taskData.description || \,
- assigned_to: taskData.assigned_to,
- status: taskData.status || \open\,
- priority: taskData.priority || \medium\,
- due_date: taskData.due_date,
- created_by: mockUsers[0], // Current user
- created_at: new Date().toISOString(),
- updated_at: new Date().toISOString()
- };
- mockTasks.push(newTask);
- return newTask;
- },
-
- async updateTask(id: number, taskData: Partial): Promise {
- await delay(400);
- const taskIndex = mockTasks.findIndex(t => t.id === id);
- if (taskIndex === -1) {
- throw new Error(\Task not found\);
- }
-
- const updatedTask = {
- ...mockTasks[taskIndex],
- ...taskData,
- updated_at: new Date().toISOString()
- };
- mockTasks[taskIndex] = updatedTask;
- return updatedTask;
- },
-
- async deleteTask(id: number): Promise {
- await delay(300);
- const taskIndex = mockTasks.findIndex(t => t.id === id);
- if (taskIndex === -1) {
- throw new Error(\Task not found\);
- }
- mockTasks.splice(taskIndex, 1);
- }
+const isoDate = (dayOffset: number): string => {
+ const date = new Date();
+ date.setDate(date.getDate() + dayOffset);
+ return date.toISOString().slice(0, 10);
};
+
+const timestamp = (dayOffset: number): string => {
+ const date = new Date();
+ date.setDate(date.getDate() + dayOffset);
+ return date.toISOString();
+};
+
+let tasks: Task[] = [
+ {
+ id: 1,
+ title: 'Website Redesign - Homepage Layout',
+ description: 'Finalize wireframes and mobile view',
+ assigned_to: users[1],
+ status: 'in_progress',
+ priority: 'high',
+ due_date: isoDate(5),
+ created_by: currentUser,
+ created_at: timestamp(-9),
+ updated_at: timestamp(-1),
+ },
+ {
+ id: 2,
+ title: 'Q4 Marketing Strategy',
+ description: 'Outline key campaigns and budget',
+ assigned_to: users[0],
+ status: 'open',
+ priority: 'medium',
+ due_date: isoDate(10),
+ created_by: users[2],
+ created_at: timestamp(-7),
+ updated_at: timestamp(-7),
+ },
+ {
+ id: 3,
+ title: 'API Integration Debugging',
+ description: 'Fixing errors in payment gateway',
+ assigned_to: users[2],
+ status: 'blocked',
+ priority: 'high',
+ due_date: isoDate(8),
+ created_by: currentUser,
+ created_at: timestamp(-6),
+ updated_at: timestamp(-2),
+ },
+ {
+ id: 4,
+ title: 'Partner Onboarding Playbook',
+ description: 'Document the hand-off steps for new partners',
+ assigned_to: users[2],
+ status: 'in_progress',
+ priority: 'high',
+ due_date: isoDate(-2),
+ created_by: users[3],
+ created_at: timestamp(-14),
+ updated_at: timestamp(-3),
+ },
+ {
+ id: 5,
+ title: 'API Integration Review',
+ description: 'Second pass over the payment gateway contract',
+ assigned_to: users[0],
+ status: 'open',
+ priority: 'low',
+ due_date: isoDate(6),
+ created_by: users[1],
+ created_at: timestamp(-4),
+ updated_at: timestamp(-4),
+ },
+ {
+ id: 6,
+ title: 'Mobile Nav Accessibility Audit',
+ description: 'Keyboard and screen reader pass on the mobile navigation',
+ assigned_to: users[3],
+ status: 'blocked',
+ priority: 'medium',
+ due_date: isoDate(12),
+ created_by: currentUser,
+ created_at: timestamp(-3),
+ updated_at: timestamp(-1),
+ },
+];
+
+const delay = (ms: number): Promise =>
+ new Promise((resolve) => setTimeout(resolve, ms));
+
+const clone = (task: Task): Task => ({ ...task });
+
+const nextId = (): number =>
+ tasks.reduce((highest, task) => Math.max(highest, task.id), 0) + 1;
+
+/**
+ * Validates a draft before it reaches the store. The UI validates too, but this
+ * is the trust boundary the real API will guard, so the rules live here as well.
+ */
+const validateDraft = (draft: Partial, requireAll: boolean): void => {
+ if (requireAll || draft.title !== undefined) {
+ const title = (draft.title ?? '').trim();
+ if (!title) {
+ throw new ApiError('A task title is required.');
+ }
+ if (title.length > TITLE_MAX_LENGTH) {
+ throw new ApiError(`Keep the title under ${TITLE_MAX_LENGTH} characters.`);
+ }
+ }
+
+ if (draft.description !== undefined && draft.description.length > DESCRIPTION_MAX_LENGTH) {
+ throw new ApiError(`Keep the description under ${DESCRIPTION_MAX_LENGTH} characters.`);
+ }
+
+ if (requireAll || draft.assignee_id !== undefined) {
+ const assignee = users.find((user) => user.id === draft.assignee_id);
+ if (!assignee) {
+ throw new ApiError('Assign this task to a current team member.');
+ }
+ }
+
+ if (draft.status !== undefined && !TASK_STATUSES.includes(draft.status)) {
+ throw new ApiError('Choose a valid status.');
+ }
+
+ if (draft.priority !== undefined && !TASK_PRIORITIES.includes(draft.priority)) {
+ throw new ApiError('Choose a valid priority.');
+ }
+
+ if (draft.due_date) {
+ if (Number.isNaN(Date.parse(draft.due_date))) {
+ throw new ApiError('Enter a due date in YYYY-MM-DD format.');
+ }
+ }
+};
+
+export const api = {
+ async getCurrentUser(): Promise {
+ await delay(150);
+ return { ...currentUser };
+ },
+
+ async getUsers(): Promise {
+ await delay(200);
+ return users.map((user) => ({ ...user }));
+ },
+
+ async getTasks(): Promise {
+ await delay(400);
+ return tasks.map(clone);
+ },
+
+ async createTask(draft: TaskDraft): Promise {
+ await delay(350);
+ validateDraft(draft, true);
+
+ const now = new Date().toISOString();
+ const task: Task = {
+ id: nextId(),
+ title: draft.title.trim(),
+ description: draft.description.trim(),
+ assigned_to: users.find((user) => user.id === draft.assignee_id),
+ status: draft.status,
+ priority: draft.priority,
+ due_date: draft.due_date || undefined,
+ created_by: { ...currentUser },
+ created_at: now,
+ updated_at: now,
+ };
+
+ tasks = [task, ...tasks];
+ return clone(task);
+ },
+
+ async updateTask(id: number, changes: Partial): Promise {
+ await delay(300);
+ const existing = tasks.find((task) => task.id === id);
+ if (!existing) {
+ throw new ApiError('That task no longer exists. Refresh to see the latest list.', 404);
+ }
+
+ validateDraft(changes, false);
+
+ const updated: Task = {
+ ...existing,
+ title: changes.title !== undefined ? changes.title.trim() : existing.title,
+ description:
+ changes.description !== undefined ? changes.description.trim() : existing.description,
+ assigned_to:
+ changes.assignee_id !== undefined
+ ? users.find((user) => user.id === changes.assignee_id)
+ : existing.assigned_to,
+ status: changes.status ?? existing.status,
+ priority: changes.priority ?? existing.priority,
+ due_date: changes.due_date !== undefined ? changes.due_date || undefined : existing.due_date,
+ updated_at: new Date().toISOString(),
+ };
+
+ tasks = tasks.map((task) => (task.id === id ? updated : task));
+ return clone(updated);
+ },
+
+ async deleteTask(id: number): Promise {
+ await delay(250);
+ const exists = tasks.some((task) => task.id === id);
+ if (!exists) {
+ throw new ApiError('That task no longer exists. Refresh to see the latest list.', 404);
+ }
+ tasks = tasks.filter((task) => task.id !== id);
+ },
+};
+
+export type Api = typeof api;
diff --git a/frontend/src/setupTests.js b/frontend/src/setupTests.js
deleted file mode 100644
index 8f2609b..0000000
--- a/frontend/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
diff --git a/frontend/src/setupTests.ts b/frontend/src/setupTests.ts
new file mode 100644
index 0000000..55d68a1
--- /dev/null
+++ b/frontend/src/setupTests.ts
@@ -0,0 +1,2 @@
+// Adds jest-dom matchers (toBeInTheDocument, toBeDisabled, ...) to every test file.
+import '@testing-library/jest-dom';
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 18228a3..258d662 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -2,20 +2,50 @@ export interface User {
id: number;
username: string;
full_name: string;
- avatar_url: string;
+ avatar_url?: string;
}
+export type TaskStatus = 'open' | 'in_progress' | 'blocked';
+export type TaskPriority = 'low' | 'medium' | 'high';
+export type TaskFilter = 'my' | 'all' | 'blocked';
+
export interface Task {
id: number;
title: string;
description: string;
assigned_to?: User;
- status: " open\ | \in_progress\ | \blocked\;
- priority: \low\ | \medium\ | \high\;
- due_date?: string;
- created_by?: User;
- created_at: string;
- updated_at: string;
+ status: TaskStatus;
+ priority: TaskPriority;
+ due_date?: string;
+ created_by?: User;
+ created_at: string;
+ updated_at: string;
}
-export type TaskFilter = \my\ | \all\ | \blocked\;
+/** Shape the task form submits. Mirrors the POST/PUT /api/tasks request body. */
+export interface TaskDraft {
+ title: string;
+ description: string;
+ assignee_id: number | null;
+ status: TaskStatus;
+ priority: TaskPriority;
+ due_date: string;
+}
+
+export const TASK_STATUSES: TaskStatus[] = ['open', 'in_progress', 'blocked'];
+export const TASK_PRIORITIES: TaskPriority[] = ['low', 'medium', 'high'];
+
+export const STATUS_LABELS: Record = {
+ open: 'Open',
+ in_progress: 'In Progress',
+ blocked: 'Blocked',
+};
+
+export const PRIORITY_LABELS: Record = {
+ low: 'Low',
+ medium: 'Medium',
+ high: 'High',
+};
+
+export const TITLE_MAX_LENGTH = 120;
+export const DESCRIPTION_MAX_LENGTH = 1000;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..45e42ba
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "es2020",
+ "lib": ["dom", "dom.iterable", "es2020"],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": ["src"]
+}