Integrate drag-and-drop task scheduling and time logging functionality
Refactors `TaskList` to `TasksWithCalendar` and introduces `TimeCompletionModal` to support drag-and-drop task scheduling onto a calendar view and prompt users to log time spent on completed tasks, offering both clock and manual input methods. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/sqJIbnU
This commit is contained in:
paul-nothaft
+2
-2
@@ -9,7 +9,7 @@ import { Card } from "@/components/ui/card";
|
||||
// Components
|
||||
import BottomNavigation from './components/BottomNavigation';
|
||||
import TaskCreationModal from './components/TaskCreationModal';
|
||||
import TaskList from './components/TaskList';
|
||||
import TasksWithCalendar from './components/TasksWithCalendar';
|
||||
import CalendarView from './components/CalendarView';
|
||||
import KanbanBoard from './components/KanbanBoard';
|
||||
import ProjectTemplate from './components/ProjectTemplate';
|
||||
@@ -118,7 +118,7 @@ function App() {
|
||||
switch (currentTab) {
|
||||
case 'tasks':
|
||||
return (
|
||||
<TaskList
|
||||
<TasksWithCalendar
|
||||
tasks={tasks}
|
||||
onTaskUpdate={handleTaskUpdate}
|
||||
onTaskEdit={(task) => console.log('Edit task:', task.title)}
|
||||
|
||||
@@ -0,0 +1,423 @@
|
||||
import { useState } from 'react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Search, Filter, SortAsc, Calendar, List, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { Task } from './TaskCard';
|
||||
import TaskCard from './TaskCard';
|
||||
import TimeCompletionModal from './TimeCompletionModal';
|
||||
import { addDays, format, isSameDay, startOfWeek } from 'date-fns';
|
||||
|
||||
interface TasksWithCalendarProps {
|
||||
tasks: Task[];
|
||||
onTaskUpdate?: (taskId: string, updates: Partial<Task>) => void;
|
||||
onTaskEdit?: (task: Task) => void;
|
||||
}
|
||||
|
||||
type SortOption = 'dueDate' | 'priority' | 'title' | 'status';
|
||||
type FilterOption = 'all' | 'todo' | 'inProgress' | 'done' | 'overdue';
|
||||
|
||||
export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: TasksWithCalendarProps) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [sortBy, setSortBy] = useState<SortOption>('dueDate');
|
||||
const [filterBy, setFilterBy] = useState<FilterOption>('all');
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
const [draggedTask, setDraggedTask] = useState<string | null>(null);
|
||||
const [activeView, setActiveView] = useState<'list' | 'calendar'>('list');
|
||||
const [completionModal, setCompletionModal] = useState<{ isOpen: boolean; task: Task | null }>({
|
||||
isOpen: false,
|
||||
task: null
|
||||
});
|
||||
|
||||
// Get two weeks starting from current week for calendar
|
||||
const startDate = startOfWeek(currentDate);
|
||||
const dates = Array.from({ length: 14 }, (_, i) => addDays(startDate, i));
|
||||
|
||||
const isOverdue = (task: Task) => {
|
||||
if (!task.dueDate) return false;
|
||||
return task.dueDate < new Date() && task.status !== 'done';
|
||||
};
|
||||
|
||||
const filteredAndSortedTasks = tasks
|
||||
.filter(task => {
|
||||
// Search filter
|
||||
const matchesSearch = task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
task.description?.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
|
||||
if (!matchesSearch) return false;
|
||||
|
||||
// Status filter
|
||||
switch (filterBy) {
|
||||
case 'overdue':
|
||||
return isOverdue(task);
|
||||
case 'all':
|
||||
return true;
|
||||
default:
|
||||
return task.status === filterBy;
|
||||
}
|
||||
})
|
||||
.sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case 'dueDate':
|
||||
if (!a.dueDate && !b.dueDate) return 0;
|
||||
if (!a.dueDate) return 1;
|
||||
if (!b.dueDate) return -1;
|
||||
return a.dueDate.getTime() - b.dueDate.getTime();
|
||||
|
||||
case 'priority':
|
||||
const priorityOrder = { high: 3, medium: 2, low: 1 };
|
||||
return priorityOrder[b.priority] - priorityOrder[a.priority];
|
||||
|
||||
case 'title':
|
||||
return a.title.localeCompare(b.title);
|
||||
|
||||
case 'status':
|
||||
const statusOrder = { todo: 1, inProgress: 2, done: 3 };
|
||||
return statusOrder[a.status] - statusOrder[b.status];
|
||||
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
// Tasks that are NOT on the calendar (no due date or not scheduled)
|
||||
const unscheduledTasks = filteredAndSortedTasks.filter(task => !task.dueDate);
|
||||
|
||||
const getTasksForDate = (date: Date) => {
|
||||
return filteredAndSortedTasks.filter(task =>
|
||||
task.dueDate && isSameDay(task.dueDate, date)
|
||||
);
|
||||
};
|
||||
|
||||
const getFilterCount = (filter: FilterOption) => {
|
||||
switch (filter) {
|
||||
case 'overdue':
|
||||
return tasks.filter(isOverdue).length;
|
||||
case 'all':
|
||||
return tasks.length;
|
||||
default:
|
||||
return tasks.filter(task => task.status === filter).length;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragStart = (taskId: string, e: React.DragEvent) => {
|
||||
setDraggedTask(taskId);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
console.log('Drag started for task:', taskId);
|
||||
};
|
||||
|
||||
const handleDragEnd = () => {
|
||||
setDraggedTask(null);
|
||||
};
|
||||
|
||||
const handleDrop = (date: Date, e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
if (draggedTask) {
|
||||
onTaskUpdate?.(draggedTask, { dueDate: date });
|
||||
console.log(`Task ${draggedTask} moved to`, date.toLocaleDateString());
|
||||
setDraggedTask(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
};
|
||||
|
||||
const navigateWeek = (direction: 'prev' | 'next') => {
|
||||
const newDate = addDays(currentDate, direction === 'next' ? 7 : -7);
|
||||
setCurrentDate(newDate);
|
||||
console.log(`Navigating to week of ${newDate.toLocaleDateString()}`);
|
||||
};
|
||||
|
||||
const handleTaskComplete = (task: Task) => {
|
||||
setCompletionModal({ isOpen: true, task });
|
||||
};
|
||||
|
||||
const handleTimeLogged = (timeSpent: number) => {
|
||||
if (completionModal.task) {
|
||||
onTaskUpdate?.(completionModal.task.id, {
|
||||
status: 'done',
|
||||
timeTracked: (completionModal.task.timeTracked || 0) + timeSpent,
|
||||
isTracking: false
|
||||
});
|
||||
}
|
||||
setCompletionModal({ isOpen: false, task: null });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold" data-testid="text-task-list-title">
|
||||
My Tasks
|
||||
</h2>
|
||||
<Badge variant="secondary" data-testid="badge-task-count">
|
||||
{filteredAndSortedTasks.length} tasks
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Search and Filters */}
|
||||
<div className="space-y-3">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search tasks..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
console.log('Search query:', e.target.value);
|
||||
}}
|
||||
className="pl-10"
|
||||
data-testid="input-search-tasks"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Select value={filterBy} onValueChange={(value: FilterOption) => {
|
||||
setFilterBy(value);
|
||||
console.log('Filter changed to:', value);
|
||||
}}>
|
||||
<SelectTrigger className="flex-1" data-testid="select-filter">
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter className="w-4 h-4" />
|
||||
<SelectValue />
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All ({getFilterCount('all')})</SelectItem>
|
||||
<SelectItem value="todo">To Do ({getFilterCount('todo')})</SelectItem>
|
||||
<SelectItem value="inProgress">In Progress ({getFilterCount('inProgress')})</SelectItem>
|
||||
<SelectItem value="done">Done ({getFilterCount('done')})</SelectItem>
|
||||
<SelectItem value="overdue">Overdue ({getFilterCount('overdue')})</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={sortBy} onValueChange={(value: SortOption) => {
|
||||
setSortBy(value);
|
||||
console.log('Sort changed to:', value);
|
||||
}}>
|
||||
<SelectTrigger className="flex-1" data-testid="select-sort">
|
||||
<div className="flex items-center gap-2">
|
||||
<SortAsc className="w-4 h-4" />
|
||||
<SelectValue />
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="dueDate">Due Date</SelectItem>
|
||||
<SelectItem value="priority">Priority</SelectItem>
|
||||
<SelectItem value="title">Title</SelectItem>
|
||||
<SelectItem value="status">Status</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* View Toggle */}
|
||||
<Tabs value={activeView} onValueChange={(value) => setActiveView(value as 'list' | 'calendar')}>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="list" data-testid="tab-list-view">
|
||||
<List className="w-4 h-4 mr-2" />
|
||||
List View
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="calendar" data-testid="tab-calendar-view">
|
||||
<Calendar className="w-4 h-4 mr-2" />
|
||||
Calendar View
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="list" className="space-y-4">
|
||||
{/* Task List */}
|
||||
<div className="space-y-3">
|
||||
{unscheduledTasks.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-muted-foreground" data-testid="text-no-tasks">
|
||||
{searchQuery || filterBy !== 'all'
|
||||
? 'No unscheduled tasks match your filters'
|
||||
: 'No unscheduled tasks. Drag tasks to the calendar to schedule them!'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-2">
|
||||
Unscheduled Tasks - Drag to calendar to schedule
|
||||
</div>
|
||||
{unscheduledTasks.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(task.id, e)}
|
||||
onDragEnd={handleDragEnd}
|
||||
className={`cursor-move transition-transform ${
|
||||
draggedTask === task.id ? 'opacity-50 scale-95' : 'hover:scale-[1.02]'
|
||||
}`}
|
||||
>
|
||||
<TaskCard
|
||||
task={task}
|
||||
onPlay={() => {
|
||||
onTaskUpdate?.(task.id, { isTracking: true, timeTracked: task.timeTracked });
|
||||
console.log(`Timer started for ${task.title}`);
|
||||
}}
|
||||
onPause={() => {
|
||||
onTaskUpdate?.(task.id, { isTracking: false });
|
||||
console.log(`Timer paused for ${task.title}`);
|
||||
}}
|
||||
onEdit={() => {
|
||||
onTaskEdit?.(task);
|
||||
console.log(`Edit task ${task.title}`);
|
||||
}}
|
||||
onStatusChange={(newStatus) => {
|
||||
if (newStatus === 'done') {
|
||||
handleTaskComplete(task);
|
||||
} else {
|
||||
onTaskUpdate?.(task.id, { status: newStatus });
|
||||
}
|
||||
console.log(`Task ${task.title} status changed to ${newStatus}`);
|
||||
}}
|
||||
isDragging={draggedTask === task.id}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="calendar" className="space-y-4">
|
||||
{/* Calendar Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-5 h-5 text-primary" />
|
||||
<h3 className="text-lg font-semibold" data-testid="text-calendar-title">
|
||||
Next Two Weeks
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => navigateWeek('prev')}
|
||||
data-testid="button-prev-week"
|
||||
className="w-8 h-8"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => navigateWeek('next')}
|
||||
data-testid="button-next-week"
|
||||
className="w-8 h-8"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Calendar Grid */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-7 gap-3">
|
||||
{dates.map((date, index) => {
|
||||
const dayTasks = getTasksForDate(date);
|
||||
const isToday = isSameDay(date, new Date());
|
||||
const isWeekend = date.getDay() === 0 || date.getDay() === 6;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={index}
|
||||
className={`p-3 min-h-[140px] transition-all ${
|
||||
isToday ? 'ring-2 ring-primary' : ''
|
||||
} ${
|
||||
isWeekend ? 'bg-muted/30' : ''
|
||||
} ${
|
||||
draggedTask ? 'hover:ring-2 hover:ring-primary/50 hover:bg-primary/5' : 'hover-elevate'
|
||||
}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={(e) => handleDrop(date, e)}
|
||||
onClick={() => {
|
||||
console.log('Date selected:', date.toLocaleDateString());
|
||||
}}
|
||||
data-testid={`calendar-date-${format(date, 'yyyy-MM-dd')}`}
|
||||
>
|
||||
<div className="text-center mb-3">
|
||||
<div className="text-xs text-muted-foreground font-medium">
|
||||
{format(date, 'EEE')}
|
||||
</div>
|
||||
<div className={`text-sm font-semibold ${
|
||||
isToday ? 'text-primary' : ''
|
||||
}`}>
|
||||
{format(date, 'd')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{dayTasks.slice(0, 3).map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(task.id, e)}
|
||||
onDragEnd={handleDragEnd}
|
||||
className={`cursor-move ${draggedTask === task.id ? 'opacity-50' : ''}`}
|
||||
data-testid={`calendar-task-${task.id}`}
|
||||
>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="w-full justify-start text-xs p-2 h-auto"
|
||||
>
|
||||
<div className="truncate flex-1 text-left">
|
||||
{task.title}
|
||||
</div>
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{dayTasks.length > 3 && (
|
||||
<Badge variant="secondary" className="w-full justify-center text-xs">
|
||||
+{dayTasks.length - 3} more
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{dayTasks.length === 0 && draggedTask && (
|
||||
<div className="text-center text-xs text-muted-foreground py-4 border-2 border-dashed border-primary/30 rounded">
|
||||
Drop task here
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Calendar Legend */}
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-primary"></div>
|
||||
<span>Today</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-muted"></div>
|
||||
<span>Weekend</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 border-2 border-dashed border-primary/30 rounded"></div>
|
||||
<span>Drop zone</span>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* Time Completion Modal */}
|
||||
<TimeCompletionModal
|
||||
isOpen={completionModal.isOpen}
|
||||
onClose={() => setCompletionModal({ isOpen: false, task: null })}
|
||||
onSave={handleTimeLogged}
|
||||
taskTitle={completionModal.task?.title || ''}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
import { useState } from 'react';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Clock, Timer } from 'lucide-react';
|
||||
|
||||
interface TimeCompletionModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (timeSpent: number) => void; // in minutes
|
||||
taskTitle: string;
|
||||
}
|
||||
|
||||
export default function TimeCompletionModal({ isOpen, onClose, onSave, taskTitle }: TimeCompletionModalProps) {
|
||||
const [hours, setHours] = useState(0);
|
||||
const [minutes, setMinutes] = useState(0);
|
||||
const [manualHours, setManualHours] = useState('');
|
||||
const [activeTab, setActiveTab] = useState('clock');
|
||||
|
||||
const handleSave = () => {
|
||||
let totalMinutes = 0;
|
||||
|
||||
if (activeTab === 'clock') {
|
||||
totalMinutes = hours * 60 + minutes;
|
||||
} else {
|
||||
const parsedHours = parseFloat(manualHours) || 0;
|
||||
totalMinutes = Math.round(parsedHours * 60);
|
||||
}
|
||||
|
||||
onSave(totalMinutes);
|
||||
console.log(`Time logged: ${totalMinutes} minutes for task: ${taskTitle}`);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setHours(0);
|
||||
setMinutes(0);
|
||||
setManualHours('');
|
||||
setActiveTab('clock');
|
||||
onClose();
|
||||
};
|
||||
|
||||
const formatTime = (h: number, m: number) => {
|
||||
return `${h}h ${m}m`;
|
||||
};
|
||||
|
||||
const getCurrentTimeDisplay = () => {
|
||||
if (activeTab === 'clock') {
|
||||
return formatTime(hours, minutes);
|
||||
} else {
|
||||
const parsedHours = parseFloat(manualHours) || 0;
|
||||
const h = Math.floor(parsedHours);
|
||||
const m = Math.round((parsedHours - h) * 60);
|
||||
return formatTime(h, m);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-md mx-4">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Timer className="w-4 h-4" />
|
||||
Task Completed!
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
How much time did you spend on:
|
||||
</p>
|
||||
<p className="font-medium truncate" data-testid="text-completed-task-title">
|
||||
{taskTitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="clock" data-testid="tab-clock-picker">
|
||||
<Clock className="w-4 h-4 mr-2" />
|
||||
Clock
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="manual" data-testid="tab-manual-input">
|
||||
<Timer className="w-4 h-4 mr-2" />
|
||||
Manual
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="clock" className="space-y-4">
|
||||
{/* Apple-style Clock Picker */}
|
||||
<div className="space-y-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-mono" data-testid="text-clock-display">
|
||||
{formatTime(hours, minutes)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* Hours Picker */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-center block">Hours</label>
|
||||
<div className="space-y-1 max-h-32 overflow-y-auto border rounded-md p-2">
|
||||
{Array.from({ length: 13 }, (_, i) => (
|
||||
<Button
|
||||
key={i}
|
||||
variant={hours === i ? "default" : "ghost"}
|
||||
size="sm"
|
||||
className="w-full"
|
||||
onClick={() => setHours(i)}
|
||||
data-testid={`button-hour-${i}`}
|
||||
>
|
||||
{i}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Minutes Picker */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-center block">Minutes</label>
|
||||
<div className="space-y-1 max-h-32 overflow-y-auto border rounded-md p-2">
|
||||
{Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
|
||||
<Button
|
||||
key={minute}
|
||||
variant={minutes === minute ? "default" : "ghost"}
|
||||
size="sm"
|
||||
className="w-full"
|
||||
onClick={() => setMinutes(minute)}
|
||||
data-testid={`button-minute-${minute}`}
|
||||
>
|
||||
{minute}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual" className="space-y-4">
|
||||
{/* Manual Input */}
|
||||
<div className="space-y-3">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-mono" data-testid="text-manual-display">
|
||||
{getCurrentTimeDisplay()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium block mb-2">Hours (decimal)</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.25"
|
||||
min="0"
|
||||
max="24"
|
||||
placeholder="e.g., 1.5 for 1 hour 30 minutes"
|
||||
value={manualHours}
|
||||
onChange={(e) => setManualHours(e.target.value)}
|
||||
data-testid="input-manual-hours"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Examples: 0.5 = 30min, 1.25 = 1h 15min, 2.75 = 2h 45min
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex gap-3 pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleClose}
|
||||
className="flex-1"
|
||||
data-testid="button-cancel-time"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={activeTab === 'clock' ? hours === 0 && minutes === 0 : !manualHours.trim()}
|
||||
className="flex-1"
|
||||
data-testid="button-save-time"
|
||||
>
|
||||
Save Time
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user