react-repos 1.0.1 → 1.0.3

package/repos/task-common/frontend/public/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#1E3A8A" />
+    <meta name="description" content="Reusable MERN application starter" />
+    <title>MERN Common Starter</title>
+  </head>
+  <body>
+    <noscript>JavaScript is required to run this application.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

package/repos/task-common/frontend/src/App.js

@@ -0,0 +1,28 @@
+// Declares routes and provides shared CRUD state to the application shell.
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import AppLayout from './components/layout/AppLayout';
+import DashboardPage from './pages/DashboardPage';
+import ItemsPage from './pages/ItemsPage';
+import ProfilePage from './pages/ProfilePage';
+import useItems from './hooks/useItems';
+import { ItemContext } from './context/ItemContext';
+
+function App() {
+  const itemState = useItems();
+  return (
+    <ItemContext.Provider value={itemState}>
+      <BrowserRouter>
+        <Routes>
+          <Route element={<AppLayout />}>
+            <Route path="/dashboard" element={<DashboardPage />} />
+            <Route path="/items" element={<ItemsPage />} />
+            <Route path="/profile" element={<ProfilePage />} />
+            <Route path="*" element={<Navigate to="/dashboard" replace />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </ItemContext.Provider>
+  );
+}
+
+export default App;

package/repos/task-common/frontend/src/App.test.js

@@ -0,0 +1,14 @@
+// Verifies that the application shell and default dashboard route render.
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import App from './App';
+
+jest.mock('./api/itemService', () => ({
+  listItems: jest.fn().mockResolvedValue([]),
+  createItem: jest.fn(), updateItem: jest.fn(), patchItem: jest.fn(), deleteItem: jest.fn(),
+}));
+
+test('renders the reusable dashboard', async () => {
+  render(<App />);
+  expect(await screen.findByRole('heading', { name: 'Dashboard' })).toBeInTheDocument();
+});

package/repos/task-common/frontend/src/api/httpClient.js

@@ -0,0 +1,14 @@
+// Configures the shared Axios client and a consistent response error message.
+import axios from 'axios';
+
+const httpClient = axios.create({
+  baseURL: process.env.REACT_APP_API_URL || 'http://localhost:5002/api',
+  headers: { 'Content-Type': 'application/json' },
+});
+
+httpClient.interceptors.response.use(
+  (response) => response,
+  (error) => Promise.reject(new Error(error.response?.data?.message || 'Request failed'))
+);
+
+export default httpClient;

package/repos/task-common/frontend/src/api/itemService.js

@@ -0,0 +1,9 @@
+// Exposes domain-specific CRUD functions while hiding HTTP details from pages.
+import httpClient from './httpClient';
+
+export const listItems = async (params = {}) => (await httpClient.get('/items', { params })).data;
+export const getItem = async (id) => (await httpClient.get(`/items/${id}`)).data;
+export const createItem = async (values) => (await httpClient.post('/items', values)).data;
+export const updateItem = async (id, values) => (await httpClient.put(`/items/${id}`, values)).data;
+export const patchItem = async (id, values) => (await httpClient.patch(`/items/${id}`, values)).data;
+export const deleteItem = async (id) => (await httpClient.delete(`/items/${id}`)).data;

package/repos/task-common/frontend/src/components/common/Badge.js

@@ -0,0 +1,12 @@
+// Displays priority or status values with a reusable color map.
+const palette = {
+  High: ['#DC2626', '#FEE2E2'], Medium: ['#D97706', '#FEF3C7'], Low: ['#2563EB', '#DBEAFE'],
+  'To Do': ['#D97706', '#FEF3C7'], 'In Progress': ['#2563EB', '#DBEAFE'], Review: ['#7C3AED', '#EDE9FE'], Done: ['#16A34A', '#DCFCE7'],
+};
+
+function Badge({ value }) {
+  const [color, background] = palette[value] || ['#374151', '#F3F4F6'];
+  return <span style={{ color, background, padding: '4px 12px', borderRadius: 9999, fontSize: 12, fontWeight: 500, whiteSpace: 'nowrap' }}>{value}</span>;
+}
+
+export default Badge;

package/repos/task-common/frontend/src/components/common/ConfirmDialog.js

@@ -0,0 +1,8 @@
+// Asks for explicit confirmation before a destructive record action.
+import Modal from './Modal';
+
+function ConfirmDialog({ title = 'Confirm action', message, onConfirm, onClose }) {
+  return <Modal title={title} onClose={onClose} footer={<><button className="btn btn-light" onClick={onClose}>Cancel</button><button className="btn btn-danger" onClick={onConfirm}>Confirm</button></>}><p className="mb-0">{message}</p></Modal>;
+}
+
+export default ConfirmDialog;

package/repos/task-common/frontend/src/components/common/DataTable.js

@@ -0,0 +1,9 @@
+// Renders records from configurable column definitions and optional row actions.
+import EmptyState from './EmptyState';
+
+function DataTable({ columns, records, rowKey = '_id', actions }) {
+  if (!records.length) return <EmptyState title="No records found" />;
+  return <div className="table-responsive"><table className="table align-middle"><thead><tr>{columns.map((column) => <th key={column.key}>{column.label}</th>)}{actions && <th>Actions</th>}</tr></thead><tbody>{records.map((record) => <tr key={record[rowKey]}>{columns.map((column) => <td key={column.key}>{column.render ? column.render(record[column.key], record) : record[column.key]}</td>)}{actions && <td>{actions(record)}</td>}</tr>)}</tbody></table></div>;
+}
+
+export default DataTable;

package/repos/task-common/frontend/src/components/common/EmptyState.js

@@ -0,0 +1,6 @@
+// Renders a compact reusable empty-state message.
+import { colors } from '../../config/theme';
+function EmptyState({ title, message = 'Try changing the filters or add a new record.' }) {
+  return <div className="text-center py-5"><i className="bi bi-inbox fs-2" style={{ color: colors.muted }} /><h3 className="fs-6 mt-2">{title}</h3><p className="small mb-0" style={{ color: colors.muted }}>{message}</p></div>;
+}
+export default EmptyState;

package/repos/task-common/frontend/src/components/common/ErrorAlert.js

@@ -0,0 +1,6 @@
+// Displays recoverable API errors and an optional retry control.
+function ErrorAlert({ message, onRetry }) {
+  if (!message) return null;
+  return <div className="alert alert-danger d-flex justify-content-between align-items-center" role="alert"><span>{message}</span>{onRetry && <button className="btn btn-sm btn-outline-danger" onClick={onRetry}>Retry</button>}</div>;
+}
+export default ErrorAlert;

package/repos/task-common/frontend/src/components/common/FilterBar.js

@@ -0,0 +1,8 @@
+// Builds a search input and any number of select filters from configuration.
+import { controlStyle } from '../../config/theme';
+
+function FilterBar({ search, onSearchChange, filters = [] }) {
+  return <div className="row g-3 mb-4"><div className="col"><input className="form-control" style={controlStyle} value={search} onChange={(event) => onSearchChange(event.target.value)} placeholder="Search by name..." /></div>{filters.map((filter) => <div className="col-auto" key={filter.key}><select className="form-select" style={{ ...controlStyle, minWidth: 160 }} value={filter.value} onChange={(event) => filter.onChange(event.target.value)}><option value="">{filter.placeholder}</option>{filter.options.map((option) => <option key={option}>{option}</option>)}</select></div>)}</div>;
+}
+
+export default FilterBar;

package/repos/task-common/frontend/src/components/common/LoadingState.js

@@ -0,0 +1,5 @@
+// Shows a consistent loading indicator while remote data is pending.
+function LoadingState({ label = 'Loading...' }) {
+  return <div className="d-flex justify-content-center align-items-center gap-2 py-5"><span className="spinner-border spinner-border-sm" aria-hidden="true" /><span>{label}</span></div>;
+}
+export default LoadingState;

package/repos/task-common/frontend/src/components/common/Modal.js

@@ -0,0 +1,8 @@
+// Supplies a reusable accessible modal shell for forms and confirmations.
+import { colors } from '../../config/theme';
+
+function Modal({ title, children, footer, onClose }) {
+  return <div className="modal d-block" role="dialog" aria-modal="true" style={{ background: 'rgba(17,24,39,.45)' }}><div className="modal-dialog modal-dialog-centered"><div className="modal-content border-0" style={{ borderRadius: 12 }}><div className="modal-header" style={{ borderColor: colors.border }}><h2 className="modal-title fs-5">{title}</h2><button className="btn-close" onClick={onClose} aria-label="Close" /></div><div className="modal-body p-4">{children}</div>{footer && <div className="modal-footer" style={{ borderColor: colors.border }}>{footer}</div>}</div></div></div>;
+}
+
+export default Modal;

package/repos/task-common/frontend/src/components/common/PageHeader.js

@@ -0,0 +1,8 @@
+// Standardizes page titles, helper text, and optional primary actions.
+import { colors } from '../../config/theme';
+
+function PageHeader({ title, subtitle, action }) {
+  return <div className="d-flex justify-content-between align-items-start mb-4"><div><h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 5 }}>{title}</h1>{subtitle && <p style={{ color: colors.muted, fontSize: 13, margin: 0 }}>{subtitle}</p>}</div>{action}</div>;
+}
+
+export default PageHeader;

package/repos/task-common/frontend/src/components/common/Pagination.js

@@ -0,0 +1,10 @@
+// Provides reusable previous, numbered, and next page controls.
+import { colors } from '../../config/theme';
+
+function Pagination({ page, pageCount, total, pageSize, onChange }) {
+  const start = total ? (page - 1) * pageSize + 1 : 0;
+  const end = Math.min(page * pageSize, total);
+  return <div className="d-flex justify-content-between align-items-center mt-3"><small style={{ color: colors.muted }}>Showing {start} to {end} of {total}</small><div className="d-flex gap-1"><button className="btn btn-sm" disabled={page === 1} onClick={() => onChange(page - 1)}>Previous</button>{Array.from({ length: pageCount }, (_, index) => index + 1).map((number) => <button key={number} className={`btn btn-sm ${number === page ? 'btn-primary' : 'btn-light'}`} onClick={() => onChange(number)}>{number}</button>)}<button className="btn btn-sm" disabled={page === pageCount} onClick={() => onChange(page + 1)}>Next</button></div></div>;
+}
+
+export default Pagination;

package/repos/task-common/frontend/src/components/common/ProgressBar.js

@@ -0,0 +1,9 @@
+// Renders a labelled progress indicator with clamped percentage values.
+import { colors } from '../../config/theme';
+
+function ProgressBar({ value = 0, showLabel = true }) {
+  const safeValue = Math.min(100, Math.max(0, Number(value) || 0));
+  return <div className="d-flex align-items-center gap-2"><div className="progress flex-grow-1" style={{ height: 8, background: colors.border, borderRadius: 9999 }}><div className="progress-bar" style={{ width: `${safeValue}%`, background: colors.primary, borderRadius: 9999 }} /></div>{showLabel && <small>{safeValue}%</small>}</div>;
+}
+
+export default ProgressBar;

package/repos/task-common/frontend/src/components/common/StatCard.js

@@ -0,0 +1,8 @@
+// Presents a reusable dashboard metric card with a colored accent.
+import { colors, surfaceStyle } from '../../config/theme';
+
+function StatCard({ label, value, helper, accent = colors.primary }) {
+  return <div style={{ ...surfaceStyle, padding: 24, borderLeft: `3px solid ${accent}` }}><div style={{ color: colors.muted, fontSize: 13 }}>{label}</div><div style={{ color: accent, fontSize: 32, fontWeight: 700 }}>{value}</div>{helper && <div style={{ color: colors.muted, fontSize: 12 }}>{helper}</div>}</div>;
+}
+
+export default StatCard;

package/repos/task-common/frontend/src/components/items/ItemCard.js

@@ -0,0 +1,10 @@
+// Composes common badges and progress into a reusable mobile-friendly item card.
+import Badge from '../common/Badge';
+import ProgressBar from '../common/ProgressBar';
+import { colors, surfaceStyle } from '../../config/theme';
+
+function ItemCard({ item, onEdit, onDelete }) {
+  return <article style={{ ...surfaceStyle, padding: 20, marginBottom: 16 }}><div className="d-flex justify-content-between"><div><h3 className="fs-6 mb-1">{item.name}</h3><p className="small mb-3" style={{ color: colors.muted }}>{item.description}</p></div><div className="dropdown"><button className="btn border-0" data-bs-toggle="dropdown" aria-label={`Actions for ${item.name}`}><i className="bi bi-three-dots-vertical" /></button><ul className="dropdown-menu dropdown-menu-end"><li><button className="dropdown-item" onClick={() => onEdit(item)}>Edit</button></li><li><button className="dropdown-item text-danger" onClick={() => onDelete(item)}>Delete</button></li></ul></div></div><div className="row align-items-center"><div className="col"><Badge value={item.priority} /></div><div className="col"><Badge value={item.status} /></div><div className="col-5"><ProgressBar value={item.progress} /></div></div></article>;
+}
+
+export default ItemCard;

package/repos/task-common/frontend/src/components/items/ItemForm.js

@@ -0,0 +1,18 @@
+// Implements a reusable controlled create/edit form for the starter entity.
+import { useEffect, useState } from 'react';
+import Modal from '../common/Modal';
+import { controlStyle, primaryButtonStyle } from '../../config/theme';
+
+const emptyItem = { name: '', description: '', priority: 'Medium', status: 'To Do', dueDate: '', progress: 0 };
+
+function ItemForm({ initialValue, onSubmit, onClose }) {
+  const [values, setValues] = useState(emptyItem);
+  const [saving, setSaving] = useState(false);
+  useEffect(() => setValues(initialValue ? { ...initialValue, dueDate: initialValue.dueDate.slice(0, 10) } : emptyItem), [initialValue]);
+  const change = ({ target }) => setValues((current) => ({ ...current, [target.name]: target.name === 'progress' ? Number(target.value) : target.value }));
+  const submit = async (event) => { event.preventDefault(); setSaving(true); try { await onSubmit(values); onClose(); } finally { setSaving(false); } };
+
+  return <Modal title={initialValue ? 'Edit Item' : 'Add Item'} onClose={onClose} footer={<><button type="button" className="btn btn-light" onClick={onClose}>Cancel</button><button type="submit" form="item-form" className="btn btn-primary" style={primaryButtonStyle} disabled={saving}>{saving ? 'Saving...' : 'Save'}</button></>}><form id="item-form" onSubmit={submit}><label className="form-label">Name</label><input className="form-control mb-3" style={controlStyle} name="name" value={values.name} onChange={change} required /><label className="form-label">Description</label><input className="form-control mb-3" style={controlStyle} name="description" value={values.description} onChange={change} /><div className="row g-3 mb-3"><div className="col"><label className="form-label">Priority</label><select className="form-select" style={controlStyle} name="priority" value={values.priority} onChange={change}><option>High</option><option>Medium</option><option>Low</option></select></div><div className="col"><label className="form-label">Status</label><select className="form-select" style={controlStyle} name="status" value={values.status} onChange={change}><option>To Do</option><option>In Progress</option><option>Review</option><option>Done</option></select></div></div><div className="row g-3"><div className="col"><label className="form-label">Due date</label><input type="date" className="form-control" style={controlStyle} name="dueDate" value={values.dueDate} onChange={change} required /></div><div className="col"><label className="form-label">Progress</label><input type="number" min="0" max="100" className="form-control" style={controlStyle} name="progress" value={values.progress} onChange={change} /></div></div></form></Modal>;
+}
+
+export default ItemForm;

package/repos/task-common/frontend/src/components/layout/AppLayout.js

@@ -0,0 +1,11 @@
+// Combines the reusable navigation shell with nested React Router pages.
+import { Outlet } from 'react-router-dom';
+import Sidebar from './Sidebar';
+import Topbar from './Topbar';
+import { colors } from '../../config/theme';
+
+function AppLayout() {
+  return <div style={{ minHeight: '100vh', background: colors.page, color: colors.text, fontFamily: 'Inter, system-ui, sans-serif' }}><Sidebar /><div style={{ marginLeft: 240 }}><Topbar /><main style={{ padding: 32 }}><Outlet /></main></div></div>;
+}
+
+export default AppLayout;

package/repos/task-common/frontend/src/components/layout/Sidebar.js

@@ -0,0 +1,23 @@
+// Renders configurable fixed navigation with automatic active-route styling.
+import { NavLink } from 'react-router-dom';
+import { appConfig, colors } from '../../config/theme';
+
+const defaultLinks = [
+  { to: '/dashboard', label: 'Dashboard', icon: 'bi-grid' },
+  { to: '/items', label: 'Items', icon: 'bi-list-check' },
+  { to: '/profile', label: 'Profile', icon: 'bi-person' },
+];
+
+function Sidebar({ links = defaultLinks }) {
+  return (
+    <aside style={{ position: 'fixed', inset: '0 auto 0 0', width: 240, padding: '30px 20px', color: '#fff', background: colors.sidebar }}>
+      <div style={{ margin: '0 12px 28px', fontSize: 22, fontWeight: 700 }}>{appConfig.name}</div>
+      <nav className="d-grid gap-2">
+        {links.map((link) => <NavLink key={link.to} to={link.to} style={({ isActive }) => ({ display: 'flex', gap: 12, alignItems: 'center', padding: '12px 14px', borderRadius: 6, color: '#fff', textDecoration: 'none', background: isActive ? colors.active : 'transparent' })}><i className={`bi ${link.icon}`} />{link.label}</NavLink>)}
+      </nav>
+      <small style={{ position: 'absolute', bottom: 24, left: 32 }}>Reusable MERN starter</small>
+    </aside>
+  );
+}
+
+export default Sidebar;

package/repos/task-common/frontend/src/components/layout/Topbar.js

@@ -0,0 +1,13 @@
+// Provides a reusable application header with menu, search, and user slots.
+import { appConfig, colors } from '../../config/theme';
+
+function Topbar({ searchPlaceholder = 'Search...' }) {
+  return (
+    <header style={{ height: 72, padding: '0 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: colors.surface, borderBottom: `1px solid ${colors.border}` }}>
+      <div className="d-flex align-items-center gap-4"><i className="bi bi-list fs-4" /><div className="position-relative"><i className="bi bi-search position-absolute" style={{ top: 9, left: 12, color: colors.muted }} /><input className="form-control border-0" style={{ width: 300, paddingLeft: 36 }} placeholder={searchPlaceholder} aria-label="Global search" /></div></div>
+      <span>{appConfig.userName} <i className="bi bi-chevron-down ms-1 small" /></span>
+    </header>
+  );
+}
+
+export default Topbar;

package/repos/task-common/frontend/src/config/theme.js

@@ -0,0 +1,11 @@
+// Holds application branding and inline style tokens in one replaceable module.
+export const appConfig = { name: 'COMMON', userName: 'Jane Doe' };
+
+export const colors = {
+  sidebar: '#1E3A8A', active: '#2C4FC7', primary: '#2563EB', primaryHover: '#1D4ED8',
+  page: '#F9FAFB', surface: '#FFFFFF', border: '#E5E7EB', text: '#111827', muted: '#6B7280',
+};
+
+export const surfaceStyle = { background: colors.surface, border: `1px solid ${colors.border}`, borderRadius: 12 };
+export const controlStyle = { height: 40, borderRadius: 8, borderColor: '#D1D5DB', fontSize: 14 };
+export const primaryButtonStyle = { background: colors.primary, borderColor: colors.primary, borderRadius: 8, padding: '10px 20px' };

package/repos/task-common/frontend/src/context/ItemContext.js

@@ -0,0 +1,9 @@
+// Shares item CRUD state across routed pages without prop drilling.
+import { createContext, useContext } from 'react';
+
+export const ItemContext = createContext(null);
+export const useItemContext = () => {
+  const value = useContext(ItemContext);
+  if (!value) throw new Error('useItemContext must be used inside ItemContext.Provider');
+  return value;
+};

package/repos/task-common/frontend/src/hooks/useItems.js

@@ -0,0 +1,30 @@
+// Provides reusable item loading and CRUD state for any page or component.
+import { useCallback, useEffect, useState } from 'react';
+import * as service from '../api/itemService';
+
+export default function useItems() {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const refresh = useCallback(async () => {
+    try { setError(''); setItems((await service.listItems()) || []); }
+    catch (requestError) { setError(requestError.message); }
+    finally { setLoading(false); }
+  }, []);
+
+  useEffect(() => { refresh(); }, [refresh]);
+
+  const runAndRefresh = async (operation) => {
+    try { setError(''); await operation(); await refresh(); }
+    catch (requestError) { setError(requestError.message); throw requestError; }
+  };
+
+  return {
+    items, loading, error, refresh,
+    create: (values) => runAndRefresh(() => service.createItem(values)),
+    update: (id, values) => runAndRefresh(() => service.updateItem(id, values)),
+    patch: (id, values) => runAndRefresh(() => service.patchItem(id, values)),
+    remove: (id) => runAndRefresh(() => service.deleteItem(id)),
+  };
+}

package/repos/task-common/frontend/src/hooks/usePagination.js

@@ -0,0 +1,10 @@
+// Encapsulates client-side pagination calculations and page correction.
+import { useEffect, useMemo, useState } from 'react';
+
+export default function usePagination(records = [], pageSize = 5) {
+  const [page, setPage] = useState(1);
+  const pageCount = Math.max(1, Math.ceil(records.length / pageSize));
+  useEffect(() => { if (page > pageCount) setPage(pageCount); }, [page, pageCount]);
+  const visible = useMemo(() => records.slice((page - 1) * pageSize, page * pageSize), [records, page, pageSize]);
+  return { page, setPage, pageCount, visible, pageSize };
+}

package/repos/task-common/frontend/src/index.js

@@ -0,0 +1,11 @@
+// Boots React and loads Bootstrap as the only global stylesheet.
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min.js';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode><App /></React.StrictMode>
+);

package/repos/task-common/frontend/src/pages/DashboardPage.js

@@ -0,0 +1,30 @@
+// Demonstrates reusable metric cards, table columns, states, and pagination.
+import { useMemo } from 'react';
+import { useItemContext } from '../context/ItemContext';
+import usePagination from '../hooks/usePagination';
+import PageHeader from '../components/common/PageHeader';
+import StatCard from '../components/common/StatCard';
+import DataTable from '../components/common/DataTable';
+import Pagination from '../components/common/Pagination';
+import Badge from '../components/common/Badge';
+import LoadingState from '../components/common/LoadingState';
+import ErrorAlert from '../components/common/ErrorAlert';
+import { surfaceStyle } from '../config/theme';
+import { formatDate } from '../utils/date';
+
+function DashboardPage() {
+  const { items, loading, error, refresh } = useItemContext();
+  const { page, setPage, pageCount, visible, pageSize } = usePagination(items);
+  const done = items.filter((item) => item.status === 'Done').length;
+  const active = items.filter((item) => item.status === 'In Progress').length;
+  const columns = useMemo(() => [
+    { key: 'name', label: 'Name' },
+    { key: 'priority', label: 'Priority', render: (value) => <Badge value={value} /> },
+    { key: 'status', label: 'Status', render: (value) => <Badge value={value} /> },
+    { key: 'dueDate', label: 'Due date', render: formatDate },
+  ], []);
+
+  return <><PageHeader title="Dashboard" subtitle="Reusable components driven by live API data." /><ErrorAlert message={error} onRetry={refresh} /><div className="row g-4 mb-4"><div className="col"><StatCard label="Total" value={items.length} helper="All records" /></div><div className="col"><StatCard label="In Progress" value={active} helper="Active records" accent="#D97706" /></div><div className="col"><StatCard label="Done" value={done} helper="Completed records" accent="#16A34A" /></div></div><section style={{ ...surfaceStyle, padding: 24 }}><h2 className="fs-5 mb-4">Recent Items</h2>{loading ? <LoadingState /> : <DataTable columns={columns} records={visible} />}<Pagination page={page} pageCount={pageCount} total={items.length} pageSize={pageSize} onChange={setPage} /></section></>;
+}
+
+export default DashboardPage;

package/repos/task-common/frontend/src/pages/ItemsPage.js

@@ -0,0 +1,36 @@
+// Demonstrates reusable search, filters, cards, forms, confirmation, and CRUD hooks.
+import { useMemo, useState } from 'react';
+import { useItemContext } from '../context/ItemContext';
+import usePagination from '../hooks/usePagination';
+import PageHeader from '../components/common/PageHeader';
+import FilterBar from '../components/common/FilterBar';
+import Pagination from '../components/common/Pagination';
+import LoadingState from '../components/common/LoadingState';
+import ErrorAlert from '../components/common/ErrorAlert';
+import EmptyState from '../components/common/EmptyState';
+import ConfirmDialog from '../components/common/ConfirmDialog';
+import ItemForm from '../components/items/ItemForm';
+import ItemCard from '../components/items/ItemCard';
+import { primaryButtonStyle } from '../config/theme';
+
+function ItemsPage() {
+  const { items, loading, error, refresh, create, update, remove } = useItemContext();
+  const [search, setSearch] = useState('');
+  const [priority, setPriority] = useState('');
+  const [status, setStatus] = useState('');
+  const [editing, setEditing] = useState(null);
+  const [deleting, setDeleting] = useState(null);
+  const filtered = useMemo(() => items.filter((item) => item.name.toLowerCase().includes(search.toLowerCase()) && (!priority || item.priority === priority) && (!status || item.status === status)), [items, search, priority, status]);
+  const { page, setPage, pageCount, visible, pageSize } = usePagination(filtered);
+  const save = (values) => editing === 'new' ? create(values) : update(editing._id, values);
+  const confirmDelete = async () => { await remove(deleting._id); setDeleting(null); };
+
+  const filters = [
+    { key: 'priority', value: priority, onChange: setPriority, placeholder: 'All priorities', options: ['High', 'Medium', 'Low'] },
+    { key: 'status', value: status, onChange: setStatus, placeholder: 'All statuses', options: ['To Do', 'In Progress', 'Review', 'Done'] },
+  ];
+
+  return <><PageHeader title="Items" subtitle="Use this page as the template for any CRUD entity." action={<button className="btn btn-primary" style={primaryButtonStyle} onClick={() => setEditing('new')}>Add Item</button>} /><ErrorAlert message={error} onRetry={refresh} /><FilterBar search={search} onSearchChange={setSearch} filters={filters} />{loading ? <LoadingState /> : visible.length ? visible.map((item) => <ItemCard key={item._id} item={item} onEdit={setEditing} onDelete={setDeleting} />) : <EmptyState title="No items found" />}<Pagination page={page} pageCount={pageCount} total={filtered.length} pageSize={pageSize} onChange={setPage} />{editing && <ItemForm initialValue={editing === 'new' ? null : editing} onSubmit={save} onClose={() => setEditing(null)} />}{deleting && <ConfirmDialog title="Delete item" message={`Delete “${deleting.name}”? This cannot be undone.`} onClose={() => setDeleting(null)} onConfirm={confirmDelete} />}</>;
+}
+
+export default ItemsPage;

package/repos/task-common/frontend/src/pages/ProfilePage.js

@@ -0,0 +1,9 @@
+// Provides a minimal placeholder page to demonstrate adding routed screens.
+import PageHeader from '../components/common/PageHeader';
+import { surfaceStyle } from '../config/theme';
+
+function ProfilePage() {
+  return <><PageHeader title="Profile" subtitle="Replace this placeholder with project-specific content." /><section style={{ ...surfaceStyle, padding: 24 }}><strong>Jane Doe</strong><p className="text-secondary small mb-0 mt-2">Application user</p></section></>;
+}
+
+export default ProfilePage;

package/repos/task-common/frontend/src/utils/date.js

@@ -0,0 +1,4 @@
+// Formats API date values consistently without local timezone drift.
+export const formatDate = (value) => new Date(value).toLocaleDateString('en-GB', {
+  day: '2-digit', month: 'short', year: 'numeric', timeZone: 'UTC',
+});

package/repos/task1/README.md

@@ -0,0 +1,34 @@
+# TaskFlow MERN Application
+
+TaskFlow is a two-screen task-management dashboard built with Create React App, Bootstrap, Express, Mongoose, and MongoDB.
+
+## Application screenshots
+
+### Dashboard
+
+![TaskFlow dashboard](screenshots/dashboard.jpg)
+
+### Tasks
+
+![TaskFlow tasks](screenshots/tasks.jpg)
+
+### Add task form
+
+![TaskFlow add task form](screenshots/add-task-form.jpg)
+
+## Run locally
+
+1. Start MongoDB at `mongodb://127.0.0.1:27017`.
+2. In `backend`, run `npm install`, then `npm run seed`, then `npm start` (API port `5001`).
+3. In `frontend`, run `npm install`, then `npm start`.
+4. Open `http://localhost:3000`.
+
+The backend uses the values in `backend/.env`. The seed command imports `backend/data/taskflow-data.json` into the `taskflow` database.
+
+## API
+
+- `GET /api/tasks` supports `priority`, `status`, and `search` query parameters.
+- `POST /api/tasks` creates a task.
+- `PUT /api/tasks/:id` replaces a task.
+- `PATCH /api/tasks/:id` updates selected task fields.
+- `DELETE /api/tasks/:id` deletes a task.

package/repos/task1/backend/.env.example

@@ -0,0 +1,3 @@
+# Copy this file to .env when configuring the TaskFlow API.
+PORT=5001
+MONGODB_URI=mongodb://127.0.0.1:27017/taskflow

package/repos/task1/backend/app.js

@@ -0,0 +1,17 @@
+// Configures the Express application, middleware, health check, and API routes.
+const express = require('express');
+const cors = require('cors');
+const taskRoutes = require('./routes/taskRoutes');
+
+const app = express();
+app.use(cors());
+app.use(express.json());
+app.get('/api/health', (req, res) => res.json({ status: 'ok' }));
+app.use('/api/tasks', taskRoutes);
+app.use((error, req, res, next) => {
+  if (res.headersSent) return next(error);
+  const status = error.name === 'ValidationError' ? 400 : 500;
+  return res.status(status).json({ message: error.message });
+});
+
+module.exports = app;

package/repos/task1/backend/config/db.js

@@ -0,0 +1,12 @@
+// Opens the shared Mongoose connection used by the API and seed script.
+const mongoose = require('mongoose');
+
+const connectDB = async () => {
+  const connection = await mongoose.connect(
+    process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/taskflow'
+  );
+  console.log(`MongoDB connected: ${connection.connection.host}`);
+  return connection;
+};
+
+module.exports = connectDB;

package/repos/task1/backend/controllers/taskController.js

@@ -0,0 +1,68 @@
+// Implements all REST operations and query filtering for TaskFlow tasks.
+const mongoose = require('mongoose');
+const Task = require('../models/Task');
+
+const escapeRegex = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+const buildFilter = ({ priority, status, search }) => {
+  const filter = {};
+  if (priority) filter.priority = priority;
+  if (status) filter.$or = [{ simpleStatus: status }, { detailedStatus: status }];
+  if (search) {
+    const matcher = new RegExp(escapeRegex(search), 'i');
+    const conditions = [{ name: matcher }, { description: matcher }];
+    if (filter.$or) filter.$and = [{ $or: filter.$or }, { $or: conditions }];
+    else filter.$or = conditions;
+  }
+  return filter;
+};
+
+const getTasks = async (req, res, next) => {
+  try {
+    const tasks = await Task.find(buildFilter(req.query)).sort({ createdAt: 1 });
+    res.json(tasks);
+  } catch (error) {
+    next(error);
+  }
+};
+
+const createTask = async (req, res, next) => {
+  try {
+    const task = await Task.create(req.body);
+    res.status(201).json(task);
+  } catch (error) {
+    next(error);
+  }
+};
+
+const updateTask = async (req, res, next) => {
+  try {
+    if (!mongoose.isValidObjectId(req.params.id)) {
+      return res.status(400).json({ message: 'Invalid task id' });
+    }
+    const task = await Task.findByIdAndUpdate(req.params.id, req.body, {
+      new: true,
+      runValidators: true,
+      overwrite: req.method === 'PUT',
+    });
+    if (!task) return res.status(404).json({ message: 'Task not found' });
+    return res.json(task);
+  } catch (error) {
+    return next(error);
+  }
+};
+
+const deleteTask = async (req, res, next) => {
+  try {
+    if (!mongoose.isValidObjectId(req.params.id)) {
+      return res.status(400).json({ message: 'Invalid task id' });
+    }
+    const task = await Task.findByIdAndDelete(req.params.id);
+    if (!task) return res.status(404).json({ message: 'Task not found' });
+    return res.json({ message: 'Task deleted' });
+  } catch (error) {
+    return next(error);
+  }
+};
+
+module.exports = { getTasks, createTask, updateTask, deleteTask };