feat: MySQL integration, Docker setup, drag-and-drop kanban

- Add CSS media queries for all sections: sidebar overlay, navbar,
  calendar, kanban, dashboard, list view, drawer, modal, reports,
  team tasks, members
- Add hamburger menu button (hidden on desktop, visible on mobile)
- Add sidebar slide-in overlay with backdrop for mobile
- Auto-close sidebar on navigation for mobile UX
- Login card, drawer, and modal go full-width on mobile
- Dashboard stats grid collapses to 2-column on mobile
- Report charts stack to single column on mobile

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:22-alpine
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+
+EXPOSE 5173
+
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

docker-compose.yml

@@ -0,0 +1,52 @@
+version: '3.8'
+
+services:
+  mysql:
+    image: mysql:8.0
+    container_name: scrum-mysql
+    restart: unless-stopped
+    environment:
+      MYSQL_ROOT_PASSWORD: scrumpass
+      MYSQL_DATABASE: scrum_manager
+    ports:
+      - "3306:3306"
+    volumes:
+      - mysql_data:/var/lib/mysql
+    healthcheck:
+      test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "root", "-pscrumpass"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
+  backend:
+    build:
+      context: ./server
+      dockerfile: Dockerfile
+    container_name: scrum-backend
+    restart: unless-stopped
+    ports:
+      - "3001:3001"
+    environment:
+      DB_HOST: mysql
+      DB_PORT: 3306
+      DB_USER: root
+      DB_PASSWORD: scrumpass
+      DB_NAME: scrum_manager
+      PORT: 3001
+    depends_on:
+      mysql:
+        condition: service_healthy
+
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: scrum-frontend
+    restart: unless-stopped
+    ports:
+      - "5173:5173"
+    depends_on:
+      - backend
+
+volumes:
+  mysql_data:

server/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:22-alpine
+
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+RUN npm install
+
+COPY . .
+
+EXPOSE 3001
+
+CMD ["node", "index.js"]

server/db.js

@@ -0,0 +1,94 @@
+import mysql from 'mysql2/promise';
+
+const pool = mysql.createPool({
+    host: process.env.DB_HOST || 'localhost',
+    port: parseInt(process.env.DB_PORT || '3306'),
+    user: process.env.DB_USER || 'root',
+    password: process.env.DB_PASSWORD || 'scrumpass',
+    database: process.env.DB_NAME || 'scrum_manager',
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0,
+});
+
+export async function initDB() {
+    const conn = await pool.getConnection();
+    try {
+        await conn.query(`
+      CREATE TABLE IF NOT EXISTS users (
+        id VARCHAR(36) PRIMARY KEY,
+        name VARCHAR(255) NOT NULL,
+        role VARCHAR(50) NOT NULL DEFAULT 'employee',
+        email VARCHAR(255) NOT NULL UNIQUE,
+        password_hash VARCHAR(255) NOT NULL,
+        color VARCHAR(20) DEFAULT '#818cf8',
+        avatar VARCHAR(10) DEFAULT '',
+        dept VARCHAR(100) DEFAULT ''
+      )
+    `);
+
+        await conn.query(`
+      CREATE TABLE IF NOT EXISTS tasks (
+        id VARCHAR(36) PRIMARY KEY,
+        title VARCHAR(500) NOT NULL,
+        description TEXT,
+        status ENUM('todo','inprogress','review','done') NOT NULL DEFAULT 'todo',
+        priority ENUM('critical','high','medium','low') NOT NULL DEFAULT 'medium',
+        assignee_id VARCHAR(36),
+        reporter_id VARCHAR(36),
+        due_date DATE,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (assignee_id) REFERENCES users(id) ON DELETE SET NULL,
+        FOREIGN KEY (reporter_id) REFERENCES users(id) ON DELETE SET NULL
+      )
+    `);
+
+        await conn.query(`
+      CREATE TABLE IF NOT EXISTS subtasks (
+        id VARCHAR(36) PRIMARY KEY,
+        task_id VARCHAR(36) NOT NULL,
+        title VARCHAR(500) NOT NULL,
+        done BOOLEAN DEFAULT FALSE,
+        FOREIGN KEY (task_id) REFERENCES tasks(id) ON DELETE CASCADE
+      )
+    `);
+
+        await conn.query(`
+      CREATE TABLE IF NOT EXISTS comments (
+        id VARCHAR(36) PRIMARY KEY,
+        task_id VARCHAR(36) NOT NULL,
+        user_id VARCHAR(36),
+        text TEXT NOT NULL,
+        timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (task_id) REFERENCES tasks(id) ON DELETE CASCADE,
+        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE SET NULL
+      )
+    `);
+
+        await conn.query(`
+      CREATE TABLE IF NOT EXISTS activities (
+        id VARCHAR(36) PRIMARY KEY,
+        task_id VARCHAR(36) NOT NULL,
+        text TEXT NOT NULL,
+        timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (task_id) REFERENCES tasks(id) ON DELETE CASCADE
+      )
+    `);
+
+        await conn.query(`
+      CREATE TABLE IF NOT EXISTS task_tags (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        task_id VARCHAR(36) NOT NULL,
+        tag VARCHAR(100) NOT NULL,
+        FOREIGN KEY (task_id) REFERENCES tasks(id) ON DELETE CASCADE,
+        UNIQUE KEY unique_task_tag (task_id, tag)
+      )
+    `);
+
+        console.log('✅ Database tables initialized');
+    } finally {
+        conn.release();
+    }
+}
+
+export default pool;

server/index.js

@@ -0,0 +1,35 @@
+import express from 'express';
+import cors from 'cors';
+import { initDB } from './db.js';
+import authRoutes from './routes/auth.js';
+import taskRoutes from './routes/tasks.js';
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+
+app.use(cors());
+app.use(express.json());
+
+// Routes
+app.use('/api/auth', authRoutes);
+app.use('/api/tasks', taskRoutes);
+
+// Health check
+app.get('/api/health', (_req, res) => {
+    res.json({ status: 'ok', timestamp: new Date().toISOString() });
+});
+
+// Initialize DB and start server
+async function start() {
+    try {
+        await initDB();
+        app.listen(PORT, () => {
+            console.log(`🚀 Backend server running on port ${PORT}`);
+        });
+    } catch (err) {
+        console.error('❌ Failed to start server:', err);
+        process.exit(1);
+    }
+}
+
+start();

server/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "scrum-manager-backend",
+    "version": "1.0.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "start": "node index.js"
+    },
+    "dependencies": {
+        "express": "^5.1.0",
+        "mysql2": "^3.14.1",
+        "cors": "^2.8.5",
+        "bcryptjs": "^3.0.2"
+    }
+}

server/routes/auth.js

@@ -0,0 +1,79 @@
+import { Router } from 'express';
+import bcrypt from 'bcryptjs';
+import pool from '../db.js';
+import { randomUUID } from 'crypto';
+
+const router = Router();
+
+// POST /api/auth/login
+router.post('/login', async (req, res) => {
+    try {
+        const { email, password } = req.body;
+        if (!email || !password) {
+            return res.status(400).json({ error: 'Email and password required' });
+        }
+
+        const [rows] = await pool.query('SELECT * FROM users WHERE email = ?', [email]);
+        if (rows.length === 0) {
+            return res.status(401).json({ error: 'Invalid email or password' });
+        }
+
+        const user = rows[0];
+        const valid = await bcrypt.compare(password, user.password_hash);
+        if (!valid) {
+            return res.status(401).json({ error: 'Invalid email or password' });
+        }
+
+        res.json({
+            id: user.id, name: user.name, role: user.role, email: user.email,
+            color: user.color, avatar: user.avatar, dept: user.dept,
+        });
+    } catch (err) {
+        console.error('Login error:', err);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
+// POST /api/auth/register
+router.post('/register', async (req, res) => {
+    try {
+        const { name, email, password, role, dept } = req.body;
+        if (!name || !email || !password) {
+            return res.status(400).json({ error: 'Name, email and password required' });
+        }
+
+        const [existing] = await pool.query('SELECT id FROM users WHERE email = ?', [email]);
+        if (existing.length > 0) {
+            return res.status(409).json({ error: 'Email already registered' });
+        }
+
+        const id = randomUUID();
+        const password_hash = await bcrypt.hash(password, 10);
+        const avatar = name.split(' ').map(w => w[0]).join('').substring(0, 2).toUpperCase();
+        const colors = ['#818cf8', '#f59e0b', '#34d399', '#f472b6', '#fb923c', '#60a5fa', '#a78bfa'];
+        const color = colors[Math.floor(Math.random() * colors.length)];
+
+        await pool.query(
+            'INSERT INTO users (id, name, role, email, password_hash, color, avatar, dept) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
+            [id, name, role || 'employee', email, password_hash, color, avatar, dept || '']
+        );
+
+        res.status(201).json({ id, name, role: role || 'employee', email, color, avatar, dept: dept || '' });
+    } catch (err) {
+        console.error('Register error:', err);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
+// GET /api/auth/users
+router.get('/users', async (_req, res) => {
+    try {
+        const [rows] = await pool.query('SELECT id, name, role, email, color, avatar, dept FROM users');
+        res.json(rows);
+    } catch (err) {
+        console.error('Get users error:', err);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
+export default router;

server/routes/tasks.js

@@ -0,0 +1,202 @@
+import { Router } from 'express';
+import pool from '../db.js';
+import { randomUUID } from 'crypto';
+
+const router = Router();
+
+// Helper: fetch full task with subtasks, comments, activities, tags
+async function getFullTask(taskId) {
+    const [taskRows] = await pool.query('SELECT * FROM tasks WHERE id = ?', [taskId]);
+    if (taskRows.length === 0) return null;
+
+    const task = taskRows[0];
+    const [subtasks] = await pool.query('SELECT id, title, done FROM subtasks WHERE task_id = ? ORDER BY id', [taskId]);
+    const [comments] = await pool.query('SELECT id, user_id AS userId, text, timestamp FROM comments WHERE task_id = ? ORDER BY timestamp', [taskId]);
+    const [activities] = await pool.query('SELECT id, text, timestamp FROM activities WHERE task_id = ? ORDER BY timestamp', [taskId]);
+    const [tagRows] = await pool.query('SELECT tag FROM task_tags WHERE task_id = ?', [taskId]);
+
+    return {
+        id: task.id,
+        title: task.title,
+        description: task.description || '',
+        status: task.status,
+        priority: task.priority,
+        assignee: task.assignee_id || '',
+        reporter: task.reporter_id || '',
+        dueDate: task.due_date ? task.due_date.toISOString().split('T')[0] : '',
+        tags: tagRows.map(r => r.tag),
+        subtasks: subtasks.map(s => ({ id: s.id, title: s.title, done: !!s.done })),
+        comments: comments.map(c => ({ id: c.id, userId: c.userId, text: c.text, timestamp: c.timestamp?.toISOString() || '' })),
+        activity: activities.map(a => ({ id: a.id, text: a.text, timestamp: a.timestamp?.toISOString() || '' })),
+    };
+}
+
+// GET /api/tasks
+router.get('/', async (_req, res) => {
+    try {
+        const [taskRows] = await pool.query('SELECT id FROM tasks ORDER BY created_at DESC');
+        const tasks = await Promise.all(taskRows.map(t => getFullTask(t.id)));
+        res.json(tasks.filter(Boolean));
+    } catch (err) {
+        console.error('Get tasks error:', err);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
+// POST /api/tasks
+router.post('/', async (req, res) => {
+    const conn = await pool.getConnection();
+    try {
+        await conn.beginTransaction();
+        const { title, description, status, priority, assignee, reporter, dueDate, tags, subtasks } = req.body;
+        const id = randomUUID();
+
+        await conn.query(
+            'INSERT INTO tasks (id, title, description, status, priority, assignee_id, reporter_id, due_date) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
+            [id, title, description || '', status || 'todo', priority || 'medium', assignee || null, reporter || null, dueDate || null]
+        );
+
+        // Insert tags
+        if (tags && tags.length > 0) {
+            const tagValues = tags.map(tag => [id, tag]);
+            await conn.query('INSERT INTO task_tags (task_id, tag) VALUES ?', [tagValues]);
+        }
+
+        // Insert subtasks
+        if (subtasks && subtasks.length > 0) {
+            for (const st of subtasks) {
+                await conn.query('INSERT INTO subtasks (id, task_id, title, done) VALUES (?, ?, ?, ?)',
+                    [st.id || randomUUID(), id, st.title, st.done || false]);
+            }
+        }
+
+        // Add creation activity
+        const actId = randomUUID();
+        await conn.query('INSERT INTO activities (id, task_id, text) VALUES (?, ?, ?)',
+            [actId, id, '📝 Task created']);
+
+        await conn.commit();
+        const task = await getFullTask(id);
+        res.status(201).json(task);
+    } catch (err) {
+        await conn.rollback();
+        console.error('Create task error:', err);
+        res.status(500).json({ error: 'Internal server error' });
+    } finally {
+        conn.release();
+    }
+});
+
+// PUT /api/tasks/:id
+router.put('/:id', async (req, res) => {
+    const conn = await pool.getConnection();
+    try {
+        await conn.beginTransaction();
+        const { title, description, status, priority, assignee, reporter, dueDate, tags } = req.body;
+        const taskId = req.params.id;
+
+        // Check task exists
+        const [existing] = await conn.query('SELECT id FROM tasks WHERE id = ?', [taskId]);
+        if (existing.length === 0) {
+            await conn.rollback();
+            return res.status(404).json({ error: 'Task not found' });
+        }
+
+        await conn.query(
+            `UPDATE tasks SET title = COALESCE(?, title), description = COALESCE(?, description),
+       status = COALESCE(?, status), priority = COALESCE(?, priority),
+       assignee_id = COALESCE(?, assignee_id), reporter_id = COALESCE(?, reporter_id),
+       due_date = COALESCE(?, due_date) WHERE id = ?`,
+            [title, description, status, priority, assignee, reporter, dueDate, taskId]
+        );
+
+        // Update tags if provided
+        if (tags !== undefined) {
+            await conn.query('DELETE FROM task_tags WHERE task_id = ?', [taskId]);
+            if (tags.length > 0) {
+                const tagValues = tags.map(tag => [taskId, tag]);
+                await conn.query('INSERT INTO task_tags (task_id, tag) VALUES ?', [tagValues]);
+            }
+        }
+
+        await conn.commit();
+        const task = await getFullTask(taskId);
+        res.json(task);
+    } catch (err) {
+        await conn.rollback();
+        console.error('Update task error:', err);
+        res.status(500).json({ error: 'Internal server error' });
+    } finally {
+        conn.release();
+    }
+});
+
+// POST /api/tasks/:id/subtasks
+router.post('/:id/subtasks', async (req, res) => {
+    try {
+        const { title } = req.body;
+        const id = randomUUID();
+        await pool.query('INSERT INTO subtasks (id, task_id, title, done) VALUES (?, ?, ?, ?)',
+            [id, req.params.id, title, false]);
+        res.status(201).json({ id, title, done: false });
+    } catch (err) {
+        console.error('Add subtask error:', err);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
+// PUT /api/tasks/:id/subtasks/:sid
+router.put('/:id/subtasks/:sid', async (req, res) => {
+    try {
+        const { done } = req.body;
+        await pool.query('UPDATE subtasks SET done = ? WHERE id = ? AND task_id = ?',
+            [done, req.params.sid, req.params.id]);
+        res.json({ success: true });
+    } catch (err) {
+        console.error('Toggle subtask error:', err);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
+// POST /api/tasks/:id/comments
+router.post('/:id/comments', async (req, res) => {
+    try {
+        const { userId, text } = req.body;
+        const id = randomUUID();
+        const timestamp = new Date();
+        await pool.query('INSERT INTO comments (id, task_id, user_id, text, timestamp) VALUES (?, ?, ?, ?, ?)',
+            [id, req.params.id, userId, text, timestamp]);
+        res.status(201).json({ id, userId, text, timestamp: timestamp.toISOString() });
+    } catch (err) {
+        console.error('Add comment error:', err);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
+// POST /api/tasks/:id/activity
+router.post('/:id/activity', async (req, res) => {
+    try {
+        const { text } = req.body;
+        const id = randomUUID();
+        const timestamp = new Date();
+        await pool.query('INSERT INTO activities (id, task_id, text, timestamp) VALUES (?, ?, ?, ?)',
+            [id, req.params.id, text, timestamp]);
+        res.status(201).json({ id, text, timestamp: timestamp.toISOString() });
+    } catch (err) {
+        console.error('Add activity error:', err);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
+// DELETE /api/tasks/:id
+router.delete('/:id', async (req, res) => {
+    try {
+        await pool.query('DELETE FROM tasks WHERE id = ?', [req.params.id]);
+        res.json({ success: true });
+    } catch (err) {
+        console.error('Delete task error:', err);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
+export default router;

src/App.tsx

@@ -1,6 +1,7 @@
-import { useState } from 'react';
-import { SEED_TASKS, USERS } from './data';
+import { useState, useEffect } from 'react';
+import { apiFetchTasks, apiFetchUsers, apiCreateTask, apiUpdateTask, apiAddActivity } from './api';
 import type { Task, User, Status } from './data';
+import { STATUS_LABELS } from './data';
 import { LoginPage } from './Login';
 import { Sidebar } from './Sidebar';
 import { TopNavbar, BottomToggleBar } from './NavBars';
@@ -24,10 +25,8 @@ const VIEW_PAGES = ['calendar', 'kanban', 'list'];
 export default function App() {
   const now = new Date();
   const [currentUser, setCurrentUser] = useState<User | null>(null);
-  const [tasks, setTasks] = useState<Task[]>(SEED_TASKS);
-  const [managedUsers, setManagedUsers] = useState(() =>
-    USERS.map(u => ({ ...u, active: true, joinedDate: '2025-12-01' }))
-  );
+  const [users, setUsers] = useState<User[]>([]);
+  const [tasks, setTasks] = useState<Task[]>([]);
   const [activePage, setActivePage] = useState('calendar');
   const [activeView, setActiveView] = useState('calendar');
   const [activeTask, setActiveTask] = useState<Task | null>(null);
@@ -37,13 +36,29 @@ export default function App() {
   const [calView, setCalView] = useState('month');
   const [filterUser, setFilterUser] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
+  const [sidebarOpen, setSidebarOpen] = useState(false);
   const [quickAddDay, setQuickAddDay] = useState<{ date: string; rect: { top: number; left: number } } | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Load data from API when user logs in
+  useEffect(() => {
+    if (!currentUser) return;
+    setLoading(true);
+    Promise.all([apiFetchTasks(), apiFetchUsers()])
+      .then(([fetchedTasks, fetchedUsers]) => {
+        setTasks(fetchedTasks);
+        setUsers(fetchedUsers);
+      })
+      .catch(err => console.error('Failed to load data:', err))
+      .finally(() => setLoading(false));
+  }, [currentUser]);
 
   if (!currentUser) return <LoginPage onLogin={u => { setCurrentUser(u); setActivePage('calendar'); setActiveView('calendar'); }} />;
 
   const handleNavigate = (page: string) => {
     setActivePage(page);
     if (VIEW_PAGES.includes(page)) setActiveView(page);
+    setSidebarOpen(false);
   };
 
   const handleViewChange = (view: string) => {
@@ -58,29 +73,91 @@ export default function App() {
     setQuickAddDay({ date, rect: { top: rect.bottom, left: rect.left } });
   };
 
-  const handleQuickAdd = (partial: Partial<Task>) => {
-    const task: Task = {
-      id: `t${Date.now()}`, title: partial.title || '', description: partial.description || '',
-      status: (partial.status || 'todo') as Status, priority: partial.priority || 'medium',
-      assignee: partial.assignee || 'u1', reporter: currentUser.id, dueDate: partial.dueDate || '',
-      tags: partial.tags || [], subtasks: partial.subtasks || [], comments: partial.comments || [],
-      activity: [{ id: `a${Date.now()}`, text: '📝 Task created', timestamp: new Date().toISOString() }],
-    };
-    setTasks(prev => [...prev, task]);
-    setQuickAddDay(null);
+  const handleQuickAdd = async (partial: Partial<Task>) => {
+    try {
+      const created = await apiCreateTask({
+        title: partial.title || '',
+        description: partial.description || '',
+        status: partial.status || 'todo',
+        priority: partial.priority || 'medium',
+        assignee: partial.assignee || currentUser.id,
+        reporter: currentUser.id,
+        dueDate: partial.dueDate || '',
+        tags: partial.tags || [],
+      });
+      setTasks(prev => [...prev, created]);
+      setQuickAddDay(null);
+    } catch (err) {
+      console.error('Failed to quick-add task:', err);
+    }
   };
 
-  const handleAddTask = (task: Task) => setTasks(prev => [...prev, { ...task, reporter: currentUser.id }]);
+  const handleAddTask = async (task: Task) => {
+    try {
+      const created = await apiCreateTask({
+        title: task.title,
+        description: task.description,
+        status: task.status,
+        priority: task.priority,
+        assignee: task.assignee,
+        reporter: currentUser.id,
+        dueDate: task.dueDate,
+        tags: task.tags,
+      });
+      setTasks(prev => [...prev, created]);
+    } catch (err) {
+      console.error('Failed to add task:', err);
+    }
+  };
 
-  const handleUpdateTask = (updated: Task) => {
-    setTasks(prev => prev.map(t => t.id === updated.id ? updated : t));
-    setActiveTask(updated);
+  const handleUpdateTask = async (updated: Task) => {
+    try {
+      const result = await apiUpdateTask(updated.id, {
+        title: updated.title,
+        description: updated.description,
+        status: updated.status,
+        priority: updated.priority,
+        assignee: updated.assignee,
+        reporter: updated.reporter,
+        dueDate: updated.dueDate,
+        tags: updated.tags,
+      });
+      setTasks(prev => prev.map(t => t.id === result.id ? result : t));
+      setActiveTask(result);
+    } catch (err) {
+      console.error('Failed to update task:', err);
+    }
   };
 
   const handleNewTask = () => { setAddModalDefaults({}); setShowAddModal(true); };
   const handleKanbanAdd = (status: Status) => { setAddModalDefaults({ status }); setShowAddModal(true); };
-  const handleToggleDone = (taskId: string) => {
-    setTasks(prev => prev.map(t => t.id === taskId ? { ...t, status: t.status === 'done' ? 'todo' : 'done' as Status } : t));
+  const handleToggleDone = async (taskId: string) => {
+    const task = tasks.find(t => t.id === taskId);
+    if (!task) return;
+    const newStatus = task.status === 'done' ? 'todo' : 'done';
+    try {
+      const result = await apiUpdateTask(taskId, { status: newStatus });
+      await apiAddActivity(taskId, `🔄 ${currentUser.name} changed status to ${newStatus}`);
+      setTasks(prev => prev.map(t => t.id === taskId ? result : t));
+    } catch (err) {
+      console.error('Failed to toggle done:', err);
+    }
+  };
+
+  const handleMoveTask = async (taskId: string, newStatus: Status) => {
+    const task = tasks.find(t => t.id === taskId);
+    if (!task || task.status === newStatus) return;
+    // Optimistic update
+    setTasks(prev => prev.map(t => t.id === taskId ? { ...t, status: newStatus } : t));
+    try {
+      const result = await apiUpdateTask(taskId, { status: newStatus });
+      await apiAddActivity(taskId, `🔄 ${currentUser.name} moved task to ${STATUS_LABELS[newStatus]}`);
+      setTasks(prev => prev.map(t => t.id === taskId ? result : t));
+    } catch (err) {
+      console.error('Failed to move task:', err);
+      // Revert on failure
+      setTasks(prev => prev.map(t => t.id === taskId ? task : t));
+    }
   };
 
   const displayPage = VIEW_PAGES.includes(activePage) ? activeView : activePage;
@@ -88,36 +165,45 @@ export default function App() {
 
   const pageTitle = PAGE_TITLES[displayPage] || 'Calendar';
 
+  if (loading) {
+    return (
+      <div className="app-shell" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
+        <p style={{ color: '#818cf8', fontSize: 18 }}>Loading...</p>
+      </div>
+    );
+  }
+
   return (
     <div className="app-shell">
       <TopNavbar title={pageTitle} filterUser={filterUser} onFilterChange={setFilterUser}
-        searchQuery={searchQuery} onSearch={setSearchQuery} onNewTask={handleNewTask} />
+        searchQuery={searchQuery} onSearch={setSearchQuery} onNewTask={handleNewTask}
+        onOpenSidebar={() => setSidebarOpen(true)} users={users} />
       <div className="app-body">
         <Sidebar currentUser={currentUser} activePage={activePage} onNavigate={handleNavigate}
-          onSignOut={() => { setCurrentUser(null); setActivePage('calendar'); setActiveView('calendar'); }} />
+          onSignOut={() => { setCurrentUser(null); setActivePage('calendar'); setActiveView('calendar'); setSidebarOpen(false); }}
+          isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} users={users} />
         <div className="main-content">
           {displayPage === 'calendar' && (
             <CalendarView tasks={tasks} currentUser={currentUser} calMonth={calMonth} calView={calView}
               onMonthChange={setCalMonth} onViewChange={setCalView} onTaskClick={handleTaskClick}
-              onDayClick={handleDayClick} filterUser={filterUser} searchQuery={searchQuery} />
+              onDayClick={handleDayClick} filterUser={filterUser} searchQuery={searchQuery} users={users} />
           )}
           {displayPage === 'kanban' && (
             <KanbanBoard tasks={tasks} currentUser={currentUser} onTaskClick={handleTaskClick}
-              onAddTask={handleKanbanAdd} filterUser={filterUser} searchQuery={searchQuery} />
+              onAddTask={handleKanbanAdd} onMoveTask={handleMoveTask} filterUser={filterUser} searchQuery={searchQuery} users={users} />
           )}
           {displayPage === 'list' && (
             <ListView tasks={tasks} currentUser={currentUser} onTaskClick={handleTaskClick}
-              filterUser={filterUser} searchQuery={searchQuery} onToggleDone={handleToggleDone} />
+              filterUser={filterUser} searchQuery={searchQuery} onToggleDone={handleToggleDone} users={users} />
           )}
-          {displayPage === 'dashboard' && <DashboardPage tasks={tasks} currentUser={currentUser} />}
+          {displayPage === 'dashboard' && <DashboardPage tasks={tasks} currentUser={currentUser} users={users} />}
           {displayPage === 'mytasks' && (
             <ListView tasks={filteredMyTasks} currentUser={currentUser} onTaskClick={handleTaskClick}
-              filterUser={null} searchQuery={searchQuery} onToggleDone={handleToggleDone} />
+              filterUser={null} searchQuery={searchQuery} onToggleDone={handleToggleDone} users={users} />
           )}
-          {displayPage === 'teamtasks' && <TeamTasksPage tasks={tasks} currentUser={currentUser} />}
-          {displayPage === 'reports' && <ReportsPage tasks={tasks} />}
-          {displayPage === 'members' && <MembersPage tasks={tasks} currentUser={currentUser}
-            users={managedUsers} onUpdateUsers={setManagedUsers} />}
+          {displayPage === 'teamtasks' && <TeamTasksPage tasks={tasks} currentUser={currentUser} users={users} />}
+          {displayPage === 'reports' && <ReportsPage tasks={tasks} users={users} />}
+          {displayPage === 'members' && <MembersPage tasks={tasks} users={users} />}
         </div>
       </div>
 
@@ -125,8 +211,8 @@ export default function App() {
         <BottomToggleBar activeView={activeView} onViewChange={handleViewChange} />
       )}
 
-      {activeTask && <TaskDrawer task={activeTask} currentUser={currentUser} onClose={() => setActiveTask(null)} onUpdate={handleUpdateTask} />}
-      {showAddModal && <AddTaskModal onClose={() => setShowAddModal(false)} onAdd={handleAddTask} defaultDate={addModalDefaults.date} defaultStatus={addModalDefaults.status} />}
+      {activeTask && <TaskDrawer task={activeTask} currentUser={currentUser} onClose={() => setActiveTask(null)} onUpdate={handleUpdateTask} users={users} />}
+      {showAddModal && <AddTaskModal onClose={() => setShowAddModal(false)} onAdd={handleAddTask} defaultDate={addModalDefaults.date} defaultStatus={addModalDefaults.status} users={users} currentUser={currentUser} />}
 
       {quickAddDay && (
         <div style={{ position: 'fixed', inset: 0, zIndex: 199 }} onClick={() => setQuickAddDay(null)}>
@@ -134,7 +220,7 @@ export default function App() {
             onClick={e => e.stopPropagation()}>
             <QuickAddPanel date={quickAddDay.date} onAdd={handleQuickAdd}
               onOpenFull={() => { setAddModalDefaults({ date: quickAddDay.date }); setShowAddModal(true); setQuickAddDay(null); }}
-              onClose={() => setQuickAddDay(null)} />
+              onClose={() => setQuickAddDay(null)} users={users} />
           </div>
         </div>
       )}

src/Calendar.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import type { Task, User } from './data';
-import { USERS, PRIORITY_COLORS } from './data';
+import { PRIORITY_COLORS } from './data';
 import { Avatar } from './Shared';
 
 interface CalendarProps {
     tasks: Task[]; currentUser: User; calMonth: { year: number; month: number }; calView: string;
     onMonthChange: (m: { year: number; month: number }) => void; onViewChange: (v: string) => void;
     onTaskClick: (t: Task) => void; onDayClick: (date: string, el: HTMLElement) => void;
-    filterUser: string | null; searchQuery: string;
+    filterUser: string | null; searchQuery: string; users: User[];
 }
 
 const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
@@ -47,29 +47,29 @@ function getWeekDays(_year: number, _month: number) {
 function dateStr(d: Date) { return d.toISOString().split('T')[0]; }
 function isToday(d: Date) { const t = new Date(); return d.getDate() === t.getDate() && d.getMonth() === t.getMonth() && d.getFullYear() === t.getFullYear(); }
 
-function TaskChip({ task, onClick }: { task: Task; onClick: () => void }) {
+function TaskChip({ task, onClick, users }: { task: Task; onClick: () => void; users: User[] }) {
     const p = PRIORITY_COLORS[task.priority];
     return (
         <div className="task-chip" style={{ background: p.bg, borderLeftColor: p.color }} onClick={e => { e.stopPropagation(); onClick(); }}>
             <span className="task-chip-dot" style={{ background: p.color }} />
             <span className="task-chip-title">{task.title}</span>
-            <Avatar userId={task.assignee} size={14} />
+            <Avatar userId={task.assignee} size={14} users={users} />
         </div>
     );
 }
 
-function MorePopover({ tasks, onTaskClick, onClose }: { tasks: Task[]; onTaskClick: (t: Task) => void; onClose: () => void }) {
+function MorePopover({ tasks, onTaskClick, onClose, users }: { tasks: Task[]; onTaskClick: (t: Task) => void; onClose: () => void; users: User[] }) {
     return (
         <div className="more-popover" onClick={e => e.stopPropagation()}>
             <div className="more-popover-title">{tasks.length} tasks</div>
-            {tasks.map(t => <TaskChip key={t.id} task={t} onClick={() => { onTaskClick(t); onClose(); }} />)}
+            {tasks.map(t => <TaskChip key={t.id} task={t} onClick={() => { onTaskClick(t); onClose(); }} users={users} />)}
         </div>
     );
 }
 
-export function QuickAddPanel({ date, onAdd, onOpenFull, onClose }: { date: string; onAdd: (t: Partial<Task>) => void; onOpenFull: () => void; onClose: () => void }) {
+export function QuickAddPanel({ date, onAdd, onOpenFull, onClose, users }: { date: string; onAdd: (t: Partial<Task>) => void; onOpenFull: () => void; onClose: () => void; users: User[] }) {
     const [title, setTitle] = useState('');
-    const [assignee, setAssignee] = useState('u1');
+    const [assignee, setAssignee] = useState(users[0]?.id || '');
     const [priority, setPriority] = useState<'medium' | 'low' | 'high' | 'critical'>('medium');
 
     const submit = () => {
@@ -86,7 +86,7 @@ export function QuickAddPanel({ date, onAdd, onOpenFull, onClose }: { date: stri
                 onChange={e => setTitle(e.target.value)} onKeyDown={e => e.key === 'Enter' && submit()} />
             <div className="quick-add-row">
                 <select className="quick-add-select" value={assignee} onChange={e => setAssignee(e.target.value)}>
-                    {USERS.map(u => <option key={u.id} value={u.id}>{u.avatar} {u.name}</option>)}
+                    {users.map(u => <option key={u.id} value={u.id}>{u.avatar} {u.name}</option>)}
                 </select>
                 <select className="quick-add-select" value={priority} onChange={e => setPriority(e.target.value as any)}>
                     {['critical', 'high', 'medium', 'low'].map(p => <option key={p} value={p}>{p}</option>)}
@@ -100,7 +100,7 @@ export function QuickAddPanel({ date, onAdd, onOpenFull, onClose }: { date: stri
     );
 }
 
-export function CalendarView({ tasks, currentUser, calMonth, calView, onMonthChange, onViewChange, onTaskClick, onDayClick, filterUser, searchQuery }: CalendarProps) {
+export function CalendarView({ tasks, currentUser, calMonth, calView, onMonthChange, onViewChange, onTaskClick, onDayClick, filterUser, searchQuery, users }: CalendarProps) {
     const [morePopover, setMorePopover] = useState<{ date: string; tasks: Task[] } | null>(null);
     const filtered = filterTasks(tasks, currentUser, filterUser, searchQuery);
 
@@ -147,14 +147,14 @@ export function CalendarView({ tasks, currentUser, calMonth, calView, onMonthCha
                                     {cell.date.getDate()}
                                 </div>
                                 <div className="day-tasks">
-                                    {show.map(t => <TaskChip key={t.id} task={t} onClick={() => onTaskClick(t)} />)}
+                                    {show.map(t => <TaskChip key={t.id} task={t} onClick={() => onTaskClick(t)} users={users} />)}
                                     {extra > 0 && (
                                         <span className="more-tasks-link" onClick={e => { e.stopPropagation(); setMorePopover({ date: ds, tasks: dayTasks }); }}>
                                             +{extra} more
                                         </span>
                                     )}
                                 </div>
-                                {morePopover?.date === ds && <MorePopover tasks={morePopover.tasks} onTaskClick={onTaskClick} onClose={() => setMorePopover(null)} />}
+                                {morePopover?.date === ds && <MorePopover tasks={morePopover.tasks} onTaskClick={onTaskClick} onClose={() => setMorePopover(null)} users={users} />}
                             </div>
                         );
                     })}

src/Dashboard.tsx

@@ -1,8 +1,8 @@
 import type { Task, User } from './data';
-import { USERS, STATUS_COLORS, PRIORITY_COLORS } from './data';
+import { STATUS_COLORS, PRIORITY_COLORS } from './data';
 import { Avatar } from './Shared';
 
-export function DashboardPage({ tasks, currentUser }: { tasks: Task[]; currentUser: User }) {
+export function DashboardPage({ tasks, currentUser, users }: { tasks: Task[]; currentUser: User; users: User[] }) {
     const total = tasks.length;
     const completed = tasks.filter(t => t.status === 'done').length;
     const overdue = tasks.filter(t => new Date(t.dueDate + 'T00:00:00') < new Date() && t.status !== 'done').length;
@@ -32,13 +32,13 @@ export function DashboardPage({ tasks, currentUser }: { tasks: Task[]; currentUs
                 <>
                     <div className="workload-card">
                         <div className="workload-card-title">Team Workload</div>
-                        {USERS.filter(u => u.id !== currentUser.id || true).map(u => {
+                        {users.map(u => {
                             const ut = tasks.filter(t => t.assignee === u.id);
                             const done = ut.filter(t => t.status === 'done').length;
                             const pct = ut.length ? Math.round((done / ut.length) * 100) : 0;
                             return (
                                 <div key={u.id} className="workload-row">
-                                    <Avatar userId={u.id} size={28} />
+                                    <Avatar userId={u.id} size={28} users={users} />
                                     <span className="workload-name">{u.name}</span>
                                     <span className="workload-dept">{u.dept}</span>
                                     <div className="workload-bar">

src/Kanban.tsx

@@ -1,17 +1,27 @@
+import { useState } from 'react';
 import type { Task, User, Status } from './data';
 import { PRIORITY_COLORS, STATUS_COLORS, STATUS_LABELS } from './data';
 import { Avatar, PriorityBadge, StatusBadge, ProgressBar } from './Shared';
 
-function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
+function TaskCard({ task, onClick, users }: { task: Task; onClick: () => void; users: User[] }) {
     const p = PRIORITY_COLORS[task.priority];
     const due = new Date(task.dueDate + 'T00:00:00');
     const overdue = due < new Date() && task.status !== 'done';
     const commCount = task.comments.length;
     return (
-        <div className="task-card" style={{ borderLeftColor: p.color }} onClick={onClick}>
+        <div className="task-card" style={{ borderLeftColor: p.color }}
+            draggable
+            onDragStart={e => {
+                e.dataTransfer.setData('text/plain', task.id);
+                e.dataTransfer.effectAllowed = 'move';
+                (e.currentTarget as HTMLElement).classList.add('dragging');
+            }}
+            onDragEnd={e => (e.currentTarget as HTMLElement).classList.remove('dragging')}
+            onClick={onClick}
+        >
             <div className="task-card-row">
                 <span className="task-card-title">{task.title}</span>
-                <Avatar userId={task.assignee} size={24} />
+                <Avatar userId={task.assignee} size={24} users={users} />
             </div>
             <div className="task-card-badges">
                 <PriorityBadge level={task.priority} />
@@ -27,12 +37,29 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
     );
 }
 
-function KanbanColumn({ status, statusLabel, tasks, color, onTaskClick, onAddTask }: {
+function KanbanColumn({ status, statusLabel, tasks, color, onTaskClick, onAddTask, onMoveTask, users }: {
     status: Status; statusLabel: string; tasks: Task[]; color: string;
     onTaskClick: (t: Task) => void; onAddTask: (s: Status) => void;
+    onMoveTask: (taskId: string, newStatus: Status) => void; users: User[];
 }) {
+    const [dragOver, setDragOver] = useState(false);
+
     return (
-        <div className="kanban-column">
+        <div
+            className={`kanban-column ${dragOver ? 'kanban-column-dragover' : ''}`}
+            onDragOver={e => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; setDragOver(true); }}
+            onDragEnter={e => { e.preventDefault(); setDragOver(true); }}
+            onDragLeave={e => {
+                // Only set false if leaving the column (not entering a child)
+                if (!e.currentTarget.contains(e.relatedTarget as Node)) setDragOver(false);
+            }}
+            onDrop={e => {
+                e.preventDefault();
+                setDragOver(false);
+                const taskId = e.dataTransfer.getData('text/plain');
+                if (taskId) onMoveTask(taskId, status);
+            }}
+        >
             <div className="kanban-col-header">
                 <div className="kanban-col-dot" style={{ background: color }} />
                 <span className="kanban-col-label">{statusLabel}</span>
@@ -41,9 +68,11 @@ function KanbanColumn({ status, statusLabel, tasks, color, onTaskClick, onAddTas
             </div>
             <div className="kanban-col-body">
                 {tasks.length === 0 ? (
-                    <div className="kanban-empty">No tasks here · Click + to add one</div>
+                    <div className="kanban-empty">
+                        {dragOver ? '⬇ Drop here' : 'No tasks here · Click + to add one'}
+                    </div>
                 ) : (
-                    tasks.map(t => <TaskCard key={t.id} task={t} onClick={() => onTaskClick(t)} />)
+                    tasks.map(t => <TaskCard key={t.id} task={t} onClick={() => onTaskClick(t)} users={users} />)
                 )}
             </div>
         </div>
@@ -52,10 +81,11 @@ function KanbanColumn({ status, statusLabel, tasks, color, onTaskClick, onAddTas
 
 interface KanbanProps {
     tasks: Task[]; currentUser: User; onTaskClick: (t: Task) => void;
-    onAddTask: (s: Status) => void; filterUser: string | null; searchQuery: string;
+    onAddTask: (s: Status) => void; onMoveTask: (taskId: string, newStatus: Status) => void;
+    filterUser: string | null; searchQuery: string; users: User[];
 }
 
-export function KanbanBoard({ tasks, currentUser, onTaskClick, onAddTask, filterUser, searchQuery }: KanbanProps) {
+export function KanbanBoard({ tasks, currentUser, onTaskClick, onAddTask, onMoveTask, filterUser, searchQuery, users }: KanbanProps) {
     let filtered = tasks;
     if (currentUser.role === 'employee') filtered = filtered.filter(t => t.assignee === currentUser.id);
     if (filterUser) filtered = filtered.filter(t => t.assignee === filterUser);
@@ -66,7 +96,8 @@ export function KanbanBoard({ tasks, currentUser, onTaskClick, onAddTask, filter
         <div className="kanban-board">
             {statuses.map(s => (
                 <KanbanColumn key={s} status={s} statusLabel={STATUS_LABELS[s]} color={STATUS_COLORS[s]}
-                    tasks={filtered.filter(t => t.status === s)} onTaskClick={onTaskClick} onAddTask={onAddTask} />
+                    tasks={filtered.filter(t => t.status === s)} onTaskClick={onTaskClick}
+                    onAddTask={onAddTask} onMoveTask={onMoveTask} users={users} />
             ))}
         </div>
     );

src/ListView.tsx

@@ -7,12 +7,13 @@ interface ListProps {
     tasks: Task[]; currentUser: User; onTaskClick: (t: Task) => void;
     filterUser: string | null; searchQuery: string;
     onToggleDone: (taskId: string) => void;
+    users: User[];
 }
 
 type SortKey = 'dueDate' | 'priority' | 'status' | 'assignee';
 const PRIO_ORDER = { critical: 0, high: 1, medium: 2, low: 3 };
 
-export function ListView({ tasks, currentUser, onTaskClick, filterUser, searchQuery, onToggleDone }: ListProps) {
+export function ListView({ tasks, currentUser, onTaskClick, filterUser, searchQuery, onToggleDone, users }: ListProps) {
     const [sortBy, setSortBy] = useState<SortKey>('dueDate');
     const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
     const [menuOpen, setMenuOpen] = useState<string | null>(null);
@@ -53,14 +54,14 @@ export function ListView({ tasks, currentUser, onTaskClick, filterUser, searchQu
                 </thead>
                 <tbody>
                     {sorted.map(t => {
-                        const u = getUserById(t.assignee);
+                        const u = getUserById(users, t.assignee);
                         const due = new Date(t.dueDate + 'T00:00:00');
                         const overdue = due < new Date() && t.status !== 'done';
                         return (
                             <tr key={t.id}>
                                 <td><input type="checkbox" checked={t.status === 'done'} onChange={() => onToggleDone(t.id)} /></td>
                                 <td onClick={() => onTaskClick(t)} style={{ cursor: 'pointer' }}>{t.title}</td>
-                                <td><div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Avatar userId={t.assignee} size={20} />{u?.name}</div></td>
+                                <td><div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Avatar userId={t.assignee} size={20} users={users} />{u?.name}</div></td>
                                 <td><PriorityBadge level={t.priority} /></td>
                                 <td><StatusBadge status={t.status} /></td>
                                 <td style={{ color: overdue ? '#ef4444' : undefined }}>{due.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</td>

src/Login.tsx

@@ -1,29 +1,70 @@
 import { useState } from 'react';
-import { USERS } from './data';
 import type { User } from './data';
+import { apiLogin, apiRegister } from './api';
 
 export function LoginPage({ onLogin }: { onLogin: (u: User) => void }) {
+    const [mode, setMode] = useState<'login' | 'register'>('login');
+    const [name, setName] = useState('');
     const [email, setEmail] = useState('');
     const [pass, setPass] = useState('');
+    const [role, setRole] = useState('employee');
+    const [dept, setDept] = useState('');
     const [showPass, setShowPass] = useState(false);
     const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
 
-    const handleSubmit = (e: React.FormEvent) => {
+    const handleLogin = async (e: React.FormEvent) => {
         e.preventDefault();
-        const user = USERS.find(u => u.email === email && u.pass === pass);
-        if (user) { onLogin(user); }
-        else { setError('Invalid email or password'); }
+        setLoading(true);
+        setError('');
+        try {
+            const user = await apiLogin(email, pass);
+            onLogin(user);
+        } catch (err: any) {
+            setError(err.message || 'Invalid email or password');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleRegister = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!name.trim() || !email.trim() || !pass.trim()) {
+            setError('All fields are required');
+            return;
+        }
+        setLoading(true);
+        setError('');
+        try {
+            const user = await apiRegister({ name, email, password: pass, role, dept });
+            onLogin(user);
+        } catch (err: any) {
+            setError(err.message || 'Registration failed');
+        } finally {
+            setLoading(false);
+        }
     };
 
     return (
         <div className="login-bg">
-            <form className="login-card" onSubmit={handleSubmit}>
+            <form className="login-card" onSubmit={mode === 'login' ? handleLogin : handleRegister}>
                 <div className="login-logo">
                     <div className="login-logo-icon">⚡</div>
                     <span className="login-title">Scrum-manager</span>
                 </div>
                 <p className="login-tagline">Your team's command center</p>
                 <div className="login-divider" />
+
+                {mode === 'register' && (
+                    <>
+                        <label className="login-label">Name</label>
+                        <div className="login-input-wrap">
+                            <input className={`login-input ${error ? 'error' : ''}`} type="text" placeholder="Your full name"
+                                value={name} onChange={e => { setName(e.target.value); setError(''); }} />
+                        </div>
+                    </>
+                )}
+
                 <label className="login-label">Email</label>
                 <div className="login-input-wrap">
                     <input className={`login-input ${error ? 'error' : ''}`} type="email" placeholder="you@company.io"
@@ -35,9 +76,32 @@ export function LoginPage({ onLogin }: { onLogin: (u: User) => void }) {
                         value={pass} onChange={e => { setPass(e.target.value); setError(''); }} />
                     <button type="button" className="login-eye" onClick={() => setShowPass(!showPass)}>{showPass ? '🙈' : '👁'}</button>
                 </div>
-                <button type="submit" className="login-btn">Sign In</button>
+
+                {mode === 'register' && (
+                    <>
+                        <label className="login-label">Role</label>
+                        <div className="login-input-wrap">
+                            <select className="login-input" value={role} onChange={e => setRole(e.target.value)}>
+                                <option value="employee">Employee</option>
+                                <option value="manager">Manager</option>
+                                <option value="cto">CTO</option>
+                            </select>
+                        </div>
+                        <label className="login-label">Department</label>
+                        <div className="login-input-wrap">
+                            <input className="login-input" type="text" placeholder="e.g. Backend, Frontend, DevOps"
+                                value={dept} onChange={e => setDept(e.target.value)} />
+                        </div>
+                    </>
+                )}
+
+                <button type="submit" className="login-btn" disabled={loading}>
+                    {loading ? '...' : mode === 'login' ? 'Sign In' : 'Create Account'}
+                </button>
                 {error && <p className="login-error">{error}</p>}
-                <div className="login-hint">💡 Try: subodh@corp.io / cto123</div>
+                <div className="login-hint" style={{ cursor: 'pointer' }} onClick={() => { setMode(mode === 'login' ? 'register' : 'login'); setError(''); }}>
+                    {mode === 'login' ? '📝 No account? Register here' : '🔑 Already have an account? Sign in'}
+                </div>
             </form>
         </div>
     );

src/NavBars.tsx

@@ -1,5 +1,4 @@
-import { USERS } from './data';
-
+import type { User } from './data';
 
 interface TopNavbarProps {
     title: string;
@@ -8,11 +7,14 @@ interface TopNavbarProps {
     searchQuery: string;
     onSearch: (q: string) => void;
     onNewTask: () => void;
+    onOpenSidebar: () => void;
+    users: User[];
 }
 
-export function TopNavbar({ title, filterUser, onFilterChange, searchQuery, onSearch, onNewTask }: TopNavbarProps) {
+export function TopNavbar({ title, filterUser, onFilterChange, searchQuery, onSearch, onNewTask, onOpenSidebar, users }: TopNavbarProps) {
     return (
         <div className="top-navbar">
+            <button className="hamburger-btn" onClick={onOpenSidebar}>☰</button>
             <span className="navbar-title">{title}</span>
             <div className="navbar-search">
                 <span className="navbar-search-icon">🔍</span>
@@ -21,7 +23,7 @@ export function TopNavbar({ title, filterUser, onFilterChange, searchQuery, onSe
             <div className="navbar-right">
                 <div className="filter-chips">
                     <span className={`filter-chip filter-chip-all ${!filterUser ? 'active' : ''}`} onClick={() => onFilterChange(null)}>All</span>
-                    {USERS.map(u => (
+                    {users.map(u => (
                         <div key={u.id} className={`filter-chip ${filterUser === u.id ? 'active' : ''}`}
                             style={{ background: u.color, borderColor: filterUser === u.id ? u.color : 'transparent' }}
                             title={u.name} onClick={() => onFilterChange(u.id === filterUser ? null : u.id)}>

src/Pages.tsx

@@ -1,574 +1,111 @@
 import React, { useState } from 'react';
 import type { Task, User } from './data';
-import { USERS, PRIORITY_COLORS } from './data';
-import { Avatar, StatusBadge, RoleBadge } from './Shared';
+import { PRIORITY_COLORS } from './data';
+import { Avatar, StatusBadge } from './Shared';
 
-/* ── Team Tasks Page ── */
-export function TeamTasksPage({ tasks }: { tasks: Task[]; currentUser: User }) {
+export function TeamTasksPage({ tasks, users }: { tasks: Task[]; currentUser: User; users: User[] }) {
     const [expanded, setExpanded] = useState<Record<string, boolean>>({});
-    const [groupBy, setGroupBy] = useState<'member' | 'dept'>('member');
-
-    const members = USERS;
-    const departments = [...new Set(USERS.map(u => u.dept))];
 
     return (
         <div className="team-tasks">
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
-                <h2 style={{ fontSize: 18, fontWeight: 700 }}>Team Tasks</h2>
-                <div style={{ display: 'flex', gap: 6 }}>
-                    <button className={`list-sort-btn ${groupBy === 'member' ? 'active' : ''}`} onClick={() => setGroupBy('member')}>👤 By Member</button>
-                    <button className={`list-sort-btn ${groupBy === 'dept' ? 'active' : ''}`} onClick={() => setGroupBy('dept')}>🏢 By Dept</button>
-                </div>
-            </div>
-            {groupBy === 'member' ? (
-                members.map(m => {
-                    const mTasks = tasks.filter(t => t.assignee === m.id);
-                    const isOpen = expanded[m.id] !== false;
-                    return (
-                        <div key={m.id} className="team-group">
-                            <div className="team-group-header" onClick={() => setExpanded(e => ({ ...e, [m.id]: !isOpen }))}>
-                                <Avatar userId={m.id} size={28} />
-                                <span className="team-group-name">{m.name}</span>
-                                <RoleBadge role={m.role} />
-                                <span className="team-group-count">({mTasks.length} tasks)</span>
-                                <span style={{ color: '#64748b' }}>{isOpen ? '▼' : '▶'}</span>
-                            </div>
-                            {isOpen && (
-                                <div className="team-group-tasks">
-                                    {mTasks.map(t => (
-                                        <div key={t.id} className="team-task-row">
-                                            <span style={{ width: 8, height: 8, borderRadius: '50%', background: PRIORITY_COLORS[t.priority].color }} />
-                                            <span className="team-task-title">{t.title}</span>
-                                            <StatusBadge status={t.status} />
-                                            <span style={{ fontSize: 11, color: '#64748b' }}>
-                                                {new Date(t.dueDate + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
-                                            </span>
-                                            {t.subtasks.length > 0 && <span style={{ fontSize: 10, color: '#64748b' }}>📋 {t.subtasks.filter(s => s.done).length}/{t.subtasks.length}</span>}
-                                        </div>
-                                    ))}
-                                    {mTasks.length === 0 && <span style={{ color: '#64748b', fontSize: 12, fontStyle: 'italic' }}>No tasks assigned</span>}
-                                </div>
-                            )}
+            <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16 }}>Team Tasks</h2>
+            {users.map(m => {
+                const mTasks = tasks.filter(t => t.assignee === m.id);
+                const isOpen = expanded[m.id] !== false;
+                return (
+                    <div key={m.id} className="team-group">
+                        <div className="team-group-header" onClick={() => setExpanded(e => ({ ...e, [m.id]: !isOpen }))}>
+                            <Avatar userId={m.id} size={28} users={users} />
+                            <span className="team-group-name">{m.name}</span>
+                            <span className="team-group-count">({mTasks.length} tasks)</span>
+                            <span style={{ color: '#64748b' }}>{isOpen ? '▼' : '▶'}</span>
                         </div>
-                    );
-                })
-            ) : (
-                departments.map(dept => {
-                    const deptMembers = members.filter(m => m.dept === dept);
-                    const deptTasks = tasks.filter(t => deptMembers.some(m => m.id === t.assignee));
-                    const isOpen = expanded[dept] !== false;
-                    return (
-                        <div key={dept} className="team-group">
-                            <div className="team-group-header" onClick={() => setExpanded(e => ({ ...e, [dept]: !isOpen }))}>
-                                <span style={{ fontSize: 18 }}>🏢</span>
-                                <span className="team-group-name">{dept}</span>
-                                <span style={{ fontSize: 11, color: '#64748b' }}>{deptMembers.length} members</span>
-                                <span className="team-group-count">({deptTasks.length} tasks)</span>
-                                <span style={{ color: '#64748b' }}>{isOpen ? '▼' : '▶'}</span>
+                        {isOpen && (
+                            <div className="team-group-tasks">
+                                {mTasks.map(t => (
+                                    <div key={t.id} className="team-task-row">
+                                        <span style={{ width: 8, height: 8, borderRadius: '50%', background: PRIORITY_COLORS[t.priority].color }} />
+                                        <span className="team-task-title">{t.title}</span>
+                                        <StatusBadge status={t.status} />
+                                        <span style={{ fontSize: 11, color: '#64748b' }}>
+                                            {new Date(t.dueDate + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                                        </span>
+                                        {t.subtasks.length > 0 && <span style={{ fontSize: 10, color: '#64748b' }}>📋 {t.subtasks.filter(s => s.done).length}/{t.subtasks.length}</span>}
+                                    </div>
+                                ))}
                             </div>
-                            {isOpen && (
-                                <div className="team-group-tasks">
-                                    {deptMembers.map(m => {
-                                        const mTasks = tasks.filter(t => t.assignee === m.id);
-                                        return (
-                                            <div key={m.id} style={{ marginBottom: 12 }}>
-                                                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
-                                                    <Avatar userId={m.id} size={22} />
-                                                    <span style={{ fontSize: 12, fontWeight: 600, color: '#e2e8f0' }}>{m.name}</span>
-                                                    <span style={{ fontSize: 10, color: '#64748b' }}>{mTasks.length} tasks</span>
-                                                </div>
-                                                {mTasks.map(t => (
-                                                    <div key={t.id} className="team-task-row" style={{ paddingLeft: 30 }}>
-                                                        <span style={{ width: 6, height: 6, borderRadius: '50%', background: PRIORITY_COLORS[t.priority].color }} />
-                                                        <span className="team-task-title" style={{ fontSize: 12 }}>{t.title}</span>
-                                                        <StatusBadge status={t.status} />
-                                                    </div>
-                                                ))}
-                                            </div>
-                                        );
-                                    })}
-                                </div>
-                            )}
-                        </div>
-                    );
-                })
-            )}
+                        )}
+                    </div>
+                );
+            })}
         </div>
     );
 }
 
-/* ── TYPES ── */
-interface ManagedUser {
-    id: string; name: string; role: string; email: string;
-    pass: string; color: string; avatar: string; dept: string;
-    active: boolean; joinedDate: string;
-}
-
-const ROLE_OPTIONS = ['employee', 'manager', 'cto'] as const;
-const DEPT_OPTIONS = ['Leadership', 'DevOps', 'Backend', 'Frontend', 'QA', 'Design', 'Data', 'Security'];
-const ROLE_COLORS: Record<string, string> = { cto: '#818cf8', manager: '#fb923c', employee: '#22c55e' };
-
-/* ── Members Page with full user management ── */
-export function MembersPage({ tasks, currentUser, users, onUpdateUsers }: {
-    tasks: Task[];
-    currentUser: User;
-    users: ManagedUser[];
-    onUpdateUsers: (users: ManagedUser[]) => void;
-}) {
-    const [expandedId, setExpandedId] = useState<string | null>(null);
-    const [showAdd, setShowAdd] = useState(false);
-    const [editUser, setEditUser] = useState<ManagedUser | null>(null);
-    const [confirmAction, setConfirmAction] = useState<{ userId: string; action: 'deactivate' | 'reactivate' | 'delete' } | null>(null);
-    const [searchQ, setSearchQ] = useState('');
-    const [filterRole, setFilterRole] = useState<string>('all');
-    const [filterDept, setFilterDept] = useState<string>('all');
-    const [view, setView] = useState<'table' | 'grid'>('table');
-
-    const isAuthority = currentUser.role === 'cto' || currentUser.role === 'manager';
-
-    // filter users
-    let filtered = users;
-    if (searchQ) filtered = filtered.filter(u => u.name.toLowerCase().includes(searchQ.toLowerCase()) || u.email.toLowerCase().includes(searchQ.toLowerCase()));
-    if (filterRole !== 'all') filtered = filtered.filter(u => u.role === filterRole);
-    if (filterDept !== 'all') filtered = filtered.filter(u => u.dept === filterDept);
-
-    const departments = [...new Set(users.map(u => u.dept))];
-    const activeCount = users.filter(u => u.active).length;
-    const deptStats = departments.map(d => ({ dept: d, count: users.filter(u => u.dept === d).length }));
-
-    const handleAddUser = (newUser: Omit<ManagedUser, 'id' | 'avatar' | 'active' | 'joinedDate'>) => {
-        const u: ManagedUser = {
-            ...newUser,
-            id: `u${Date.now()}`,
-            avatar: newUser.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2),
-            active: true,
-            joinedDate: new Date().toISOString().split('T')[0],
-        };
-        onUpdateUsers([...users, u]);
-        setShowAdd(false);
-    };
-
-    const handleEditUser = (updated: ManagedUser) => {
-        onUpdateUsers(users.map(u => u.id === updated.id ? updated : u));
-        setEditUser(null);
-    };
-
-    const handleToggleActive = (userId: string) => {
-        onUpdateUsers(users.map(u => u.id === userId ? { ...u, active: !u.active } : u));
-        setConfirmAction(null);
-    };
-
-    const handleDeleteUser = (userId: string) => {
-        onUpdateUsers(users.filter(u => u.id !== userId));
-        setConfirmAction(null);
-    };
-
-    const handleChangeRole = (userId: string, newRole: string) => {
-        onUpdateUsers(users.map(u => u.id === userId ? { ...u, role: newRole } : u));
-    };
-
-    const handleChangeDept = (userId: string, newDept: string) => {
-        onUpdateUsers(users.map(u => u.id === userId ? { ...u, dept: newDept } : u));
-    };
+export function MembersPage({ tasks, users }: { tasks: Task[]; users: User[] }) {
+    const [expanded, setExpanded] = useState<string | null>(null);
+    const [showInvite, setShowInvite] = useState(false);
 
     return (
         <div className="members-page">
-            {/* HEADER */}
             <div className="members-header">
-                <div>
-                    <h2 style={{ fontSize: 18, fontWeight: 700 }}>User Management</h2>
-                    <span style={{ fontSize: 12, color: '#64748b' }}>{activeCount} active · {users.length - activeCount} inactive · {departments.length} departments</span>
-                </div>
-                <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-                    {isAuthority && <button className="btn-primary" onClick={() => setShowAdd(true)}>+ Add Member</button>}
-                </div>
+                <h2>Team Members</h2>
+                <button className="btn-ghost" onClick={() => setShowInvite(true)}>+ Invite Member</button>
             </div>
-
-            {/* DEPARTMENT OVERVIEW */}
-            <div className="dept-overview">
-                {deptStats.map(d => (
-                    <div key={d.dept} className={`dept-chip ${filterDept === d.dept ? 'active' : ''}`}
-                        onClick={() => setFilterDept(filterDept === d.dept ? 'all' : d.dept)}>
-                        <span style={{ fontSize: 14 }}>🏢</span>
-                        <span style={{ fontWeight: 600 }}>{d.dept}</span>
-                        <span className="dept-chip-count">{d.count}</span>
-                    </div>
-                ))}
-            </div>
-
-            {/* TOOLBAR */}
-            <div className="members-toolbar">
-                <div className="members-search">
-                    <span style={{ fontSize: 14, opacity: 0.5 }}>🔍</span>
-                    <input placeholder="Search by name or email..." value={searchQ} onChange={e => setSearchQ(e.target.value)} />
-                </div>
-                <select className="members-filter-select" value={filterRole} onChange={e => setFilterRole(e.target.value)}>
-                    <option value="all">All Roles</option>
-                    {ROLE_OPTIONS.map(r => <option key={r} value={r}>{r.charAt(0).toUpperCase() + r.slice(1)}</option>)}
-                </select>
-                <div className="view-toggle">
-                    <button className={view === 'table' ? 'active' : ''} onClick={() => setView('table')}>☰</button>
-                    <button className={view === 'grid' ? 'active' : ''} onClick={() => setView('grid')}>⊞</button>
-                </div>
-            </div>
-
-            {/* TABLE VIEW */}
-            {view === 'table' && (
-                <table className="members-table">
-                    <thead>
-                        <tr>
-                            <th style={{ width: 40 }}></th>
-                            <th>Name</th>
-                            <th>Email</th>
-                            <th>Role</th>
-                            <th>Department</th>
-                            <th>Tasks</th>
-                            <th>Status</th>
-                            {isAuthority && <th>Actions</th>}
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {filtered.map(u => {
-                            const ut = tasks.filter(t => t.assignee === u.id);
-                            const done = ut.filter(t => t.status === 'done').length;
-                            const isExpanded = expandedId === u.id;
-                            const isSelf = u.id === currentUser.id;
-                            return (
-                                <React.Fragment key={u.id}>
-                                    <tr onClick={() => setExpandedId(isExpanded ? null : u.id)}
-                                        style={{ opacity: u.active ? 1 : 0.5 }}>
-                                        <td><Avatar userId={u.id} size={30} /></td>
-                                        <td>
-                                            <div style={{ fontWeight: 600 }}>{u.name}</div>
-                                            {!u.active && <span style={{ fontSize: 9, color: '#ef4444', fontWeight: 700 }}>DEACTIVATED</span>}
-                                        </td>
-                                        <td style={{ color: '#94a3b8', fontSize: 12 }}>{u.email}</td>
-                                        <td>
-                                            {isAuthority && !isSelf ? (
-                                                <select className="inline-select" value={u.role}
-                                                    style={{ color: ROLE_COLORS[u.role], borderColor: ROLE_COLORS[u.role] + '44' }}
-                                                    onClick={e => e.stopPropagation()}
-                                                    onChange={e => handleChangeRole(u.id, e.target.value)}>
-                                                    {ROLE_OPTIONS.map(r => <option key={r} value={r}>{r.charAt(0).toUpperCase() + r.slice(1)}</option>)}
-                                                </select>
-                                            ) : (
-                                                <span style={{ background: `${ROLE_COLORS[u.role]}22`, color: ROLE_COLORS[u.role], padding: '2px 8px', borderRadius: 10, fontSize: 10, fontWeight: 600 }}>
-                                                    {u.role.toUpperCase()}
-                                                </span>
-                                            )}
-                                        </td>
-                                        <td>
-                                            {isAuthority && !isSelf ? (
-                                                <select className="inline-select" value={u.dept}
-                                                    onClick={e => e.stopPropagation()}
-                                                    onChange={e => handleChangeDept(u.id, e.target.value)}>
-                                                    {DEPT_OPTIONS.map(d => <option key={d} value={d}>{d}</option>)}
-                                                </select>
-                                            ) : (
-                                                <span style={{ fontSize: 12 }}>{u.dept}</span>
-                                            )}
-                                        </td>
-                                        <td>
-                                            <span style={{ fontSize: 12 }}>{done}/{ut.length}</span>
-                                            {ut.length > 0 && (
-                                                <div style={{ width: 60, height: 4, background: '#1e293b', borderRadius: 2, marginTop: 4 }}>
-                                                    <div style={{ width: `${(done / ut.length) * 100}%`, height: '100%', background: '#22c55e', borderRadius: 2 }} />
-                                                </div>
-                                            )}
-                                        </td>
-                                        <td>
-                                            <span className={`status-dot ${u.active ? 'status-dot-active' : 'status-dot-inactive'}`}>
-                                                {u.active ? 'Active' : 'Inactive'}
-                                            </span>
-                                        </td>
-                                        {isAuthority && (
-                                            <td onClick={e => e.stopPropagation()}>
-                                                <div style={{ display: 'flex', gap: 4 }}>
-                                                    <button className="action-icon-btn" title="Edit" onClick={() => setEditUser(u)}>✏️</button>
-                                                    {!isSelf && (
-                                                        <>
-                                                            <button className="action-icon-btn" title={u.active ? 'Deactivate' : 'Reactivate'}
-                                                                onClick={() => setConfirmAction({ userId: u.id, action: u.active ? 'deactivate' : 'reactivate' })}>
-                                                                {u.active ? '🚫' : '✅'}
-                                                            </button>
-                                                            <button className="action-icon-btn" title="Delete"
-                                                                onClick={() => setConfirmAction({ userId: u.id, action: 'delete' })}>
-                                                                🗑️
-                                                            </button>
-                                                        </>
-                                                    )}
-                                                </div>
-                                            </td>
-                                        )}
-                                    </tr>
-                                    {isExpanded && (
-                                        <tr><td colSpan={isAuthority ? 8 : 7}>
-                                            <div className="member-expand">
-                                                <div className="member-expand-header">
-                                                    <div className="member-expand-stat">
-                                                        <span className="stat-num">{ut.length}</span>
-                                                        <span className="stat-label">Total Tasks</span>
-                                                    </div>
-                                                    <div className="member-expand-stat">
-                                                        <span className="stat-num" style={{ color: '#22c55e' }}>{done}</span>
-                                                        <span className="stat-label">Completed</span>
-                                                    </div>
-                                                    <div className="member-expand-stat">
-                                                        <span className="stat-num" style={{ color: '#818cf8' }}>{ut.filter(t => t.status === 'inprogress').length}</span>
-                                                        <span className="stat-label">In Progress</span>
-                                                    </div>
-                                                    <div className="member-expand-stat">
-                                                        <span className="stat-num" style={{ color: '#ef4444' }}>
-                                                            {ut.filter(t => new Date(t.dueDate + 'T00:00:00') < new Date() && t.status !== 'done').length}
-                                                        </span>
-                                                        <span className="stat-label">Overdue</span>
-                                                    </div>
-                                                </div>
-                                                {ut.map(t => (
-                                                    <div key={t.id} className="team-task-row">
-                                                        <span style={{ width: 8, height: 8, borderRadius: '50%', background: PRIORITY_COLORS[t.priority].color }} />
-                                                        <span className="team-task-title">{t.title}</span>
-                                                        <StatusBadge status={t.status} />
-                                                        <span style={{ fontSize: 11, color: '#64748b' }}>
-                                                            {new Date(t.dueDate + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
-                                                        </span>
-                                                    </div>
-                                                ))}
-                                                {ut.length === 0 && <span style={{ color: '#64748b', fontSize: 12, fontStyle: 'italic' }}>No tasks assigned</span>}
-                                            </div>
-                                        </td></tr>
-                                    )}
-                                </React.Fragment>
-                            );
-                        })}
-                    </tbody>
-                </table>
-            )}
-
-            {/* GRID VIEW */}
-            {view === 'grid' && (
-                <div className="members-grid">
-                    {filtered.map(u => {
+            <table className="members-table">
+                <thead><tr><th>Avatar</th><th>Full Name</th><th>Role</th><th>Dept</th><th>Assigned</th><th>Done</th><th>Active</th></tr></thead>
+                <tbody>
+                    {users.map(u => {
                         const ut = tasks.filter(t => t.assignee === u.id);
                         const done = ut.filter(t => t.status === 'done').length;
+                        const active = ut.filter(t => t.status !== 'done').length;
+                        const roleColors: Record<string, string> = { cto: '#818cf8', manager: '#fb923c', employee: '#22c55e' };
                         return (
-                            <div key={u.id} className={`member-card ${!u.active ? 'member-card-inactive' : ''}`}>
-                                <div className="member-card-top">
-                                    <Avatar userId={u.id} size={48} />
-                                    <div style={{ flex: 1 }}>
-                                        <div style={{ fontWeight: 700, fontSize: 14 }}>{u.name}</div>
-                                        <div style={{ fontSize: 11, color: '#64748b' }}>{u.email}</div>
-                                    </div>
-                                    {isAuthority && u.id !== currentUser.id && (
-                                        <button className="action-icon-btn" onClick={() => setEditUser(u)}>✏️</button>
-                                    )}
-                                </div>
-                                <div className="member-card-badges">
-                                    <RoleBadge role={u.role} />
-                                    <span className="tag-pill">{u.dept}</span>
-                                    <span className={`status-dot ${u.active ? 'status-dot-active' : 'status-dot-inactive'}`}>
-                                        {u.active ? 'Active' : 'Inactive'}
-                                    </span>
-                                </div>
-                                <div className="member-card-stats">
-                                    <div><span style={{ fontWeight: 700 }}>{ut.length}</span> tasks</div>
-                                    <div><span style={{ fontWeight: 700, color: '#22c55e' }}>{done}</span> done</div>
-                                    <div><span style={{ fontWeight: 700, color: '#818cf8' }}>{ut.length - done}</span> active</div>
-                                </div>
-                                {ut.length > 0 && (
-                                    <div style={{ height: 4, background: '#1e293b', borderRadius: 2 }}>
-                                        <div style={{ width: `${(done / ut.length) * 100}%`, height: '100%', background: '#22c55e', borderRadius: 2, transition: 'width 0.3s' }} />
-                                    </div>
+                            <React.Fragment key={u.id}>
+                                <tr onClick={() => setExpanded(expanded === u.id ? null : u.id)}>
+                                    <td><Avatar userId={u.id} size={28} users={users} /></td>
+                                    <td>{u.name}</td>
+                                    <td><span style={{ background: `${roleColors[u.role]}22`, color: roleColors[u.role], padding: '2px 8px', borderRadius: 10, fontSize: 10, fontWeight: 600 }}>{u.role.toUpperCase()}</span></td>
+                                    <td>{u.dept}</td>
+                                    <td>{ut.length}</td>
+                                    <td>{done}</td>
+                                    <td>{active}</td>
+                                </tr>
+                                {expanded === u.id && (
+                                    <tr><td colSpan={7}>
+                                        <div className="member-expand">
+                                            {ut.map(t => (
+                                                <div key={t.id} className="team-task-row">
+                                                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: PRIORITY_COLORS[t.priority].color }} />
+                                                    <span className="team-task-title">{t.title}</span>
+                                                    <StatusBadge status={t.status} />
+                                                </div>
+                                            ))}
+                                            {ut.length === 0 && <span style={{ color: '#64748b', fontSize: 12 }}>No tasks assigned</span>}
+                                        </div>
+                                    </td></tr>
                                 )}
-                                {isAuthority && u.id !== currentUser.id && (
-                                    <div className="member-card-actions">
-                                        <button className="action-icon-btn" onClick={() => setConfirmAction({ userId: u.id, action: u.active ? 'deactivate' : 'reactivate' })}>
-                                            {u.active ? '🚫 Deactivate' : '✅ Reactivate'}
-                                        </button>
-                                    </div>
-                                )}
-                            </div>
+                            </React.Fragment>
                         );
                     })}
-                </div>
-            )}
+                </tbody>
+            </table>
 
-            {/* ADD USER MODAL */}
-            {showAdd && <AddUserModal onClose={() => setShowAdd(false)} onAdd={handleAddUser} />}
-
-            {/* EDIT USER MODAL */}
-            {editUser && <EditUserModal user={editUser} onClose={() => setEditUser(null)} onSave={handleEditUser} isCTO={currentUser.role === 'cto'} />}
-
-            {/* CONFIRM DIALOG */}
-            {confirmAction && (
-                <div className="modal-backdrop" onClick={() => setConfirmAction(null)}>
-                    <div className="modal" style={{ width: 380 }} onClick={e => e.stopPropagation()}>
-                        <div className="modal-header">
-                            <h2>{confirmAction.action === 'delete' ? '🗑️ Delete User' : confirmAction.action === 'deactivate' ? '🚫 Deactivate User' : '✅ Reactivate User'}</h2>
-                            <button className="drawer-close" onClick={() => setConfirmAction(null)}>✕</button>
-                        </div>
+            {showInvite && (
+                <div className="modal-backdrop" onClick={() => setShowInvite(false)}>
+                    <div className="modal invite-modal" onClick={e => e.stopPropagation()}>
+                        <div className="modal-header"><h2>Invite Member</h2><button className="drawer-close" onClick={() => setShowInvite(false)}>✕</button></div>
                         <div className="modal-body">
-                            <p style={{ fontSize: 13, color: '#94a3b8', lineHeight: 1.6 }}>
-                                {confirmAction.action === 'delete'
-                                    ? `Are you sure you want to permanently delete ${users.find(u => u.id === confirmAction.userId)?.name}? This action cannot be undone.`
-                                    : confirmAction.action === 'deactivate'
-                                        ? `Are you sure you want to deactivate ${users.find(u => u.id === confirmAction.userId)?.name}? They will lose access but their data will be preserved.`
-                                        : `Reactivate ${users.find(u => u.id === confirmAction.userId)?.name} and restore their access?`
-                                }
-                            </p>
-                        </div>
-                        <div className="modal-footer">
-                            <button className="btn-ghost" onClick={() => setConfirmAction(null)}>Cancel</button>
-                            <button className={confirmAction.action === 'delete' ? 'btn-danger' : 'btn-primary'}
-                                onClick={() => confirmAction.action === 'delete'
-                                    ? handleDeleteUser(confirmAction.userId)
-                                    : handleToggleActive(confirmAction.userId)
-                                }>
-                                {confirmAction.action === 'delete' ? 'Delete' : confirmAction.action === 'deactivate' ? 'Deactivate' : 'Reactivate'}
-                            </button>
+                            <div className="modal-field"><label>Email</label><input className="modal-input" placeholder="member@company.io" /></div>
+                            <div className="modal-field">
+                                <label>Role</label>
+                                <select className="modal-input"><option value="employee">Employee</option><option value="manager">Manager</option></select>
+                            </div>
                         </div>
+                        <div className="modal-footer"><button className="btn-ghost" onClick={() => setShowInvite(false)}>Cancel</button><button className="btn-primary" onClick={() => setShowInvite(false)}>Send Invite</button></div>
                     </div>
                 </div>
             )}
         </div>
     );
 }
-
-/* ── Add User Modal ── */
-function AddUserModal({ onClose, onAdd }: {
-    onClose: () => void;
-    onAdd: (u: Omit<ManagedUser, 'id' | 'avatar' | 'active' | 'joinedDate'>) => void;
-}) {
-    const [name, setName] = useState('');
-    const [email, setEmail] = useState('');
-    const [role, setRole] = useState('employee');
-    const [dept, setDept] = useState('DevOps');
-    const [pass, setPass] = useState('');
-    const [errors, setErrors] = useState<Record<string, boolean>>({});
-
-    const AVATAR_COLORS = ['#818cf8', '#f59e0b', '#34d399', '#f472b6', '#fb923c', '#6366f1', '#ec4899', '#14b8a6'];
-
-    const validate = () => {
-        const errs: Record<string, boolean> = {};
-        if (!name.trim()) errs.name = true;
-        if (!email.trim() || !email.includes('@')) errs.email = true;
-        if (!pass.trim() || pass.length < 4) errs.pass = true;
-        setErrors(errs);
-        return Object.keys(errs).length === 0;
-    };
-
-    const handleSubmit = () => {
-        if (!validate()) return;
-        onAdd({
-            name: name.trim(), email: email.trim(), role, dept, pass,
-            color: AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)],
-        });
-    };
-
-    return (
-        <div className="modal-backdrop" onClick={onClose}>
-            <div className="modal" style={{ width: 440 }} onClick={e => e.stopPropagation()}>
-                <div className="modal-header">
-                    <h2>👤 Add Team Member</h2>
-                    <button className="drawer-close" onClick={onClose}>✕</button>
-                </div>
-                <div className="modal-body">
-                    <div className="modal-field">
-                        <label>Full Name *</label>
-                        <input className={`modal-input ${errors.name ? 'error' : ''}`} placeholder="John Doe" value={name} onChange={e => setName(e.target.value)} />
-                    </div>
-                    <div className="modal-field">
-                        <label>Email *</label>
-                        <input className={`modal-input ${errors.email ? 'error' : ''}`} placeholder="john@company.io" value={email} onChange={e => setEmail(e.target.value)} />
-                    </div>
-                    <div className="modal-grid">
-                        <div className="modal-field">
-                            <label>Role</label>
-                            <select className="modal-input" value={role} onChange={e => setRole(e.target.value)}>
-                                {ROLE_OPTIONS.map(r => <option key={r} value={r}>{r.charAt(0).toUpperCase() + r.slice(1)}</option>)}
-                            </select>
-                        </div>
-                        <div className="modal-field">
-                            <label>Department</label>
-                            <select className="modal-input" value={dept} onChange={e => setDept(e.target.value)}>
-                                {DEPT_OPTIONS.map(d => <option key={d} value={d}>{d}</option>)}
-                            </select>
-                        </div>
-                    </div>
-                    <div className="modal-field">
-                        <label>Password * <span style={{ fontSize: 10, color: '#64748b' }}>(min 4 chars)</span></label>
-                        <input type="password" className={`modal-input ${errors.pass ? 'error' : ''}`} placeholder="••••••••" value={pass} onChange={e => setPass(e.target.value)} />
-                    </div>
-                </div>
-                <div className="modal-footer">
-                    <button className="btn-ghost" onClick={onClose}>Cancel</button>
-                    <button className="btn-primary" onClick={handleSubmit}>Add Member</button>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-/* ── Edit User Modal ── */
-function EditUserModal({ user, onClose, onSave, isCTO }: {
-    user: ManagedUser; onClose: () => void; onSave: (u: ManagedUser) => void; isCTO: boolean;
-}) {
-    const [name, setName] = useState(user.name);
-    const [email, setEmail] = useState(user.email);
-    const [role, setRole] = useState(user.role);
-    const [dept, setDept] = useState(user.dept);
-
-    const handleSave = () => {
-        onSave({
-            ...user, name: name.trim(), email: email.trim(), role, dept,
-            avatar: name.trim().split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2),
-        });
-    };
-
-    return (
-        <div className="modal-backdrop" onClick={onClose}>
-            <div className="modal" style={{ width: 440 }} onClick={e => e.stopPropagation()}>
-                <div className="modal-header">
-                    <h2>✏️ Edit Member</h2>
-                    <button className="drawer-close" onClick={onClose}>✕</button>
-                </div>
-                <div className="modal-body">
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, padding: 12, background: 'var(--bg-card)', borderRadius: 10 }}>
-                        <Avatar userId={user.id} size={42} />
-                        <div>
-                            <div style={{ fontWeight: 700, fontSize: 14 }}>{user.name}</div>
-                            <div style={{ fontSize: 11, color: '#64748b' }}>Joined {user.joinedDate || 'N/A'}</div>
-                        </div>
-                    </div>
-                    <div className="modal-field">
-                        <label>Full Name</label>
-                        <input className="modal-input" value={name} onChange={e => setName(e.target.value)} />
-                    </div>
-                    <div className="modal-field">
-                        <label>Email</label>
-                        <input className="modal-input" value={email} onChange={e => setEmail(e.target.value)} />
-                    </div>
-                    <div className="modal-grid">
-                        <div className="modal-field">
-                            <label>Role</label>
-                            <select className="modal-input" value={role} onChange={e => setRole(e.target.value)} disabled={!isCTO}>
-                                {ROLE_OPTIONS.map(r => <option key={r} value={r}>{r.charAt(0).toUpperCase() + r.slice(1)}</option>)}
-                            </select>
-                            {!isCTO && <span style={{ fontSize: 10, color: '#64748b' }}>Only CTO can change roles</span>}
-                        </div>
-                        <div className="modal-field">
-                            <label>Department</label>
-                            <select className="modal-input" value={dept} onChange={e => setDept(e.target.value)}>
-                                {DEPT_OPTIONS.map(d => <option key={d} value={d}>{d}</option>)}
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                <div className="modal-footer">
-                    <button className="btn-ghost" onClick={onClose}>Cancel</button>
-                    <button className="btn-primary" onClick={handleSave}>Save Changes</button>
-                </div>
-            </div>
-        </div>
-    );
-}

src/Reports.tsx

@@ -1,5 +1,5 @@
-import type { Task } from './data';
-import { USERS, STATUS_COLORS, PRIORITY_COLORS } from './data';
+import type { Task, User } from './data';
+import { STATUS_COLORS, PRIORITY_COLORS } from './data';
 import { BarChart, Bar, PieChart, Pie, Cell, LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 
 const tooltipStyle = {
@@ -8,14 +8,14 @@ const tooltipStyle = {
     labelStyle: { color: '#94a3b8' },
 };
 
-export function ReportsPage({ tasks }: { tasks: Task[] }) {
+export function ReportsPage({ tasks, users }: { tasks: Task[]; users: User[] }) {
     const total = tasks.length;
     const completed = tasks.filter(t => t.status === 'done').length;
     const overdue = tasks.filter(t => new Date(t.dueDate + 'T00:00:00') < new Date() && t.status !== 'done').length;
     const critical = tasks.filter(t => t.priority === 'critical' && t.status !== 'done').length;
 
     // Tasks per member (stacked by status)
-    const memberData = USERS.map(u => {
+    const memberData = users.map(u => {
         const ut = tasks.filter(t => t.assignee === u.id);
         return {
             name: u.name.split(' ')[0],
@@ -36,7 +36,7 @@ export function ReportsPage({ tasks }: { tasks: Task[] }) {
     const completionData = days.map((d, i) => ({ name: d, completed: [1, 0, 2, 1, 3, 0, 1][i] }));
 
     // Overdue by member
-    const overdueData = USERS.map(u => ({
+    const overdueData = users.map(u => ({
         name: u.name.split(' ')[0],
         overdue: tasks.filter(t => t.assignee === u.id && new Date(t.dueDate + 'T00:00:00') < new Date() && t.status !== 'done').length,
     })).filter(d => d.overdue > 0);

src/Shared.tsx

@@ -1,8 +1,9 @@
 import { PRIORITY_COLORS, STATUS_COLORS, STATUS_LABELS, getUserById } from './data';
-import type { Priority, Status, Subtask } from './data';
+import type { Priority, Status, Subtask, User } from './data';
 
-export function Avatar({ userId, size = 28 }: { userId: string; size?: number }) {
-    const u = getUserById(userId);
+export function Avatar({ userId, size = 28, users }: { userId: string; size?: number; users: User[] }) {
+    if (!users || !users.length) return null;
+    const u = getUserById(users, userId);
     if (!u) return null;
     return (
         <div className="avatar" style={{ width: size, height: size, fontSize: size * 0.36, background: u.color }}>

src/Sidebar.tsx

@@ -17,36 +17,42 @@ interface SidebarProps {
     activePage: string;
     onNavigate: (page: string) => void;
     onSignOut: () => void;
+    isOpen: boolean;
+    onClose: () => void;
+    users: User[];
 }
 
-export function Sidebar({ currentUser, activePage, onNavigate, onSignOut }: SidebarProps) {
+export function Sidebar({ currentUser, activePage, onNavigate, onSignOut, isOpen, onClose, users }: SidebarProps) {
     const filteredNav = NAV_ITEMS.filter(n => n.roles.includes(currentUser.role));
     return (
-        <div className="sidebar">
-            <div className="sidebar-logo">
-                <div className="sidebar-logo-icon">⚡</div>
-                <span className="sidebar-logo-text">Scrum-manager</span>
-            </div>
-            <div className="sidebar-divider" />
-            <div className="sidebar-section-label">Navigate</div>
-            <nav className="sidebar-nav">
-                {filteredNav.map(n => (
-                    <div key={n.id} className={`sidebar-item ${activePage === n.id ? 'active' : ''}`} onClick={() => onNavigate(n.id)}>
-                        <span className="sidebar-item-icon">{n.icon}</span>
-                        {n.label}
+        <>
+            {isOpen && <div className="sidebar-backdrop visible" onClick={onClose} />}
+            <div className={`sidebar ${isOpen ? 'sidebar-open' : ''}`}>
+                <div className="sidebar-logo">
+                    <div className="sidebar-logo-icon">⚡</div>
+                    <span className="sidebar-logo-text">Scrum-manager</span>
+                </div>
+                <div className="sidebar-divider" />
+                <div className="sidebar-section-label">Navigate</div>
+                <nav className="sidebar-nav">
+                    {filteredNav.map(n => (
+                        <div key={n.id} className={`sidebar-item ${activePage === n.id ? 'active' : ''}`} onClick={() => onNavigate(n.id)}>
+                            <span className="sidebar-item-icon">{n.icon}</span>
+                            {n.label}
+                        </div>
+                    ))}
+                </nav>
+                <div className="sidebar-profile">
+                    <Avatar userId={currentUser.id} size={36} users={users} />
+                    <div className="sidebar-profile-info">
+                        <div className="sidebar-profile-name">{currentUser.name}</div>
+                        <RoleBadge role={currentUser.role} />
                     </div>
-                ))}
-            </nav>
-            <div className="sidebar-profile">
-                <Avatar userId={currentUser.id} size={36} />
-                <div className="sidebar-profile-info">
-                    <div className="sidebar-profile-name">{currentUser.name}</div>
-                    <RoleBadge role={currentUser.role} />
+                </div>
+                <div style={{ padding: '0 16px 12px' }}>
+                    <button className="sidebar-signout" onClick={onSignOut}>Sign Out</button>
                 </div>
             </div>
-            <div style={{ padding: '0 16px 12px' }}>
-                <button className="sidebar-signout" onClick={onSignOut}>Sign Out</button>
-            </div>
-        </div>
+        </>
     );
 }

src/TaskDrawer.tsx

@@ -1,14 +1,15 @@
 import { useState } from 'react';
 import type { Task, User, Status, Priority } from './data';
-import { USERS, STATUS_LABELS, getUserById } from './data';
+import { STATUS_LABELS, getUserById } from './data';
 import { Avatar, Tag, ProgressBar } from './Shared';
 
 interface DrawerProps {
     task: Task; currentUser: User; onClose: () => void;
     onUpdate: (updated: Task) => void;
+    users: User[];
 }
 
-export function TaskDrawer({ task, currentUser, onClose, onUpdate }: DrawerProps) {
+export function TaskDrawer({ task, currentUser, onClose, onUpdate, users }: DrawerProps) {
     const [commentText, setCommentText] = useState('');
     const [subtaskText, setSubtaskText] = useState('');
 
@@ -48,7 +49,7 @@ export function TaskDrawer({ task, currentUser, onClose, onUpdate }: DrawerProps
         setCommentText('');
     };
 
-    const reporter = getUserById(task.reporter);
+    const reporter = getUserById(users, task.reporter);
     const doneCount = task.subtasks.filter(s => s.done).length;
 
     return (
@@ -67,15 +68,15 @@ export function TaskDrawer({ task, currentUser, onClose, onUpdate }: DrawerProps
                         <div>
                             <div className="drawer-meta-label">Assignee</div>
                             <div className="drawer-meta-val">
-                                <Avatar userId={task.assignee} size={20} />
+                                <Avatar userId={task.assignee} size={20} users={users} />
                                 <select className="drawer-select" value={task.assignee} onChange={e => updateField('assignee', e.target.value)}>
-                                    {USERS.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
+                                    {users.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
                                 </select>
                             </div>
                         </div>
                         <div>
                             <div className="drawer-meta-label">Reporter</div>
-                            <div className="drawer-meta-val"><Avatar userId={task.reporter} size={20} /> {reporter?.name}</div>
+                            <div className="drawer-meta-val"><Avatar userId={task.reporter} size={20} users={users} /> {reporter?.name}</div>
                         </div>
                         <div>
                             <div className="drawer-meta-label">Status</div>
@@ -117,10 +118,10 @@ export function TaskDrawer({ task, currentUser, onClose, onUpdate }: DrawerProps
                     <div className="drawer-section">
                         <div className="drawer-section-title">Comments</div>
                         {task.comments.map(c => {
-                            const cu = getUserById(c.userId);
+                            const cu = getUserById(users, c.userId);
                             return (
                                 <div key={c.id} className="comment-item">
-                                    <Avatar userId={c.userId} size={26} />
+                                    <Avatar userId={c.userId} size={26} users={users} />
                                     <div className="comment-bubble">
                                         <div className="comment-header">
                                             <span className="comment-name">{cu?.name}</span>
@@ -132,7 +133,7 @@ export function TaskDrawer({ task, currentUser, onClose, onUpdate }: DrawerProps
                             );
                         })}
                         <div className="comment-input-row">
-                            <Avatar userId={currentUser.id} size={26} />
+                            <Avatar userId={currentUser.id} size={26} users={users} />
                             <input placeholder="Add a comment..." value={commentText} onChange={e => setCommentText(e.target.value)} onKeyDown={e => e.key === 'Enter' && addComment()} />
                             <button onClick={addComment}>Post</button>
                         </div>
@@ -157,12 +158,14 @@ interface ModalProps {
     onAdd: (task: Task) => void;
     defaultDate?: string;
     defaultStatus?: Status;
+    users: User[];
+    currentUser: User;
 }
 
-export function AddTaskModal({ onClose, onAdd, defaultDate, defaultStatus }: ModalProps) {
+export function AddTaskModal({ onClose, onAdd, defaultDate, defaultStatus, users, currentUser }: ModalProps) {
     const [title, setTitle] = useState('');
     const [desc, setDesc] = useState('');
-    const [assignee, setAssignee] = useState('u1');
+    const [assignee, setAssignee] = useState(users[0]?.id || '');
     const [priority, setPriority] = useState<Priority>('medium');
     const [status, setStatus] = useState<Status>(defaultStatus || 'todo');
     const [dueDate, setDueDate] = useState(defaultDate || new Date().toISOString().split('T')[0]);
@@ -173,7 +176,7 @@ export function AddTaskModal({ onClose, onAdd, defaultDate, defaultStatus }: Mod
         if (!title.trim()) { setError(true); return; }
         const task: Task = {
             id: `t${Date.now()}`, title, description: desc, status, priority,
-            assignee, reporter: 'u1', dueDate,
+            assignee, reporter: currentUser.id, dueDate,
             tags: tags ? tags.split(',').map(t => t.trim()).filter(Boolean) : [],
             subtasks: [], comments: [],
             activity: [{ id: `a${Date.now()}`, text: `📝 Task created`, timestamp: new Date().toISOString() }],
@@ -199,7 +202,7 @@ export function AddTaskModal({ onClose, onAdd, defaultDate, defaultStatus }: Mod
                         <div className="modal-field">
                             <label>Assignee</label>
                             <select className="modal-input" value={assignee} onChange={e => setAssignee(e.target.value)}>
-                                {USERS.map(u => <option key={u.id} value={u.id}>{u.avatar} {u.name}</option>)}
+                                {users.map(u => <option key={u.id} value={u.id}>{u.avatar} {u.name}</option>)}
                             </select>
                         </div>
                         <div className="modal-field">

src/api.ts

@@ -0,0 +1,85 @@
+const API_BASE = '/api';
+
+async function request(url: string, options?: RequestInit) {
+    const res = await fetch(`${API_BASE}${url}`, {
+        headers: { 'Content-Type': 'application/json' },
+        ...options,
+    });
+    if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: res.statusText }));
+        throw new Error(err.error || 'Request failed');
+    }
+    return res.json();
+}
+
+// Auth
+export async function apiLogin(email: string, password: string) {
+    return request('/auth/login', {
+        method: 'POST',
+        body: JSON.stringify({ email, password }),
+    });
+}
+
+export async function apiRegister(data: {
+    name: string; email: string; password: string; role?: string; dept?: string;
+}) {
+    return request('/auth/register', {
+        method: 'POST',
+        body: JSON.stringify(data),
+    });
+}
+
+export async function apiFetchUsers() {
+    return request('/auth/users');
+}
+
+// Tasks
+export async function apiFetchTasks() {
+    return request('/tasks');
+}
+
+export async function apiCreateTask(task: {
+    title: string; description?: string; status?: string; priority?: string;
+    assignee?: string; reporter?: string; dueDate?: string; tags?: string[];
+    subtasks?: { title: string; done: boolean }[];
+}) {
+    return request('/tasks', {
+        method: 'POST',
+        body: JSON.stringify(task),
+    });
+}
+
+export async function apiUpdateTask(id: string, updates: Record<string, unknown>) {
+    return request(`/tasks/${id}`, {
+        method: 'PUT',
+        body: JSON.stringify(updates),
+    });
+}
+
+export async function apiAddSubtask(taskId: string, title: string) {
+    return request(`/tasks/${taskId}/subtasks`, {
+        method: 'POST',
+        body: JSON.stringify({ title }),
+    });
+}
+
+export async function apiToggleSubtask(taskId: string, subtaskId: string, done: boolean) {
+    return request(`/tasks/${taskId}/subtasks/${subtaskId}`, {
+        method: 'PUT',
+        body: JSON.stringify({ done }),
+    });
+}
+
+export async function apiAddComment(taskId: string, userId: string, text: string) {
+    return request(`/tasks/${taskId}/comments`, {
+        method: 'POST',
+        body: JSON.stringify({ userId, text }),
+    });
+}
+
+export async function apiAddActivity(taskId: string, text: string) {
+    return request(`/tasks/${taskId}/activity`, {
+        method: 'POST',
+        body: JSON.stringify({ text }),
+    });
+}

src/data.ts

@@ -1,22 +1,11 @@
-const now = new Date();
-const d = (offset: number) => {
-  const dt = new Date(now);
-  dt.setDate(dt.getDate() + offset);
-  return dt.toISOString().split('T')[0];
-};
-
-export const USERS = [
-  { id: 'u1', name: 'Subodh Pawar', role: 'cto', email: 'subodh@corp.io', pass: 'cto123', color: '#818cf8', avatar: 'SP', dept: 'Leadership' },
-  { id: 'u2', name: 'Ankit Sharma', role: 'employee', email: 'ankit@corp.io', pass: 'emp123', color: '#f59e0b', avatar: 'AS', dept: 'DevOps' },
-  { id: 'u3', name: 'Priya Nair', role: 'employee', email: 'priya@corp.io', pass: 'emp123', color: '#34d399', avatar: 'PN', dept: 'Backend' },
-  { id: 'u4', name: 'Rahul Mehta', role: 'employee', email: 'rahul@corp.io', pass: 'emp123', color: '#f472b6', avatar: 'RM', dept: 'Frontend' },
-  { id: 'u5', name: 'Deepa Iyer', role: 'manager', email: 'deepa@corp.io', pass: 'mgr123', color: '#fb923c', avatar: 'DI', dept: 'QA' },
-];
-
-export type User = typeof USERS[number];
 export type Priority = 'critical' | 'high' | 'medium' | 'low';
 export type Status = 'todo' | 'inprogress' | 'review' | 'done';
 
+export interface User {
+  id: string; name: string; role: string; email: string;
+  color: string; avatar: string; dept: string;
+}
+
 export interface Subtask { id: string; title: string; done: boolean }
 export interface Comment { id: string; userId: string; text: string; timestamp: string }
 export interface Activity { id: string; text: string; timestamp: string }
@@ -41,77 +30,4 @@ export const STATUS_LABELS: Record<Status, string> = {
   todo: 'To Do', inprogress: 'In Progress', review: 'Review', done: 'Done',
 };
 
-export const SEED_TASKS: Task[] = [
-  {
-    id: 't1', title: 'ArgoCD pipeline for staging', description: 'Set up ArgoCD GitOps pipeline for the staging environment with automatic sync and rollback capabilities.',
-    status: 'inprogress', priority: 'critical', assignee: 'u2', reporter: 'u1', dueDate: d(3), tags: ['devops', 'ci-cd'],
-    subtasks: [{ id: 's1', title: 'Configure ArgoCD manifest', done: true }, { id: 's2', title: 'Setup GitOps repo structure', done: false }, { id: 's3', title: 'Test rollback workflow', done: false }],
-    comments: [{ id: 'c1', userId: 'u1', text: 'Make sure we use Helm charts for this.', timestamp: '2026-02-14T10:22:00' }],
-    activity: [{ id: 'a1', text: '🔄 Subodh moved to In Progress', timestamp: '2026-02-14T10:22:00' }, { id: 'a2', text: '✅ Ankit completed subtask "Configure ArgoCD manifest"', timestamp: '2026-02-14T14:30:00' }],
-  },
-  {
-    id: 't2', title: 'Harbor registry cleanup script', description: 'Write a cron-based cleanup script to remove stale Docker images older than 30 days from Harbor.',
-    status: 'todo', priority: 'medium', assignee: 'u3', reporter: 'u5', dueDate: d(8), tags: ['backend', 'devops'],
-    subtasks: [{ id: 's4', title: 'Draft retention policy', done: false }, { id: 's5', title: 'Write cleanup script', done: false }],
-    comments: [{ id: 'c2', userId: 'u5', text: 'Coordinate with DevOps for registry credentials.', timestamp: '2026-02-13T09:00:00' }],
-    activity: [{ id: 'a3', text: '📝 Deepa created task', timestamp: '2026-02-13T09:00:00' }, { id: 'a4', text: '👤 Assigned to Priya', timestamp: '2026-02-13T09:01:00' }],
-  },
-  {
-    id: 't3', title: 'SonarQube quality gate fix', description: 'Fix failing quality gates in SonarQube for the API microservice — coverage is below threshold.',
-    status: 'review', priority: 'high', assignee: 'u2', reporter: 'u1', dueDate: d(1), tags: ['quality', 'testing'],
-    subtasks: [{ id: 's6', title: 'Identify uncovered code paths', done: true }, { id: 's7', title: 'Write missing unit tests', done: true }, { id: 's8', title: 'Verify gate passes', done: false }],
-    comments: [{ id: 'c3', userId: 'u1', text: 'Coverage must be above 80%.', timestamp: '2026-02-12T11:00:00' }, { id: 'c4', userId: 'u2', text: 'Currently at 76%, adding tests now.', timestamp: '2026-02-13T15:00:00' }],
-    activity: [{ id: 'a5', text: '🔄 Ankit moved to Review', timestamp: '2026-02-14T16:00:00' }, { id: 'a6', text: '✅ Ankit completed 2 subtasks', timestamp: '2026-02-14T15:30:00' }],
-  },
-  {
-    id: 't4', title: 'MinIO bucket lifecycle policy', description: 'Configure lifecycle policies for MinIO buckets to auto-expire temporary uploads after 7 days.',
-    status: 'done', priority: 'low', assignee: 'u5', reporter: 'u1', dueDate: d(-2), tags: ['infrastructure'],
-    subtasks: [{ id: 's9', title: 'Define lifecycle rules', done: true }, { id: 's10', title: 'Apply and test policy', done: true }],
-    comments: [{ id: 'c5', userId: 'u5', text: 'Done and verified on staging.', timestamp: '2026-02-13T17:00:00' }],
-    activity: [{ id: 'a7', text: '✅ Deepa moved to Done', timestamp: '2026-02-13T17:00:00' }, { id: 'a8', text: '💬 Deepa added a comment', timestamp: '2026-02-13T17:01:00' }],
-  },
-  {
-    id: 't5', title: 'Jenkins shared library refactor', description: 'Refactor Jenkins shared libraries to use declarative pipeline syntax and reduce duplication.',
-    status: 'inprogress', priority: 'high', assignee: 'u2', reporter: 'u5', dueDate: d(6), tags: ['devops', 'refactor'],
-    subtasks: [{ id: 's11', title: 'Audit existing shared libs', done: true }, { id: 's12', title: 'Migrate to declarative syntax', done: false }, { id: 's13', title: 'Update pipeline docs', done: false }],
-    comments: [{ id: 'c6', userId: 'u2', text: 'Found 12 redundant pipeline stages.', timestamp: '2026-02-14T10:00:00' }],
-    activity: [{ id: 'a9', text: '🔄 Ankit started working', timestamp: '2026-02-13T11:00:00' }, { id: 'a10', text: '✅ Completed audit subtask', timestamp: '2026-02-14T10:00:00' }],
-  },
-  {
-    id: 't6', title: 'Grafana k8s dashboard', description: 'Create comprehensive Grafana dashboards for Kubernetes cluster monitoring including pod health and resource usage.',
-    status: 'todo', priority: 'medium', assignee: 'u4', reporter: 'u1', dueDate: d(12), tags: ['monitoring', 'frontend'],
-    subtasks: [{ id: 's14', title: 'Design dashboard layout', done: false }, { id: 's15', title: 'Configure Prometheus data sources', done: false }],
-    comments: [{ id: 'c7', userId: 'u1', text: 'Use the standard k8s mixin as a starting point.', timestamp: '2026-02-12T14:00:00' }],
-    activity: [{ id: 'a11', text: '📝 Subodh created task', timestamp: '2026-02-12T14:00:00' }, { id: 'a12', text: '👤 Assigned to Rahul', timestamp: '2026-02-12T14:01:00' }],
-  },
-  {
-    id: 't7', title: 'React component audit', description: 'Audit all React components for accessibility compliance and performance optimizations.',
-    status: 'inprogress', priority: 'medium', assignee: 'u4', reporter: 'u5', dueDate: d(5), tags: ['frontend', 'a11y'],
-    subtasks: [{ id: 's16', title: 'Run Lighthouse audit', done: true }, { id: 's17', title: 'Fix critical a11y issues', done: false }, { id: 's18', title: 'Document findings', done: false }],
-    comments: [{ id: 'c8', userId: 'u4', text: 'Initial Lighthouse score is 72.', timestamp: '2026-02-14T08:00:00' }],
-    activity: [{ id: 'a13', text: '🔄 Rahul moved to In Progress', timestamp: '2026-02-13T09:00:00' }, { id: 'a14', text: '✅ Completed Lighthouse audit', timestamp: '2026-02-14T08:00:00' }],
-  },
-  {
-    id: 't8', title: 'PostgreSQL backup strategy', description: 'Implement automated daily backups for PostgreSQL with point-in-time recovery and off-site storage.',
-    status: 'todo', priority: 'critical', assignee: 'u3', reporter: 'u1', dueDate: d(2), tags: ['database', 'infrastructure'],
-    subtasks: [{ id: 's19', title: 'Setup pg_basebackup cron', done: false }, { id: 's20', title: 'Configure WAL archiving', done: false }, { id: 's21', title: 'Test restore procedure', done: false }],
-    comments: [{ id: 'c9', userId: 'u1', text: 'This is critical — we need backups before the release.', timestamp: '2026-02-14T09:00:00' }],
-    activity: [{ id: 'a15', text: '📝 Subodh created task', timestamp: '2026-02-14T09:00:00' }, { id: 'a16', text: '⚠️ Marked as Critical priority', timestamp: '2026-02-14T09:01:00' }],
-  },
-  {
-    id: 't9', title: 'API rate limiting middleware', description: 'Add rate limiting middleware to the Express API with configurable thresholds per endpoint.',
-    status: 'review', priority: 'high', assignee: 'u3', reporter: 'u5', dueDate: d(4), tags: ['backend', 'security'],
-    subtasks: [{ id: 's22', title: 'Research rate limiting libraries', done: true }, { id: 's23', title: 'Implement middleware', done: true }, { id: 's24', title: 'Add integration tests', done: false }],
-    comments: [{ id: 'c10', userId: 'u3', text: 'Using express-rate-limit with Redis store.', timestamp: '2026-02-14T16:00:00' }, { id: 'c11', userId: 'u5', text: 'Please add tests before moving to done.', timestamp: '2026-02-15T09:00:00' }],
-    activity: [{ id: 'a17', text: '🔄 Priya moved to Review', timestamp: '2026-02-14T16:00:00' }, { id: 'a18', text: '💬 Deepa added a comment', timestamp: '2026-02-15T09:00:00' }],
-  },
-  {
-    id: 't10', title: 'Mobile responsive QA sweep', description: 'Complete QA sweep of all pages for mobile responsiveness across iOS and Android devices.',
-    status: 'done', priority: 'low', assignee: 'u5', reporter: 'u1', dueDate: d(-5), tags: ['qa', 'mobile'],
-    subtasks: [{ id: 's25', title: 'Test on iOS Safari', done: true }, { id: 's26', title: 'Test on Android Chrome', done: true }, { id: 's27', title: 'File bug reports', done: true }],
-    comments: [{ id: 'c12', userId: 'u5', text: 'All pages pass on both platforms. 3 minor bugs filed.', timestamp: '2026-02-10T15:00:00' }],
-    activity: [{ id: 'a19', text: '✅ Deepa moved to Done', timestamp: '2026-02-10T15:00:00' }, { id: 'a20', text: '🐛 3 bugs filed in tracker', timestamp: '2026-02-10T15:30:00' }],
-  },
-];
-
-export function getUserById(id: string) { return USERS.find(u => u.id === id); }
+export function getUserById(users: User[], id: string) { return users.find(u => u.id === id); }

src/index.css

@@ -1023,6 +1023,34 @@ body {
   text-align: center;
   color: var(--text-muted);
   font-size: 12px;
+  transition: all 0.2s;
+}
+
+/* DRAG AND DROP */
+.kanban-column-dragover {
+  background: rgba(99, 102, 241, 0.08);
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent), 0 0 20px rgba(99, 102, 241, 0.15);
+}
+
+.kanban-column-dragover .kanban-empty {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: rgba(99, 102, 241, 0.06);
+}
+
+.task-card.dragging {
+  opacity: 0.4;
+  transform: scale(0.95);
+  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
+}
+
+.task-card[draggable="true"] {
+  cursor: grab;
+}
+
+.task-card[draggable="true"]:active {
+  cursor: grabbing;
 }
 
 /* TASK CARD */
@@ -1820,7 +1848,7 @@ body {
   margin-bottom: 16px;
 }
 
-/* MEMBERS / USER MANAGEMENT */
+/* MEMBERS */
 .members-page {
   padding: 20px;
 }
@@ -1829,120 +1857,14 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }
 
 .members-header h2 {
   font-size: 18px;
   font-weight: 700;
-  margin: 0;
 }
 
-/* Department overview chips */
-.dept-overview {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-  flex-wrap: wrap;
-}
-
-.dept-chip {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.15s;
-  font-size: 12px;
-  color: #e2e8f0;
-}
-
-.dept-chip:hover {
-  border-color: var(--accent);
-  background: rgba(99, 102, 241, 0.04);
-}
-
-.dept-chip.active {
-  border-color: var(--accent);
-  background: rgba(99, 102, 241, 0.08);
-  color: var(--accent);
-}
-
-.dept-chip-count {
-  background: var(--bg-surface);
-  padding: 1px 7px;
-  border-radius: 10px;
-  font-size: 10px;
-  font-weight: 700;
-  color: var(--accent);
-}
-
-/* Toolbar */
-.members-toolbar {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 16px;
-  align-items: center;
-}
-
-.members-search {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex: 1;
-  max-width: 320px;
-  padding: 6px 12px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.members-search input {
-  background: none;
-  border: none;
-  color: #e2e8f0;
-  outline: none;
-  width: 100%;
-  font-size: 12px;
-}
-
-.members-filter-select {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 6px 10px;
-  font-size: 12px;
-  color: #e2e8f0;
-  cursor: pointer;
-}
-
-.view-toggle {
-  display: flex;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.view-toggle button {
-  background: var(--bg-card);
-  border: none;
-  padding: 6px 10px;
-  color: #64748b;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.15s;
-}
-
-.view-toggle button.active {
-  background: var(--accent);
-  color: white;
-}
-
-/* Table */
 .members-table {
   width: 100%;
   border-collapse: collapse;
@@ -1970,202 +1892,13 @@ body {
   cursor: pointer;
 }
 
-/* Inline select for role/dept editing */
-.inline-select {
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 2px 6px;
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
-  color: inherit;
-  outline: none;
-  transition: border-color 0.15s;
-}
-
-.inline-select:hover {
-  border-color: var(--accent);
-}
-
-.inline-select:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
-}
-
-/* Action icon buttons */
-.action-icon-btn {
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  padding: 4px 6px;
-  cursor: pointer;
-  font-size: 12px;
-  transition: all 0.15s;
-  color: #94a3b8;
-}
-
-.action-icon-btn:hover {
-  background: var(--bg-card);
-  border-color: var(--border);
-}
-
-/* Status dots */
-.status-dot {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 10px;
-  font-weight: 600;
-}
-
-.status-dot::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-}
-
-.status-dot-active {
-  color: #22c55e;
-}
-
-.status-dot-active::before {
-  background: #22c55e;
-}
-
-.status-dot-inactive {
-  color: #ef4444;
-}
-
-.status-dot-inactive::before {
-  background: #ef4444;
-}
-
-/* Expanded row */
 .member-expand {
   padding: 12px 16px;
   background: var(--bg-card);
-  border-radius: 8px;
 }
 
-.member-expand-header {
-  display: flex;
-  gap: 24px;
-  margin-bottom: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--border);
-}
-
-.member-expand-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.stat-num {
-  font-size: 18px;
-  font-weight: 800;
-}
-
-.stat-label {
-  font-size: 10px;
-  color: #64748b;
-  text-transform: uppercase;
-  font-weight: 600;
-}
-
-/* Grid view */
-.members-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 14px;
-}
-
-.member-card {
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 16px;
-  transition: all 0.15s;
-}
-
-.member-card:hover {
-  border-color: var(--accent);
-  box-shadow: 0 0 12px rgba(99, 102, 241, 0.06);
-}
-
-.member-card-inactive {
-  opacity: 0.5;
-}
-
-.member-card-top {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-.member-card-badges {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-  margin-bottom: 12px;
-}
-
-.member-card-stats {
-  display: flex;
-  justify-content: space-around;
-  padding: 10px 0;
-  margin-bottom: 10px;
-  border-top: 1px solid var(--border);
-  font-size: 12px;
-  color: #94a3b8;
-}
-
-.member-card-actions {
-  display: flex;
-  gap: 6px;
-  padding-top: 10px;
-  border-top: 1px solid var(--border);
-}
-
-/* Danger button */
-.btn-danger {
-  background: #ef4444;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  padding: 8px 16px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.btn-danger:hover {
-  background: #dc2626;
-}
-
-/* Modal grid (side by side fields) */
-.modal-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
-
-/* Error states */
-.modal-input.error {
-  border-color: #ef4444;
-  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
-}
-
-/* Role badge */
-.role-badge {
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-size: 10px;
-  font-weight: 700;
+.invite-modal {
+  width: 380px;
 }
 
 /* MORE TASKS POPOVER */
@@ -2187,3 +1920,432 @@ body {
   margin-bottom: 8px;
   font-weight: 600;
 }
+
+/* HAMBURGER BUTTON (hidden on desktop) */
+.hamburger-btn {
+  display: none;
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 18px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.15s;
+}
+
+.hamburger-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* SIDEBAR BACKDROP (hidden on desktop) */
+.sidebar-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 499;
+  animation: fadeIn 0.15s;
+}
+
+/* ============================================================
+   MOBILE RESPONSIVE — max-width: 768px
+   ============================================================ */
+@media (max-width: 768px) {
+
+  /* --- LOGIN --- */
+  .login-card {
+    width: 100%;
+    max-width: 400px;
+    margin: 16px;
+    padding: 28px 20px;
+  }
+
+  /* --- APP SHELL --- */
+  .app-shell {
+    height: 100dvh;
+  }
+
+  /* --- SIDEBAR: slide-in overlay --- */
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 500;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+    box-shadow: none;
+    width: 260px;
+    min-width: 260px;
+  }
+
+  .sidebar.sidebar-open {
+    transform: translateX(0);
+    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.5);
+  }
+
+  .sidebar-backdrop.visible {
+    display: block;
+  }
+
+  /* --- HAMBURGER: visible on mobile --- */
+  .hamburger-btn {
+    display: flex;
+  }
+
+  /* --- TOP NAVBAR --- */
+  .top-navbar {
+    padding: 0 12px;
+    gap: 8px;
+    height: 50px;
+    min-height: 50px;
+  }
+
+  .navbar-title {
+    font-size: 14px;
+  }
+
+  .navbar-search {
+    display: none;
+  }
+
+  .filter-chips {
+    display: none;
+  }
+
+  .new-task-btn {
+    padding: 6px 12px;
+    font-size: 11px;
+  }
+
+  .notif-btn {
+    font-size: 16px;
+  }
+
+  /* --- BOTTOM TOGGLE BAR --- */
+  .bottom-bar {
+    height: 44px;
+    min-height: 44px;
+  }
+
+  .toggle-btn {
+    width: 90px;
+    height: 34px;
+    font-size: 10px;
+    gap: 4px;
+  }
+
+  /* --- CALENDAR --- */
+  .calendar-toolbar {
+    padding: 10px 12px;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .cal-month-label {
+    font-size: 14px;
+    min-width: 140px;
+  }
+
+  .cal-nav-btn {
+    width: 28px;
+    height: 28px;
+    font-size: 12px;
+  }
+
+  .cal-today-btn {
+    padding: 4px 10px;
+    font-size: 11px;
+  }
+
+  .cal-view-btn {
+    padding: 4px 10px;
+    font-size: 11px;
+  }
+
+  .day-cell {
+    min-height: 72px;
+    padding: 2px;
+  }
+
+  .day-number {
+    font-size: 11px;
+    padding: 2px 4px;
+  }
+
+  .day-number.today {
+    width: 22px;
+    height: 22px;
+    font-size: 11px;
+  }
+
+  .task-chip {
+    height: 18px;
+    padding: 0 4px;
+  }
+
+  .task-chip-title {
+    font-size: 9px;
+  }
+
+  .task-chip-avatar {
+    display: none;
+  }
+
+  .month-grid-header {
+    font-size: 9px;
+    padding: 4px;
+    letter-spacing: 0;
+  }
+
+  .more-tasks-link {
+    font-size: 9px;
+    padding: 1px 4px;
+  }
+
+  /* Week view */
+  .week-grid {
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .week-header-cell {
+    font-size: 9px;
+    padding: 4px 2px;
+  }
+
+  .week-day-cell {
+    min-height: 120px;
+    padding: 4px;
+  }
+
+  .week-chip {
+    height: 22px;
+    padding: 2px 4px;
+    font-size: 10px;
+  }
+
+  /* --- QUICK ADD --- */
+  .quick-add-panel {
+    width: calc(100vw - 24px);
+    max-width: 320px;
+  }
+
+  /* --- KANBAN --- */
+  .kanban-board {
+    padding: 10px 12px;
+    gap: 12px;
+  }
+
+  .kanban-column {
+    min-width: 240px;
+  }
+
+  .kanban-col-header {
+    padding: 10px 12px;
+  }
+
+  .task-card {
+    padding: 10px 12px;
+  }
+
+  .task-card-title {
+    font-size: 12px;
+  }
+
+  .task-card-meta {
+    font-size: 10px;
+    gap: 6px;
+  }
+
+  /* --- LIST VIEW --- */
+  .list-view {
+    padding: 10px 12px;
+    overflow-x: auto;
+  }
+
+  .list-table {
+    min-width: 600px;
+  }
+
+  .list-table th {
+    padding: 8px;
+    font-size: 10px;
+  }
+
+  .list-table td {
+    padding: 8px;
+    font-size: 12px;
+  }
+
+  .list-sort-row {
+    flex-wrap: wrap;
+  }
+
+  /* --- DASHBOARD --- */
+  .dashboard {
+    padding: 12px;
+  }
+
+  .stats-row {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    margin-bottom: 16px;
+  }
+
+  .stat-card {
+    padding: 14px;
+  }
+
+  .stat-card-num {
+    font-size: 24px;
+  }
+
+  .stat-card-label {
+    font-size: 10px;
+  }
+
+  .workload-card {
+    padding: 14px;
+  }
+
+  .workload-name {
+    font-size: 12px;
+    min-width: 80px;
+  }
+
+  .workload-dept {
+    font-size: 10px;
+    min-width: 60px;
+  }
+
+  .workload-row {
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  /* --- DRAWER: full screen --- */
+  .drawer {
+    width: 100%;
+  }
+
+  .drawer-body {
+    padding: 14px;
+  }
+
+  .drawer-title {
+    font-size: 16px;
+  }
+
+  .drawer-meta {
+    grid-template-columns: 1fr;
+    gap: 10px;
+    padding: 12px;
+  }
+
+  .comment-input-row {
+    flex-wrap: wrap;
+  }
+
+  .comment-input-row input {
+    min-width: 0;
+  }
+
+  .subtask-add {
+    flex-wrap: wrap;
+  }
+
+  .subtask-add input {
+    min-width: 0;
+    width: 100%;
+  }
+
+  /* --- MODAL: near full width --- */
+  .modal {
+    width: 95vw;
+    max-width: 480px;
+  }
+
+  .modal-header {
+    padding: 14px 16px;
+  }
+
+  .modal-header h2 {
+    font-size: 15px;
+  }
+
+  .modal-body {
+    padding: 16px;
+  }
+
+  .modal-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .modal-footer {
+    padding: 12px 16px;
+  }
+
+  /* --- REPORTS --- */
+  .reports {
+    padding: 12px;
+  }
+
+  .charts-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .chart-card {
+    padding: 14px;
+  }
+
+  .chart-card-title {
+    font-size: 13px;
+    margin-bottom: 10px;
+  }
+
+  /* --- TEAM TASKS --- */
+  .team-tasks {
+    padding: 12px;
+  }
+
+  .team-group-header {
+    padding: 8px 10px;
+  }
+
+  .team-group-tasks {
+    padding: 6px 0 6px 24px;
+  }
+
+  .team-task-row {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  /* --- MEMBERS --- */
+  .members-page {
+    padding: 12px;
+  }
+
+  .members-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .members-table {
+    min-width: 500px;
+  }
+
+  /* --- POPOVER --- */
+  .more-popover {
+    width: 220px;
+  }
+}

vite.config.ts

@@ -4,4 +4,13 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    proxy: {
+      '/api': {
+        target: 'http://backend:3001',
+        changeOrigin: true,
+      },
+    },
+  },
 })