Add a scrollable calendar view to the tasks page for drag and drop scheduling

Refactors the `TasksWithCalendar` component to display a 7-day calendar view at the bottom of the tasks page, enabling drag-and-drop functionality for task scheduling. Removes the tabbed view toggle and updates date navigation logic to use `startOfToday` and a new `navigateCalendar` function.

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

.replit

@@ -14,10 +14,6 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
-[[ports]]
-localPort = 39317
-externalPort = 3000
-
 [env]
 PORT = "5000"
 

client/src/components/TasksWithCalendar.tsx

@@ -4,12 +4,11 @@ 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 { Search, Filter, SortAsc, Calendar, 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';
+import { addDays, format, isSameDay, startOfToday } from 'date-fns';
 
 interface TasksWithCalendarProps {
   tasks: Task[];
@@ -24,17 +23,15 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState<SortOption>('dueDate');
   const [filterBy, setFilterBy] = useState<FilterOption>('all');
-  const [currentDate, setCurrentDate] = useState(new Date());
+  const [calendarStartDate, setCalendarStartDate] = useState(startOfToday());
   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));
+  // Get 7 days starting from today for calendar
+  const dates = Array.from({ length: 7 }, (_, i) => addDays(calendarStartDate, i));
 
   const isOverdue = (task: Task) => {
     if (!task.dueDate) return false;
@@ -127,10 +124,10 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
     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 navigateCalendar = (direction: 'prev' | 'next') => {
+    const newDate = addDays(calendarStartDate, direction === 'next' ? 7 : -7);
+    setCalendarStartDate(newDate);
+    console.log(`Navigating calendar to ${newDate.toLocaleDateString()}`);
   };
 
   const handleTaskComplete = (task: Task) => {
@@ -216,112 +213,99 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
         </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>
+      {/* Unscheduled 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 below to schedule them!'
+              }
+            </p>
+          </div>
+        ) : (
+          <>
+            <div className="text-sm font-medium text-muted-foreground mb-2">
+              Unscheduled Tasks - Drag to calendar below 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 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>
+            ))}
+          </>
+        )}
+      </div>
 
-        <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>
+      {/* Calendar Section */}
+      <div className="space-y-3 border-t pt-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-base font-semibold" data-testid="text-calendar-title">
+              Next 7 Days
+            </h3>
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <Button 
+              variant="outline" 
+              size="icon"
+              onClick={() => navigateCalendar('prev')}
+              data-testid="button-prev-week"
+              className="w-8 h-8"
+            >
+              <ChevronLeft className="w-4 h-4" />
+            </Button>
             
-            <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>
+            <Button 
+              variant="outline" 
+              size="icon"
+              onClick={() => navigateCalendar('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">
+        {/* Horizontal Scrollable Calendar */}
+        <div className="overflow-x-auto pb-2">
+          <div className="flex gap-3 min-w-max">
             {dates.map((date, index) => {
               const dayTasks = getTasksForDate(date);
               const isToday = isSameDay(date, new Date());
@@ -330,7 +314,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
               return (
                 <Card 
                   key={index}
-                  className={`p-3 min-h-[140px] transition-all ${
+                  className={`flex-shrink-0 w-32 p-3 min-h-[120px] transition-all ${
                     isToday ? 'ring-2 ring-primary' : ''
                   } ${
                     isWeekend ? 'bg-muted/30' : ''
@@ -344,19 +328,19 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
                   }}
                   data-testid={`calendar-date-${format(date, 'yyyy-MM-dd')}`}
                 >
-                  <div className="text-center mb-3">
+                  <div className="text-center mb-2">
                     <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')}
+                      {format(date, 'MMM d')}
                     </div>
                   </div>
                   
-                  <div className="space-y-2">
-                    {dayTasks.slice(0, 3).map((task) => (
+                  <div className="space-y-1">
+                    {dayTasks.slice(0, 2).map((task) => (
                       <div
                         key={task.id}
                         draggable
@@ -367,24 +351,28 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
                       >
                         <Badge 
                           variant="outline" 
-                          className="w-full justify-start text-xs p-2 h-auto"
+                          className="w-full justify-start text-xs p-1 h-auto text-left"
                         >
-                          <div className="truncate flex-1 text-left">
+                          <div className="truncate">
                             {task.title}
                           </div>
                         </Badge>
                       </div>
                     ))}
                     
-                    {dayTasks.length > 3 && (
+                    {dayTasks.length > 2 && (
                       <Badge variant="secondary" className="w-full justify-center text-xs">
-                        +{dayTasks.length - 3} more
+                        +{dayTasks.length - 2}
                       </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
+                    {dayTasks.length === 0 && (
+                      <div className={`text-center text-xs py-4 rounded border-2 border-dashed transition-colors ${
+                        draggedTask 
+                          ? 'border-primary/50 text-primary/70 bg-primary/5' 
+                          : 'border-muted text-muted-foreground'
+                      }`}>
+                        {draggedTask ? 'Drop here' : 'No tasks'}
                       </div>
                     )}
                   </div>
@@ -392,24 +380,13 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
               );
             })}
           </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>
+        </div>
+        
+        {/* Calendar Instructions */}
+        <div className="text-xs text-muted-foreground text-center">
+          Drag tasks from above to schedule them • Use arrow buttons to see more days
+        </div>
+      </div>
 
       {/* Time Completion Modal */}
       <TimeCompletionModal