feat: remove TaskStats from HomePageClient and Header components

- Eliminated `initialStats` prop from `HomePageClient` and `KanbanPageClient` to streamline data handling. - Updated `Header` and `HeaderContainer` components to remove references to `stats`, enhancing clarity and reducing unnecessary complexity. - Adjusted `useTasks` hook to make `stats` optional, ensuring compatibility with the updated components.
2025-09-19 08:57:51 +02:00
parent 128167341e
commit 013b3d4d40
8 changed files with 142 additions and 142 deletions
--- a/components/HomePageClient.tsx
+++ b/components/HomePageClient.tsx
@@ -3,7 +3,7 @@
 import { Header } from '@/components/ui/Header';
 import { TasksProvider, useTasksContext } from '@/contexts/TasksContext';
 import { UserPreferencesProvider } from '@/contexts/UserPreferencesContext';
-import { Task, Tag, TaskStats, UserPreferences } from '@/lib/types';
+import { Task, Tag, UserPreferences } from '@/lib/types';
 import { CreateTaskData } from '@/clients/tasks-client';
 import { DashboardStats } from '@/components/dashboard/DashboardStats';
 import { QuickActions } from '@/components/dashboard/QuickActions';
@@ -12,7 +12,6 @@ import { ProductivityAnalytics } from '@/components/dashboard/ProductivityAnalyt

 interface HomePageClientProps {
  initialTasks: Task[];
-  initialStats: TaskStats;
  initialTags: (Tag & { usage: number })[];
  initialPreferences: UserPreferences;
 }
@@ -29,9 +28,8 @@ function HomePageContent() {
  return (
    <div className="min-h-screen bg-[var(--background)]">
      <Header 
-        title="TowerControl" 
+        title="TowerControl"
        subtitle="Dashboard - Vue d'ensemble"
-        stats={stats}
        syncing={syncing}
      />
      
@@ -52,12 +50,11 @@ function HomePageContent() {
  );
 }

-export function HomePageClient({ initialTasks, initialStats, initialTags, initialPreferences }: HomePageClientProps) {
+export function HomePageClient({ initialTasks, initialTags, initialPreferences }: HomePageClientProps) {
  return (
    <UserPreferencesProvider initialPreferences={initialPreferences}>
      <TasksProvider 
-        initialTasks={initialTasks} 
-        initialStats={initialStats}
+        initialTasks={initialTasks}
        initialTags={initialTags}
      >
        <HomePageContent />
--- a/components/ui/Header.tsx
+++ b/components/ui/Header.tsx
@@ -1,21 +1,20 @@
-import { Card, CardContent } from '@/components/ui/Card';
-import { TaskStats } from '@/lib/types';
 import { useTheme } from '@/contexts/ThemeContext';
 import { useJiraConfig } from '@/contexts/JiraConfigContext';
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
+import { useState } from 'react';

 interface HeaderProps {
  title?: string;
  subtitle?: string;
-  stats?: TaskStats;
  syncing?: boolean;
 }

-export function Header({ title = "TowerControl", subtitle = "Task Management", stats, syncing = false }: HeaderProps) {
+export function Header({ title = "TowerControl", subtitle = "Task Management", syncing = false }: HeaderProps) {
  const { theme, toggleTheme } = useTheme();
  const { isConfigured: isJiraConfigured, config: jiraConfig } = useJiraConfig();
  const pathname = usePathname();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // Fonction pour déterminer si un lien est actif
  const isActiveLink = (href: string) => {
@@ -25,7 +24,7 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
    return pathname.startsWith(href);
  };

-  // Fonction pour obtenir les classes CSS d'un lien
+  // Fonction pour obtenir les classes CSS d'un lien (desktop)
  const getLinkClasses = (href: string) => {
    const baseClasses = "font-mono text-sm uppercase tracking-wider transition-colors px-3 py-1.5 rounded-md";
    
@@ -36,11 +35,92 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
    return `${baseClasses} text-[var(--muted-foreground)] hover:text-[var(--primary)] hover:bg-[var(--card-hover)]`;
  };

+  // Fonction pour obtenir les classes CSS d'un lien (mobile)
+  const getMobileLinkClasses = (href: string) => {
+    const baseClasses = "font-mono text-sm uppercase tracking-wider transition-colors px-4 py-3 rounded-md block w-full text-left";
+    
+    if (isActiveLink(href)) {
+      return `${baseClasses} text-[var(--primary)] bg-[var(--primary)]/10 border border-[var(--primary)]/30`;
+    }
+    
+    return `${baseClasses} text-[var(--muted-foreground)] hover:text-[var(--primary)] hover:bg-[var(--card-hover)]`;
+  };
+
+  // Liste des liens de navigation
+  const navLinks = [
+    { href: '/', label: 'Dashboard' },
+    { href: '/kanban', label: 'Kanban' },
+    { href: '/daily', label: 'Daily' },
+    { href: '/tags', label: 'Tags' },
+    ...(isJiraConfigured ? [{ href: '/jira-dashboard', label: `Jira${jiraConfig?.projectKey ? ` (${jiraConfig.projectKey})` : ''}` }] : []),
+    { href: '/settings', label: 'Settings' }
+  ];
+
  return (
-    <header className="bg-[var(--card)]/80 backdrop-blur-sm border-b border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20">
-      <div className="container mx-auto px-6 py-4">
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
-          {/* Titre tech avec glow */}
+    <header className="relative z-50 bg-[var(--card)]/80 backdrop-blur-sm border-b border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20">
+      <div className="container mx-auto px-4 sm:px-6 py-4">
+        {/* Layout mobile/tablette */}
+        <div className="lg:hidden">
+          <div className="flex items-center justify-between">
+            {/* Titre et status */}
+            <div className="flex items-center gap-3 sm:gap-4 min-w-0 flex-1">
+              <div className={`w-3 h-3 rounded-full shadow-lg flex-shrink-0 ${
+                syncing 
+                  ? 'bg-yellow-400 animate-spin shadow-yellow-400/50' 
+                  : 'bg-cyan-400 animate-pulse shadow-cyan-400/50'
+              }`}></div>
+              <div className="min-w-0">
+                <h1 className="text-xl sm:text-2xl font-mono font-bold text-[var(--foreground)] tracking-wider truncate">
+                  {title}
+                </h1>
+                <p className="text-[var(--muted-foreground)] mt-1 font-mono text-xs sm:text-sm truncate">
+                  {subtitle}
+                </p>
+              </div>
+            </div>
+
+            {/* Controls mobile/tablette */}
+            <div className="flex items-center gap-2 flex-shrink-0">
+              {/* Theme Toggle */}
+              <button
+                onClick={toggleTheme}
+                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-2 rounded-md hover:bg-[var(--card-hover)]"
+                title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
+              >
+                {theme === 'dark' ? (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                  </svg>
+                ) : (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                  </svg>
+                )}
+              </button>
+
+              {/* Menu burger */}
+              <button
+                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-2 rounded-md hover:bg-[var(--card-hover)]"
+                title="Toggle menu"
+              >
+                {mobileMenuOpen ? (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                ) : (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                  </svg>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Layout desktop - une seule ligne comme avant */}
+        <div className="hidden lg:flex items-center justify-between gap-6">
+          {/* Titre et status */}
          <div className="flex items-center gap-6">
            <div className="flex items-center gap-4 w-[300px]">
              <div className={`w-3 h-3 rounded-full shadow-lg ${
@@ -58,48 +138,19 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
              </div>
            </div>

-            {/* Navigation */}
-            <nav className="hidden sm:flex items-center gap-2">
-              <Link
-                href="/"
-                className={getLinkClasses('/')}
-              >
-                Dashboard
-              </Link>
-              <Link
-                href="/kanban"
-                className={getLinkClasses('/kanban')}
-              >
-                Kanban
-              </Link>
-              <Link
-                href="/daily"
-                className={getLinkClasses('/daily')}
-              >
-                Daily
-              </Link>
-              <Link
-                href="/tags"
-                className={getLinkClasses('/tags')}
-              >
-                Tags
-              </Link>
-              {isJiraConfigured && (
+            {/* Navigation desktop */}
+            <nav className="flex items-center gap-2">
+              {navLinks.map(({ href, label }) => (
                <Link
-                  href="/jira-dashboard"
-                  className={getLinkClasses('/jira-dashboard')}
+                  key={href}
+                  href={href}
+                  className={getLinkClasses(href)}
                >
-                  Jira ({jiraConfig?.projectKey})
+                  {label}
                </Link>
-              )}
-              <Link
-                href="/settings"
-                className={getLinkClasses('/settings')}
-              >
-                Settings
-              </Link>
+              ))}
              
-              {/* Theme Toggle */}
+              {/* Theme Toggle desktop */}
              <button
                onClick={toggleTheme}
                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-1 rounded-md hover:bg-[var(--card-hover)]"
@@ -118,63 +169,38 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
            </nav>
          </div>

-          {/* Stats essentielles - seulement si stats disponibles */}
-          {stats && (
-            <div className="flex flex-wrap gap-3">
-              <StatCard 
-                label="TOTAL" 
-                value={String(stats.total).padStart(2, '0')} 
-                color="blue"
-              />
-              <StatCard 
-                label="DONE" 
-                value={String(stats.completed).padStart(2, '0')} 
-                color="green"
-              />
-              <StatCard 
-                label="ACTIVE" 
-                value={String(stats.inProgress).padStart(2, '0')} 
-                color="yellow"
-              />
-              <StatCard 
-                label="RATE" 
-                value={`${stats.completionRate}%`} 
-                color="purple"
-              />
-            </div>
-          )}
        </div>
+
      </div>
+
+      {/* Menu mobile/tablette en overlay fixe */}
+      {mobileMenuOpen && (
+        <>
+          {/* Backdrop pour fermer le menu */}
+          <div 
+            className="lg:hidden fixed inset-0 bg-black/20 backdrop-blur-sm z-[100]"
+            onClick={() => setMobileMenuOpen(false)}
+          />
+          {/* Menu */}
+          <div className="lg:hidden fixed top-[80px] left-0 right-0 bg-[var(--card)]/98 backdrop-blur-md border-b border-[var(--border)]/50 shadow-xl z-[101]">
+            <nav className="container mx-auto px-4 py-6">
+              <div className="space-y-3">
+                {navLinks.map(({ href, label }) => (
+                  <Link
+                    key={href}
+                    href={href}
+                    className={getMobileLinkClasses(href)}
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    {label}
+                  </Link>
+                ))}
+              </div>
+            </nav>
+          </div>
+        </>
+      )}
    </header>
  );
 }

-interface StatCardProps {
-  label: string;
-  value: number | string;
-  color: 'blue' | 'green' | 'yellow' | 'gray' | 'purple';
-}
-
-function StatCard({ label, value, color }: StatCardProps) {
-
-  const textColors = {
-    blue: 'text-[var(--primary)]',
-    green: 'text-[var(--success)]',
-    yellow: 'text-[var(--accent)]', 
-    gray: 'text-[var(--muted-foreground)]',
-    purple: 'text-[var(--accent)]'
-  };
-
-  return (
-    <Card variant="elevated" className="px-3 py-2 hover:border-opacity-75 transition-all duration-300">
-      <CardContent className="p-0">
-        <div className={`text-xs font-mono font-bold ${textColors[color]} opacity-75 uppercase tracking-wider`}>
-          {label}
-        </div>
-        <div className={`text-lg font-mono font-bold ${textColors[color]}`}>
-          {value}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
--- a/components/ui/HeaderContainer.tsx
+++ b/components/ui/HeaderContainer.tsx
@@ -6,30 +6,15 @@ import { useTasks } from '@/hooks/useTasks';
 interface HeaderContainerProps {
  title: string;
  subtitle: string;
-  initialStats: {
-    total: number;
-    completed: number;
-    inProgress: number;
-    todo: number;
-    backlog: number;
-    cancelled: number;
-    freeze: number;
-    archived: number;
-    completionRate: number;
-  };
 }

-export function HeaderContainer({ title, subtitle, initialStats }: HeaderContainerProps) {
-  const { stats, syncing } = useTasks(
-    { limit: 1 }, // Juste pour les stats
-    { tasks: [], stats: { ...initialStats, backlog: 0, cancelled: 0, freeze: 0, archived: 0 } }
-  );
+export function HeaderContainer({ title, subtitle }: HeaderContainerProps) {
+  const { syncing } = useTasks();

  return (
    <Header 
      title={title}
      subtitle={subtitle}
-      stats={stats}
      syncing={syncing}
    />
  );
--- a/hooks/useTasks.ts
+++ b/hooks/useTasks.ts
@@ -25,7 +25,7 @@ interface UseTasksActions {
 */
 export function useTasks(
  initialFilters?: TaskFilters, 
-  initialData?: { tasks: Task[]; stats: TaskStats }
+  initialData?: { tasks: Task[]; stats?: TaskStats }
 ): UseTasksState & UseTasksActions {
  const [state, setState] = useState<UseTasksState>({
    tasks: initialData?.tasks || [],
--- a/src/app/kanban/KanbanPageClient.tsx
+++ b/src/app/kanban/KanbanPageClient.tsx
@@ -5,7 +5,7 @@ import { KanbanBoardContainer } from '@/components/kanban/BoardContainer';
 import { Header } from '@/components/ui/Header';
 import { TasksProvider, useTasksContext } from '@/contexts/TasksContext';
 import { UserPreferencesProvider, useUserPreferences } from '@/contexts/UserPreferencesContext';
-import { Task, Tag, TaskStats, UserPreferences } from '@/lib/types';
+import { Task, Tag, UserPreferences } from '@/lib/types';
 import { CreateTaskData } from '@/clients/tasks-client';
 import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
 import { Button } from '@/components/ui/Button';
@@ -14,13 +14,12 @@ import { FontSizeToggle } from '@/components/ui/FontSizeToggle';

 interface KanbanPageClientProps {
  initialTasks: Task[];
-  initialStats: TaskStats;
  initialTags: (Tag & { usage: number })[];
  initialPreferences: UserPreferences;
 }

 function KanbanPageContent() {
-  const { stats, syncing, createTask, activeFiltersCount, kanbanFilters, setKanbanFilters } = useTasksContext();
+  const { syncing, createTask, activeFiltersCount, kanbanFilters, setKanbanFilters } = useTasksContext();
  const { preferences, updateViewPreferences } = useUserPreferences();
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);

@@ -58,7 +57,6 @@ function KanbanPageContent() {
      <Header 
        title="Kanban Board" 
        subtitle="Gestionnaire de tâches"
-        stats={stats}
        syncing={syncing}
      />
      
@@ -181,12 +179,11 @@ function KanbanPageContent() {
  );
 }

-export function KanbanPageClient({ initialTasks, initialStats, initialTags, initialPreferences }: KanbanPageClientProps) {
+export function KanbanPageClient({ initialTasks, initialTags, initialPreferences }: KanbanPageClientProps) {
  return (
    <UserPreferencesProvider initialPreferences={initialPreferences}>
      <TasksProvider 
-        initialTasks={initialTasks} 
-        initialStats={initialStats}
+        initialTasks={initialTasks}
        initialTags={initialTags}
      >
        <KanbanPageContent />
--- a/src/app/kanban/page.tsx
+++ b/src/app/kanban/page.tsx
@@ -8,9 +8,8 @@ export const dynamic = 'force-dynamic';

 export default async function KanbanPage() {
  // SSR - Récupération des données côté serveur
-  const [initialTasks, initialStats, initialTags, initialPreferences] = await Promise.all([
+  const [initialTasks, initialTags, initialPreferences] = await Promise.all([
    tasksService.getTasks(),
-    tasksService.getTaskStats(),
    tagsService.getTags(),
    userPreferencesService.getAllPreferences()
  ]);
@@ -18,7 +17,6 @@ export default async function KanbanPage() {
  return (
    <KanbanPageClient 
      initialTasks={initialTasks}
-      initialStats={initialStats}
      initialTags={initialTags}
      initialPreferences={initialPreferences}
    />
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,9 +8,8 @@ export const dynamic = 'force-dynamic';

 export default async function HomePage() {
  // SSR - Récupération des données côté serveur
-  const [initialTasks, initialStats, initialTags, initialPreferences] = await Promise.all([
+  const [initialTasks, initialTags, initialPreferences] = await Promise.all([
    tasksService.getTasks(),
-    tasksService.getTaskStats(),
    tagsService.getTags(),
    userPreferencesService.getAllPreferences()
  ]);
@@ -18,7 +17,6 @@ export default async function HomePage() {
  return (
    <HomePageClient 
      initialTasks={initialTasks}
-      initialStats={initialStats}
      initialTags={initialTags}
      initialPreferences={initialPreferences}
    />
--- a/src/contexts/TasksContext.tsx
+++ b/src/contexts/TasksContext.tsx
@@ -37,14 +37,13 @@ const TasksContext = createContext<TasksContextType | null>(null);
 interface TasksProviderProps {
  children: ReactNode;
  initialTasks: Task[];
-  initialStats: TaskStats;
  initialTags?: (Tag & { usage: number })[];
 }

-export function TasksProvider({ children, initialTasks, initialStats, initialTags }: TasksProviderProps) {
+export function TasksProvider({ children, initialTasks, initialTags }: TasksProviderProps) {
  const tasksState = useTasks(
    { limit: 20 },
-    { tasks: initialTasks, stats: initialStats }
+    { tasks: initialTasks }
  );

  const { tags, loading: tagsLoading, error: tagsError } = useTags(initialTags);