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

src/NavBars.tsx

@@ -1,5 +1,4 @@
-import { USERS } from './data';
-
+import type { User } from './data';
 
 interface TopNavbarProps {
     title: string;
@@ -9,9 +8,10 @@ interface TopNavbarProps {
     onSearch: (q: string) => void;
     onNewTask: () => void;
     onOpenSidebar: () => void;
+    users: User[];
 }
 
-export function TopNavbar({ title, filterUser, onFilterChange, searchQuery, onSearch, onNewTask, onOpenSidebar }: 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>
@@ -23,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)}>