@tuturuuu/ui 0.17.0 → 0.18.0

package/src/components/ui/calendar-app/components/time-tracker.tsx

@@ -1,2040 +0,0 @@
-'use client';
-
-import { useQueryClient } from '@tanstack/react-query';
-import {
-  Calendar,
-  CheckCircle,
-  Clock,
-  Copy,
-  ExternalLink,
-  Filter,
-  History,
-  MapPin,
-  MoreHorizontal,
-  Pause,
-  Play,
-  RefreshCw,
-  RotateCcw,
-  Sparkles,
-  Square,
-  Tag,
-  Timer,
-  Trash2,
-  TrendingUp,
-  Zap,
-} from '@tuturuuu/icons';
-import type { TimeTrackingCategory, WorkspaceTask } from '@tuturuuu/types';
-import { cn } from '@tuturuuu/utils/format';
-import { usePlatform } from '@tuturuuu/utils/hooks/use-platform';
-import { useCallback, useEffect, useState } from 'react';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '../../alert-dialog';
-import { Badge } from '../../badge';
-import { Button } from '../../button';
-import { Card, CardContent, CardHeader, CardTitle } from '../../card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '../../dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../../dropdown-menu';
-import { Input } from '../../input';
-import { Label } from '../../label';
-import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../../select';
-import { Separator } from '../../separator';
-import { toast } from '../../sonner';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../tabs';
-import { Textarea } from '../../textarea';
-import type {
-  ExtendedWorkspaceTask,
-  SessionWithRelations,
-  TimerStats,
-} from '../../time-tracker/types';
-
-interface TimeTrackerProps {
-  wsId: string;
-  tasks?: ExtendedWorkspaceTask[];
-}
-
-interface SessionTemplate {
-  title: string;
-  description?: string;
-  category_id?: string;
-  task_id?: string;
-  category?: TimeTrackingCategory;
-  task?: WorkspaceTask;
-  usage_count: number;
-}
-
-interface TaskBoard {
-  id: string;
-  name: string;
-  created_at: string;
-  task_lists: TaskList[];
-}
-
-interface TaskList {
-  id: string;
-  name: string;
-  status: string;
-  color: string;
-  position: number;
-}
-
-export default function TimeTracker({ wsId, tasks = [] }: TimeTrackerProps) {
-  const { modKey } = usePlatform();
-  const queryClient = useQueryClient();
-  const [isOpen, setIsOpen] = useState(false);
-  const [currentSession, setCurrentSession] =
-    useState<SessionWithRelations | null>(null);
-  const [categories, setCategories] = useState<TimeTrackingCategory[]>([]);
-  const [recentSessions, setRecentSessions] = useState<SessionWithRelations[]>(
-    []
-  );
-  const [templates, setTemplates] = useState<SessionTemplate[]>([]);
-  const [timerStats, setTimerStats] = useState<TimerStats>({
-    todayTime: 0,
-    weekTime: 0,
-    monthTime: 0,
-    streak: 0,
-  });
-
-  // Task creation state
-  const [boards, setBoards] = useState<TaskBoard[]>([]);
-  const [showTaskCreation, setShowTaskCreation] = useState(false);
-  const [selectedBoardId, setSelectedBoardId] = useState('');
-  const [selectedListId, setSelectedListId] = useState('');
-  const [newTaskName, setNewTaskName] = useState('');
-  const [newTaskDescription, setNewTaskDescription] = useState('');
-  const [isCreatingTask, setIsCreatingTask] = useState(false);
-
-  // Timer state
-  const [elapsedTime, setElapsedTime] = useState(0);
-  const [isRunning, setIsRunning] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  // Form state
-  const [newSessionTitle, setNewSessionTitle] = useState('');
-  const [newSessionDescription, setNewSessionDescription] = useState('');
-  const [selectedCategoryId, setSelectedCategoryId] = useState<string>('');
-  const [selectedTaskId, setSelectedTaskId] = useState<string>('');
-  const [sessionMode, setSessionMode] = useState<'task' | 'manual'>('task');
-  const [showTaskSuggestion, setShowTaskSuggestion] = useState(false);
-
-  // Dialog states
-  const [sessionToDelete, setSessionToDelete] =
-    useState<SessionWithRelations | null>(null);
-  const [sessionToEdit, setSessionToEdit] =
-    useState<SessionWithRelations | null>(null);
-  const [isDeleting, setIsDeleting] = useState(false);
-  const [isEditing, setIsEditing] = useState(false);
-
-  // Enhanced UX states
-  const [actionStates, setActionStates] = useState<{ [key: string]: boolean }>(
-    {}
-  );
-  const [justCompleted, setJustCompleted] =
-    useState<SessionWithRelations | null>(null);
-  const [showQuickActions, setShowQuickActions] = useState(false);
-
-  // Filter states
-  const [activeTab, setActiveTab] = useState<'current' | 'recent' | 'history'>(
-    'current'
-  );
-  const [filterCategoryId, setFilterCategoryId] = useState<string>('');
-  const [filterTaskId, setFilterTaskId] = useState<string>('');
-
-  // Edit form state
-  const [editTitle, setEditTitle] = useState('');
-  const [editDescription, setEditDescription] = useState('');
-  const [editCategoryId, setEditCategoryId] = useState('');
-  const [editTaskId, setEditTaskId] = useState('');
-  const [editStartTime, setEditStartTime] = useState('');
-  const [editEndTime, setEditEndTime] = useState('');
-
-  // Format time display
-  const formatTime = useCallback((seconds: number): string => {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    const secs = seconds % 60;
-
-    if (hours > 0) {
-      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-    }
-    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-  }, []);
-
-  // Format duration for display
-  const formatDuration = useCallback((seconds: number): string => {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-
-    if (hours > 0) {
-      return `${hours}h ${minutes}m`;
-    }
-    return `${minutes}m`;
-  }, []);
-
-  // API call helpers
-  const apiCall = useCallback(
-    async (url: string, options: RequestInit = {}) => {
-      const response = await fetch(url, {
-        headers: {
-          'Content-Type': 'application/json',
-          ...options.headers,
-        },
-        ...options,
-      });
-
-      if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: 'Unknown error' }));
-        throw new Error(error.error || `HTTP ${response.status}`);
-      }
-
-      return response.json();
-    },
-    []
-  );
-
-  // Fetch boards with lists
-  const fetchBoards = useCallback(async () => {
-    try {
-      const response = await apiCall(
-        `/api/v1/workspaces/${wsId}/boards-with-lists`
-      );
-      setBoards(response.boards || []);
-    } catch (error) {
-      console.error('Error fetching boards:', error);
-      toast.error('Failed to load boards');
-    }
-  }, [wsId, apiCall]);
-
-  // Fetch data
-  const fetchData = useCallback(async () => {
-    try {
-      const [categoriesRes, runningRes, recentRes, statsRes, templatesRes] =
-        await Promise.all([
-          apiCall(`/api/v1/workspaces/${wsId}/time-tracking/categories`),
-          apiCall(
-            `/api/v1/workspaces/${wsId}/time-tracking/sessions?type=running`
-          ),
-          apiCall(
-            `/api/v1/workspaces/${wsId}/time-tracking/sessions?type=recent&limit=20`
-          ),
-          apiCall(
-            `/api/v1/workspaces/${wsId}/time-tracking/sessions?type=stats`
-          ),
-          apiCall(`/api/v1/workspaces/${wsId}/time-tracking/templates`),
-        ]);
-
-      setCategories(categoriesRes.categories || []);
-      setRecentSessions(recentRes.sessions || []);
-      setTimerStats(statsRes.stats);
-      setTemplates(templatesRes.templates || []);
-
-      if (runningRes.session) {
-        setCurrentSession(runningRes.session);
-        setIsRunning(true);
-        const elapsed = Math.floor(
-          (Date.now() - new Date(runningRes.session.start_time).getTime()) /
-            1000
-        );
-        setElapsedTime(elapsed);
-      } else {
-        setCurrentSession(null);
-        setIsRunning(false);
-        setElapsedTime(0);
-      }
-    } catch (error) {
-      console.error('Error fetching time tracking data:', error);
-      toast.error('Failed to load time tracking data');
-    }
-  }, [wsId, apiCall]);
-
-  // Timer effect
-  useEffect(() => {
-    let interval: ReturnType<typeof setInterval>;
-
-    if (isRunning && currentSession) {
-      interval = setInterval(() => {
-        const elapsed = Math.floor(
-          (Date.now() - new Date(currentSession.start_time).getTime()) / 1000
-        );
-        setElapsedTime(elapsed);
-      }, 1000);
-    }
-
-    return () => clearInterval(interval);
-  }, [isRunning, currentSession]);
-
-  // Load data on mount and when dialog opens
-  useEffect(() => {
-    if (isOpen) {
-      fetchData();
-      fetchBoards();
-    }
-  }, [isOpen, fetchData, fetchBoards]);
-
-  // Create new task
-  const createTask = async () => {
-    if (!newTaskName.trim()) {
-      toast.error('Please enter a task name');
-      return;
-    }
-
-    if (!selectedListId) {
-      toast.error('Please select a list');
-      return;
-    }
-
-    setIsCreatingTask(true);
-
-    try {
-      const response = await apiCall(`/api/v1/workspaces/${wsId}/tasks`, {
-        method: 'POST',
-        body: JSON.stringify({
-          name: newTaskName,
-          description: newTaskDescription || null,
-          listId: selectedListId,
-        }),
-      });
-
-      const newTask = response.task;
-      setSelectedTaskId(newTask.id);
-
-      // In task mode, set the title to the working format
-      // In manual mode, keep the user's original title
-      if (sessionMode === 'task') {
-        setNewSessionTitle(`Working on: ${newTask.name}`);
-      }
-
-      setShowTaskCreation(false);
-      setNewTaskName('');
-      setNewTaskDescription('');
-      setSelectedBoardId('');
-      setSelectedListId('');
-      setShowTaskSuggestion(false);
-
-      toast.success(`Task "${newTask.name}" created successfully!`);
-
-      // In task mode, start timer automatically
-      // In manual mode, just link the task and let user start manually
-      if (sessionMode === 'task') {
-        await startTimerWithTask(newTask.id, newTask.name);
-      }
-    } catch (error) {
-      console.error('Error creating task:', error);
-      toast.error('Failed to create task');
-    } finally {
-      setIsCreatingTask(false);
-    }
-  };
-
-  // Start timer with task
-  const startTimerWithTask = useCallback(
-    async (taskId: string, taskName: string) => {
-      setIsLoading(true);
-
-      try {
-        const response = await apiCall(
-          `/api/v1/workspaces/${wsId}/time-tracking/sessions`,
-          {
-            method: 'POST',
-            body: JSON.stringify({
-              title: `Working on: ${taskName}`,
-              description: newSessionDescription || null,
-              categoryId: selectedCategoryId || null,
-              taskId: taskId,
-            }),
-          }
-        );
-
-        setCurrentSession(response.session);
-        setIsRunning(true);
-        setElapsedTime(0);
-        setNewSessionTitle('');
-        setNewSessionDescription('');
-        setSelectedCategoryId('');
-        setSelectedTaskId('');
-
-        // Invalidate the running session query to update sidebar
-        queryClient.invalidateQueries({
-          queryKey: ['running-time-session', wsId],
-        });
-
-        fetchData();
-        toast.success('Timer started!');
-      } catch (error) {
-        console.error('Error starting timer:', error);
-        toast.error('Failed to start timer');
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [
-      wsId,
-      queryClient,
-      newSessionDescription,
-      selectedCategoryId,
-      fetchData,
-      apiCall,
-    ]
-  );
-
-  // Start timer
-  const startTimer = useCallback(async () => {
-    if (sessionMode === 'task' && selectedTaskId) {
-      const selectedTask = tasks.find((t) => t.id === selectedTaskId);
-      if (selectedTask) {
-        await startTimerWithTask(
-          selectedTaskId,
-          selectedTask.name || 'Untitled Task'
-        );
-        return;
-      }
-    }
-
-    if (sessionMode === 'task' && !selectedTaskId) {
-      setShowTaskCreation(true);
-      return;
-    }
-
-    if (!newSessionTitle.trim()) {
-      toast.error('Please enter a title for your time session');
-      return;
-    }
-
-    setIsLoading(true);
-
-    try {
-      const response = await apiCall(
-        `/api/v1/workspaces/${wsId}/time-tracking/sessions`,
-        {
-          method: 'POST',
-          body: JSON.stringify({
-            title: newSessionTitle,
-            description: newSessionDescription || null,
-            categoryId: selectedCategoryId || null,
-            taskId: selectedTaskId || null,
-          }),
-        }
-      );
-
-      setCurrentSession(response.session);
-      setIsRunning(true);
-      setElapsedTime(0);
-      setNewSessionTitle('');
-      setNewSessionDescription('');
-      setSelectedCategoryId('');
-      setSelectedTaskId('');
-
-      // Invalidate the running session query to update sidebar
-      queryClient.invalidateQueries({
-        queryKey: ['running-time-session', wsId],
-      });
-
-      fetchData();
-      toast.success('Timer started!');
-    } catch (error) {
-      console.error('Error starting timer:', error);
-      toast.error('Failed to start timer');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [
-    sessionMode,
-    selectedTaskId,
-    tasks,
-    newSessionTitle,
-    newSessionDescription,
-    selectedCategoryId,
-    wsId,
-    queryClient,
-    fetchData,
-    apiCall,
-    startTimerWithTask,
-  ]);
-
-  // Stop timer
-  const stopTimer = useCallback(async () => {
-    if (!currentSession) return;
-
-    setIsLoading(true);
-
-    try {
-      const response = await apiCall(
-        `/api/v1/workspaces/${wsId}/time-tracking/sessions/${currentSession.id}`,
-        {
-          method: 'PATCH',
-          body: JSON.stringify({ action: 'stop' }),
-        }
-      );
-
-      const completedSession = response.session;
-      setJustCompleted(completedSession);
-      setCurrentSession(null);
-      setIsRunning(false);
-      setElapsedTime(0);
-      setActiveTab('recent'); // Switch to recent tab to see completed session
-
-      // Show completion celebration
-      setTimeout(() => setJustCompleted(null), 3000);
-
-      // Invalidate the running session query to update sidebar
-      queryClient.invalidateQueries({
-        queryKey: ['running-time-session', wsId],
-      });
-
-      fetchData();
-      toast.success(
-        `Session completed! Tracked ${formatDuration(completedSession.duration_seconds || 0)}`,
-        {
-          duration: 4000,
-        }
-      );
-    } catch (error) {
-      console.error('Error stopping timer:', error);
-      toast.error('Failed to stop timer');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [currentSession, wsId, queryClient, fetchData, apiCall, formatDuration]);
-
-  // Pause timer
-  const pauseTimer = useCallback(async () => {
-    if (!currentSession) return;
-
-    setIsLoading(true);
-
-    try {
-      await apiCall(
-        `/api/v1/workspaces/${wsId}/time-tracking/sessions/${currentSession.id}`,
-        {
-          method: 'PATCH',
-          body: JSON.stringify({ action: 'pause' }),
-        }
-      );
-
-      setCurrentSession(null);
-      setIsRunning(false);
-      setElapsedTime(0);
-
-      fetchData();
-      toast.success('Timer paused');
-    } catch (error) {
-      console.error('Error pausing timer:', error);
-      toast.error('Failed to pause timer');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [currentSession, wsId, fetchData, apiCall]);
-
-  // Resume session (creates new session with same details)
-  const resumeSession = async (session: SessionWithRelations) => {
-    setActionStates((prev) => ({ ...prev, [`resume-${session.id}`]: true }));
-
-    try {
-      const response = await apiCall(
-        `/api/v1/workspaces/${wsId}/time-tracking/sessions/${session.id}`,
-        {
-          method: 'PATCH',
-          body: JSON.stringify({ action: 'resume' }),
-        }
-      );
-
-      setCurrentSession(response.session);
-      setIsRunning(true);
-      setElapsedTime(0);
-      setActiveTab('current'); // Switch to current tab
-
-      // Invalidate the running session query to update sidebar
-      queryClient.invalidateQueries({
-        queryKey: ['running-time-session', wsId],
-      });
-
-      fetchData();
-      toast.success(`Started new session: "${session.title}"`);
-    } catch (error) {
-      console.error('Error resuming session:', error);
-      toast.error('Failed to start new session');
-    } finally {
-      setActionStates((prev) => ({ ...prev, [`resume-${session.id}`]: false }));
-    }
-  };
-
-  // Start from template
-  const startFromTemplate = async (template: SessionTemplate) => {
-    setNewSessionTitle(template.title);
-    setNewSessionDescription(template.description || '');
-    setSelectedCategoryId(template.category_id || '');
-    setSelectedTaskId(template.task_id || '');
-    setActiveTab('current');
-  };
-
-  // Duplicate session
-  const duplicateSession = async (session: SessionWithRelations) => {
-    setNewSessionTitle(session.title);
-    setNewSessionDescription(session.description || '');
-    setSelectedCategoryId(session.category_id || '');
-    setSelectedTaskId(session.task_id || '');
-    setActiveTab('current');
-    toast.success('Session settings copied');
-  };
-
-  // Edit session
-  // const openEditDialog = (session: SessionWithRelations) => {
-  //   setSessionToEdit(session);
-  //   setEditTitle(session.title);
-  //   setEditDescription(session.description || '');
-  //   setEditCategoryId(session.category_id || '');
-  //   setEditTaskId(session.task_id || '');
-  //   setEditStartTime(new Date(session.start_time).toISOString().slice(0, 16));
-  //   setEditEndTime(
-  //     session.end_time
-  //       ? new Date(session.end_time).toISOString().slice(0, 16)
-  //       : ''
-  //   );
-  // };
-
-  const saveEdit = async () => {
-    if (!sessionToEdit) return;
-
-    setIsEditing(true);
-
-    try {
-      await apiCall(
-        `/api/v1/workspaces/${wsId}/time-tracking/sessions/${sessionToEdit.id}`,
-        {
-          method: 'PATCH',
-          body: JSON.stringify({
-            action: 'edit',
-            title: editTitle,
-            description: editDescription,
-            categoryId: editCategoryId || null,
-            taskId: editTaskId || null,
-            startTime: editStartTime
-              ? new Date(editStartTime).toISOString()
-              : undefined,
-            endTime: editEndTime
-              ? new Date(editEndTime).toISOString()
-              : undefined,
-          }),
-        }
-      );
-
-      setSessionToEdit(null);
-      fetchData();
-      toast.success('Session updated successfully');
-    } catch (error) {
-      console.error('Error updating session:', error);
-      toast.error('Failed to update session');
-    } finally {
-      setIsEditing(false);
-    }
-  };
-
-  // Delete session
-  const deleteSession = async () => {
-    if (!sessionToDelete) return;
-
-    setIsDeleting(true);
-
-    try {
-      await apiCall(
-        `/api/v1/workspaces/${wsId}/time-tracking/sessions/${sessionToDelete.id}`,
-        {
-          method: 'DELETE',
-        }
-      );
-
-      setSessionToDelete(null);
-      fetchData();
-      toast.success('Time session deleted successfully');
-    } catch (error) {
-      console.error('Error deleting session:', error);
-      toast.error('Failed to delete session');
-    } finally {
-      setIsDeleting(false);
-    }
-  };
-
-  const getCategoryColor = (color: string) => {
-    const colorMap: Record<string, string> = {
-      RED: 'bg-dynamic-red/80',
-      BLUE: 'bg-dynamic-blue/80',
-      GREEN: 'bg-dynamic-green/80',
-      YELLOW: 'bg-dynamic-yellow/80',
-      ORANGE: 'bg-dynamic-orange/80',
-      PURPLE: 'bg-dynamic-purple/80',
-      PINK: 'bg-dynamic-pink/80',
-      INDIGO: 'bg-dynamic-indigo/80',
-      CYAN: 'bg-dynamic-cyan/80',
-      GRAY: 'bg-dynamic-gray/80',
-    };
-    return colorMap[color] || 'bg-dynamic-blue/80';
-  };
-
-  const filteredSessions = recentSessions.filter((session) => {
-    if (filterCategoryId && session.category_id !== filterCategoryId)
-      return false;
-    if (filterTaskId && session.task_id !== filterTaskId) return false;
-    return true;
-  });
-
-  // Get lists for selected board
-  const selectedBoard = boards.find((board) => board.id === selectedBoardId);
-  const availableLists = selectedBoard?.task_lists || [];
-
-  // Handle task selection change
-  const handleTaskSelectionChange = (taskId: string) => {
-    setSelectedTaskId(taskId);
-    if (taskId) {
-      const selectedTask = tasks.find((t) => t.id === taskId);
-      if (selectedTask) {
-        setNewSessionTitle(`Working on: ${selectedTask.name}`);
-      }
-    } else {
-      setNewSessionTitle('');
-    }
-  };
-
-  // Handle session mode change with cleanup
-  const handleSessionModeChange = (mode: 'task' | 'manual') => {
-    const previousMode = sessionMode;
-    setSessionMode(mode);
-
-    // Clear form state when switching modes for better UX
-    setNewSessionTitle('');
-    setNewSessionDescription('');
-    setSelectedTaskId('');
-    setShowTaskSuggestion(false);
-
-    // Reset any temporary states
-    setSelectedCategoryId('');
-
-    // Provide helpful feedback
-    if (previousMode !== mode) {
-      if (mode === 'manual') {
-        toast.success('Switched to manual mode - start typing freely!', {
-          duration: 2000,
-        });
-      } else {
-        toast.success(
-          'Switched to task-based mode - select or create a task!',
-          {
-            duration: 2000,
-          }
-        );
-      }
-    }
-  };
-
-  // Handle manual title change with task suggestion
-  const handleManualTitleChange = (title: string) => {
-    setNewSessionTitle(title);
-
-    // Check if title matches any existing task
-    const matchingTask = tasks.find(
-      (task) =>
-        task.name?.toLowerCase().includes(title.toLowerCase()) &&
-        title.length > 2
-    );
-
-    if (matchingTask && title.length > 2) {
-      setSelectedTaskId(matchingTask.id || '');
-      setShowTaskSuggestion(false);
-    } else if (title.length > 2 && !selectedTaskId) {
-      // Suggest creating a new task if title doesn't match any existing task
-      setShowTaskSuggestion(true);
-    } else {
-      setShowTaskSuggestion(false);
-    }
-  };
-
-  // Create task from manual session
-  const createTaskFromManualSession = async () => {
-    setNewTaskName(newSessionTitle);
-    setShowTaskCreation(true);
-    setShowTaskSuggestion(false);
-  };
-
-  // Keyboard shortcuts (placed after function declarations)
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (!isOpen) return;
-
-      // Ctrl/Cmd + Enter to start/stop timer
-      if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
-        event.preventDefault();
-        if (isRunning) {
-          stopTimer();
-        } else if (newSessionTitle.trim()) {
-          startTimer();
-        }
-      }
-
-      // Escape to close dialog
-      if (event.key === 'Escape') {
-        setIsOpen(false);
-      }
-
-      // Ctrl/Cmd + P to pause
-      if ((event.ctrlKey || event.metaKey) && event.key === 'p' && isRunning) {
-        event.preventDefault();
-        pauseTimer();
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, isRunning, newSessionTitle, startTimer, stopTimer, pauseTimer]);
-
-  return (
-    <>
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogTrigger asChild>
-          <Button
-            variant={isRunning ? 'destructive' : 'outline'}
-            size="sm"
-            className={cn('gap-2', 'relative w-full')}
-          >
-            {isRunning && (
-              <div className="absolute inset-0 animate-pulse bg-linear-to-r from-red-600/20 to-transparent" />
-            )}
-            <div className="relative flex items-center gap-2">
-              {isRunning ? (
-                <>
-                  <Square className="h-3 w-3 animate-pulse" />
-                  <span className="@[100px]:inline hidden font-mono">
-                    {formatTime(elapsedTime)}
-                  </span>
-                  <span className="@[100px]:hidden font-mono">
-                    {Math.floor(elapsedTime / 60)}m
-                  </span>
-                </>
-              ) : (
-                <>
-                  <Timer className="h-3 w-3" />
-                  <span className="@[100px]:inline hidden">Time Tracker</span>
-                  <span className="@[100px]:hidden">Timer</span>
-                </>
-              )}
-            </div>
-          </Button>
-        </DialogTrigger>
-
-        <DialogContent className="@container max-h-[95vh] max-w-7xl overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <Timer className="h-5 w-5" />
-              Time Tracker
-            </DialogTitle>
-            <DialogDescription className="space-y-1">
-              <span>
-                Track your time across tasks and projects with detailed
-                analytics
-              </span>
-              <span className="mt-2 text-muted-foreground text-xs">
-                <br />•{' '}
-                <span className="rounded bg-muted px-1 py-0.5 text-xs">
-                  {modKey} + Enter
-                </span>{' '}
-                to start/stop
-                <br />•{' '}
-                <span className="rounded bg-muted px-1 py-0.5 text-xs">
-                  {modKey} + P
-                </span>{' '}
-                to pause
-                <br />•{' '}
-                <span className="rounded bg-muted px-1 py-0.5 text-xs">
-                  Esc
-                </span>{' '}
-                to close
-              </span>
-            </DialogDescription>
-          </DialogHeader>
-
-          <Tabs
-            value={activeTab}
-            onValueChange={(v) =>
-              setActiveTab(v as 'current' | 'recent' | 'history')
-            }
-          >
-            <TabsList className="grid w-full grid-cols-3">
-              <TabsTrigger value="current" className="flex items-center gap-2">
-                <Play className="h-4 w-4" />
-                Current
-              </TabsTrigger>
-              <TabsTrigger value="recent" className="flex items-center gap-2">
-                <Clock className="h-4 w-4" />
-                Recent
-              </TabsTrigger>
-              <TabsTrigger value="history" className="flex items-center gap-2">
-                <History className="h-4 w-4" />
-                History
-              </TabsTrigger>
-            </TabsList>
-
-            <div className="grid @5xl:grid-cols-2 grid-cols-1 gap-6">
-              {/* Current Session Tab */}
-              <TabsContent value="current" className="@container space-y-4">
-                <Card className="transition-all hover:shadow-md">
-                  <CardHeader className="pb-3">
-                    <CardTitle className="flex items-center gap-2 @lg:text-lg text-base">
-                      <Clock className="@lg:h-5 h-4 @lg:w-5 w-4" />
-                      Current Session
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    {currentSession ? (
-                      <div className="space-y-4 text-center">
-                        <div className="relative overflow-hidden rounded-lg bg-linear-to-br from-red-50 to-red-100 @lg:p-6 p-4 dark:from-red-950/20 dark:to-red-900/20">
-                          <div className="absolute inset-0 animate-pulse bg-linear-to-r from-red-500/10 to-transparent opacity-30"></div>
-                          <div className="relative">
-                            <div className="font-bold font-mono @lg:text-4xl text-3xl text-red-600 transition-all duration-300 dark:text-red-400">
-                              {formatTime(elapsedTime)}
-                            </div>
-                            <div className="mt-2 flex items-center gap-2 @lg:text-sm text-red-600/70 text-xs dark:text-red-400/70">
-                              <div className="h-2 w-2 animate-pulse rounded-full bg-red-500"></div>
-                              Started at{' '}
-                              {new Date(
-                                currentSession.start_time
-                              ).toLocaleTimeString()}
-                            </div>
-                          </div>
-                        </div>
-
-                        <div className="text-left">
-                          <h3 className="font-medium @lg:text-base text-sm">
-                            {currentSession.title}
-                          </h3>
-                          {currentSession.description && (
-                            <p className="mt-1 @lg:text-sm text-muted-foreground text-xs">
-                              {currentSession.description}
-                            </p>
-                          )}
-                          <div className="mt-2 flex flex-wrap @lg:gap-2 gap-1">
-                            {currentSession.category && (
-                              <Badge
-                                className={cn(
-                                  '@lg:text-sm text-xs',
-                                  getCategoryColor(
-                                    currentSession.category.color || 'BLUE'
-                                  )
-                                )}
-                              >
-                                {currentSession.category.name}
-                              </Badge>
-                            )}
-                            {currentSession.task && (
-                              <div className="flex items-center gap-2">
-                                <div className="flex items-center gap-1.5 rounded-md border border-dynamic-blue/20 bg-linear-to-r from-dynamic-blue/10 to-dynamic-blue/5 px-2 py-1">
-                                  <CheckCircle className="h-3 w-3 text-dynamic-blue" />
-                                  <span className="font-medium @lg:text-sm text-dynamic-blue text-xs">
-                                    {currentSession.task.name}
-                                  </span>
-                                </div>
-                              </div>
-                            )}
-                          </div>
-                          {currentSession.task &&
-                            (() => {
-                              const taskWithDetails = tasks.find(
-                                (t) => t.id === currentSession.task?.id
-                              );
-                              return taskWithDetails?.board_name &&
-                                taskWithDetails?.list_name ? (
-                                <div className="mt-1 flex items-center gap-2 text-muted-foreground text-xs">
-                                  <div className="flex items-center gap-1">
-                                    <MapPin className="h-3 w-3" />
-                                    <span>{taskWithDetails.board_name}</span>
-                                  </div>
-                                  <span>•</span>
-                                  <div className="flex items-center gap-1">
-                                    <Tag className="h-3 w-3" />
-                                    <span>{taskWithDetails.list_name}</span>
-                                  </div>
-                                </div>
-                              ) : null;
-                            })()}
-                        </div>
-
-                        <div className="flex gap-2">
-                          <Button
-                            onClick={pauseTimer}
-                            disabled={isLoading}
-                            variant="outline"
-                            className="flex-1"
-                          >
-                            <Pause className="mr-2 h-4 w-4" />
-                            Pause
-                          </Button>
-                          <Button
-                            onClick={stopTimer}
-                            disabled={isLoading}
-                            variant="destructive"
-                            className="flex-1"
-                          >
-                            <Square className="mr-2 h-4 w-4" />
-                            Stop
-                          </Button>
-                        </div>
-                      </div>
-                    ) : (
-                      <div className="space-y-4">
-                        <div className="rounded-lg border-2 border-muted-foreground/25 border-dashed @lg:p-6 p-4 text-center">
-                          <Clock className="mx-auto mb-2 @lg:h-12 h-8 @lg:w-12 w-8 text-muted-foreground" />
-                          <p className="@lg:text-base text-muted-foreground text-sm">
-                            Ready to start tracking time
-                          </p>
-                        </div>
-
-                        {/* Session Mode Toggle */}
-                        <Tabs
-                          value={sessionMode}
-                          onValueChange={(v) =>
-                            handleSessionModeChange(v as 'task' | 'manual')
-                          }
-                        >
-                          <TabsList className="grid h-full w-full grid-cols-2 bg-muted/50">
-                            <TabsTrigger
-                              value="task"
-                              className="flex items-center gap-2 data-[state=active]:bg-background data-[state=active]:shadow-sm"
-                            >
-                              <CheckCircle className="h-4 w-4" />
-                              <div className="flex flex-col items-start">
-                                <span className="font-medium text-sm">
-                                  Task-based
-                                </span>
-                                <span className="text-muted-foreground text-xs">
-                                  Select or create task
-                                </span>
-                              </div>
-                            </TabsTrigger>
-                            <TabsTrigger
-                              value="manual"
-                              className="flex items-center gap-2 data-[state=active]:bg-background data-[state=active]:shadow-sm"
-                            >
-                              <Timer className="h-4 w-4" />
-                              <div className="flex flex-col items-start">
-                                <span className="font-medium text-sm">
-                                  Manual
-                                </span>
-                                <span className="text-muted-foreground text-xs">
-                                  Free-form entry
-                                </span>
-                              </div>
-                            </TabsTrigger>
-                          </TabsList>
-
-                          <TabsContent
-                            value="task"
-                            className="fade-in-50 slide-in-from-bottom-2 animate-in space-y-4 duration-300"
-                          >
-                            <div className="space-y-3">
-                              <Label className="font-medium text-sm">
-                                Select a task to track time for:
-                              </Label>
-                              <Select
-                                value={selectedTaskId}
-                                onValueChange={handleTaskSelectionChange}
-                              >
-                                <SelectTrigger className="@lg:text-base text-sm transition-all duration-200">
-                                  <SelectValue placeholder="Choose a task or create new..." />
-                                </SelectTrigger>
-                                <SelectContent className="w-100">
-                                  {tasks.map((task) => (
-                                    <SelectItem
-                                      key={task.id}
-                                      value={task.id || ''}
-                                      className="p-0"
-                                    >
-                                      <div className="flex w-full items-start gap-3 p-3">
-                                        <div className="flex h-8 w-8 items-center justify-center rounded-lg border border-dynamic-blue/30 bg-linear-to-br from-dynamic-blue/20 to-dynamic-blue/10">
-                                          <CheckCircle className="h-4 w-4 text-dynamic-blue" />
-                                        </div>
-                                        <div className="min-w-0 flex-1">
-                                          <div className="flex items-center gap-2">
-                                            <span className="font-medium text-sm">
-                                              {task.name}
-                                            </span>
-                                            <ExternalLink className="h-3 w-3 text-muted-foreground" />
-                                          </div>
-                                          {task.description && (
-                                            <p className="mt-1 line-clamp-2 text-muted-foreground text-xs">
-                                              {task.description}
-                                            </p>
-                                          )}
-                                          {task.board_name &&
-                                            task.list_name && (
-                                              <div className="mt-2 flex items-center gap-2">
-                                                <div className="flex items-center gap-1.5 rounded-md bg-muted/60 px-2 py-1">
-                                                  <MapPin className="h-3 w-3 text-muted-foreground" />
-                                                  <span className="font-medium text-xs">
-                                                    {task.board_name}
-                                                  </span>
-                                                </div>
-                                                <div className="flex items-center gap-1.5 rounded-md border border-dynamic-green/20 bg-linear-to-r from-dynamic-green/10 to-dynamic-green/5 px-2 py-1">
-                                                  <Tag className="h-3 w-3 text-dynamic-green" />
-                                                  <span className="font-medium text-dynamic-green text-xs">
-                                                    {task.list_name}
-                                                  </span>
-                                                </div>
-                                              </div>
-                                            )}
-                                        </div>
-                                      </div>
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-
-                              {!selectedTaskId && (
-                                <div className="text-center">
-                                  <p className="mb-2 text-muted-foreground text-sm">
-                                    No task selected? We'll help you create one!
-                                  </p>
-                                </div>
-                              )}
-                            </div>
-
-                            <Textarea
-                              placeholder="Add session notes (optional)"
-                              value={newSessionDescription}
-                              onChange={(e) =>
-                                setNewSessionDescription(e.target.value)
-                              }
-                              rows={2}
-                              className="@lg:text-base text-sm"
-                            />
-
-                            <Select
-                              value={selectedCategoryId}
-                              onValueChange={setSelectedCategoryId}
-                            >
-                              <SelectTrigger className="@lg:text-base text-sm">
-                                <SelectValue placeholder="Category (optional)" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {categories.map((category) => (
-                                  <SelectItem
-                                    key={category.id}
-                                    value={category.id}
-                                  >
-                                    <div className="flex items-center gap-2">
-                                      <div
-                                        className={cn(
-                                          'h-3 w-3 rounded-full',
-                                          getCategoryColor(
-                                            category.color || 'BLUE'
-                                          )
-                                        )}
-                                      />
-                                      {category.name}
-                                    </div>
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-
-                            <Button
-                              onClick={startTimer}
-                              disabled={isLoading}
-                              className="w-full border border-border bg-muted text-foreground hover:border-accent hover:bg-muted/80 dark:bg-muted dark:text-foreground dark:hover:bg-accent"
-                              size="lg"
-                            >
-                              <Play className="mr-2 h-4 w-4" />
-                              {selectedTaskId
-                                ? 'Start Timer'
-                                : 'Create Task & Start Timer'}
-                            </Button>
-                          </TabsContent>
-
-                          <TabsContent
-                            value="manual"
-                            className="fade-in-50 slide-in-from-bottom-2 animate-in space-y-4 duration-300"
-                          >
-                            <div className="space-y-2">
-                              <Input
-                                placeholder="What are you working on?"
-                                value={newSessionTitle}
-                                onChange={(e) =>
-                                  handleManualTitleChange(e.target.value)
-                                }
-                                className="@lg:text-base text-sm"
-                                autoFocus={sessionMode === 'manual'}
-                              />
-
-                              {/* Task suggestion */}
-                              {showTaskSuggestion &&
-                                newSessionTitle.length > 2 && (
-                                  <div className="rounded-lg border border-dynamic-blue/30 bg-linear-to-r from-dynamic-blue/10 to-dynamic-blue/5 p-3 shadow-sm">
-                                    <div className="flex items-start justify-between gap-3">
-                                      <div className="flex items-start gap-2">
-                                        <div className="rounded-full bg-dynamic-blue/20 p-1">
-                                          <Sparkles className="h-3 w-3 text-dynamic-blue" />
-                                        </div>
-                                        <div className="flex-1">
-                                          <span className="font-medium text-dynamic-blue text-sm">
-                                            Convert to task?
-                                          </span>
-                                          <p className="mt-0.5 text-muted-foreground text-xs">
-                                            Create "{newSessionTitle}" as a new
-                                            task for better organization and
-                                            tracking.
-                                          </p>
-                                        </div>
-                                      </div>
-                                      <Button
-                                        variant="outline"
-                                        size="sm"
-                                        onClick={createTaskFromManualSession}
-                                        className="h-8 border-dynamic-blue/30 bg-dynamic-blue/10 text-dynamic-blue text-xs hover:bg-dynamic-blue/20"
-                                      >
-                                        Create Task
-                                      </Button>
-                                    </div>
-                                  </div>
-                                )}
-
-                              {/* Show selected task info */}
-                              {selectedTaskId && !showTaskSuggestion && (
-                                <div className="rounded-lg border border-dynamic-green/30 bg-linear-to-r from-dynamic-green/5 to-dynamic-green/3 p-4 shadow-sm">
-                                  <div className="flex items-start gap-3">
-                                    <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-dynamic-green/30 bg-linear-to-br from-dynamic-green/20 to-dynamic-green/10">
-                                      <CheckCircle className="h-5 w-5 text-dynamic-green" />
-                                    </div>
-                                    <div className="min-w-0 flex-1">
-                                      <div className="flex items-center justify-between gap-2">
-                                        <div className="flex items-center gap-2">
-                                          <span className="font-semibold text-dynamic-green text-sm">
-                                            Task Linked Successfully
-                                          </span>
-                                          <Button
-                                            variant="ghost"
-                                            size="sm"
-                                            className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
-                                          >
-                                            <ExternalLink className="h-3 w-3" />
-                                          </Button>
-                                        </div>
-                                        <Button
-                                          variant="ghost"
-                                          size="sm"
-                                          onClick={() => {
-                                            setSelectedTaskId('');
-                                            setShowTaskSuggestion(
-                                              newSessionTitle.length > 2
-                                            );
-                                          }}
-                                          className="h-7 px-2 text-muted-foreground text-xs hover:text-foreground"
-                                        >
-                                          Unlink
-                                        </Button>
-                                      </div>
-                                      {(() => {
-                                        const selectedTask = tasks.find(
-                                          (t) => t.id === selectedTaskId
-                                        );
-                                        return selectedTask ? (
-                                          <div className="mt-2 space-y-2">
-                                            <p className="font-medium text-foreground text-sm">
-                                              {selectedTask.name}
-                                            </p>
-                                            {selectedTask.description && (
-                                              <p className="line-clamp-2 text-muted-foreground text-xs">
-                                                {selectedTask.description}
-                                              </p>
-                                            )}
-                                            {selectedTask.board_name &&
-                                              selectedTask.list_name && (
-                                                <div className="flex items-center gap-2">
-                                                  <div className="flex items-center gap-1.5 rounded-md bg-muted/60 px-2 py-1">
-                                                    <MapPin className="h-3 w-3 text-muted-foreground" />
-                                                    <span className="font-medium text-xs">
-                                                      {selectedTask.board_name}
-                                                    </span>
-                                                  </div>
-                                                  <div className="flex items-center gap-1.5 rounded-md border border-dynamic-green/20 bg-linear-to-r from-dynamic-green/10 to-dynamic-green/5 px-2 py-1">
-                                                    <Tag className="h-3 w-3 text-dynamic-green" />
-                                                    <span className="font-medium text-dynamic-green text-xs">
-                                                      {selectedTask.list_name}
-                                                    </span>
-                                                  </div>
-                                                </div>
-                                              )}
-                                            <p className="text-dynamic-green/80 text-xs">
-                                              Time will be automatically tracked
-                                              for this task
-                                            </p>
-                                          </div>
-                                        ) : null;
-                                      })()}
-                                    </div>
-                                  </div>
-                                </div>
-                              )}
-                            </div>
-
-                            <Textarea
-                              placeholder="Add description (optional)"
-                              value={newSessionDescription}
-                              onChange={(e) =>
-                                setNewSessionDescription(e.target.value)
-                              }
-                              rows={3}
-                              className="@lg:text-base text-sm"
-                            />
-
-                            <Select
-                              value={selectedCategoryId}
-                              onValueChange={setSelectedCategoryId}
-                            >
-                              <SelectTrigger className="@lg:text-base text-sm">
-                                <SelectValue placeholder="Category (optional)" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {categories.map((category) => (
-                                  <SelectItem
-                                    key={category.id}
-                                    value={category.id}
-                                  >
-                                    <div className="flex items-center gap-2">
-                                      <div
-                                        className={cn(
-                                          'h-3 w-3 rounded-full',
-                                          getCategoryColor(
-                                            category.color || 'BLUE'
-                                          )
-                                        )}
-                                      />
-                                      {category.name}
-                                    </div>
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-
-                            <Button
-                              onClick={startTimer}
-                              disabled={!newSessionTitle.trim() || isLoading}
-                              className="w-full border border-border bg-muted text-foreground hover:border-accent hover:bg-muted/80 dark:bg-muted dark:text-foreground dark:hover:bg-accent"
-                              size="lg"
-                            >
-                              <Play className="mr-2 h-4 w-4" />
-                              Start Timer
-                            </Button>
-                          </TabsContent>
-                        </Tabs>
-
-                        {/* Quick Actions */}
-                        {(recentSessions.length > 0 ||
-                          templates.length > 0) && (
-                          <div className="space-y-3">
-                            <div className="flex items-center justify-between">
-                              <Label className="text-muted-foreground text-xs">
-                                Quick Start:
-                              </Label>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() =>
-                                  setShowQuickActions(!showQuickActions)
-                                }
-                                className="h-6 px-2 text-xs"
-                              >
-                                {showQuickActions ? 'Less' : 'More'}
-                              </Button>
-                            </div>
-
-                            <div className="space-y-2">
-                              {/* Most recent session */}
-                              {recentSessions.length > 0 &&
-                                recentSessions[0] && (
-                                  <Button
-                                    variant="outline"
-                                    size="sm"
-                                    onClick={() => {
-                                      const session = recentSessions[0];
-                                      if (session) {
-                                        duplicateSession(session);
-                                      }
-                                    }}
-                                    className="w-full justify-start text-xs"
-                                  >
-                                    <RotateCcw className="mr-2 h-3 w-3" />
-                                    Repeat: {recentSessions[0].title}
-                                  </Button>
-                                )}
-
-                              {/* Templates */}
-                              {showQuickActions &&
-                                templates.slice(0, 3).map((template) => (
-                                  <Button
-                                    key={`template-${template.title}`}
-                                    variant="outline"
-                                    size="sm"
-                                    onClick={() => startFromTemplate(template)}
-                                    className="w-full justify-start text-xs"
-                                  >
-                                    <Copy className="mr-2 h-3 w-3" />
-                                    {template.title}
-                                    <Badge
-                                      variant="secondary"
-                                      className="ml-auto text-xs"
-                                    >
-                                      {template.usage_count}×
-                                    </Badge>
-                                  </Button>
-                                ))}
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-
-                {/* Completion Celebration */}
-                {justCompleted && (
-                  <div className="fade-in fixed inset-0 z-50 flex animate-in items-center justify-center bg-black/20 backdrop-blur-sm duration-300">
-                    <div className="zoom-in animate-in rounded-lg border bg-background p-6 shadow-xl duration-300">
-                      <div className="text-center">
-                        <CheckCircle className="mx-auto mb-4 h-12 w-12 animate-pulse text-green-500" />
-                        <h3 className="mb-2 font-semibold text-lg">
-                          Session Completed!
-                        </h3>
-                        <p className="mb-1 text-muted-foreground">
-                          {justCompleted.title}
-                        </p>
-                        <p className="font-medium text-green-600 text-sm">
-                          {formatDuration(justCompleted.duration_seconds || 0)}{' '}
-                          tracked
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                )}
-
-                {/* Stats Cards */}
-                <div className="grid grid-cols-3 @lg:gap-4 gap-2">
-                  <Card className="group cursor-pointer transition-all hover:scale-105 hover:shadow-md">
-                    <CardContent className="@lg:p-4 p-3">
-                      <div className="flex items-center gap-2">
-                        <Calendar className="h-4 w-4 text-blue-500 transition-transform group-hover:scale-110" />
-                        <div className="min-w-0">
-                          <p className="@lg:text-sm text-muted-foreground text-xs">
-                            Today
-                          </p>
-                          <p className="truncate font-medium @lg:text-base text-sm transition-all">
-                            {formatDuration(timerStats.todayTime)}
-                          </p>
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
-
-                  <Card className="group cursor-pointer transition-all hover:scale-105 hover:shadow-md">
-                    <CardContent className="@lg:p-4 p-3">
-                      <div className="flex items-center gap-2">
-                        <TrendingUp className="h-4 w-4 text-green-500 transition-transform group-hover:scale-110" />
-                        <div className="min-w-0">
-                          <p className="@lg:text-sm text-muted-foreground text-xs">
-                            Week
-                          </p>
-                          <p className="truncate font-medium @lg:text-base text-sm transition-all">
-                            {formatDuration(timerStats.weekTime)}
-                          </p>
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
-
-                  <Card className="group cursor-pointer transition-all hover:scale-105 hover:shadow-md">
-                    <CardContent className="@lg:p-4 p-3">
-                      <div className="flex items-center gap-2">
-                        <Zap className="h-4 w-4 text-purple-500 transition-transform group-hover:scale-110" />
-                        <div className="min-w-0">
-                          <p className="@lg:text-sm text-muted-foreground text-xs">
-                            Month
-                          </p>
-                          <p className="truncate font-medium @lg:text-base text-sm transition-all">
-                            {formatDuration(timerStats.monthTime)}
-                          </p>
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
-                </div>
-              </TabsContent>
-
-              {/* Recent Sessions Tab */}
-              <TabsContent value="recent" className="@container space-y-4">
-                <Card className="transition-all hover:shadow-md">
-                  <CardHeader className="pb-3">
-                    <div className="flex items-center justify-between">
-                      <CardTitle className="flex items-center gap-2 @lg:text-lg text-base">
-                        <Zap className="@lg:h-5 h-4 @lg:w-5 w-4" />
-                        Recent Sessions
-                      </CardTitle>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button variant="outline" size="sm">
-                            <Filter className="mr-2 h-4 w-4" />
-                            Filter
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-80" align="end">
-                          <div className="space-y-4">
-                            <div>
-                              <Label className="font-medium text-sm">
-                                Category
-                              </Label>
-                              <Select
-                                value={filterCategoryId}
-                                onValueChange={setFilterCategoryId}
-                              >
-                                <SelectTrigger>
-                                  <SelectValue placeholder="All categories" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  <SelectItem value="">
-                                    All categories
-                                  </SelectItem>
-                                  {categories.map((category) => (
-                                    <SelectItem
-                                      key={category.id}
-                                      value={category.id}
-                                    >
-                                      <div className="flex items-center gap-2">
-                                        <div
-                                          className={cn(
-                                            'h-3 w-3 rounded-full',
-                                            getCategoryColor(
-                                              category.color || 'BLUE'
-                                            )
-                                          )}
-                                        />
-                                        {category.name}
-                                      </div>
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-                            </div>
-                            <div>
-                              <Label className="font-medium text-sm">
-                                Task
-                              </Label>
-                              <Select
-                                value={filterTaskId}
-                                onValueChange={setFilterTaskId}
-                              >
-                                <SelectTrigger>
-                                  <SelectValue placeholder="All tasks" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  <SelectItem value="">All tasks</SelectItem>
-                                  {tasks.map((task) => (
-                                    <SelectItem
-                                      key={task.id}
-                                      value={task.id || ''}
-                                    >
-                                      {task.name}
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-                            </div>
-                          </div>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                  </CardHeader>
-                  <CardContent>
-                    {filteredSessions.length === 0 ? (
-                      <div className="py-8 text-center">
-                        <div className="relative mx-auto mb-3 h-16 w-16">
-                          <Zap className="h-16 w-16 text-muted-foreground/50" />
-                          {recentSessions.length === 0 && (
-                            <Sparkles className="absolute -top-1 -right-1 h-6 w-6 animate-pulse text-primary" />
-                          )}
-                        </div>
-                        <p className="@lg:text-base text-muted-foreground text-sm">
-                          {recentSessions.length === 0
-                            ? 'Ready to start tracking time?'
-                            : 'No sessions match your filters'}
-                        </p>
-                        <p className="mt-1 @lg:text-sm text-muted-foreground text-xs">
-                          {recentSessions.length === 0
-                            ? 'Start your first timer to see your productivity journey!'
-                            : 'Try adjusting your filters above'}
-                        </p>
-                        {recentSessions.length === 0 && (
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => setActiveTab('current')}
-                            className="mt-4"
-                          >
-                            <Play className="mr-2 h-4 w-4" />
-                            Start First Timer
-                          </Button>
-                        )}
-                      </div>
-                    ) : (
-                      <div className="@lg:max-h-125 max-h-96 space-y-3 overflow-y-auto">
-                        {filteredSessions.map((session) => (
-                          <div
-                            key={session.id}
-                            className={cn(
-                              'group relative rounded-lg border @lg:p-4 p-3 transition-all hover:bg-accent/50 hover:shadow-sm',
-                              justCompleted?.id === session.id &&
-                                'slide-in-from-top animate-in bg-green-50 ring-2 ring-green-500 duration-500 dark:bg-green-950/20'
-                            )}
-                          >
-                            <div className="flex items-start justify-between gap-3">
-                              <div className="min-w-0 flex-1">
-                                <h4 className="truncate font-medium @lg:text-base text-sm">
-                                  {session.title}
-                                </h4>
-                                {session.description && (
-                                  <p className="mt-1 line-clamp-2 @lg:text-sm text-muted-foreground text-xs">
-                                    {session.description}
-                                  </p>
-                                )}
-                                <div className="mt-2 flex flex-wrap items-center @lg:gap-2 gap-1">
-                                  {session.category && (
-                                    <Badge
-                                      variant="secondary"
-                                      className={cn(
-                                        '@lg:text-sm text-xs',
-                                        getCategoryColor(
-                                          session.category.color || 'BLUE'
-                                        )
-                                      )}
-                                    >
-                                      {session.category.name}
-                                    </Badge>
-                                  )}
-                                  {session.task && (
-                                    <div className="flex items-center gap-1.5 rounded-md border border-dynamic-blue/20 bg-linear-to-r from-dynamic-blue/10 to-dynamic-blue/5 px-2 py-1">
-                                      <CheckCircle className="h-3 w-3 text-dynamic-blue" />
-                                      <span className="font-medium @lg:text-sm text-dynamic-blue text-xs">
-                                        {session.task.name}
-                                      </span>
-                                    </div>
-                                  )}
-                                </div>
-                                {session.task &&
-                                  (() => {
-                                    const taskWithDetails = tasks.find(
-                                      (t) => t.id === session.task?.id
-                                    );
-                                    return taskWithDetails?.board_name &&
-                                      taskWithDetails?.list_name ? (
-                                      <div className="mt-1 flex items-center gap-2 text-muted-foreground text-xs">
-                                        <div className="flex items-center gap-1">
-                                          <MapPin className="h-3 w-3" />
-                                          <span>
-                                            {taskWithDetails.board_name}
-                                          </span>
-                                        </div>
-                                        <span>•</span>
-                                        <div className="flex items-center gap-1">
-                                          <Tag className="h-3 w-3" />
-                                          <span>
-                                            {taskWithDetails.list_name}
-                                          </span>
-                                        </div>
-                                      </div>
-                                    ) : null;
-                                  })()}
-                              </div>
-
-                              <div className="flex items-start gap-2">
-                                <div className="text-right">
-                                  <p className="font-medium @lg:text-base text-sm">
-                                    {session.duration_seconds
-                                      ? formatDuration(session.duration_seconds)
-                                      : '-'}
-                                  </p>
-                                  <p className="@lg:text-sm text-muted-foreground text-xs">
-                                    {new Date(
-                                      session.start_time
-                                    ).toLocaleDateString()}
-                                  </p>
-                                </div>
-
-                                <DropdownMenu>
-                                  <DropdownMenuTrigger asChild>
-                                    <Button
-                                      variant="ghost"
-                                      size="sm"
-                                      className="h-8 w-8 p-0 opacity-0 transition-opacity group-hover:opacity-100"
-                                    >
-                                      <MoreHorizontal className="h-4 w-4" />
-                                    </Button>
-                                  </DropdownMenuTrigger>
-                                  <DropdownMenuContent align="end">
-                                    <DropdownMenuItem
-                                      onClick={() => resumeSession(session)}
-                                      disabled={
-                                        actionStates[`resume-${session.id}`]
-                                      }
-                                    >
-                                      {actionStates[`resume-${session.id}`] ? (
-                                        <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
-                                      ) : (
-                                        <RotateCcw className="mr-2 h-4 w-4" />
-                                      )}
-                                      Start New Session
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem
-                                      onClick={() => duplicateSession(session)}
-                                    >
-                                      <Copy className="mr-2 h-4 w-4" />
-                                      Duplicate
-                                    </DropdownMenuItem>
-                                    {/* <DropdownMenuItem
-                                      onClick={() => openEditDialog(session)}
-                                    >
-                                      <Edit className="mr-2 h-4 w-4" />
-                                      Edit Session
-                                    </DropdownMenuItem> */}
-                                    <Separator />
-                                    <DropdownMenuItem
-                                      onClick={() =>
-                                        setSessionToDelete(session)
-                                      }
-                                      className="text-destructive focus:text-destructive"
-                                    >
-                                      <Trash2 className="mr-2 h-4 w-4" />
-                                      Delete Session
-                                    </DropdownMenuItem>
-                                  </DropdownMenuContent>
-                                </DropdownMenu>
-                              </div>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-              </TabsContent>
-
-              {/* History Tab - Same as recent but with different API call */}
-              <TabsContent value="history" className="@container space-y-4">
-                <Card className="transition-all hover:shadow-md">
-                  <CardHeader className="pb-3">
-                    <CardTitle className="flex items-center gap-2 @lg:text-lg text-base">
-                      <History className="@lg:h-5 h-4 @lg:w-5 w-4" />
-                      Session History
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="py-8 text-center">
-                      <History className="mx-auto mb-3 @lg:h-12 h-8 @lg:w-12 w-8 text-muted-foreground" />
-                      <p className="@lg:text-base text-muted-foreground text-sm">
-                        Full history view coming soon
-                      </p>
-                      <p className="mt-1 @lg:text-sm text-muted-foreground text-xs">
-                        Advanced filtering, date ranges, and export features
-                      </p>
-                    </div>
-                  </CardContent>
-                </Card>
-              </TabsContent>
-            </div>
-          </Tabs>
-        </DialogContent>
-      </Dialog>
-
-      {/* Edit Session Dialog */}
-      <Dialog
-        open={!!sessionToEdit}
-        onOpenChange={() => setSessionToEdit(null)}
-      >
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>Edit Session</DialogTitle>
-            <DialogDescription>
-              Modify the details of this time tracking session
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div>
-              <Label htmlFor="edit-title">Title</Label>
-              <Input
-                id="edit-title"
-                value={editTitle}
-                onChange={(e) => setEditTitle(e.target.value)}
-                placeholder="Session title"
-              />
-            </div>
-            <div>
-              <Label htmlFor="edit-description">Description</Label>
-              <Textarea
-                id="edit-description"
-                value={editDescription}
-                onChange={(e) => setEditDescription(e.target.value)}
-                placeholder="Optional description"
-                rows={3}
-              />
-            </div>
-            <div className="grid grid-cols-2 gap-2">
-              <div>
-                <Label htmlFor="edit-category">Category</Label>
-                <Select
-                  value={editCategoryId}
-                  onValueChange={setEditCategoryId}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select category" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="">No category</SelectItem>
-                    {categories.map((category) => (
-                      <SelectItem key={category.id} value={category.id}>
-                        {category.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div>
-                <Label htmlFor="edit-task">Task</Label>
-                <Select value={editTaskId} onValueChange={setEditTaskId}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select task" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="">No task</SelectItem>
-                    {tasks.map((task) => (
-                      <SelectItem key={task.id} value={task.id || ''}>
-                        {task.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-            {sessionToEdit && !sessionToEdit.is_running && (
-              <div className="grid grid-cols-2 gap-2">
-                <div>
-                  <Label htmlFor="edit-start-time">Start Time</Label>
-                  <Input
-                    id="edit-start-time"
-                    type="datetime-local"
-                    value={editStartTime}
-                    onChange={(e) => setEditStartTime(e.target.value)}
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="edit-end-time">End Time</Label>
-                  <Input
-                    id="edit-end-time"
-                    type="datetime-local"
-                    value={editEndTime}
-                    onChange={(e) => setEditEndTime(e.target.value)}
-                  />
-                </div>
-              </div>
-            )}
-            <div className="flex gap-2 pt-4">
-              <Button
-                variant="outline"
-                onClick={() => setSessionToEdit(null)}
-                className="flex-1"
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={saveEdit}
-                disabled={isEditing || !editTitle.trim()}
-                className="flex-1"
-              >
-                {isEditing ? 'Saving...' : 'Save Changes'}
-              </Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* Delete Confirmation Dialog */}
-      <AlertDialog
-        open={!!sessionToDelete}
-        onOpenChange={() => setSessionToDelete(null)}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete Time Session</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to delete the session "
-              {sessionToDelete?.title}"? This action cannot be undone and will
-              permanently remove the tracked time.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={deleteSession}
-              disabled={isDeleting}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              {isDeleting ? 'Deleting...' : 'Delete Session'}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      {/* Task Creation Dialog */}
-      <Dialog open={showTaskCreation} onOpenChange={setShowTaskCreation}>
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <CheckCircle className="h-5 w-5" />
-              Create New Task
-            </DialogTitle>
-            <DialogDescription>
-              Create a new task to track time for. We'll start the timer
-              automatically once the task is created.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div>
-              <Label htmlFor="task-name">Task Name</Label>
-              <Input
-                id="task-name"
-                value={newTaskName}
-                onChange={(e) => setNewTaskName(e.target.value)}
-                placeholder="What are you working on?"
-                autoFocus
-              />
-            </div>
-            <div>
-              <Label htmlFor="task-description">Description (Optional)</Label>
-              <Textarea
-                id="task-description"
-                value={newTaskDescription}
-                onChange={(e) => setNewTaskDescription(e.target.value)}
-                placeholder="Add details about this task..."
-                rows={3}
-              />
-            </div>
-            <div>
-              <Label htmlFor="board-select">Board</Label>
-              <Select
-                value={selectedBoardId}
-                onValueChange={(value) => {
-                  setSelectedBoardId(value);
-                  setSelectedListId(''); // Reset list when board changes
-                }}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Select a board" />
-                </SelectTrigger>
-                <SelectContent>
-                  {boards.map((board) => (
-                    <SelectItem key={board.id} value={board.id}>
-                      {board.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            {selectedBoardId && (
-              <div>
-                <Label htmlFor="list-select">List</Label>
-                <Select
-                  value={selectedListId}
-                  onValueChange={setSelectedListId}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a list" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {availableLists.map((list) => (
-                      <SelectItem key={list.id} value={list.id}>
-                        <div className="flex items-center gap-2">
-                          <div
-                            className={cn(
-                              'h-3 w-3 rounded-full',
-                              getCategoryColor(list.color.toUpperCase())
-                            )}
-                          />
-                          {list.name}
-                        </div>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            )}
-            <div className="flex gap-2 pt-4">
-              <Button
-                variant="outline"
-                onClick={() => {
-                  setShowTaskCreation(false);
-                  setNewTaskName('');
-                  setNewTaskDescription('');
-                  setSelectedBoardId('');
-                  setSelectedListId('');
-                }}
-                className="flex-1"
-                disabled={isCreatingTask}
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={createTask}
-                disabled={
-                  isCreatingTask || !newTaskName.trim() || !selectedListId
-                }
-                className="flex-1 border border-border bg-muted text-foreground hover:border-accent hover:bg-muted/80 dark:bg-muted dark:text-foreground dark:hover:bg-accent"
-              >
-                {isCreatingTask ? (
-                  <>
-                    <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
-                    Creating...
-                  </>
-                ) : (
-                  <>
-                    <CheckCircle className="mr-2 h-4 w-4" />
-                    Create & Start Timer
-                  </>
-                )}
-              </Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}