Skip to content

Commit

Permalink
Task 1 of 4
Browse files Browse the repository at this point in the history
  • Loading branch information
@birdup000
birdup000 committed Dec 27, 2024
1 parent 229a3d0 commit 8f8feb7
Show file tree
Hide file tree
Showing 3 changed files with 299 additions and 126 deletions.
134 changes: 91 additions & 43 deletions app/components/ModernTaskPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,26 +94,38 @@ const ModernTaskPanel: React.FC<ModernTaskPanelProps> = ({
return (
<div className="min-h-screen bg-[#111111] text-white p-6">
{/* Top Bar */}
<div className="flex items-center justify-between mb-8">
<h1 className="text-3xl font-bold">Task Dashboard</h1>
<div className="flex items-center justify-between mb-8 bg-gray-900 p-6 rounded-lg shadow-lg">
<div className="flex items-center space-x-4">
<h1 className="text-3xl font-bold bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent">Task Dashboard</h1>
<div className="flex items-center space-x-2 ml-8">
<div className="px-3 py-1 bg-gray-800 rounded-lg">
<span className="text-gray-400 text-sm">Total Tasks: </span>
<span className="text-white font-medium">{tasks.length}</span>
</div>
<div className="px-3 py-1 bg-gray-800 rounded-lg">
<span className="text-gray-400 text-sm">Active: </span>
<span className="text-white font-medium">{tasks.filter(t => t.status === 'in-progress').length}</span>
</div>
</div>
</div>
<div className="flex items-center space-x-4">
<button
onClick={() => setIsAGiXTConfigOpen(true)}
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"
onClick={() => setCurrentView(currentView === 'board' ? 'matrix' : 'board')}
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors flex items-center space-x-2"
>
AGiXT Config
<span>{currentView === 'board' ? '📊 Matrix View' : '📋 Board View'}</span>
</button>
<button
onClick={() => setCurrentView(currentView === 'board' ? 'matrix' : 'board')}
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"
onClick={() => setIsAGiXTConfigOpen(true)}
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors flex items-center space-x-2"
>
{currentView === 'board' ? 'Show Matrix' : 'Show Board'}
<span>⚙️ AGiXT Config</span>
</button>
<button
onClick={() => setIsEditorOpen(true)}
className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
className="px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 rounded-lg transition-colors flex items-center space-x-2 shadow-lg"
>
New Task
<span>➕ New Task</span>
</button>
</div>
</div>
Expand All @@ -139,45 +151,81 @@ const ModernTaskPanel: React.FC<ModernTaskPanelProps> = ({
<DragDropContext onDragEnd={onDragEnd}>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* Todo Column */}
<div className="bg-gray-800 rounded-lg p-4">
<h2 className="text-xl font-semibold mb-4">To Do</h2>
<TaskList
droppableId="todo"
tasks={filteredAndSortedTasks().filter(task => task.status === 'todo')}
onUpdateTask={onUpdateTask}
onTaskClick={setSelectedTask}
onDeleteTask={onDeleteTask}
onReorderTasks={onReorderTasks}
listId="default"
/>
<div className="bg-gradient-to-b from-gray-800 to-gray-900 rounded-lg shadow-xl">
<div className="p-4 border-b border-gray-700">
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold flex items-center space-x-2">
<span className="w-3 h-3 bg-gray-400 rounded-full"></span>
<span>To Do</span>
</h2>
<span className="text-gray-400 text-sm px-2 py-1 bg-gray-700 rounded-lg">
{filteredAndSortedTasks().filter(task => task.status === 'todo').length} tasks
</span>
</div>
</div>
<div className="p-4">
<TaskList
droppableId="todo"
tasks={filteredAndSortedTasks().filter(task => task.status === 'todo')}
onUpdateTask={onUpdateTask}
onTaskClick={setSelectedTask}
onDeleteTask={onDeleteTask}
onReorderTasks={onReorderTasks}
listId="default"
/>
</div>
</div>

{/* In Progress Column */}
<div className="bg-gray-800 rounded-lg p-4">
<h2 className="text-xl font-semibold mb-4">In Progress</h2>
<TaskList
droppableId="in-progress"
tasks={filteredAndSortedTasks().filter(task => task.status === 'in-progress')}
onUpdateTask={onUpdateTask}
onTaskClick={setSelectedTask}
onDeleteTask={onDeleteTask}
onReorderTasks={onReorderTasks}
listId="default"
/>
<div className="bg-gradient-to-b from-gray-800 to-gray-900 rounded-lg shadow-xl">
<div className="p-4 border-b border-gray-700">
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold flex items-center space-x-2">
<span className="w-3 h-3 bg-blue-400 rounded-full"></span>
<span>In Progress</span>
</h2>
<span className="text-gray-400 text-sm px-2 py-1 bg-gray-700 rounded-lg">
{filteredAndSortedTasks().filter(task => task.status === 'in-progress').length} tasks
</span>
</div>
</div>
<div className="p-4">
<TaskList
droppableId="in-progress"
tasks={filteredAndSortedTasks().filter(task => task.status === 'in-progress')}
onUpdateTask={onUpdateTask}
onTaskClick={setSelectedTask}
onDeleteTask={onDeleteTask}
onReorderTasks={onReorderTasks}
listId="default"
/>
</div>
</div>

{/* Done Column */}
<div className="bg-gray-800 rounded-lg p-4">
<h2 className="text-xl font-semibold mb-4">Done</h2>
<TaskList
droppableId="done"
tasks={filteredAndSortedTasks().filter(task => task.status === 'done')}
onUpdateTask={onUpdateTask}
onTaskClick={setSelectedTask}
onDeleteTask={onDeleteTask}
onReorderTasks={onReorderTasks}
listId="default"
/>
<div className="bg-gradient-to-b from-gray-800 to-gray-900 rounded-lg shadow-xl">
<div className="p-4 border-b border-gray-700">
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold flex items-center space-x-2">
<span className="w-3 h-3 bg-green-400 rounded-full"></span>
<span>Done</span>
</h2>
<span className="text-gray-400 text-sm px-2 py-1 bg-gray-700 rounded-lg">
{filteredAndSortedTasks().filter(task => task.status === 'done').length} tasks
</span>
</div>
</div>
<div className="p-4">
<TaskList
droppableId="done"
tasks={filteredAndSortedTasks().filter(task => task.status === 'done')}
onUpdateTask={onUpdateTask}
onTaskClick={setSelectedTask}
onDeleteTask={onDeleteTask}
onReorderTasks={onReorderTasks}
listId="default"
/>
</div>
</div>
</div>
</DragDropContext>
Expand Down
89 changes: 65 additions & 24 deletions app/components/SearchBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,39 +18,80 @@ const SearchBar: React.FC<SearchBarProps> = ({
onFilterChange,
}) => {
return (
<div className="flex flex-wrap gap-4 mb-6 p-4 bg-[#2A2A2A] rounded-lg">
<div className="flex-1 min-w-[200px]">
<div className="flex flex-wrap gap-4 mb-6 p-6 bg-gradient-to-b from-gray-800 to-gray-900 rounded-lg shadow-lg">
<div className="flex-1 min-w-[300px] relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd" />
</svg>
</div>
<input
type="text"
value={searchTerm}
onChange={(e) => onSearchChange(e.target.value)}
placeholder="Search tasks..."
className="w-full px-4 py-2 bg-[#333333] rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 relative group"
placeholder="Search tasks... (Ctrl+K)"
className="w-full pl-10 pr-4 py-3 bg-gray-900 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-shadow"
title="Press Ctrl+K to focus search"
/>
{searchTerm && (
<button
onClick={() => onSearchChange('')}
className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-white"
>
<svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</button>
)}
</div>

<div className="flex gap-4">
<select
value={sortBy}
onChange={(e) => onSortChange(e.target.value as any)}
className="px-4 py-2 bg-[#333333] rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
<option value="dueDate">Sort by Due Date</option>
<option value="priority">Sort by Priority</option>
<option value="title">Sort by Title</option>
</select>
<div className="flex flex-wrap gap-4">
<div className="relative min-w-[180px]">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M3 3a1 1 0 000 2h11a1 1 0 100-2H3zM3 7a1 1 0 000 2h7a1 1 0 100-2H3zM3 11a1 1 0 100 2h4a1 1 0 100-2H3z" />
</svg>
</div>
<select
value={sortBy}
onChange={(e) => onSortChange(e.target.value as any)}
className="w-full pl-10 pr-4 py-3 bg-gray-900 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 appearance-none cursor-pointer transition-shadow"
>
<option value="dueDate">Sort by Due Date</option>
<option value="priority">Sort by Priority</option>
<option value="title">Sort by Title</option>
</select>
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</div>
</div>

<select
value={filterPriority}
onChange={(e) => onFilterChange(e.target.value as any)}
className="px-4 py-2 bg-[#333333] rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
<option value="all">All Priorities</option>
<option value="high">High Priority</option>
<option value="medium">Medium Priority</option>
<option value="low">Low Priority</option>
</select>
<div className="relative min-w-[180px]">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 11-2 0V4H4v10h1a1 1 0 110 2H3a1 1 0 01-1-1V3zm5 4a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1z" clipRule="evenodd" />
</svg>
</div>
<select
value={filterPriority}
onChange={(e) => onFilterChange(e.target.value as any)}
className={`w-full pl-10 pr-4 py-3 bg-gray-900 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 appearance-none cursor-pointer transition-shadow ${
filterPriority !== 'all' ? 'ring-2 ring-indigo-500/50' : ''
}`}
>
<option value="all">All Priorities</option>
<option value="high">High Priority</option>
<option value="medium">Medium Priority</option>
<option value="low">Low Priority</option>
</select>
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</div>
</div>
</div>
</div>
);
Expand Down
Loading

0 comments on commit 8f8feb7

Please sign in to comment.