import { useState, useEffect } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import {
  CalendarDays, Inbox, FolderKanban, CheckSquare, FileText,
  Bell, Users, BarChart2, Search, Moon, Sun, Zap,
  ChevronDown, ChevronRight, Settings, LogOut
} from 'lucide-react';
import { useApp } from '../App';
import api from '../api';

const CATEGORY_DOT = {
  ai:        'bg-blue-500',
  vendor:    'bg-purple-500',
  gov:       'bg-amber-500',
  people:    'bg-teal-500',
  events:    'bg-orange-500',
  strategic: 'bg-green-500',
  adhoc:     'bg-red-500',
};
const CATEGORY_LABEL = {
  ai:        'AI & Strategy',
  vendor:    'Vendors',
  gov:       'Governance',
  people:    'People',
  events:    'Events',
  strategic: 'Strategic',
  adhoc:     'CAIO / EVP',
};

const NAV = [
  { to: '/today',         icon: CalendarDays, label: 'Dashboard'     },
  { to: '/inbox',         icon: Inbox,        label: 'Inbox'         },
  { to: '/tasks',         icon: CheckSquare,  label: 'Tasks'         },
  { to: '/notes',         icon: FileText,     label: 'Notes'         },
  { to: '/follow-ups',    icon: Bell,         label: 'Follow-ups'    },
  { to: '/people',        icon: Users,        label: 'People'        },
  { to: '/weekly-review', icon: BarChart2,    label: 'Weekly Review' },
];

export default function Sidebar({ onSearchOpen }) {
  const { darkMode, setDarkMode } = useApp();
  const [projects, setProjects] = useState([]);
  const [openCats, setOpenCats] = useState({ ai: true, vendor: true });
  const navigate = useNavigate();

  useEffect(() => {
    api.get('/projects').then(setProjects).catch(() => {});
  }, []);

  const grouped = projects.reduce((acc, p) => {
    if (!acc[p.category]) acc[p.category] = [];
    acc[p.category].push(p);
    return acc;
  }, {});

  const toggleCat = (cat) => setOpenCats(s => ({ ...s, [cat]: !s[cat] }));

  return (

      {/* Logo */}

            <Zap size={15} className="text-white" />

My Workspace

DEWA · Senior Manager

      {/* Search */}
      <button
        onClick={onSearchOpen}
        className="mx-3 mt-3 flex items-center gap-2 px-3 py-2 rounded-xl bg-gray-50 dark:bg-gray-800 text-gray-400 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors group border border-gray-100 dark:border-gray-700"
      >
        <Search size={12} />
        Search…
        ⌘K
      </button>

      {/* Main nav */}

        {NAV.map(({ to, icon: Icon, label }) => (
          <NavLink key={to} to={to} className={({ isActive }) =>
            isActive ? 'nav-item-active flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium bg-primary/10 text-primary'
                     : 'nav-item flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all'
          }>
            <Icon size={15} />
            {label}
          </NavLink>
        ))}

      {/* Projects grouped */}

Projects

        {Object.entries(grouped).map(([cat, items]) => (

            <button
              onClick={() => toggleCat(cat)}
              className="flex items-center gap-2 w-full px-2 py-1.5 text-xs font-semibold text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
            >
              <div className={`w-2 h-2 rounded-full shrink-0 ${CATEGORY_DOT[cat]}`} />
              {CATEGORY_LABEL[cat]}
              {items.length}
              {openCats[cat] ? <ChevronDown size={11} /> : <ChevronRight size={11} />}
            </button>
            {openCats[cat] && (

                {items.slice(0, 5).map(p => (
                  <button
                    key={p.id}
                    onClick={() => navigate(`/projects/${p.id}`)}
                    className="flex items-center gap-1.5 w-full px-2 py-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-colors text-left"
                  >
                    <div className={`w-1.5 h-1.5 rounded-full shrink-0 ${CATEGORY_DOT[cat]} opacity-60`} />
                    {p.name}
                  </button>
                ))}
                {items.length > 5 && (
                  <button onClick={() => navigate('/projects')} className="text-[10px] text-gray-400 hover:text-primary px-2 py-0.5 transition-colors">
                    +{items.length - 5} more
                  </button>
                )}

            )}

        ))}

      {/* Bottom */}

        <button
          onClick={() => setDarkMode(!darkMode)}
          className="flex items-center gap-2 w-full px-3 py-2 rounded-xl text-xs text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
        >
          {darkMode ? <Sun size={13} /> : <Moon size={13} />}
          {darkMode ? 'Light mode' : 'Dark mode'}
        </button>

  );
}


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

import { useState, useEffect } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import {
  CalendarDays, Inbox, FolderKanban, CheckSquare, FileText,
  Bell, Users, BarChart2, Search, Moon, Sun, Zap,
  ChevronDown, ChevronRight, Settings, LogOut
} from 'lucide-react';
import { useApp } from '../App';
import api from '../api';

const CATEGORY_DOT = {
  ai:        'bg-blue-500',
  vendor:    'bg-purple-500',
  gov:       'bg-amber-500',
  people:    'bg-teal-500',
  events:    'bg-orange-500',
  strategic: 'bg-green-500',
  adhoc:     'bg-red-500',
};
const CATEGORY_LABEL = {
  ai:        'AI & Strategy',
  vendor:    'Vendors',
  gov:       'Governance',
  people:    'People',
  events:    'Events',
  strategic: 'Strategic',
  adhoc:     'CAIO / EVP',
};

const NAV = [
  { to: '/today',         icon: CalendarDays, label: 'Dashboard'     },
  { to: '/inbox',         icon: Inbox,        label: 'Inbox'         },
  { to: '/tasks',         icon: CheckSquare,  label: 'Tasks'         },
  { to: '/notes',         icon: FileText,     label: 'Notes'         },
  { to: '/follow-ups',    icon: Bell,         label: 'Follow-ups'    },
  { to: '/people',        icon: Users,        label: 'People'        },
  { to: '/weekly-review', icon: BarChart2,    label: 'Weekly Review' },
];

export default function Sidebar({ onSearchOpen }) {
  const { darkMode, setDarkMode } = useApp();
  const [projects, setProjects] = useState([]);
  const [openCats, setOpenCats] = useState({ ai: true, vendor: true });
  const navigate = useNavigate();

  useEffect(() => {
    api.get('/projects').then(setProjects).catch(() => {});
  }, []);

  const grouped = projects.reduce((acc, p) => {
    if (!acc[p.category]) acc[p.category] = [];
    acc[p.category].push(p);
    return acc;
  }, {});

  const toggleCat = (cat) => setOpenCats(s => ({ ...s, [cat]: !s[cat] }));

  return (

      {/* Logo */}

            <Zap size={15} className="text-white" />

My Workspace

DEWA · Senior Manager

      {/* Search */}
      <button
        onClick={onSearchOpen}
        className="mx-3 mt-3 flex items-center gap-2 px-3 py-2 rounded-xl bg-gray-50 dark:bg-gray-800 text-gray-400 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors group border border-gray-100 dark:border-gray-700"
      >
        <Search size={12} />
        Search…
        ⌘K
      </button>

      {/* Main nav */}

        {NAV.map(({ to, icon: Icon, label }) => (
          <NavLink key={to} to={to} className={({ isActive }) =>
            isActive ? 'nav-item-active flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium bg-primary/10 text-primary'
                     : 'nav-item flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all'
          }>
            <Icon size={15} />
            {label}
          </NavLink>
        ))}

      {/* Projects grouped */}

Projects

        {Object.entries(grouped).map(([cat, items]) => (

            <button
              onClick={() => toggleCat(cat)}
              className="flex items-center gap-2 w-full px-2 py-1.5 text-xs font-semibold text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
            >
              <div className={`w-2 h-2 rounded-full shrink-0 ${CATEGORY_DOT[cat]}`} />
              {CATEGORY_LABEL[cat]}
              {items.length}
              {openCats[cat] ? <ChevronDown size={11} /> : <ChevronRight size={11} />}
            </button>
            {openCats[cat] && (

                {items.slice(0, 5).map(p => (
                  <button
                    key={p.id}
                    onClick={() => navigate(`/projects/${p.id}`)}
                    className="flex items-center gap-1.5 w-full px-2 py-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-colors text-left"
                  >
                    <div className={`w-1.5 h-1.5 rounded-full shrink-0 ${CATEGORY_DOT[cat]} opacity-60`} />
                    {p.name}
                  </button>
                ))}
                {items.length > 5 && (
                  <button onClick={() => navigate('/projects')} className="text-[10px] text-gray-400 hover:text-primary px-2 py-0.5 transition-colors">
                    +{items.length - 5} more
                  </button>
                )}

            )}

        ))}

      {/* Bottom */}

        <button
          onClick={() => setDarkMode(!darkMode)}
          className="flex items-center gap-2 w-full px-3 py-2 rounded-xl text-xs text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
        >
          {darkMode ? <Sun size={13} /> : <Moon size={13} />}
          {darkMode ? 'Light mode' : 'Dark mode'}
        </button>

  );
}

-import { NavLink } from 'react-router-dom';

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

+import { NavLink, useNavigate } from 'react-router-dom';

-  Bell, Users, BarChart2, Search, Moon, Sun, Zap

+  Bell, Users, BarChart2, Search, Moon, Sun, Zap,

+  ChevronDown, ChevronRight, Settings, LogOut

-  { to: '/today',        icon: CalendarDays, label: 'Today'        },

-  { to: '/inbox',        icon: Inbox,        label: 'Inbox'        },

-  { to: '/projects',     icon: FolderKanban, label: 'Projects'     },

-  { to: '/tasks',        icon: CheckSquare,  label: 'Tasks'        },

-  { to: '/notes',        icon: FileText,     label: 'Notes'        },

-  { to: '/follow-ups',   icon: Bell,         label: 'Follow-ups'   },

-  { to: '/people',       icon: Users,        label: 'People'       },

-  { to: '/weekly-review',icon: BarChart2,    label: 'Weekly Review'},

+  { to: '/today',         icon: CalendarDays, label: 'Dashboard'     },

+  { to: '/inbox',         icon: Inbox,        label: 'Inbox'         },

+  { to: '/tasks',         icon: CheckSquare,  label: 'Tasks'         },

+  { to: '/notes',         icon: FileText,     label: 'Notes'         },

+  { to: '/follow-ups',    icon: Bell,         label: 'Follow-ups'    },

+  { to: '/people',        icon: Users,        label: 'People'        },

+  { to: '/weekly-review', icon: BarChart2,    label: 'Weekly Review' },

const { darkMode, setDarkMode } = useApp();

+  const [projects, setProjects] = useState([]);

+  const [openCats, setOpenCats] = useState({ ai: true, vendor: true });

+    api.get('/projects').then(setProjects).catch(() => {});

+  const grouped = projects.reduce((acc, p) => {

+    if (!acc[p.category]) acc[p.category] = [];

+  const toggleCat = (cat) => setOpenCats(s => ({ ...s, [cat]: !s[cat] }));

-    <aside className="hidden md:flex flex-col w-56 shrink-0 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 h-full">

+    <aside className="hidden md:flex flex-col w-[220px] shrink-0 bg-white dark:bg-gray-900 border-r border-gray-100 dark:border-gray-800 h-full">

-      <div className="px-4 py-5 border-b border-gray-100 dark:border-gray-800">

+      <div className="px-4 py-4 border-b border-gray-100 dark:border-gray-800">

<div className="flex items-center gap-2.5">

-          <div className="w-7 h-7 bg-primary rounded-lg flex items-center justify-center">

-            <Zap size={14} className="text-white" />

+          <div className="w-8 h-8 rounded-xl bg-gradient-to-br from-primary to-brand-pink flex items-center justify-center shadow-glow">

+            <Zap size={15} className="text-white" />

-        className="mx-3 mt-3 flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors group"

+        className="mx-3 mt-3 flex items-center gap-2 px-3 py-2 rounded-xl bg-gray-50 dark:bg-gray-800 text-gray-400 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors group border border-gray-100 dark:border-gray-700"

-        <kbd className="text-[10px] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-1 py-0.5 hidden group-hover:inline">⌘K</kbd>

+        <kbd className="text-[9px] bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded px-1 leading-4 hidden group-hover:inline">⌘K</kbd>

-      <nav className="flex-1 px-2 py-2 space-y-0.5 overflow-y-auto">

+      <nav className="px-2 pt-3 space-y-0.5">

{NAV.map(({ to, icon: Icon, label }) => (

-            className={({ isActive }) =>

-              `flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-colors duration-100 ${

-                  ? 'bg-primary/10 text-primary dark:text-primary-light font-medium'

-                  : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white'

+          <NavLink key={to} to={to} className={({ isActive }) =>

+            isActive ? 'nav-item-active flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium bg-primary/10 text-primary'

+                     : 'nav-item flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all'

-      <div className="px-3 py-3 border-t border-gray-100 dark:border-gray-800">

+      <div className="flex-1 overflow-y-auto px-2 py-3 mt-1 border-t border-gray-100 dark:border-gray-800">

+        {Object.entries(grouped).map(([cat, items]) => (

+          <div key={cat} className="mb-1">

+              onClick={() => toggleCat(cat)}

+              className="flex items-center gap-2 w-full px-2 py-1.5 text-xs font-semibold text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"

+              <div className={`w-2 h-2 rounded-full shrink-0 ${CATEGORY_DOT[cat]}`} />

+              {openCats[cat] ? <ChevronDown size={11} /> : <ChevronRight size={11} />}

+              <div className="ml-4 mt-0.5 space-y-0.5">

+                {items.slice(0, 5).map(p => (

+                    onClick={() => navigate(`/projects/${p.id}`)}

+                    className="flex items-center gap-1.5 w-full px-2 py-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-colors text-left"

+                    <div className={`w-1.5 h-1.5 rounded-full shrink-0 ${CATEGORY_DOT[cat]} opacity-60`} />

+                  <button onClick={() => navigate('/projects')} className="text-[10px] text-gray-400 hover:text-primary px-2 py-0.5 transition-colors">

+                    +{items.length - 5} more

+      <div className="px-3 py-3 border-t border-gray-100 dark:border-gray-800 space-y-0.5">

-          className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"

+          className="flex items-center gap-2 w-full px-3 py-2 rounded-xl text-xs text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"

-          {darkMode ? <Sun size={15} /> : <Moon size={15} />}

+          {darkMode ? <Sun size={13} /> : <Moon size={13} />}

import { NavLink } from 'react-router-dom';
import {
  CalendarDays, Inbox, FolderKanban, CheckSquare, FileText,
  Bell, Users, BarChart2, Search, Moon, Sun, Zap
} from 'lucide-react';
import { useApp } from '../App';

const NAV = [
  { to: '/today',        icon: CalendarDays, label: 'Today'        },
  { to: '/inbox',        icon: Inbox,        label: 'Inbox'        },
  { to: '/projects',     icon: FolderKanban, label: 'Projects'     },
  { to: '/tasks',        icon: CheckSquare,  label: 'Tasks'        },
  { to: '/notes',        icon: FileText,     label: 'Notes'        },
  { to: '/follow-ups',   icon: Bell,         label: 'Follow-ups'   },
  { to: '/people',       icon: Users,        label: 'People'       },
  { to: '/weekly-review',icon: BarChart2,    label: 'Weekly Review'},
];

export default function Sidebar({ onSearchOpen }) {
  const { darkMode, setDarkMode } = useApp();

  return (

      {/* Logo */}

            <Zap size={14} className="text-white" />

My Workspace

DEWA Senior Manager

      {/* Search shortcut */}
      <button
        onClick={onSearchOpen}
        className="mx-3 mt-3 flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors group"
      >
        <Search size={14} />
        Search…
        ⌘K
      </button>

      {/* Nav */}

        {NAV.map(({ to, icon: Icon, label }) => (
          <NavLink
            key={to}
            to={to}
            className={({ isActive }) =>
              `flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-colors duration-100 ${
                isActive
                  ? 'bg-primary/10 text-primary dark:text-primary-light font-medium'
                  : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white'
              }`
            }
          >
            <Icon size={16} />
            {label}
          </NavLink>
        ))}

      {/* Dark mode toggle */}

        <button
          onClick={() => setDarkMode(!darkMode)}
          className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
        >
          {darkMode ? <Sun size={15} /> : <Moon size={15} />}
          {darkMode ? 'Light mode' : 'Dark mode'}
        </button>

  );
}


Write

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { TrendingUp, Clock, AlertCircle, CheckCircle2, ChevronRight } from 'lucide-react';
import api from '../api';
import { getPriorityClass, getCategoryClass, CATEGORIES, formatDate, isOverdue } from '../utils';

function MiniBar({ value, max, color = 'bg-primary' }) {
  const pct = max > 0 ? Math.min((value / max) * 100, 100) : 0;
  return (

      <div className={`h-full ${color} rounded-full transition-all duration-700`} style={{ width: `${pct}%` }} />

  );
}

const CAT_COLORS = {
  ai: 'bg-blue-500', vendor: 'bg-purple-500', gov: 'bg-amber-500',
  people: 'bg-teal-500', events: 'bg-orange-500', strategic: 'bg-green-500', adhoc: 'bg-red-500',
};

export default function RightPanel() {
  const [stats, setStats] = useState(null);
  const [weekly, setWeekly] = useState(null);
  const [projects, setProjects] = useState([]);
  const [upcoming, setUpcoming] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    Promise.all([
      api.get('/tasks/stats'),
      api.get('/weekly-review'),
      api.get('/projects'),
      api.get('/tasks'),
    ]).then(([s, w, pr, tasks]) => {
      setStats(s);
      setWeekly(w);
      // Top 4 active projects by category diversity
      const active = pr.filter(p => p.status !== 'Done').slice(0, 4);
      setProjects(active);
      // Upcoming tasks with due dates
      const now = new Date().toISOString().split('T')[0];
      const soon = tasks
        .filter(t => t.due_date && t.status !== 'Done')
        .sort((a, b) => a.due_date.localeCompare(b.due_date))
        .slice(0, 4);
      setUpcoming(soon);
    }).catch(() => {});
  }, []);

  // Category breakdown
  const catCounts = projects.reduce((acc, p) => {
    acc[p.category] = (acc[p.category] || 0) + 1;
    return acc;
  }, {});

  return (

        {/* Executive Summary */}

Executive Summary

            {[
              { label: 'Active Projects', value: stats?.activeProjects ?? '—', color: 'text-primary', bg: 'bg-primary/10' },
              { label: 'Open Tasks',      value: stats?.openTasks ?? '—',      color: 'text-amber-600', bg: 'bg-amber-50 dark:bg-amber-900/20' },
              { label: 'Follow-ups',      value: stats?.openFollowUps ?? '—',  color: 'text-violet-600', bg: 'bg-violet-50 dark:bg-violet-900/20' },
              { label: 'Today\'s Focus',  value: stats?.todayFocus ?? '—',     color: 'text-teal-600', bg: 'bg-teal-50 dark:bg-teal-900/20' },
            ].map(({ label, value, color, bg }) => (
              <div key={label} className={`${bg} rounded-xl p-3`}>
                <p className={`text-xl font-bold ${color}`}>{value}

{label}

            ))}

        {/* This Week */}
        {weekly && (

This Week

                  <CheckCircle2 size={13} className="text-green-500" />
                  Completed

                {weekly.completedThisWeek.length}

              <MiniBar value={weekly.completedThisWeek.length} max={Math.max(weekly.completedThisWeek.length + weekly.addedThisWeek.length, 1)} color="bg-green-500" />

                  <TrendingUp size={13} className="text-blue-500" />
                  Added

                {weekly.addedThisWeek.length}

                  <AlertCircle size={13} className="text-red-500" />
                  Overdue

                {weekly.overdue.length}

        )}

        {/* Project health */}

Active Projects

            <button onClick={() => navigate('/projects')} className="text-[10px] text-primary hover:underline">View all</button>

            {projects.map(p => (
              <button
                key={p.id}
                onClick={() => navigate(`/projects/${p.id}`)}
                className="w-full text-left card p-3 hover:shadow-hover transition-all duration-200 hover:-translate-y-0.5"
              >

                  <div className={`w-2 h-2 rounded-full shrink-0 mt-1.5 ${CAT_COLORS[p.category]}`} />

{p.name}

                  <ChevronRight size={11} className="text-gray-300 shrink-0 mt-1" />

                  {p.priority}
                  {p.open_task_count} tasks

              </button>
            ))}

        {/* Upcoming due dates */}
        {upcoming.length > 0 && (

Upcoming Deadlines

              {upcoming.map(t => {
                const over = isOverdue(t.due_date);
                return (

                    <Clock size={12} className={`shrink-0 mt-0.5 ${over ? 'text-red-500' : 'text-gray-400'}`} />

{t.title}

                      <p className={`text-[10px] mt-0.5 ${over ? 'text-red-500 font-medium' : 'text-gray-400'}`}>
                        {over ? '⚠ Overdue · ' : ''}{formatDate(t.due_date)}

                );
              })}

        )}

  );
}


File created successfully at: /Users/khalidbinkalban/my-workspace/client/src/components/RightPanel.jsx

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { TrendingUp, Clock, AlertCircle, CheckCircle2, ChevronRight } from 'lucide-react';
import api from '../api';
import { getPriorityClass, getCategoryClass, CATEGORIES, formatDate, isOverdue } from '../utils';

function MiniBar({ value, max, color = 'bg-primary' }) {
  const pct = max > 0 ? Math.min((value / max) * 100, 100) : 0;
  return (

      <div className={`h-full ${color} rounded-full transition-all duration-700`} style={{ width: `${pct}%` }} />

  );
}

const CAT_COLORS = {
  ai: 'bg-blue-500', vendor: 'bg-purple-500', gov: 'bg-amber-500',
  people: 'bg-teal-500', events: 'bg-orange-500', strategic: 'bg-green-500', adhoc: 'bg-red-500',
};

export default function RightPanel() {
  const [stats, setStats] = useState(null);
  const [weekly, setWeekly] = useState(null);
  const [projects, setProjects] = useState([]);
  const [upcoming, setUpcoming] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    Promise.all([
      api.get('/tasks/stats'),
      api.get('/weekly-review'),
      api.get('/projects'),
      api.get('/tasks'),
    ]).then(([s, w, pr, tasks]) => {
      setStats(s);
      setWeekly(w);
      // Top 4 active projects by category diversity
      const active = pr.filter(p => p.status !== 'Done').slice(0, 4);
      setProjects(active);
      // Upcoming tasks with due dates
      const now = new Date().toISOString().split('T')[0];
      const soon = tasks
        .filter(t => t.due_date && t.status !== 'Done')
        .sort((a, b) => a.due_date.localeCompare(b.due_date))
        .slice(0, 4);
      setUpcoming(soon);
    }).catch(() => {});
  }, []);

  // Category breakdown
  const catCounts = projects.reduce((acc, p) => {
    acc[p.category] = (acc[p.category] || 0) + 1;
    return acc;
  }, {});

  return (

        {/* Executive Summary */}

Executive Summary

            {[
              { label: 'Active Projects', value: stats?.activeProjects ?? '—', color: 'text-primary', bg: 'bg-primary/10' },
              { label: 'Open Tasks',      value: stats?.openTasks ?? '—',      color: 'text-amber-600', bg: 'bg-amber-50 dark:bg-amber-900/20' },
              { label: 'Follow-ups',      value: stats?.openFollowUps ?? '—',  color: 'text-violet-600', bg: 'bg-violet-50 dark:bg-violet-900/20' },
              { label: 'Today\'s Focus',  value: stats?.todayFocus ?? '—',     color: 'text-teal-600', bg: 'bg-teal-50 dark:bg-teal-900/20' },
            ].map(({ label, value, color, bg }) => (
              <div key={label} className={`${bg} rounded-xl p-3`}>
                <p className={`text-xl font-bold ${color}`}>{value}

{label}

            ))}

        {/* This Week */}
        {weekly && (

This Week

                  <CheckCircle2 size={13} className="text-green-500" />
                  Completed

                {weekly.completedThisWeek.length}

              <MiniBar value={weekly.completedThisWeek.length} max={Math.max(weekly.completedThisWeek.length + weekly.addedThisWeek.length, 1)} color="bg-green-500" />

                  <TrendingUp size={13} className="text-blue-500" />
                  Added

                {weekly.addedThisWeek.length}

                  <AlertCircle size={13} className="text-red-500" />
                  Overdue

                {weekly.overdue.length}

        )}

        {/* Project health */}

Active Projects

            <button onClick={() => navigate('/projects')} className="text-[10px] text-primary hover:underline">View all</button>

            {projects.map(p => (
              <button
                key={p.id}
                onClick={() => navigate(`/projects/${p.id}`)}
                className="w-full text-left card p-3 hover:shadow-hover transition-all duration-200 hover:-translate-y-0.5"
              >

                  <div className={`w-2 h-2 rounded-full shrink-0 mt-1.5 ${CAT_COLORS[p.category]}`} />

{p.name}

                  <ChevronRight size={11} className="text-gray-300 shrink-0 mt-1" />

                  {p.priority}
                  {p.open_task_count} tasks

              </button>
            ))}

        {/* Upcoming due dates */}
        {upcoming.length > 0 && (

Upcoming Deadlines

              {upcoming.map(t => {
                const over = isOverdue(t.due_date);
                return (

                    <Clock size={12} className={`shrink-0 mt-0.5 ${over ? 'text-red-500' : 'text-gray-400'}`} />

{t.title}

                      <p className={`text-[10px] mt-0.5 ${over ? 'text-red-500 font-medium' : 'text-gray-400'}`}>
                        {over ? '⚠ Overdue · ' : ''}{formatDate(t.due_date)}

                );
              })}

        )}

  );
}


import { useState, useEffect, createContext, useContext } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Sidebar from './components/Sidebar';
import BottomNav from './components/BottomNav';
import RightPanel from './components/RightPanel';
import Search from './components/Search';
import Today from './components/Today';
import Inbox from './components/Inbox';
import Projects from './components/Projects';
import ProjectDetail from './components/ProjectDetail';
import Tasks from './components/Tasks';
import Notes from './components/Notes';
import FollowUps from './components/FollowUps';
import People from './components/People';
import WeeklyReview from './components/WeeklyReview';
import { Toaster } from 'react-hot-toast';

export const AppContext = createContext({});
export const useApp = () => useContext(AppContext);

// Pages that show the right panel
const RIGHT_PANEL_ROUTES = ['/today', '/'];

export default function App() {
  const [darkMode, setDarkMode] = useState(() => localStorage.getItem('darkMode') === 'true');
  const [searchOpen, setSearchOpen] = useState(false);

  useEffect(() => {
    document.documentElement.classList.toggle('dark', darkMode);
    localStorage.setItem('darkMode', darkMode);
  }, [darkMode]);

  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setSearchOpen(true); }
      if (e.key === 'Escape') setSearchOpen(false);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <AppContext.Provider value={{ darkMode, setDarkMode, setSearchOpen }}>
      <BrowserRouter>
        <div className="flex h-screen overflow-hidden bg-[#F0F2F5] dark:bg-gray-950">
          {/* Left sidebar */}
          <Sidebar onSearchOpen={() => setSearchOpen(true)} />

          {/* Main content */}
          <main className="flex-1 overflow-y-auto pb-20 md:pb-0 min-w-0">
            <Routes>
              <Route path="/"               element={<Navigate to="/today" replace />} />
              <Route path="/today"          element={<Today />} />
              <Route path="/inbox"          element={<Inbox />} />
              <Route path="/projects"       element={<Projects />} />
              <Route path="/projects/:id"   element={<ProjectDetail />} />
              <Route path="/tasks"          element={<Tasks />} />
              <Route path="/notes"          element={<Notes />} />
              <Route path="/follow-ups"     element={<FollowUps />} />
              <Route path="/people"         element={<People />} />
              <Route path="/weekly-review"  element={<WeeklyReview />} />
            </Routes>
          </main>

          {/* Right executive panel (Today only, desktop XL) */}
          <Routes>
            <Route path="/"      element={<RightPanel />} />
            <Route path="/today" element={<RightPanel />} />
          </Routes>

          {/* Mobile bottom nav */}
          <BottomNav />

          {/* Search overlay */}
          {searchOpen && <Search onClose={() => setSearchOpen(false)} />}
        </div>

        <Toaster
          position="top-right"
          toastOptions={{
            duration: 3000,
            style: { borderRadius: '12px', fontSize: '13px', fontFamily: 'Inter, sans-serif' },
          }}
        />
      </BrowserRouter>
    </AppContext.Provider>
  );
}


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

import { useState, useEffect, createContext, useContext } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Sidebar from './components/Sidebar';
import BottomNav from './components/BottomNav';
import RightPanel from './components/RightPanel';
import Search from './components/Search';
import Today from './components/Today';
import Inbox from './components/Inbox';
import Projects from './components/Projects';
import ProjectDetail from './components/ProjectDetail';
import Tasks from './components/Tasks';
import Notes from './components/Notes';
import FollowUps from './components/FollowUps';
import People from './components/People';
import WeeklyReview from './components/WeeklyReview';
import { Toaster } from 'react-hot-toast';

export const AppContext = createContext({});
export const useApp = () => useContext(AppContext);

// Pages that show the right panel
const RIGHT_PANEL_ROUTES = ['/today', '/'];

export default function App() {
  const [darkMode, setDarkMode] = useState(() => localStorage.getItem('darkMode') === 'true');
  const [searchOpen, setSearchOpen] = useState(false);

  useEffect(() => {
    document.documentElement.classList.toggle('dark', darkMode);
    localStorage.setItem('darkMode', darkMode);
  }, [darkMode]);

  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setSearchOpen(true); }
      if (e.key === 'Escape') setSearchOpen(false);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <AppContext.Provider value={{ darkMode, setDarkMode, setSearchOpen }}>
      <BrowserRouter>
        <div className="flex h-screen overflow-hidden bg-[#F0F2F5] dark:bg-gray-950">
          {/* Left sidebar */}
          <Sidebar onSearchOpen={() => setSearchOpen(true)} />

          {/* Main content */}
          <main className="flex-1 overflow-y-auto pb-20 md:pb-0 min-w-0">
            <Routes>
              <Route path="/"               element={<Navigate to="/today" replace />} />
              <Route path="/today"          element={<Today />} />
              <Route path="/inbox"          element={<Inbox />} />
              <Route path="/projects"       element={<Projects />} />
              <Route path="/projects/:id"   element={<ProjectDetail />} />
              <Route path="/tasks"          element={<Tasks />} />
              <Route path="/notes"          element={<Notes />} />
              <Route path="/follow-ups"     element={<FollowUps />} />
              <Route path="/people"         element={<People />} />
              <Route path="/weekly-review"  element={<WeeklyReview />} />
            </Routes>
          </main>

          {/* Right executive panel (Today only, desktop XL) */}
          <Routes>
            <Route path="/"      element={<RightPanel />} />
            <Route path="/today" element={<RightPanel />} />
          </Routes>

          {/* Mobile bottom nav */}
          <BottomNav />

          {/* Search overlay */}
          {searchOpen && <Search onClose={() => setSearchOpen(false)} />}
        </div>

        <Toaster
          position="top-right"
          toastOptions={{
            duration: 3000,
            style: { borderRadius: '12px', fontSize: '13px', fontFamily: 'Inter, sans-serif' },
          }}
        />
      </BrowserRouter>
    </AppContext.Provider>
  );
}

+import RightPanel from './components/RightPanel';

+import { Toaster } from 'react-hot-toast';

+const RIGHT_PANEL_ROUTES = ['/today', '/'];

-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {

+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setSearchOpen(true); }

-        <div className="flex h-screen overflow-hidden bg-gray-50 dark:bg-gray-950">

+        <div className="flex h-screen overflow-hidden bg-[#F0F2F5] dark:bg-gray-950">

-          <main className="flex-1 overflow-y-auto pb-20 md:pb-0 md:ml-0">

+          <main className="flex-1 overflow-y-auto pb-20 md:pb-0 min-w-0">

-              <Route path="/" element={<Navigate to="/today" replace />} />

-              <Route path="/today" element={<Today />} />

-              <Route path="/inbox" element={<Inbox />} />

-              <Route path="/projects" element={<Projects />} />

-              <Route path="/projects/:id" element={<ProjectDetail />} />

-              <Route path="/tasks" element={<Tasks />} />

-              <Route path="/notes" element={<Notes />} />

-              <Route path="/follow-ups" element={<FollowUps />} />

-              <Route path="/people" element={<People />} />

-              <Route path="/weekly-review" element={<WeeklyReview />} />

+              <Route path="/"               element={<Navigate to="/today" replace />} />

+              <Route path="/today"          element={<Today />} />

+              <Route path="/inbox"          element={<Inbox />} />

+              <Route path="/projects"       element={<Projects />} />

+              <Route path="/projects/:id"   element={<ProjectDetail />} />

+              <Route path="/tasks"          element={<Tasks />} />

+              <Route path="/notes"          element={<Notes />} />

+              <Route path="/follow-ups"     element={<FollowUps />} />

+              <Route path="/people"         element={<People />} />

+              <Route path="/weekly-review"  element={<WeeklyReview />} />

+          {/* Right executive panel (Today only, desktop XL) */}

+            <Route path="/"      element={<RightPanel />} />

+            <Route path="/today" element={<RightPanel />} />

+            style: { borderRadius: '12px', fontSize: '13px', fontFamily: 'Inter, sans-serif' },

import { useState, useEffect, createContext, useContext } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Sidebar from './components/Sidebar';
import BottomNav from './components/BottomNav';
import Search from './components/Search';
import Today from './components/Today';
import Inbox from './components/Inbox';
import Projects from './components/Projects';
import ProjectDetail from './components/ProjectDetail';
import Tasks from './components/Tasks';
import Notes from './components/Notes';
import FollowUps from './components/FollowUps';
import People from './components/People';
import WeeklyReview from './components/WeeklyReview';

export const AppContext = createContext({});
export const useApp = () => useContext(AppContext);

export default function App() {
  const [darkMode, setDarkMode] = useState(() => localStorage.getItem('darkMode') === 'true');
  const [searchOpen, setSearchOpen] = useState(false);

  useEffect(() => {
    document.documentElement.classList.toggle('dark', darkMode);
    localStorage.setItem('darkMode', darkMode);
  }, [darkMode]);

  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault();
        setSearchOpen(true);
      }
      if (e.key === 'Escape') setSearchOpen(false);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <AppContext.Provider value={{ darkMode, setDarkMode, setSearchOpen }}>
      <BrowserRouter>
        <div className="flex h-screen overflow-hidden bg-gray-50 dark:bg-gray-950">
          {/* Desktop sidebar */}
          <Sidebar onSearchOpen={() => setSearchOpen(true)} />

          {/* Main content */}
          <main className="flex-1 overflow-y-auto pb-20 md:pb-0 md:ml-0">
            <Routes>
              <Route path="/" element={<Navigate to="/today" replace />} />
              <Route path="/today" element={<Today />} />
              <Route path="/inbox" element={<Inbox />} />
              <Route path="/projects" element={<Projects />} />
              <Route path="/projects/:id" element={<ProjectDetail />} />
              <Route path="/tasks" element={<Tasks />} />
              <Route path="/notes" element={<Notes />} />
              <Route path="/follow-ups" element={<FollowUps />} />
              <Route path="/people" element={<People />} />
              <Route path="/weekly-review" element={<WeeklyReview />} />
            </Routes>
          </main>

          {/* Mobile bottom nav */}
          <BottomNav />

          {/* Search modal */}
          {searchOpen && <Search onClose={() => setSearchOpen(false)} />}
        </div>
      </BrowserRouter>
    </AppContext.Provider>
  );
}


Now the big one — the new Dashboard/Today view with the kanban board:


import { useState, useEffect, useCallback } from 'react';
import { Plus, MoreHorizontal, MessageSquare, Paperclip, User, Calendar, Zap, Target, ArrowRight } from 'lucide-react';
import { Link, useNavigate } from 'react-router-dom';
import toast from 'react-hot-toast';
import api from '../api';
import TaskModal from './TaskModal';
import ConfirmDialog from './ConfirmDialog';
import { getCategoryClass, getPriorityClass, CATEGORIES, formatDate, isOverdue } from '../utils';

// ─── Kanban Task Card ───────────────────────────────────────────────────────
function KanbanCard({ task, onEdit, onDelete, onToggleFocus, onMarkDone }) {
  const overdue = isOverdue(task.due_date) && task.status !== 'Done';
  const priorityBorder = {
    Urgent: 'border-l-red-500',
    High:   'border-l-amber-400',
    Medium: 'border-l-blue-400',
    Low:    'border-l-green-400',
  }[task.priority] || 'border-l-gray-200';

  return (
    <div className={`kanban-card border-l-4 ${priorityBorder} group`}>
      {/* Top row */}

{task.title}

        <button
          onClick={() => onEdit(task)}
          className="shrink-0 opacity-0 group-hover:opacity-100 p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400 transition-all"
        >
          <MoreHorizontal size={14} />
        </button>

      {/* Notes preview */}
      {task.notes && (

{task.notes}

      )}

      {/* Tags */}

        <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 ${getPriorityClass(task.priority)}`}>{task.priority}
        {task.is_follow_up === 1 && (
          Follow-up
        )}

      {/* Footer */}

          {task.assignee ? (

              {task.assignee[0]?.toUpperCase()}

          ) : (

              <User size={10} className="text-gray-400" />

          )}
          {task.assignee && {task.assignee}}

          {task.due_date && (
            <span className={`flex items-center gap-1 text-[10px] ${overdue ? 'text-red-500 font-semibold' : 'text-gray-400'}`}>
              <Calendar size={10} />
              {overdue ? '⚠ ' : ''}{formatDate(task.due_date)}

          )}
          {task.status !== 'Done' && (
            <button
              onClick={() => onMarkDone(task)}
              className="opacity-0 group-hover:opacity-100 text-[10px] px-2 py-0.5 bg-green-100 text-green-700 rounded-full hover:bg-green-200 transition-all font-medium"
            >
              Done
            </button>
          )}

  );
}

// ─── Kanban Column ──────────────────────────────────────────────────────────
function KanbanColumn({ title, count, tasks, color, onAddTask, onEdit, onDelete, onToggleFocus, onMarkDone, emptyText }) {
  return (

      {/* Column header */}

{title}

          <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${color}`}>{count}

        <button onClick={onAddTask} 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 shadow-sm">
          <Plus size={12} />
        </button>

      {/* Cards */}

        {tasks.length === 0 ? (

{emptyText}

        ) : (
          tasks.map(task => (
            <KanbanCard
              key={task.id}
              task={task}
              onEdit={onEdit}
              onDelete={onDelete}
              onToggleFocus={onToggleFocus}
              onMarkDone={onMarkDone}
            />
          ))
        )}

  );
}

// ─── Main Component ─────────────────────────────────────────────────────────
export default function Today() {
  const [allTasks, setAllTasks] = useState([]);
  const [stats, setStats] = useState(null);
  const [projects, setProjects] = useState([]);
  const [loading, setLoading] = useState(true);
  const [editTask, setEditTask] = useState(null);
  const [deleteTask, setDeleteTask] = useState(null);
  const [showNewTask, setShowNewTask] = useState(false);
  const [newTaskDefaults, setNewTaskDefaults] = useState({});
  const [activeTab, setActiveTab] = useState('dashboard');
  const navigate = useNavigate();

  const today = new Date();
  const dateLabel = today.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });

  const load = useCallback(async () => {
    try {
      const [tasks, st, pr] = await Promise.all([
        api.get('/tasks'),
        api.get('/tasks/stats'),
        api.get('/projects'),
      ]);
      setAllTasks(tasks);
      setStats(st);
      setProjects(pr);
    } finally { setLoading(false); }
  }, []);

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

  // ── Kanban buckets ──────────────────────────────────────────────────────
  const focusTasks     = allTasks.filter(t => t.is_today_focus && t.status !== 'Done');
  const inProgressTasks = allTasks.filter(t => !t.is_today_focus && t.status === 'In Progress');
  const followUpTasks  = allTasks.filter(t => t.is_follow_up && t.status !== 'Done' && !t.is_today_focus);

  // ── Handlers ────────────────────────────────────────────────────────────
  const toggleFocus = async (task) => { await api.patch(`/tasks/${task.id}/focus`); load(); };
  const markDone    = async (task) => {
    await api.patch(`/tasks/${task.id}/status`, { status: 'Done' });
    toast.success('✓ Marked as done');
    load();
  };
  const openNew = (defaults = {}) => { setNewTaskDefaults(defaults); setShowNewTask(true); };
  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, ...newTaskDefaults }); toast.success('Task added'); }
      setEditTask(null); setShowNewTask(false); load();
    } catch (e) { toast.error(e.message); }
  };
  const handleDelete = async () => {
    await api.delete(`/tasks/${deleteTask.id}`); toast.success('Deleted');
    setDeleteTask(null); load();
  };

  const TABS = [
    { id: 'dashboard', label: 'Dashboard' },
    { id: 'focus',     label: 'Today\'s Focus' },
    { id: 'all',       label: 'All Tasks' },
    { id: 'projects',  label: 'Projects' },
  ];

  return (

      {/* ── Hero Banner ─────────────────────────────────────────────── */}

        {/* Blobs */}

                <Zap size={18} className="text-violet-600" />

DEWA AI Workspace

{dateLabel}

          {/* Stats row */}

            {[
              { label: 'Active Projects', value: stats?.activeProjects ?? '—', icon: '🏗' },
              { label: 'Open Tasks',      value: stats?.openTasks ?? '—',      icon: '✅' },
              { label: 'Follow-ups',      value: stats?.openFollowUps ?? '—',  icon: '🔔' },
              { label: "Today's Focus",   value: stats?.todayFocus ?? '—',     icon: '🎯' },
            ].map(({ label, value, icon }) => (

{value}

{icon} {label}

            ))}

      {/* ── Tabs ────────────────────────────────────────────────────── */}

        {TABS.map(t => (
          <button
            key={t.id}
            onClick={() => setActiveTab(t.id)}
            className={`px-4 py-2 rounded-xl text-sm font-medium transition-all duration-150 ${
              activeTab === t.id
                ? 'bg-primary text-white shadow-sm'
                : 'text-gray-500 dark:text-gray-400 hover:bg-white dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-white'
            }`}
          >
            {t.label}
          </button>
        ))}

        <button onClick={() => openNew({ is_today_focus: 1 })} className="btn-primary flex items-center gap-1.5 py-2 text-xs">
          <Plus size={13} /> New Task
        </button>

      {/* ── Tab Content ─────────────────────────────────────────────── */}
      {loading ? (

          {[1,2,3].map(i =>
)}

      ) : (
        <>
          {/* DASHBOARD — Kanban */}
          {(activeTab === 'dashboard' || activeTab === 'focus') && (

              <KanbanColumn
                title="Today's Focus"
                count={focusTasks.length}
                tasks={activeTab === 'focus' ? focusTasks : focusTasks}
                color="bg-primary/15 text-primary"
                onAddTask={() => openNew({ is_today_focus: 1 })}
                onEdit={setEditTask}
                onDelete={setDeleteTask}
                onToggleFocus={toggleFocus}
                onMarkDone={markDone}
                emptyText="No tasks pinned for today. Pin urgent tasks!"
              />
              <KanbanColumn
                title="In Progress"
                count={inProgressTasks.length}
                tasks={inProgressTasks}
                color="bg-blue-100 text-blue-600"
                onAddTask={() => openNew({ status: 'In Progress' })}
                onEdit={setEditTask}
                onDelete={setDeleteTask}
                onToggleFocus={toggleFocus}
                onMarkDone={markDone}
                emptyText="No tasks in progress"
              />
              <KanbanColumn
                title="Follow-ups"
                count={followUpTasks.length}
                tasks={followUpTasks}
                color="bg-amber-100 text-amber-600"
                onAddTask={() => openNew({ is_follow_up: 1 })}
                onEdit={setEditTask}
                onDelete={setDeleteTask}
                onToggleFocus={toggleFocus}
                onMarkDone={markDone}
                emptyText="No open follow-ups"
              />

          )}

          {/* ALL TASKS — flat list */}
          {activeTab === 'all' && (

                {allTasks.filter(t => t.status !== 'Done').map(task => (

 setEditTask(task)}
                  >

                      <button onClick={e => { e.stopPropagation(); toggleFocus(task); }}
                        className={`shrink-0 w-5 h-5 rounded-full border-2 transition-all ${task.is_today_focus ? 'bg-primary border-primary' : 'border-gray-300 hover:border-primary'}`} />

{task.title}

                        <span className={`badge text-[10px] ${getPriorityClass(task.priority)}`}>{task.priority}
                        {task.assignee && {task.assignee}}

                ))}

          )}

          {/* PROJECTS — grid */}
          {activeTab === 'projects' && (

                {projects.filter(p => p.status !== 'Done').map(p => (
                  <button
                    key={p.id}
                    onClick={() => navigate(`/projects/${p.id}`)}
                    className="card-hover text-left p-4 group"
                  >

                      <span className={`badge text-[10px] ${getCategoryClass(p.category)}`}>{CATEGORIES[p.category]?.label || p.category}
                      <ArrowRight size={13} className="text-gray-300 group-hover:text-primary transition-colors" />

{p.name}

                      <span className={`font-medium ${p.priority === 'Urgent' ? 'text-red-500' : p.priority === 'High' ? 'text-amber-500' : ''}`}>{p.priority}
                      {p.open_task_count || 0} tasks

                  </button>
                ))}

          )}
        </>
      )}

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

  );
}


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

import { useState, useEffect, useCallback } from 'react';
import { Plus, MoreHorizontal, MessageSquare, Paperclip, User, Calendar, Zap, Target, ArrowRight } from 'lucide-react';
import { Link, useNavigate } from 'react-router-dom';
import toast from 'react-hot-toast';
import api from '../api';
import TaskModal from './TaskModal';
import ConfirmDialog from './ConfirmDialog';
import { getCategoryClass, getPriorityClass, CATEGORIES, formatDate, isOverdue } from '../utils';

// ─── Kanban Task Card ───────────────────────────────────────────────────────
function KanbanCard({ task, onEdit, onDelete, onToggleFocus, onMarkDone }) {
  const overdue = isOverdue(task.due_date) && task.status !== 'Done';
  const priorityBorder = {
    Urgent: 'border-l-red-500',
    High:   'border-l-amber-400',
    Medium: 'border-l-blue-400',
    Low:    'border-l-green-400',
  }[task.priority] || 'border-l-gray-200';

  return (
    <div className={`kanban-card border-l-4 ${priorityBorder} group`}>
      {/* Top row */}

{task.title}

        <button
          onClick={() => onEdit(task)}
          className="shrink-0 opacity-0 group-hover:opacity-100 p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400 transition-all"
        >
          <MoreHorizontal size={14} />
        </button>

      {/* Notes preview */}
      {task.notes && (

{task.notes}

      )}

      {/* Tags */}

        <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 ${getPriorityClass(task.priority)}`}>{task.priority}
        {task.is_follow_up === 1 && (
          Follow-up
        )}

      {/* Footer */}

          {task.assignee ? (

              {task.assignee[0]?.toUpperCase()}

          ) : (

              <User size={10} className="text-gray-400" />

          )}
          {task.assignee && {task.assignee}}

          {task.due_date && (
            <span className={`flex items-center gap-1 text-[10px] ${overdue ? 'text-red-500 font-semibold' : 'text-gray-400'}`}>
              <Calendar size={10} />
              {overdue ? '⚠ ' : ''}{formatDate(task.due_date)}

          )}
          {task.status !== 'Done' && (
            <button
              onClick={() => onMarkDone(task)}
              className="opacity-0 group-hover:opacity-100 text-[10px] px-2 py-0.5 bg-green-100 text-green-700 rounded-full hover:bg-green-200 transition-all font-medium"
            >
              Done
            </button>
          )}

  );
}

// ─── Kanban Column ──────────────────────────────────────────────────────────
function KanbanColumn({ title, count, tasks, color, onAddTask, onEdit, onDelete, onToggleFocus, onMarkDone, emptyText }) {
  return (

      {/* Column header */}

{title}

          <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${color}`}>{count}

        <button onClick={onAddTask} 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 shadow-sm">
          <Plus size={12} />
        </button>

      {/* Cards */}

        {tasks.length === 0 ? (

{emptyText}

        ) : (
          tasks.map(task => (
            <KanbanCard
              key={task.id}
              task={task}
              onEdit={onEdit}
              onDelete={onDelete}
              onToggleFocus={onToggleFocus}
              onMarkDone={onMarkDone}
            />
          ))
        )}

  );
}

// ─── Main Component ─────────────────────────────────────────────────────────
export default function Today() {
  const [allTasks, setAllTasks] = useState([]);
  const [stats, setStats] = useState(null);
  const [projects, setProjects] = useState([]);
  const [loading, setLoading] = useState(true);
  const [editTask, setEditTask] = useState(null);
  const [deleteTask, setDeleteTask] = useState(null);
  const [showNewTask, setShowNewTask] = useState(false);
  const [newTaskDefaults, setNewTaskDefaults] = useState({});
  const [activeTab, setActiveTab] = useState('dashboard');
  const navigate = useNavigate();

  const today = new Date();
  const dateLabel = today.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });

  const load = useCallback(async () => {
    try {
      const [tasks, st, pr] = await Promise.all([
        api.get('/tasks'),
        api.get('/tasks/stats'),
        api.get('/projects'),
      ]);
      setAllTasks(tasks);
      setStats(st);
      setProjects(pr);
    } finally { setLoading(false); }
  }, []);

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

  // ── Kanban buckets ──────────────────────────────────────────────────────
  const focusTasks     = allTasks.filter(t => t.is_today_focus && t.status !== 'Done');
  const inProgressTasks = allTasks.filter(t => !t.is_today_focus && t.status === 'In Progress');
  const followUpTasks  = allTasks.filter(t => t.is_follow_up && t.status !== 'Done' && !t.is_today_focus);

  // ── Handlers ────────────────────────────────────────────────────────────
  const toggleFocus = async (task) => { await api.patch(`/tasks/${task.id}/focus`); load(); };
  const markDone    = async (task) => {
    await api.patch(`/tasks/${task.id}/status`, { status: 'Done' });
    toast.success('✓ Marked as done');
    load();
  };
  const openNew = (defaults = {}) => { setNewTaskDefaults(defaults); setShowNewTask(true); };
  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, ...newTaskDefaults }); toast.success('Task added'); }
      setEditTask(null); setShowNewTask(false); load();
    } catch (e) { toast.error(e.message); }
  };
  const handleDelete = async () => {
    await api.delete(`/tasks/${deleteTask.id}`); toast.success('Deleted');
    setDeleteTask(null); load();
  };

  const TABS = [
    { id: 'dashboard', label: 'Dashboard' },
    { id: 'focus',     label: 'Today\'s Focus' },
    { id: 'all',       label: 'All Tasks' },
    { id: 'projects',  label: 'Projects' },
  ];

  return (

      {/* ── Hero Banner ─────────────────────────────────────────────── */}

        {/* Blobs */}

                <Zap size={18} className="text-violet-600" />

DEWA AI Workspace

{dateLabel}

          {/* Stats row */}

            {[
              { label: 'Active Projects', value: stats?.activeProjects ?? '—', icon: '🏗' },
              { label: 'Open Tasks',      value: stats?.openTasks ?? '—',      icon: '✅' },
              { label: 'Follow-ups',      value: stats?.openFollowUps ?? '—',  icon: '🔔' },
              { label: "Today's Focus",   value: stats?.todayFocus ?? '—',     icon: '🎯' },
            ].map(({ label, value, icon }) => (

{value}

{icon} {label}

            ))}

      {/* ── Tabs ────────────────────────────────────────────────────── */}

        {TABS.map(t => (
          <button
            key={t.id}
            onClick={() => setActiveTab(t.id)}
            className={`px-4 py-2 rounded-xl text-sm font-medium transition-all duration-150 ${
              activeTab === t.id
                ? 'bg-primary text-white shadow-sm'
                : 'text-gray-500 dark:text-gray-400 hover:bg-white dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-white'
            }`}
          >
            {t.label}
          </button>
        ))}

        <button onClick={() => openNew({ is_today_focus: 1 })} className="btn-primary flex items-center gap-1.5 py-2 text-xs">
          <Plus size={13} /> New Task
        </button>

      {/* ── Tab Content ─────────────────────────────────────────────── */}
      {loading ? (

          {[1,2,3].map(i =>
)}

      ) : (
        <>
          {/* DASHBOARD — Kanban */}
          {(activeTab === 'dashboard' || activeTab === 'focus') && (

              <KanbanColumn
                title="Today's Focus"
                count={focusTasks.length}
                tasks={activeTab === 'focus' ? focusTasks : focusTasks}
                color="bg-primary/15 text-primary"
                onAddTask={() => openNew({ is_today_focus: 1 })}
                onEdit={setEditTask}
                onDelete={setDeleteTask}
                onToggleFocus={toggleFocus}
                onMarkDone={markDone}
                emptyText="No tasks pinned for today. Pin urgent tasks!"
              />
              <KanbanColumn
                title="In Progress"
                count={inProgressTasks.length}
                tasks={inProgressTasks}
                color="bg-blue-100 text-blue-600"
                onAddTask={() => openNew({ status: 'In Progress' })}
                onEdit={setEditTask}
                onDelete={setDeleteTask}
                onToggleFocus={toggleFocus}
                onMarkDone={markDone}
                emptyText="No tasks in progress"
              />
              <KanbanColumn
                title="Follow-ups"
                count={followUpTasks.length}
                tasks={followUpTasks}
                color="bg-amber-100 text-amber-600"
                onAddTask={() => openNew({ is_follow_up: 1 })}
                onEdit={setEditTask}
                onDelete={setDeleteTask}
                onToggleFocus={toggleFocus}
                onMarkDone={markDone}
                emptyText="No open follow-ups"
              />

          )}

          {/* ALL TASKS — flat list */}
          {activeTab === 'all' && (

                {allTasks.filter(t => t.status !== 'Done').map(task => (

 setEditTask(task)}
                  >

                      <button onClick={e => { e.stopPropagation(); toggleFocus(task); }}
                        className={`shrink-0 w-5 h-5 rounded-full border-2 transition-all ${task.is_today_focus ? 'bg-primary border-primary' : 'border-gray-300 hover:border-primary'}`} />

{task.title}

                        <span className={`badge text-[10px] ${getPriorityClass(task.priority)}`}>{task.priority}
                        {task.assignee && {task.assignee}}

                ))}

          )}

          {/* PROJECTS — grid */}
          {activeTab === 'projects' && (

                {projects.filter(p => p.status !== 'Done').map(p => (
                  <button
                    key={p.id}
                    onClick={() => navigate(`/projects/${p.id}`)}
                    className="card-hover text-left p-4 group"
                  >

                      <span className={`badge text-[10px] ${getCategoryClass(p.category)}`}>{CATEGORIES[p.category]?.label || p.category}
                      <ArrowRight size={13} className="text-gray-300 group-hover:text-primary transition-colors" />

{p.name}

                      <span className={`font-medium ${p.priority === 'Urgent' ? 'text-red-500' : p.priority === 'High' ? 'text-amber-500' : ''}`}>{p.priority}
                      {p.open_task_count || 0} tasks

                  </button>
                ))}

          )}
        </>
      )}

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

  );
}

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

-import { Plus, CalendarDays } from 'lucide-react';

-import { Link } from 'react-router-dom';

+import { Plus, MoreHorizontal, MessageSquare, Paperclip, User, Calendar, Zap, Target, ArrowRight } from 'lucide-react';

+import { Link, useNavigate } from 'react-router-dom';

import ConfirmDialog from './ConfirmDialog';

+import { getCategoryClass, getPriorityClass, CATEGORIES, formatDate, isOverdue } from '../utils';

-function MetricCard({ label, value, color = 'primary', loading }) {

-    amber:   'text-amber-600 dark:text-amber-400',

-    teal:    'text-teal-600 dark:text-teal-400',

-    green:   'text-green-600 dark:text-green-400',

+// ─── Kanban Task Card ───────────────────────────────────────────────────────

+function KanbanCard({ task, onEdit, onDelete, onToggleFocus, onMarkDone }) {

+  const overdue = isOverdue(task.due_date) && task.status !== 'Done';

+  }[task.priority] || 'border-l-gray-200';

-        ? <div className="skeleton h-7 w-12 mx-auto mb-1" />

-        : <p className={`text-2xl font-bold ${colors[color]}`}>{value}

+    <div className={`kanban-card border-l-4 ${priorityBorder} group`}>

+      <div className="flex items-start justify-between gap-2 mb-2">

+          className="shrink-0 opacity-0 group-hover:opacity-100 p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400 transition-all"

+      <div className="flex flex-wrap gap-1.5 mb-3">

+        <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 ${getPriorityClass(task.priority)}`}>{task.priority}

+      <div className="flex items-center justify-between pt-2 border-t border-gray-100 dark:border-gray-800">

+        <div className="flex items-center gap-2">

+            <div className="w-6 h-6 rounded-full bg-gradient-to-br from-primary to-brand-pink flex items-center justify-center text-white text-[9px] font-bold">

+              {task.assignee[0]?.toUpperCase()}

+            <div className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">

+              <User size={10} className="text-gray-400" />

+          {task.assignee && {task.assignee}}

+            <span className={`flex items-center gap-1 text-[10px] ${overdue ? 'text-red-500 font-semibold' : 'text-gray-400'}`}>

+              {overdue ? '⚠ ' : ''}{formatDate(task.due_date)}

+              onClick={() => onMarkDone(task)}

+              className="opacity-0 group-hover:opacity-100 text-[10px] px-2 py-0.5 bg-green-100 text-green-700 rounded-full hover:bg-green-200 transition-all font-medium"

+// ─── Kanban Column ──────────────────────────────────────────────────────────

+function KanbanColumn({ title, count, tasks, color, onAddTask, onEdit, onDelete, onToggleFocus, onMarkDone, emptyText }) {

+    <div className="kanban-col shrink-0">

+      <div className="flex items-center justify-between mb-3 px-1">

+          <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${color}`}>{count}

+        <button onClick={onAddTask} 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 shadow-sm">

+          <div className="text-center py-8">

+              onToggleFocus={onToggleFocus}

+// ─── Main Component ─────────────────────────────────────────────────────────

-  const [todayTasks, setTodayTasks] = useState([]);

-  const [suggestTasks, setSuggestTasks] = useState([]);

+  const [allTasks, setAllTasks] = useState([]);

const [stats, setStats] = useState(null);

const [projects, setProjects] = useState([]);

const [loading, setLoading] = useState(true);

const [editTask, setEditTask] = useState(null);

const [deleteTask, setDeleteTask] = useState(null);

const [showNewTask, setShowNewTask] = useState(false);

+  const [newTaskDefaults, setNewTaskDefaults] = useState({});

+  const [activeTab, setActiveTab] = useState('dashboard');

-  const dateLabel = today.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' });

+  const dateLabel = today.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });

-      const [t, all, st, pr] = await Promise.all([

-        api.get('/tasks?today_only=true'),

+      const [tasks, st, pr] = await Promise.all([

-      // Suggest top 5 urgent/high tasks not in today focus

-      const notPinned = all.filter(tk => !tk.is_today_focus && (tk.priority === 'Urgent' || tk.priority === 'High'));

-      setSuggestTasks(notPinned.slice(0, 5));

-  const toggleFocus = async (task) => {

-    await api.patch(`/tasks/${task.id}/focus`);

+  // ── Kanban buckets ──────────────────────────────────────────────────────

+  const focusTasks     = allTasks.filter(t => t.is_today_focus && t.status !== 'Done');

+  const inProgressTasks = allTasks.filter(t => !t.is_today_focus && t.status === 'In Progress');

+  const followUpTasks  = allTasks.filter(t => t.is_follow_up && t.status !== 'Done' && !t.is_today_focus);

+  // ── Handlers ────────────────────────────────────────────────────────────

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

+  const markDone    = async (task) => {

await api.patch(`/tasks/${task.id}/status`, { status: 'Done' });

-  const handleSaveTask = async (form) => {

+  const openNew = (defaults = {}) => { setNewTaskDefaults(defaults); setShowNewTask(true); };

-        await api.put(`/tasks/${editTask.id}`, form);

-        await api.post('/tasks', form);

+      if (editTask?.id) { await api.put(`/tasks/${editTask.id}`, form); toast.success('Task updated'); }

+      else { await api.post('/tasks', { ...form, ...newTaskDefaults }); toast.success('Task added'); }

+      setEditTask(null); setShowNewTask(false); load();

+    } catch (e) { toast.error(e.message); }

-      await api.delete(`/tasks/${deleteTask.id}`);

+    await api.delete(`/tasks/${deleteTask.id}`); toast.success('Deleted');

+    { id: 'dashboard', label: 'Dashboard' },

+    { id: 'focus',     label: 'Today\'s Focus' },

+    { id: 'all',       label: 'All Tasks' },

+    { id: 'projects',  label: 'Projects' },

-    <div className="max-w-2xl mx-auto px-4 py-6">

-      <div className="flex items-start justify-between mb-5">

-          <div className="flex items-center gap-2 text-gray-400 dark:text-gray-500 mb-1">

+    <div className="flex flex-col h-full overflow-hidden">

+      {/* ── Hero Banner ─────────────────────────────────────────────── */}

+      <div className="relative overflow-hidden bg-hero-gradient mx-4 mt-4 rounded-2xl px-6 py-5 shadow-card">

+        <div className="blob w-48 h-48 bg-violet-400 -top-12 right-16" style={{animationDelay:'0s'}} />

+        <div className="blob w-36 h-36 bg-pink-400 top-4 right-4" style={{animationDelay:'2s'}} />

+        <div className="blob w-32 h-32 bg-amber-300 -bottom-8 right-40" style={{animationDelay:'4s'}} />

+        <div className="relative z-10 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">

+            <div className="flex items-center gap-2.5 mb-1">

+              <div className="w-9 h-9 bg-white/80 backdrop-blur rounded-xl flex items-center justify-center shadow-sm">

+                <Zap size={18} className="text-violet-600" />

+          <div className="flex items-center gap-4 sm:gap-6">

+              { label: 'Active Projects', value: stats?.activeProjects ?? '—', icon: '🏗' },

+              { label: 'Open Tasks',      value: stats?.openTasks ?? '—',      icon: '✅' },

+              { label: 'Follow-ups',      value: stats?.openFollowUps ?? '—',  icon: '🔔' },

+              { label: "Today's Focus",   value: stats?.todayFocus ?? '—',     icon: '🎯' },

+            ].map(({ label, value, icon }) => (

+              <div key={label} className="text-center">

-        <button onClick={() => setShowNewTask(true)} className="btn-primary flex items-center gap-1.5">

-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-7">

-        <MetricCard label="Today's Focus" value={stats?.todayFocus ?? 0} color="primary" loading={loading} />

-        <MetricCard label="Open Tasks" value={stats?.openTasks ?? 0} color="amber" loading={loading} />

-        <MetricCard label="Follow-ups" value={stats?.openFollowUps ?? 0} color="teal" loading={loading} />

-        <MetricCard label="Active Projects" value={stats?.activeProjects ?? 0} color="green" loading={loading} />

+      {/* ── Tabs ────────────────────────────────────────────────────── */}

+      <div className="flex items-center gap-1 px-4 pt-3 pb-0">

+            onClick={() => setActiveTab(t.id)}

+            className={`px-4 py-2 rounded-xl text-sm font-medium transition-all duration-150 ${

+                ? 'bg-primary text-white shadow-sm'

+                : 'text-gray-500 dark:text-gray-400 hover:bg-white dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-white'

+        <button onClick={() => openNew({ is_today_focus: 1 })} className="btn-primary flex items-center gap-1.5 py-2 text-xs">

+      {/* ── Tab Content ─────────────────────────────────────────────── */}

-          {[1,2,3].map(i => <div key={i} className="skeleton h-24 rounded-lg" />)}

+        <div className="flex gap-3 px-4 py-3 overflow-x-auto">

+          {[1,2,3].map(i => <div key={i} className="skeleton h-64 w-[270px] shrink-0 rounded-2xl" />)}

-        <div className="text-center py-12">

-          <div className="w-14 h-14 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4">

-            <CalendarDays size={24} className="text-gray-400" />

-
Pin tasks from below or from the <Link to="/tasks" className="text-primary hover:underline">Tasks view</Link>.

-
Pinned for today — {todayTasks.length}

+          {(activeTab === 'dashboard' || activeTab === 'focus') && (

+            <div className="flex gap-3 px-4 py-3 overflow-x-auto flex-1 min-h-0">

+                count={focusTasks.length}

+                tasks={activeTab === 'focus' ? focusTasks : focusTasks}

+                color="bg-primary/15 text-primary"

+                onAddTask={() => openNew({ is_today_focus: 1 })}

+                onDelete={setDeleteTask}

-                onEdit={t => setEditTask(t)}

-                onDelete={t => setDeleteTask(t)}

+                emptyText="No tasks pinned for today. Pin urgent tasks!"

+                count={inProgressTasks.length}

+                tasks={inProgressTasks}

+                color="bg-blue-100 text-blue-600"

+                onAddTask={() => openNew({ status: 'In Progress' })}

+                onToggleFocus={toggleFocus}

+                emptyText="No tasks in progress"

+                count={followUpTasks.length}

+                color="bg-amber-100 text-amber-600"

+                onAddTask={() => openNew({ is_follow_up: 1 })}

+                emptyText="No open follow-ups"

-      {!loading && suggestTasks.length > 0 && (

-            {suggestTasks.map(task => (

-              <div key={task.id} className="card flex items-center gap-3">

-                  onClick={() => toggleFocus(task)}

-                  className="shrink-0 w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600 hover:border-primary transition-colors"

-                <div className="flex gap-1.5 shrink-0">

-                  <span className={`badge text-xs ${task.priority === 'Urgent' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}`}>

+          {/* ALL TASKS — flat list */}

+            <div className="flex-1 overflow-y-auto px-4 py-3">

+              <div className="max-w-2xl space-y-2">

+                {allTasks.filter(t => t.status !== 'Done').map(task => (

+                    className={`kanban-card border-l-4 ${

+                      {Urgent:'border-l-red-500',High:'border-l-amber-400',Medium:'border-l-blue-400',Low:'border-l-green-400'}[task.priority]

+                    } group cursor-default`}

+                    onClick={() => setEditTask(task)}

+                    <div className="flex items-center gap-3">

+                      <button onClick={e => { e.stopPropagation(); toggleFocus(task); }}

+                        className={`shrink-0 w-5 h-5 rounded-full border-2 transition-all ${task.is_today_focus ? 'bg-primary border-primary' : 'border-gray-300 hover:border-primary'}`} />

+                      <div className="flex gap-1.5">

+                        <span className={`badge text-[10px] ${getPriorityClass(task.priority)}`}>{task.priority}

+                        {task.assignee && {task.assignee}}

+          {activeTab === 'projects' && (

+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 max-w-4xl">

+                {projects.filter(p => p.status !== 'Done').map(p => (

+                    onClick={() => navigate(`/projects/${p.id}`)}

+                    className="card-hover text-left p-4 group"

+                    <div className="flex items-start justify-between mb-2">

+                      <span className={`badge text-[10px] ${getCategoryClass(p.category)}`}>{CATEGORIES[p.category]?.label || p.category}

+                      <ArrowRight size={13} className="text-gray-300 group-hover:text-primary transition-colors" />

+                    <div className="flex items-center justify-between text-xs text-gray-400">

+                      <span className={`font-medium ${p.priority === 'Urgent' ? 'text-red-500' : p.priority === 'High' ? 'text-amber-500' : ''}`}>{p.priority}

+                      <span>{p.open_task_count || 0} tasks</span>

-          onClose={() => { setShowNewTask(false); setEditTask(null); }}

+        <TaskModal task={editTask} projects={projects} onSave={handleSave} onClose={() => { setShowNewTask(false); setEditTask(null); }} />

-          message={`"${deleteTask.title}" will be permanently removed.`}

-          onCancel={() => setDeleteTask(null)}

+        <ConfirmDialog title="Delete task?" message={`"${deleteTask.title}"`} onConfirm={handleDelete} onCancel={() => setDeleteTask(null)} />

import { useState, useEffect, useCallback } from 'react';
import { Plus, CalendarDays } from 'lucide-react';
import { Link } from 'react-router-dom';
import toast from 'react-hot-toast';
import api from '../api';
import TaskCard from './TaskCard';
import TaskModal from './TaskModal';
import ConfirmDialog from './ConfirmDialog';

function MetricCard({ label, value, color = 'primary', loading }) {
  const colors = {
    primary: 'text-primary',
    amber:   'text-amber-600 dark:text-amber-400',
    teal:    'text-teal-600 dark:text-teal-400',
    green:   'text-green-600 dark:text-green-400',
  };
  return (

      {loading
        ?

        : <p className={`text-2xl font-bold ${colors[color]}`}>{value}

      }

{label}

  );
}

export default function Today() {
  const [todayTasks, setTodayTasks] = useState([]);
  const [suggestTasks, setSuggestTasks] = useState([]);
  const [stats, setStats] = useState(null);
  const [projects, setProjects] = useState([]);
  const [loading, setLoading] = useState(true);
  const [editTask, setEditTask] = useState(null);
  const [deleteTask, setDeleteTask] = useState(null);
  const [showNewTask, setShowNewTask] = useState(false);

  const today = new Date();
  const dateLabel = today.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' });

  const load = useCallback(async () => {
    try {
      const [t, all, st, pr] = await Promise.all([
        api.get('/tasks?today_only=true'),
        api.get('/tasks?status=Open'),
        api.get('/tasks/stats'),
        api.get('/projects'),
      ]);
      setTodayTasks(t);
      setStats(st);
      setProjects(pr);
      // Suggest top 5 urgent/high tasks not in today focus
      const notPinned = all.filter(tk => !tk.is_today_focus && (tk.priority === 'Urgent' || tk.priority === 'High'));
      setSuggestTasks(notPinned.slice(0, 5));
    } finally {
      setLoading(false);
    }
  }, []);

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

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

  const markDone = async (task) => {
    await api.patch(`/tasks/${task.id}/status`, { status: 'Done' });
    toast.success('Marked as done');
    load();
  };

  const handleSaveTask = 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);
      setShowNewTask(false);
      load();
    } catch (e) {
      toast.error(e.message);
    }
  };

  const handleDelete = async () => {
    try {
      await api.delete(`/tasks/${deleteTask.id}`);
      toast.success('Task deleted');
      setDeleteTask(null);
      load();
    } catch (e) {
      toast.error(e.message);
    }
  };

  return (

      {/* Header */}

            <CalendarDays size={14} />
            {dateLabel}

Today

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

      {/* Metrics */}

        <MetricCard label="Today's Focus" value={stats?.todayFocus ?? 0} color="primary" loading={loading} />
        <MetricCard label="Open Tasks" value={stats?.openTasks ?? 0} color="amber" loading={loading} />
        <MetricCard label="Follow-ups" value={stats?.openFollowUps ?? 0} color="teal" loading={loading} />
        <MetricCard label="Active Projects" value={stats?.activeProjects ?? 0} color="green" loading={loading} />

      {/* Today's focus tasks */}
      {loading ? (

          {[1,2,3].map(i =>
)}

      ) : todayTasks.length === 0 ? (

            <CalendarDays size={24} className="text-gray-400" />

Nothing pinned for today

Pin tasks from below or from the <Link to="/tasks" className="text-primary hover:underline">Tasks view</Link>.

      ) : (
        <>

Pinned for today — {todayTasks.length}

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

        </>
      )}

      {/* Suggestions */}
      {!loading && suggestTasks.length > 0 && (

Add to today

            {suggestTasks.map(task => (

                <button
                  onClick={() => toggleFocus(task)}
                  className="shrink-0 w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600 hover:border-primary transition-colors"
                />

{task.title}

                  <span className={`badge text-xs ${task.priority === 'Urgent' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}`}>
                    {task.priority}

            ))}

      )}

      {/* Modals */}
      {(showNewTask || editTask) && (
        <TaskModal
          task={editTask}
          projects={projects}
          onSave={handleSaveTask}
          onClose={() => { setShowNewTask(false); setEditTask(null); }}
        />
      )}
      {deleteTask && (
        <ConfirmDialog
          title="Delete task?"
          message={`"${deleteTask.title}" will be permanently removed.`}
          onConfirm={handleDelete}
          onCancel={() => setDeleteTask(null)}
        />
      )}

  );
}


Now update the TaskCard to match the new design language:


import { Pencil, Trash2, User, Calendar, MoreHorizontal } from 'lucide-react';
import { getCategoryClass, getPriorityClass, getStatusClass, isOverdue, formatDate, CATEGORIES } 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',
};

export default function TaskCard({ task, onEdit, onDelete, onToggleFocus, showFocus = true, compact = false }) {
  const overdue = isOverdue(task.due_date) && task.status !== 'Done';

  return (
    <div className={`kanban-card border-l-4 ${PRIORITY_BORDER[task.priority] || 'border-l-gray-200'} group ${task.status === 'Done' ? 'opacity-50' : ''}`}>

        {/* Focus toggle */}
        {showFocus && (
          <button
            onClick={() => onToggleFocus?.(task)}
            title={task.is_today_focus ? 'Remove from today' : 'Pin to today'}
            className="shrink-0 mt-0.5"
          >

          </button>
        )}

          {/* Title */}

            {task.title}

          {/* Notes */}
          {task.notes && !compact && (

{task.notes}

          )}

          {/* Badges */}

            <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.is_follow_up === 1 && (
              Follow-up
            )}

          {/* Meta */}
          {(task.assignee || task.due_date || task.project_name) && (

              {task.assignee && (

                    {task.assignee[0]?.toUpperCase()}

                  {task.assignee}

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

              )}
              {task.project_name && (
                · {task.project_name}
              )}

          )}

        {/* Actions */}

          {onEdit && (
            <button onClick={() => onEdit(task)} className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400 hover:text-primary transition-colors">
              <Pencil size={12} />
            </button>
          )}
          {onDelete && (
            <button onClick={() => onDelete(task)} className="p-1.5 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/30 text-gray-400 hover:text-red-500 transition-colors">
              <Trash2 size={12} />
            </button>
          )}

  );
}


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

import { Pencil, Trash2, User, Calendar, MoreHorizontal } from 'lucide-react';
import { getCategoryClass, getPriorityClass, getStatusClass, isOverdue, formatDate, CATEGORIES } 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',
};

export default function TaskCard({ task, onEdit, onDelete, onToggleFocus, showFocus = true, compact = false }) {
  const overdue = isOverdue(task.due_date) && task.status !== 'Done';

  return (
    <div className={`kanban-card border-l-4 ${PRIORITY_BORDER[task.priority] || 'border-l-gray-200'} group ${task.status === 'Done' ? 'opacity-50' : ''}`}>

        {/* Focus toggle */}
        {showFocus && (
          <button
            onClick={() => onToggleFocus?.(task)}
            title={task.is_today_focus ? 'Remove from today' : 'Pin to today'}
            className="shrink-0 mt-0.5"
          >

          </button>
        )}

          {/* Title */}

            {task.title}

          {/* Notes */}
          {task.notes && !compact && (

{task.notes}

          )}

          {/* Badges */}

            <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.is_follow_up === 1 && (
              Follow-up
            )}

          {/* Meta */}
          {(task.assignee || task.due_date || task.project_name) && (

              {task.assignee && (

                    {task.assignee[0]?.toUpperCase()}

                  {task.assignee}

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

              )}
              {task.project_name && (
                · {task.project_name}
              )}

          )}

        {/* Actions */}

          {onEdit && (
            <button onClick={() => onEdit(task)} className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400 hover:text-primary transition-colors">
              <Pencil size={12} />
            </button>
          )}
          {onDelete && (
            <button onClick={() => onDelete(task)} className="p-1.5 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/30 text-gray-400 hover:text-red-500 transition-colors">
              <Trash2 size={12} />
            </button>
          )}

  );
}

-import { Pencil, Trash2, User, Calendar } from 'lucide-react';

+import { Pencil, Trash2, User, Calendar, MoreHorizontal } from 'lucide-react';

-    <div className={`card group relative transition-all duration-150 ${task.status === 'Done' ? 'opacity-60' : ''}`}>

-      <div className="flex items-start gap-3">

+    <div className={`kanban-card border-l-4 ${PRIORITY_BORDER[task.priority] || 'border-l-gray-200'} group ${task.status === 'Done' ? 'opacity-50' : ''}`}>

+      <div className="flex items-start gap-2.5">

-            title={task.is_today_focus ? 'Remove from today' : 'Add to today'}

-            className="mt-0.5 shrink-0 focus:outline-none"

+            title={task.is_today_focus ? 'Remove from today' : 'Pin to today'}

+            className="shrink-0 mt-0.5"

-            <div className={`w-5 h-5 rounded-full border-2 transition-all duration-150 ${

+            <div className={`w-4 h-4 rounded-full border-2 transition-all duration-150 ${

-                ? 'bg-primary border-primary'

+                ? 'bg-primary border-primary shadow-glow'

: 'border-gray-300 dark:border-gray-600 hover:border-primary'

-          <p className={`text-sm font-medium leading-snug ${task.status === 'Done' ? 'line-through text-gray-400' : 'text-gray-900 dark:text-white'}`}>

+          <p className={`text-sm font-semibold leading-snug ${

+              ? 'line-through text-gray-400'

+              : 'text-gray-800 dark:text-gray-100'

<div className="flex flex-wrap items-center gap-1.5 mt-2">

-            <span className={`badge ${getPriorityClass(task.priority)}`}>{task.priority}

-            <span className={`badge ${getCategoryClass(task.category)}`}>{CATEGORIES[task.category]?.label || task.category}

-            <span className={`badge ${getStatusClass(task.status)}`}>{task.status}

+            <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}

-            <div className="flex flex-wrap items-center gap-3 mt-2">

+            <div className="flex flex-wrap items-center gap-3 mt-2 pt-2 border-t border-gray-100 dark:border-gray-800">

-                <span className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">

+                <div className="flex items-center gap-1.5">

+                  <div className="w-5 h-5 rounded-full bg-gradient-to-br from-primary to-brand-pink flex items-center justify-center text-white text-[9px] font-bold">

+                    {task.assignee[0]?.toUpperCase()}

-                <span className={`flex items-center gap-1 text-xs ${overdue ? 'text-red-600 dark:text-red-400 font-medium' : 'text-gray-500 dark:text-gray-400'}`}>

-                  <Calendar size={11} />

-                  {formatDate(task.due_date)}

+                <span className={`flex items-center gap-1 text-xs ${overdue ? 'text-red-600 dark:text-red-400 font-medium' : 'text-gray-400'}`}>

+                  <Calendar size={10} />

+                  {overdue && '⚠ '}{formatDate(task.due_date)}

-                <span className="text-xs text-gray-400 dark:text-gray-500 truncate max-w-[140px]">

-        <div className="shrink-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150">

+        <div className="shrink-0 flex flex-col items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">

-            <button onClick={() => onEdit(task)} className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors">

+            <button onClick={() => onEdit(task)} className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400 hover:text-primary transition-colors">

-            <button onClick={() => onDelete(task)} className="p-1.5 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/30 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors">

+            <button onClick={() => onDelete(task)} className="p-1.5 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/30 text-gray-400 hover:text-red-500 transition-colors">

import { Pencil, Trash2, User, Calendar } from 'lucide-react';
import { getCategoryClass, getPriorityClass, getStatusClass, isOverdue, formatDate, CATEGORIES } from '../utils';

export default function TaskCard({ task, onEdit, onDelete, onToggleFocus, showFocus = true, compact = false }) {
  const overdue = isOverdue(task.due_date) && task.status !== 'Done';

  return (
    <div className={`card group relative transition-all duration-150 ${task.status === 'Done' ? 'opacity-60' : ''}`}>

        {/* Focus toggle */}
        {showFocus && (
          <button
            onClick={() => onToggleFocus?.(task)}
            title={task.is_today_focus ? 'Remove from today' : 'Add to today'}
            className="mt-0.5 shrink-0 focus:outline-none"
          >

          </button>
        )}

        {/* Content */}

          <p className={`text-sm font-medium leading-snug ${task.status === 'Done' ? 'line-through text-gray-400' : 'text-gray-900 dark:text-white'}`}>
            {task.title}

          {task.notes && !compact && (

{task.notes}

          )}

          {/* Meta row */}

            <span className={`badge ${getPriorityClass(task.priority)}`}>{task.priority}
            <span className={`badge ${getCategoryClass(task.category)}`}>{CATEGORIES[task.category]?.label || task.category}
            <span className={`badge ${getStatusClass(task.status)}`}>{task.status}
            {task.is_follow_up === 1 && (
              Follow-up
            )}

          {/* Footer */}
          {(task.assignee || task.due_date || task.project_name) && (

              {task.assignee && (

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

              )}
              {task.due_date && (
                <span className={`flex items-center gap-1 text-xs ${overdue ? 'text-red-600 dark:text-red-400 font-medium' : 'text-gray-500 dark:text-gray-400'}`}>
                  <Calendar size={11} />
                  {overdue && '⚠ '}
                  {formatDate(task.due_date)}

              )}
              {task.project_name && (

                  {task.project_name}

              )}

          )}

        {/* Actions */}

          {onEdit && (
            <button onClick={() => onEdit(task)} className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
              <Pencil size={13} />
            </button>
          )}
          {onDelete && (
            <button onClick={() => onDelete(task)} className="p-1.5 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/30 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors">
              <Trash2 size={13} />
            </button>
          )}

  );
}


Bash

Build to check for errors


transforming...
✓ 1601 modules transformed.
rendering chunks...
computing gzip size...
../dist/index.html                   0.84 kB │ gzip:  0.48 kB
../dist/assets/index-D09YZN8-.css   43.22 kB │ gzip:  7.08 kB
../dist/assets/index-VsA58yad.js   281.46 kB │ gzip: 79.78 kB
✓ built in 1.06s


Clean build — CSS is 43KB (all styles generating properly). Now restart the dev server:


pkill -f "vite client" 2>/dev/null; pkill -f "nodemon" 2>/dev/null; sleep 1
npm run dev &
sleep 3
echo "---"
curl -s http://localhost:3002/api/tasks/stats

Restart dev server with new design


> my-workspace@1.0.0 dev
> concurrently "npm run server" "npm run client"

[0]
[0] > my-workspace@1.0.0 server
[0] > nodemon server/index.js
[0]
[1]
[1] > my-workspace@1.0.0 client
[1] > vite client
[1]
[0] [nodemon] 3.1.14
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching path(s): *.*
[0] [nodemon] watching extensions: js,mjs,cjs,json
[0] [nodemon] starting `node server/index.js`
[1]
[1]   VITE v6.4.1  ready in 95 ms
[1]
[1]   ➜  Local:   http://localhost:5173/
[1]   ➜  Network: http://192.168.1.140:5173/
[1]   ➜  Network: http://100.72.97.47:5173/
[0] 🚀 Server running on http://localhost:3002
---
{"todayFocus":0,"openTasks":20,"openFollowUps":8,"activeProjects":36}


Everything is running. Here's a summary of what was done:

---

## Shareable Link
**https://overseas-cream-alleged-nature.trycloudflare.com**

Share this with anyone — no account needed, works from any device worldwide. *(Link stays alive as long as the app is running.)*

---

## What changed in the UI

**Dashboard (Today view)** — redesigned to match the screenshot:
- **Gradient hero banner** — purple → pink → amber with animated floating blobs, showing workspace name + 4 live stats
- **Kanban board** — 3 columns: *Today's Focus* | *In Progress* | *Follow-ups*
- **Task cards** — colored left border by priority, assignee avatar, due date, tags, hover "Done" button
- **Tabs** — Dashboard · Today's Focus · All Tasks · Projects

**Sidebar** — now shows grouped DEWA projects with colored category dots, collapsible sections, smooth hover states

**Right panel** (desktop XL only) — Executive Summary: 4 stats tiles, This Week chart (completed/added/overdue), active projects list with open task counts, upcoming deadlines

**Design system** — new purple primary (`#7C5CFC`), card shadows, hover lift animations, gradient avatar initials, polished badges


remove all the emojies and replace them with SVG


grep -rn "[🏗✅🔔🎯⚠💡🏢]" /Users/khalidbinkalban/my-workspace/client/src/ 2>/dev/null
grep -rn "emoji\|🎯\|✅\|🔔\|🏗\|⚠\|💡\|🏢" /Users/khalidbinkalban/my-workspace/client/ --include="*.jsx" --include="*.js" --include="*.html" 2>/dev/null

Find all emoji usage in client source files