The file /Users/khalidbinkalban/my-workspace/client/src/components/Tasks.jsx has been updated successfully.

import { useState, useEffect, useRef } from 'react';
import { Plus, Search, SlidersHorizontal, CheckSquare, X, Check, Calendar, User, AlertTriangle } from 'lucide-react';
import toast from 'react-hot-toast';
import api from '../api';
import TaskCard from './TaskCard';
import TaskModal from './TaskModal';
import ConfirmDialog from './ConfirmDialog';
import { CATEGORIES, STATUSES, PRIORITIES, getCategoryClass, getPriorityClass, getStatusClass, formatDate, isOverdue } from '../utils';

const PRIORITY_BORDER = {
  Urgent: 'border-l-red-500',
  High:   'border-l-amber-400',
  Medium: 'border-l-blue-400',
  Low:    'border-l-green-400',
};

function useDebounce(v, d = 300) {
  const [dv, setDv] = useState(v);
  useEffect(() => { const t = setTimeout(() => setDv(v), d); return () => clearTimeout(t); }, [v, d]);
  return dv;
}

// Status columns for horizontal kanban-style layout
const STATUS_COLS = [
  { id: '',          label: 'All',         color: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400' },
  { id: 'Open',      label: 'Open',        color: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400' },
  { id: 'In Progress',label:'In Progress', color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300' },
  { id: 'Waiting',   label: 'Waiting',     color: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300' },
  { id: 'Done',      label: 'Done',        color: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' },
];

export default function Tasks() {
  const [tasks, setTasks]           = useState([]);
  const [projects, setProjects]     = useState([]);
  const [loading, setLoading]       = useState(true);
  const [search, setSearch]         = useState('');
  const [statusFilter, setStatus]   = useState('');
  const [catFilter, setCat]         = useState('');
  const [priorityFilter, setPri]    = useState('');
  const [showFilters, setShowFilters] = useState(false);
  const [editTask, setEditTask]     = useState(null);
  const [deleteTask, setDeleteTask] = useState(null);
  const [showNew, setShowNew]       = useState(false);
  const [selected, setSelected]     = useState(new Set());
  const [viewMode, setViewMode]     = useState('grid'); // 'grid' | 'kanban'
  const debouncedSearch = useDebounce(search);

  const load = async () => {
    setLoading(true);
    const p = new URLSearchParams();
    if (debouncedSearch)  p.set('search',   debouncedSearch);
    if (statusFilter)     p.set('status',   statusFilter);
    if (catFilter)        p.set('category', catFilter);
    if (priorityFilter)   p.set('priority', priorityFilter);
    try {
      const [t, pr] = await Promise.all([api.get('/tasks?' + p), api.get('/projects')]);
      setTasks(t); setProjects(pr);
    } finally { setLoading(false); }
  };

  useEffect(() => { load(); }, [debouncedSearch, statusFilter, catFilter, priorityFilter]);

  const handleSave = async (form) => {
    try {
      if (editTask?.id) { await api.put(`/tasks/${editTask.id}`, form); toast.success('Task updated'); }
      else              { await api.post('/tasks', form);               toast.success('Task added');   }
      setEditTask(null); setShowNew(false); load();
    } catch (e) { toast.error(e.message); }
  };

  const handleDelete = async () => {
    await api.delete(`/tasks/${deleteTask.id}`); toast.success('Deleted');
    setDeleteTask(null); load();
  };

  const toggleFocus = async (task) => { await api.patch(`/tasks/${task.id}/focus`); load(); };

  const toggleSelect = (id) => setSelected(s => {
    const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n;
  });

  const bulkDone = async () => {
    await Promise.all([...selected].map(id => api.patch(`/tasks/${id}/status`, { status: 'Done' })));
    toast.success(`${selected.size} tasks done`);
    setSelected(new Set()); load();
  };

  const hasFilters = statusFilter || catFilter || priorityFilter;

  // Kanban grouping by status
  const KANBAN_COLS = ['Open', 'In Progress', 'Waiting', 'Done'];
  const byStatus = KANBAN_COLS.reduce((acc, s) => {
    acc[s] = tasks.filter(t => t.status === s);
    return acc;
  }, {});

  return (

      {/* Header */}

Tasks

            {/* View toggle */}

              {[{ id:'grid', label:'Grid' }, { id:'kanban', label:'Board' }].map(v => (
                <button key={v.id} onClick={() => setViewMode(v.id)}
                  className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
                    viewMode === v.id ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' : 'text-gray-500'
                  }`}>
                  {v.label}
                </button>
              ))}

            <button onClick={() => setShowNew(true)} className="btn-primary flex items-center gap-1.5 py-2">
              <Plus size={14} /> New Task
            </button>

        {/* Search + filter row */}

            <Search size={13} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
            <input className="input pl-8 py-2 text-sm" placeholder="Search tasks…" value={search} onChange={e => setSearch(e.target.value)} />

          <button onClick={() => setShowFilters(!showFilters)}
            className={`btn-secondary flex items-center gap-1.5 py-2 text-sm ${hasFilters ? 'border-primary text-primary' : ''}`}>
            <SlidersHorizontal size={13} />
            {hasFilters ? 'Filtered' : 'Filter'}
          </button>

        {/* Filter chips */}
        {showFilters && (

            <select className="select text-xs py-1.5 w-auto" value={statusFilter} onChange={e => setStatus(e.target.value)}>
              <option value="">All Status</option>
              {STATUSES.map(s => <option key={s}>{s}</option>)}
            </select>
            <select className="select text-xs py-1.5 w-auto" value={catFilter} onChange={e => setCat(e.target.value)}>
              <option value="">All Categories</option>
              {Object.entries(CATEGORIES).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
            </select>
            <select className="select text-xs py-1.5 w-auto" value={priorityFilter} onChange={e => setPri(e.target.value)}>
              <option value="">All Priorities</option>
              {PRIORITIES.map(p => <option key={p}>{p}</option>)}
            </select>
            {hasFilters && (
              <button onClick={() => { setStatus(''); setCat(''); setPri(''); }}
                className="flex items-center gap-1 text-xs text-primary hover:underline px-2">
                <X size={11} /> Clear
              </button>
            )}

        )}

        {/* Bulk actions */}
        {selected.size > 0 && (

            {selected.size} selected
            <button onClick={bulkDone} className="btn-primary py-1 text-xs flex items-center gap-1">
              <CheckSquare size={11} /> Mark done
            </button>
            <button onClick={() => setSelected(new Set())} className="btn-ghost text-xs">Clear</button>

        )}

      {/* Content area */}
      {loading ? (

          {[...Array(8)].map((_, i) =>
)}

      ) : tasks.length === 0 ? (

          <CheckSquare size={40} className="text-gray-200 dark:text-gray-700" />

No tasks found

          {(search || hasFilters) && (
            <button onClick={() => { setSearch(''); setStatus(''); setCat(''); setPri(''); }} className="btn-secondary text-sm">
              Clear filters
            </button>
          )}

      ) : viewMode === 'grid' ? (
        /* ── GRID view ─────────────────────────────────── */

{tasks.length} task{tasks.length !== 1 ? 's' : ''}

            {tasks.map(task => {
              const overdue = isOverdue(task.due_date) && task.status !== 'Done';
              const isDone = task.status === 'Done';
              const isSelected = selected.has(task.id);
              return (

 setEditTask(task)}
                >

                      {/* Green checkbox inside card */}
                      <button
                        onClick={e => { e.stopPropagation(); toggleSelect(task.id); }}
                        className={`shrink-0 mt-0.5 w-5 h-5 rounded-md border-2 flex items-center justify-center transition-all ${
                          isSelected || isDone
                            ? 'bg-green-500 border-green-500 shadow-sm'
                            : 'border-gray-300 dark:border-gray-600 hover:border-green-400'
                        }`}
                      >
                        {(isSelected || isDone) && <Check size={11} className="text-white" />}
                      </button>

                        <p className={`text-sm font-semibold leading-snug ${isDone ? 'line-through text-gray-400' : 'text-gray-800 dark:text-gray-100'}`}>
                          {task.title}

                        {task.notes && (

{task.notes}

                        )}

                          <span className={`badge text-[10px] py-0.5 ${getPriorityClass(task.priority)}`}>{task.priority}
                          <span className={`badge text-[10px] py-0.5 ${getCategoryClass(task.category)}`}>
                            {CATEGORIES[task.category]?.label?.split(' ')[0] || task.category}

                          <span className={`badge text-[10px] py-0.5 ${getStatusClass(task.status)}`}>{task.status}

                        {(task.assignee || task.due_date) && (

                            {task.assignee && (

                                <User size={10} />{task.assignee}

                            )}
                            {task.due_date && (
                              <span className={`flex items-center gap-1 ${overdue ? 'text-red-500 font-medium' : ''}`}>
                                {overdue && <AlertTriangle size={10} />}
                                <Calendar size={10} />{formatDate(task.due_date)}

                            )}

                        )}

              );
            })}

      ) : (
        /* ── KANBAN / BOARD view ────────────────────────── */

          {KANBAN_COLS.map(status => {
            const col = STATUS_COLS.find(c => c.id === status);
            const colTasks = byStatus[status] || [];
            return (

{status}

                    <span className={`badge text-[10px] py-0.5 ${col?.color}`}>{colTasks.length}

                  <button onClick={() => setShowNew(true)}
                    className="w-6 h-6 rounded-lg bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 flex items-center justify-center text-gray-400 hover:text-primary hover:border-primary transition-all">
                    <Plus size={12} />
                  </button>

                  {colTasks.map(task => (
                    <TaskCard key={task.id} task={task} onEdit={setEditTask} onDelete={setDeleteTask} onToggleFocus={toggleFocus} />
                  ))}
                  {colTasks.length === 0 && (

No tasks

                  )}

            );
          })}

      )}

      {(showNew || editTask) && (
        <TaskModal task={editTask} projects={projects} onSave={handleSave} onClose={() => { setShowNew(false); setEditTask(null); }} />
      )}
      {deleteTask && (
        <ConfirmDialog title="Delete task?" message={`"${deleteTask.title}"`} onConfirm={handleDelete} onCancel={() => setDeleteTask(null)} />
      )}

  );
}

-import { useState, useEffect, useRef } from 'react';

+import { useState, useEffect } from 'react';


Edit

setAllTasks(all.filter(t => t.project_id != id && t.status !== 'Done'));

setAllTasks(all.filter(t => t.project_id !== parseInt(id) && t.status !== 'Done'));


The file /Users/khalidbinkalban/my-workspace/client/src/components/ProjectDetail.jsx has been updated successfully.

import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  ArrowLeft, Pencil, Plus, Trash2, FileText, CheckSquare,
  Link2, Search, X, CheckCircle2, Clock, Loader2, PauseCircle,
  FolderKanban, AlignLeft, RefreshCw, ChevronRight, Calendar, User
} from 'lucide-react';
import toast from 'react-hot-toast';
import api from '../api';
import TaskCard from './TaskCard';
import TaskModal from './TaskModal';
import ConfirmDialog from './ConfirmDialog';
import { CATEGORIES, STATUSES, PRIORITIES, getCategoryClass, getPriorityClass, getStatusClass, formatDate } from '../utils';

const CATEGORY_ACCENT = {
  ai:        'from-blue-500 to-cyan-500',
  vendor:    'from-purple-500 to-violet-500',
  gov:       'from-amber-500 to-yellow-500',
  people:    'from-teal-500 to-emerald-500',
  events:    'from-orange-500 to-red-400',
  strategic: 'from-green-500 to-teal-500',
  adhoc:     'from-red-500 to-rose-500',
};

const CATEGORY_BG = {
  ai:        'bg-blue-50 dark:bg-blue-900/20',
  vendor:    'bg-purple-50 dark:bg-purple-900/20',
  gov:       'bg-amber-50 dark:bg-amber-900/20',
  people:    'bg-teal-50 dark:bg-teal-900/20',
  events:    'bg-orange-50 dark:bg-orange-900/20',
  strategic: 'bg-green-50 dark:bg-green-900/20',
  adhoc:     'bg-red-50 dark:bg-red-900/20',
};

const STATUS_META = {
  Open:          { icon: Clock,        color: 'text-gray-500',  bg: 'bg-gray-100 dark:bg-gray-800'         },
  'In Progress': { icon: Loader2,      color: 'text-blue-600',  bg: 'bg-blue-100 dark:bg-blue-900/30'      },
  Waiting:       { icon: PauseCircle,  color: 'text-amber-600', bg: 'bg-amber-100 dark:bg-amber-900/30'    },
  Done:          { icon: CheckCircle2, color: 'text-green-600', bg: 'bg-green-100 dark:bg-green-900/30'    },
};

function InlineEdit({ value, onSave, multiline = false, placeholder = '', className = '' }) {
  const [editing, setEditing] = useState(false);
  const [val, setVal] = useState(value || '');
  useEffect(() => setVal(value || ''), [value]);
  const save = () => { setEditing(false); if (val !== value) onSave(val); };
  if (!editing) return (
     setEditing(true)}
      className={`group cursor-text flex items-start gap-1.5 ${className}`}>

        {val || placeholder}

      <Pencil size={11} className="opacity-0 group-hover:opacity-40 shrink-0 mt-0.5 text-gray-400" />

  );
  return multiline
    ? <textarea autoFocus className="input w-full resize-none text-sm" rows={4} value={val}
        onChange={e => setVal(e.target.value)} onBlur={save} />
    : <input autoFocus className="input w-full text-sm" value={val}
        onChange={e => setVal(e.target.value)} onBlur={save} onKeyDown={e => e.key === 'Enter' && save()} />;
}

function InfoRow({ icon: Icon, label, children }) {
  return (

        <Icon size={11} />{label}

{children}

  );
}

function NoteForm({ projectId, onSave, onCancel }) {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const submit = async (e) => {
    e.preventDefault();
    if (!title.trim()) return;
    await onSave({ title, body, project_id: projectId, date: new Date().toISOString().split('T')[0] });
  };
  return (
    <form onSubmit={submit} className="bg-white dark:bg-gray-900 rounded-2xl border-2 border-dashed border-primary/30 p-4 space-y-3">
      <input className="input font-medium" placeholder="Note title…" value={title} onChange={e => setTitle(e.target.value)} autoFocus required />
      <textarea className="input resize-none text-sm" rows={4} placeholder="Write your note…" value={body} onChange={e => setBody(e.target.value)} />

        <button type="button" onClick={onCancel} className="btn-secondary text-xs py-1.5 px-3">Cancel</button>
        <button type="submit" className="btn-primary text-xs py-1.5 px-3">Save Note</button>

    </form>
  );
}

export default function ProjectDetail() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [project, setProject]       = useState(null);
  const [tasks, setTasks]           = useState([]);
  const [notes, setNotes]           = useState([]);
  const [projects, setProjects]     = useState([]);
  const [tab, setTab]               = useState('tasks');
  const [loading, setLoading]       = useState(true);
  const [editTask, setEditTask]     = useState(null);
  const [deleteTask, setDeleteTask] = useState(null);
  const [deleteNote, setDeleteNote] = useState(null);
  const [showNewTask, setShowNewTask]   = useState(false);
  const [showNewNote, setShowNewNote]   = useState(false);
  const [showLinkTask, setShowLinkTask] = useState(false);
  const [allTasks, setAllTasks]     = useState([]);
  const [linkSearch, setLinkSearch] = useState('');

  const load = async () => {
    try {
      const [p, t, n, pr] = await Promise.all([
        api.get(`/projects/${id}`),
        api.get(`/tasks?project_id=${id}`),
        api.get(`/notes?project_id=${id}`),
        api.get('/projects'),
      ]);
      setProject(p); setTasks(t); setNotes(n); setProjects(pr);
    } catch { navigate('/projects'); }
    finally { setLoading(false); }
  };

  useEffect(() => { load(); }, [id]);

  const updateProject = async (field, value) => {
    const updated = { ...project, [field]: value };
    setProject(updated);
    await api.put(`/projects/${id}`, updated);
  };

  const handleSaveTask = async (form) => {
    try {
      if (editTask?.id) { await api.put(`/tasks/${editTask.id}`, { ...form, project_id: id }); toast.success('Task updated'); }
      else { await api.post('/tasks', { ...form, project_id: id }); toast.success('Task added'); }
      setEditTask(null); setShowNewTask(false); load();
    } catch (e) { toast.error(e.message); }
  };

  const handleSaveNote = async (form) => {
    try { await api.post('/notes', form); toast.success('Note saved'); setShowNewNote(false); load(); }
    catch (e) { toast.error(e.message); }
  };

  const handleDeleteTask = async () => {
    await api.delete(`/tasks/${deleteTask.id}`); toast.success('Task deleted');
    setDeleteTask(null); load();
  };

  const handleDeleteNote = async () => {
    await api.delete(`/notes/${deleteNote.id}`); toast.success('Note deleted');
    setDeleteNote(null); load();
  };

  const toggleFocus = async (task) => { await api.patch(`/tasks/${task.id}/focus`); load(); };

  const openLinkTask = async () => {
    const all = await api.get('/tasks');
    setAllTasks(all.filter(t => t.project_id != id && t.status !== 'Done'));
    setLinkSearch(''); setShowLinkTask(true);
  };

  const linkTask = async (task) => {
    await api.put(`/tasks/${task.id}`, { ...task, project_id: id });
    toast.success(`Linked to project`);
    setAllTasks(prev => prev.filter(t => t.id !== task.id));
    load();
  };

  if (loading) return (

  );

  if (!project) return null;

  const openTasks  = tasks.filter(t => t.status !== 'Done').length;
  const doneTasks  = tasks.filter(t => t.status === 'Done').length;
  const StatusIcon = STATUS_META[project.status]?.icon || Clock;
  const statusColor = STATUS_META[project.status]?.color || 'text-gray-500';
  const statusBg    = STATUS_META[project.status]?.bg    || 'bg-gray-100';

  return (

      {/* Colored accent bar */}
      <div className={`h-1.5 w-full bg-gradient-to-r shrink-0 ${CATEGORY_ACCENT[project.category] || 'from-gray-400 to-gray-500'}`} />

      {/* Header */}
      <div className={`shrink-0 px-5 pt-4 pb-5 ${CATEGORY_BG[project.category] || 'bg-white dark:bg-gray-900'} border-b border-black/5 dark:border-white/5`}>
        {/* Back + actions */}

          <button onClick={() => navigate('/projects')}
            className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors font-medium">
            <ArrowLeft size={15} /> Projects
          </button>
          <button onClick={() => load()}
            className="flex items-center gap-1.5 text-xs text-gray-400 hover:text-gray-600 transition-colors">
            <RefreshCw size={12} />
          </button>

        {/* Category + title */}

          <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 bg-white/70 dark:bg-gray-800/70 shadow-sm`}>
            <FolderKanban size={18} className={getCategoryClass(project.category).split(' ').find(c => c.startsWith('text-')) || 'text-gray-500'} />

              <InlineEdit value={project.name} onSave={v => updateProject('name', v)} placeholder="Project name" />

        {/* Status / Priority / Category pills */}

          {/* Status selector */}
          <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold ${statusBg} ${statusColor}`}>
            <StatusIcon size={11} />
            <select
              value={project.status}
              onChange={e => updateProject('status', e.target.value)}
              className="bg-transparent border-0 outline-none cursor-pointer text-xs font-semibold appearance-none pr-1"
              style={{ color: 'inherit' }}
            >
              {STATUSES.map(s => <option key={s}>{s}</option>)}
            </select>

          {/* Priority selector */}
          <div className={`flex items-center px-3 py-1.5 rounded-full text-xs font-semibold ${getPriorityClass(project.priority)}`}>
            <select
              value={project.priority}
              onChange={e => updateProject('priority', e.target.value)}
              className="bg-transparent border-0 outline-none cursor-pointer text-xs font-semibold appearance-none"
              style={{ color: 'inherit' }}
            >
              {PRIORITIES.map(p => <option key={p}>{p}</option>)}
            </select>

          {/* Category selector */}
          <div className={`flex items-center px-3 py-1.5 rounded-full text-xs font-semibold ${getCategoryClass(project.category)}`}>
            <select
              value={project.category}
              onChange={e => updateProject('category', e.target.value)}
              className="bg-transparent border-0 outline-none cursor-pointer text-xs font-semibold appearance-none"
              style={{ color: 'inherit' }}
            >
              {Object.entries(CATEGORIES).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
            </select>

          {/* Task count chip */}

            <CheckSquare size={11} />
            {openTasks} open · {doneTasks} done

      {/* Body — split layout */}

        {/* ── LEFT: Project info ──────────────────────────────────── */}

            <InfoRow icon={AlignLeft} label="Description">
              <InlineEdit
                value={project.description}
                onSave={v => updateProject('description', v)}
                multiline
                placeholder="Add a description…"
                className="leading-relaxed"
              />
            </InfoRow>

            <InfoRow icon={RefreshCw} label="Last Update">
              <InlineEdit
                value={project.last_update}
                onSave={v => updateProject('last_update', v)}
                placeholder="What happened last?"
              />
            </InfoRow>

            <InfoRow icon={ChevronRight} label="Next Step">
              <InlineEdit
                value={project.next_step}
                onSave={v => updateProject('next_step', v)}
                placeholder="What needs to happen next?"
              />
            </InfoRow>

            {/* Stats */}

              {[
                { label: 'Open',  value: openTasks,        color: 'text-blue-600',  bg: 'bg-blue-50 dark:bg-blue-900/20'  },
                { label: 'Done',  value: doneTasks,        color: 'text-green-600', bg: 'bg-green-50 dark:bg-green-900/20'},
                { label: 'Notes', value: notes.length,     color: 'text-violet-600',bg: 'bg-violet-50 dark:bg-violet-900/20'},
              ].map(({ label, value, color, bg }) => (
                <div key={label} className={`${bg} rounded-xl p-3 text-center`}>
                  <p className={`text-xl font-bold ${color}`}>{value}

{label}

              ))}

            {project.updated_at && (

                <Calendar size={9} /> Updated {formatDate(project.updated_at)}

            )}

        {/* ── RIGHT: Tasks / Notes ────────────────────────────────── */}

          {/* Tab bar */}

            {[
              { id: 'tasks', icon: CheckSquare, label: 'Tasks', count: tasks.filter(t => t.status !== 'Done').length },
              { id: 'notes', icon: FileText,    label: 'Notes', count: notes.length },
            ].map(({ id: tid, icon: Icon, label, count }) => (
              <button key={tid} onClick={() => setTab(tid)}
                className={`flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-sm font-medium transition-all ${
                  tab === tid
                    ? 'bg-primary text-white shadow-sm'
                    : 'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-white'
                }`}>
                <Icon size={13} />{label}
                <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-bold ${tab === tid ? 'bg-white/20' : 'bg-gray-100 dark:bg-gray-800 text-gray-500'}`}>
                  {count}

              </button>
            ))}

            {tab === 'tasks' && (

                <button onClick={openLinkTask} className="btn-secondary flex items-center gap-1 py-1.5 text-xs">
                  <Link2 size={12} /> Link
                </button>
                <button onClick={() => setShowNewTask(true)} className="btn-primary flex items-center gap-1 py-1.5 text-xs">
                  <Plus size={12} /> New Task
                </button>

            )}
            {tab === 'notes' && (
              <button onClick={() => setShowNewNote(!showNewNote)} className="btn-primary flex items-center gap-1 py-1.5 text-xs">
                <Plus size={12} /> Add Note
              </button>
            )}

          {/* Tab content */}

            {/* TASKS */}
            {tab === 'tasks' && (
              <>
                {showNewNote && null}
                {tasks.length === 0 ? (

                    <CheckSquare size={40} className="text-gray-200 dark:text-gray-700" />

No tasks yet

                    <button onClick={() => setShowNewTask(true)} className="btn-primary text-sm">Add first task</button>

                ) : (

                    {tasks.map(t => (
                      <TaskCard key={t.id} task={t} onEdit={setEditTask} onDelete={setDeleteTask} onToggleFocus={toggleFocus} />
                    ))}

                )}
              </>
            )}

            {/* NOTES */}
            {tab === 'notes' && (

                {showNewNote && (
                  <NoteForm projectId={id} onSave={handleSaveNote} onCancel={() => setShowNewNote(false)} />
                )}
                {notes.length === 0 && !showNewNote ? (

                    <FileText size={40} className="text-gray-200 dark:text-gray-700" />

No notes yet

                    <button onClick={() => setShowNewNote(true)} className="btn-primary text-sm">Add first note</button>

                ) : (

                    {notes.map(n => (

{n.title}

                          <button onClick={() => setDeleteNote(n)}
                            className="p-1.5 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-400 hover:text-red-500 transition-all shrink-0">
                            <Trash2 size={12} />
                          </button>

                        {n.body &&
{n.body}
}

                          <Calendar size={9} />{formatDate(n.date)}

                    ))}

                )}

            )}

      {/* Modals */}
      {(showNewTask || editTask) && (
        <TaskModal task={editTask} projects={projects} onSave={handleSaveTask} onClose={() => { setShowNewTask(false); setEditTask(null); }} />
      )}
      {deleteTask && <ConfirmDialog title="Delete task?" message={`"${deleteTask.title}"`} onConfirm={handleDeleteTask} onCancel={() => setDeleteTask(null)} />}
      {deleteNote && <ConfirmDialog title="Delete note?" message={`"${deleteNote.title}"`} onConfirm={handleDeleteNote} onCancel={() => setDeleteNote(null)} />}

      {/* Link existing task modal */}
      {showLinkTask && (

 setShowLinkTask(false)}>

 e.stopPropagation()}>

              <Link2 size={16} className="text-primary shrink-0" />

Link Existing Task

              <button onClick={() => setShowLinkTask(false)} className="btn-icon"><X size={16} /></button>

                <Search size={13} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                <input className="input pl-8 py-2 text-sm w-full" placeholder="Search tasks…"
                  value={linkSearch} onChange={e => setLinkSearch(e.target.value)} autoFocus />

              {allTasks.filter(t =>
                !linkSearch || t.title.toLowerCase().includes(linkSearch.toLowerCase()) ||
                (t.assignee || '').toLowerCase().includes(linkSearch.toLowerCase())
              ).map(task => (
                <button key={task.id} onClick={() => linkTask(task)}
                  className="flex items-center gap-3 w-full px-5 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors text-left group">

{task.title}

                      {task.status}
                      {task.assignee && · {task.assignee}}

                    <Link2 size={11} /> Link

                </button>
              ))}
              {allTasks.filter(t => !linkSearch || t.title.toLowerCase().includes(linkSearch.toLowerCase())).length === 0 && (

No unlinked tasks found

              )}

      )}

  );
}

-    setAllTasks(all.filter(t => t.project_id != id && t.status !== 'Done'));

+    setAllTasks(all.filter(t => t.project_id !== parseInt(id) && t.status !== 'Done'));


Done. Here's what I fixed:

| File | Issue |
|---|---|
| `main.jsx` | Removed duplicate `<Toaster>` — it was also defined in `App.jsx`, causing two toast overlays |
| `App.jsx` | Removed unused `RIGHT_PANEL_ROUTES` constant |
| `Today.jsx` | Removed unused `stats` prop from `DroppableColumn`, fixed double `;;` |
| `Tasks.jsx` | Removed unused `useRef` import |
| `ProjectDetail.jsx` | Fixed loose `!=` comparison between number (`project_id`) and string (`id` from URL params) → `!== parseInt(id)` |

If you're still seeing yellow warnings after these, share the exact text of the warning and I can target the root cause more precisely.