From b96d924d983bc45bf3db7a769d11f47ddf1adb37 Mon Sep 17 00:00:00 2001
From: Birdup <34012548+birdup000@users.noreply.github.com>
Date: Tue, 17 Dec 2024 00:06:28 -0600
Subject: [PATCH] checkpoint

---
 app/components/TaskCard.tsx  | 11 ++++++++--
 app/components/TaskPanel.tsx | 41 ++++++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/app/components/TaskCard.tsx b/app/components/TaskCard.tsx
index a692acc..2632b57 100644
--- a/app/components/TaskCard.tsx
+++ b/app/components/TaskCard.tsx
@@ -81,12 +81,19 @@ export const TaskCard: React.FC<TaskCardProps> = ({ task, index = 0, onClick, on
           ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
-          className={`bg-[#333333] border-l-4 p-4 rounded-lg hover:bg-[#383838] transition-colors cursor-pointer ${statusColors[status]} ${isOverdue ? 'ring-2 ring-red-500/50' : ''}`}
+          className={`bg-[#333333] border-l-4 p-4 rounded-lg hover:bg-[#383838] transition-colors cursor-pointer ${statusColors[status]} ${isOverdue ? 'ring-2 ring-red-500/50' : ''} ${task.recurring && status === 'done' ? 'opacity-75' : ''}`}
           onClick={onClick}
         >
           <div className="flex items-center justify-between mb-2">
             <h3 className="text-lg font-semibold text-white flex items-center gap-2">
-              {title}
+              <span className={task.recurring && status === 'done' ? 'line-through text-gray-400' : ''}>
+                {title}
+                {task.recurring && status === 'done' && (
+                  <span className="ml-2 text-xs bg-green-500/20 text-green-300 px-2 py-0.5 rounded">
+                    ✓ Completed
+                  </span>
+                )}
+              </span>
               {task.dependsOn && task.dependsOn.length > 0 && (
                 <span className="text-xs bg-blue-500/20 text-blue-300 px-2 py-0.5 rounded" title="Has dependencies">
                   🔗 {task.dependsOn.length}
diff --git a/app/components/TaskPanel.tsx b/app/components/TaskPanel.tsx
index aa66ff2..d0f5971 100644
--- a/app/components/TaskPanel.tsx
+++ b/app/components/TaskPanel.tsx
@@ -57,6 +57,7 @@ const TaskPanel: React.FC = () => {
   };
   const searchInputRef = React.useRef<HTMLInputElement>(null);
   const [currentTab, setCurrentTab] = React.useState<'tasks' | 'notes'>('tasks');
+  const [showCompletedRecurring, setShowCompletedRecurring] = React.useState(true);
   const [showIntegrations, setShowIntegrations] = React.useState(false);
   const [isEditorOpen, setIsEditorOpen] = React.useState(false);
   const { tasks, addTask, updateTask, deleteTask, reorderTasks, importTasks, lists, addList, updateList, deleteList } = useTasks();
@@ -770,6 +771,46 @@ const TaskPanel: React.FC = () => {
                         onReorderTasks={reorderTasks}
                         listId={currentList}
                       />
+                      
+                      {/* Completed Recurring Tasks Section */}
+                      {filteredTasks().some(t => t.recurring && t.status === 'done') && (
+                        <div className="mt-6 border-t border-[#444444] pt-4">
+                          <div 
+                            className="flex items-center gap-2 mb-4 cursor-pointer hover:text-gray-300 transition-colors"
+                            onClick={() => setShowCompletedRecurring(!showCompletedRecurring)}
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              className={`h-4 w-4 transform transition-transform ${showCompletedRecurring ? 'rotate-90' : ''}`}
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M9 5l7 7-7 7"
+                              />
+                            </svg>
+                            <h3 className="text-md font-medium text-gray-400">Completed Recurring Tasks</h3>
+                            <span className="text-sm text-gray-500">
+                              ({filteredTasks().filter(t => t.recurring && t.status === 'done').length})
+                            </span>
+                          </div>
+                          <div className={`transition-all duration-200 ${showCompletedRecurring ? 'block' : 'hidden'}`}>
+                            <TaskListComponent
+                              droppableId="completed-recurring"
+                              tasks={filteredTasks().filter(task => task.recurring && task.status === 'done')}
+                              onUpdateTask={updateTask}
+                              onTaskClick={(task: Task) => setSelectedTask(task)}
+                              onDeleteTask={(task: Task) => deleteTask(task.id)}
+                              onReorderTasks={reorderTasks}
+                              listId={currentList}
+                            />
+                          </div>
+                        </div>
+                      )}
                     </div>
 
                     <div className="bg-[#2A2A2A] rounded-lg p-4">