From 6e8ef8a09126e00078acea9a894b3e4f71678c25 Mon Sep 17 00:00:00 2001
From: paul-nothaft <40865108-paul-nothaft@users.noreply.replit.com>
Date: Thu, 11 Sep 2025 22:31:27 +0000
Subject: [PATCH] Add filtering options and improve task interactions on the
 board view

Integrates label and priority filtering into the Kanban board, enhances task card clickability, and refactors UI components for better usability.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/P2PZNJ9
---
 .replit                               |   4 +
 client/src/components/KanbanBoard.tsx | 258 +++++++++++++++++++++++++-
 2 files changed, 261 insertions(+), 1 deletion(-)

diff --git a/.replit b/.replit
index 61099cd..fdec5e9 100644
--- a/.replit
+++ b/.replit
@@ -18,6 +18,10 @@ externalPort = 80
 localPort = 35345
 externalPort = 3002
 
+[[ports]]
+localPort = 40247
+externalPort = 3001
+
 [[ports]]
 localPort = 41353
 externalPort = 3000
diff --git a/client/src/components/KanbanBoard.tsx b/client/src/components/KanbanBoard.tsx
index 7bbbb19..e07eae1 100644
--- a/client/src/components/KanbanBoard.tsx
+++ b/client/src/components/KanbanBoard.tsx
@@ -3,7 +3,21 @@ import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { LayoutGrid, Calendar as CalendarIcon, ChevronLeft, ChevronRight } from 'lucide-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Separator } from '@/components/ui/separator';
+import { LayoutGrid, Calendar as CalendarIcon, ChevronLeft, ChevronRight, Filter, X, Tag, AlertTriangle } from 'lucide-react';
 import { Task, Label } from '@shared/schema';
 import TaskCard from './TaskCard';
 import { useQuery } from '@tanstack/react-query';
@@ -25,6 +39,10 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
   const [viewMode, setViewMode] = useState<ViewMode>('traditional');
   const [currentDate, setCurrentDate] = useState(new Date());
   const [draggedTask, setDraggedTask] = useState<string | null>(null);
+  
+  // Filter state
+  const [selectedLabels, setSelectedLabels] = useState<string[]>([]);
+  const [selectedPriorities, setSelectedPriorities] = useState<string[]>([]);
 
   // Fetch labels to get label colors
   const { data: labels = [] } = useQuery<Label[]>({
@@ -42,6 +60,21 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
   const getTasksForColumn = (status: Task['status']) => {
     let filteredTasks = tasks.filter(task => task.status === status);
     
+    // Apply label filtering
+    if (selectedLabels.length > 0) {
+      filteredTasks = filteredTasks.filter(task => 
+        task.labelId && selectedLabels.includes(task.labelId)
+      );
+    }
+    
+    // Apply priority filtering
+    if (selectedPriorities.length > 0) {
+      filteredTasks = filteredTasks.filter(task => 
+        selectedPriorities.includes(task.priority)
+      );
+    }
+    
+    // Apply date filtering for weekly/monthly views
     if (viewMode === 'weekly') {
       const weekStart = startOfWeek(currentDate, { weekStartsOn: 1 }); // Monday = 1
       const weekEnd = endOfWeek(currentDate, { weekStartsOn: 1 });
@@ -98,6 +131,40 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
     return 'All Tasks';
   };
 
+  // Filter management functions
+  const toggleLabel = (labelId: string) => {
+    setSelectedLabels(prev => 
+      prev.includes(labelId)
+        ? prev.filter(id => id !== labelId)
+        : [...prev, labelId]
+    );
+  };
+
+  const togglePriority = (priority: string) => {
+    setSelectedPriorities(prev => 
+      prev.includes(priority)
+        ? prev.filter(p => p !== priority)
+        : [...prev, priority]
+    );
+  };
+
+  const clearAllFilters = () => {
+    setSelectedLabels([]);
+    setSelectedPriorities([]);
+  };
+
+  const hasActiveFilters = selectedLabels.length > 0 || selectedPriorities.length > 0;
+
+  const priorities = ['high', 'medium', 'low'];
+
+  const getPriorityColor = (priority: string) => {
+    switch (priority) {
+      case 'high': return 'bg-destructive text-destructive-foreground';
+      case 'medium': return 'bg-yellow-500 text-white';
+      default: return 'bg-muted text-muted-foreground';
+    }
+  };
+
 
   return (
     <div className="space-y-4">
@@ -139,6 +206,195 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
         )}
       </div>
 
+      {/* Filter Bar */}
+      <Card className="p-4">
+        <div className="flex items-center justify-between flex-wrap gap-4">
+          <div className="flex items-center gap-2">
+            <Filter className="w-4 h-4 text-muted-foreground" />
+            <span className="text-sm font-medium">Filters</span>
+            {hasActiveFilters && (
+              <Badge variant="secondary" className="text-xs">
+                {selectedLabels.length + selectedPriorities.length}
+              </Badge>
+            )}
+          </div>
+          
+          <div className="flex items-center gap-3 flex-wrap">
+            {/* Labels Filter */}
+            <div className="flex items-center gap-2">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button 
+                    variant="outline" 
+                    size="sm" 
+                    className="justify-start"
+                    data-testid="button-filter-labels"
+                  >
+                    <Tag className="w-4 h-4 mr-2" />
+                    Labels
+                    {selectedLabels.length > 0 && (
+                      <Badge variant="secondary" className="ml-2 text-xs">
+                        {selectedLabels.length}
+                      </Badge>
+                    )}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-56" align="start">
+                  <div className="space-y-2">
+                    <h4 className="text-sm font-medium">Filter by Labels</h4>
+                    <Separator />
+                    <div className="space-y-2 max-h-48 overflow-y-auto">
+                      {labels.length > 0 ? (
+                        labels.map((label) => (
+                          <div 
+                            key={label.id} 
+                            className="flex items-center space-x-2"
+                          >
+                            <Checkbox
+                              id={`label-${label.id}`}
+                              checked={selectedLabels.includes(label.id)}
+                              onCheckedChange={() => toggleLabel(label.id)}
+                              data-testid={`checkbox-label-${label.id}`}
+                            />
+                            <label
+                              htmlFor={`label-${label.id}`}
+                              className="flex items-center space-x-2 text-sm cursor-pointer flex-1"
+                            >
+                              <div
+                                className="w-3 h-3 rounded-full"
+                                style={{ backgroundColor: label.color }}
+                              />
+                              <span>{label.name}</span>
+                            </label>
+                          </div>
+                        ))
+                      ) : (
+                        <p className="text-sm text-muted-foreground">No labels available</p>
+                      )}
+                    </div>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            {/* Priorities Filter */}
+            <div className="flex items-center gap-2">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button 
+                    variant="outline" 
+                    size="sm" 
+                    className="justify-start"
+                    data-testid="button-filter-priorities"
+                  >
+                    <AlertTriangle className="w-4 h-4 mr-2" />
+                    Priorities
+                    {selectedPriorities.length > 0 && (
+                      <Badge variant="secondary" className="ml-2 text-xs">
+                        {selectedPriorities.length}
+                      </Badge>
+                    )}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-48" align="start">
+                  <div className="space-y-2">
+                    <h4 className="text-sm font-medium">Filter by Priority</h4>
+                    <Separator />
+                    <div className="space-y-2">
+                      {priorities.map((priority) => (
+                        <div 
+                          key={priority} 
+                          className="flex items-center space-x-2"
+                        >
+                          <Checkbox
+                            id={`priority-${priority}`}
+                            checked={selectedPriorities.includes(priority)}
+                            onCheckedChange={() => togglePriority(priority)}
+                            data-testid={`checkbox-priority-${priority}`}
+                          />
+                          <label
+                            htmlFor={`priority-${priority}`}
+                            className="flex items-center space-x-2 text-sm cursor-pointer flex-1"
+                          >
+                            <Badge 
+                              variant="secondary" 
+                              className={`text-xs ${getPriorityColor(priority)}`}
+                            >
+                              {priority}
+                            </Badge>
+                          </label>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            {/* Clear Filters */}
+            {hasActiveFilters && (
+              <>
+                <Separator orientation="vertical" className="h-6" />
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearAllFilters}
+                  data-testid="button-clear-filters"
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  <X className="w-4 h-4 mr-2" />
+                  Clear All
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+        
+        {/* Active Filters Display */}
+        {hasActiveFilters && (
+          <div className="mt-3 pt-3 border-t">
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className="text-xs text-muted-foreground">Active filters:</span>
+              {selectedLabels.map((labelId) => {
+                const label = labels.find(l => l.id === labelId);
+                return label ? (
+                  <Badge 
+                    key={labelId}
+                    variant="outline" 
+                    className="text-xs"
+                    data-testid={`active-filter-label-${labelId}`}
+                  >
+                    <div
+                      className="w-2 h-2 rounded-full mr-1"
+                      style={{ backgroundColor: label.color }}
+                    />
+                    {label.name}
+                    <X 
+                      className="w-3 h-3 ml-1 cursor-pointer" 
+                      onClick={() => toggleLabel(labelId)}
+                    />
+                  </Badge>
+                ) : null;
+              })}
+              {selectedPriorities.map((priority) => (
+                <Badge 
+                  key={priority}
+                  variant="outline" 
+                  className={`text-xs ${getPriorityColor(priority)}`}
+                  data-testid={`active-filter-priority-${priority}`}
+                >
+                  {priority}
+                  <X 
+                    className="w-3 h-3 ml-1 cursor-pointer" 
+                    onClick={() => togglePriority(priority)}
+                  />
+                </Badge>
+              ))}
+            </div>
+          </div>
+        )}
+      </Card>
+
       {/* View Mode Tabs */}
       <Tabs value={viewMode} onValueChange={(value) => setViewMode(value as ViewMode)}>
         <TabsList className="grid w-full grid-cols-3">