From a419374cb28b92ebba1693854201e0950b2d7abb Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Thu, 19 Feb 2026 22:52:54 -0500
Subject: [PATCH] feat: Add TaskPanel component for managing tasks with create,
 update, and delete functionalities

---
 client/src/components/TaskPanel.jsx | 428 ++++++++++++++++++++++++++++
 1 file changed, 428 insertions(+)
 create mode 100644 client/src/components/TaskPanel.jsx

diff --git a/client/src/components/TaskPanel.jsx b/client/src/components/TaskPanel.jsx
new file mode 100644
index 0000000..1fb4349
--- /dev/null
+++ b/client/src/components/TaskPanel.jsx
@@ -0,0 +1,428 @@
+import { useState, useEffect } from 'react';
+import './TaskPanel.css';
+
+const TaskPanel = ({ turtles, apiUrl }) => {
+  const [tasks, setTasks] = useState([]);
+  const [filter, setFilter] = useState('all'); // all, pending, in_progress, completed, failed
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState(null);
+
+  // Form state
+  const [taskType, setTaskType] = useState('mine_area');
+  const [priority, setPriority] = useState(5);
+  const [assignedTurtleId, setAssignedTurtleId] = useState('');
+  const [parameters, setParameters] = useState({
+    x1: '', y1: '', z1: '',
+    x2: '', y2: '', z2: ''
+  });
+
+  const taskTypes = [
+    { value: 'mine_area', label: '⛏️ Mine Area', icon: '⛏️' },
+    { value: 'explore', label: '🔍 Explore', icon: '🔍' },
+    { value: 'gather', label: '📦 Gather Resources', icon: '📦' },
+    { value: 'build', label: '🏗️ Build Structure', icon: '🏗️' },
+    { value: 'transport', label: '🚚 Transport Items', icon: '🚚' },
+    { value: 'clear_area', label: '🧹 Clear Area', icon: '🧹' },
+  ];
+
+  useEffect(() => {
+    loadTasks();
+    
+    // Refresh tasks every 10 seconds
+    const interval = setInterval(loadTasks, 10000);
+    return () => clearInterval(interval);
+  }, [filter]);
+
+  const loadTasks = async () => {
+    setLoading(true);
+    try {
+      const url = filter === 'all' 
+        ? `${apiUrl}/api/tasks`
+        : `${apiUrl}/api/tasks?status=${filter}`;
+      
+      const response = await fetch(url);
+      if (response.ok) {
+        const data = await response.json();
+        setTasks(data);
+      }
+    } catch (error) {
+      console.error('Failed to load tasks:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const createTask = async (e) => {
+    e.preventDefault();
+    
+    // Validate coordinates
+    const coords = ['x1', 'y1', 'z1', 'x2', 'y2', 'z2'];
+    const hasCoords = coords.some(key => parameters[key] !== '');
+    
+    if (hasCoords && !coords.every(key => parameters[key] !== '')) {
+      showMessage('Please fill all coordinates or leave them empty', 'error');
+      return;
+    }
+
+    const taskData = {
+      taskType,
+      priority: parseInt(priority),
+      assignedTurtleId: assignedTurtleId ? parseInt(assignedTurtleId) : null,
+      parameters: hasCoords ? {
+        x1: parseInt(parameters.x1),
+        y1: parseInt(parameters.y1),
+        z1: parseInt(parameters.z1),
+        x2: parseInt(parameters.x2),
+        y2: parseInt(parameters.y2),
+        z2: parseInt(parameters.z2)
+      } : {}
+    };
+
+    try {
+      const response = await fetch(`${apiUrl}/api/tasks`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(taskData)
+      });
+
+      if (response.ok) {
+        showMessage('Task created successfully!', 'success');
+        setShowCreateForm(false);
+        resetForm();
+        loadTasks();
+      } else {
+        showMessage('Failed to create task', 'error');
+      }
+    } catch (error) {
+      showMessage('Error creating task', 'error');
+    }
+  };
+
+  const updateTaskStatus = async (taskId, status, result = null) => {
+    try {
+      const response = await fetch(`${apiUrl}/api/tasks/${taskId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status, result })
+      });
+
+      if (response.ok) {
+        showMessage('Task updated', 'success');
+        loadTasks();
+      } else {
+        showMessage('Failed to update task', 'error');
+      }
+    } catch (error) {
+      showMessage('Error updating task', 'error');
+    }
+  };
+
+  const deleteTask = async (taskId) => {
+    if (!confirm('Are you sure you want to delete this task?')) return;
+
+    try {
+      const response = await fetch(`${apiUrl}/api/tasks/${taskId}`, {
+        method: 'DELETE'
+      });
+
+      if (response.ok) {
+        showMessage('Task deleted', 'success');
+        loadTasks();
+      } else {
+        showMessage('Failed to delete task', 'error');
+      }
+    } catch (error) {
+      showMessage('Error deleting task', 'error');
+    }
+  };
+
+  const resetForm = () => {
+    setTaskType('mine_area');
+    setPriority(5);
+    setAssignedTurtleId('');
+    setParameters({ x1: '', y1: '', z1: '', x2: '', y2: '', z2: '' });
+  };
+
+  const showMessage = (text, type) => {
+    setMessage({ text, type });
+    setTimeout(() => setMessage(null), 3000);
+  };
+
+  const getTaskIcon = (type) => {
+    const taskType = taskTypes.find(t => t.value === type);
+    return taskType ? taskType.icon : '📋';
+  };
+
+  const getStatusColor = (status) => {
+    switch (status) {
+      case 'pending': return '#94a3b8';
+      case 'in_progress': return '#3b82f6';
+      case 'completed': return '#10b981';
+      case 'failed': return '#ef4444';
+      default: return '#94a3b8';
+    }
+  };
+
+  const getPriorityLabel = (priority) => {
+    if (priority >= 8) return { label: 'Critical', color: '#ef4444' };
+    if (priority >= 6) return { label: 'High', color: '#f59e0b' };
+    if (priority >= 4) return { label: 'Medium', color: '#3b82f6' };
+    return { label: 'Low', color: '#94a3b8' };
+  };
+
+  return (
+    <div className="task-panel">
+      <div className="task-header">
+        <h2>📋 Task Queue</h2>
+        <button 
+          className="create-task-btn"
+          onClick={() => setShowCreateForm(!showCreateForm)}
+        >
+          {showCreateForm ? '✕ Cancel' : '➕ New Task'}
+        </button>
+      </div>
+
+      {message && (
+        <div className={`message ${message.type}`}>
+          {message.text}
+        </div>
+      )}
+
+      {/* Create Task Form */}
+      {showCreateForm && (
+        <div className="create-task-form">
+          <h3>Create New Task</h3>
+          <form onSubmit={createTask}>
+            <div className="form-row">
+              <label>
+                Task Type:
+                <select value={taskType} onChange={(e) => setTaskType(e.target.value)}>
+                  {taskTypes.map(type => (
+                    <option key={type.value} value={type.value}>
+                      {type.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+
+              <label>
+                Priority (1-10):
+                <input
+                  type="range"
+                  min="1"
+                  max="10"
+                  value={priority}
+                  onChange={(e) => setPriority(e.target.value)}
+                />
+                <span className="priority-value" style={{ color: getPriorityLabel(priority).color }}>
+                  {priority} - {getPriorityLabel(priority).label}
+                </span>
+              </label>
+            </div>
+
+            <label>
+              Assign to Turtle (optional):
+              <select value={assignedTurtleId} onChange={(e) => setAssignedTurtleId(e.target.value)}>
+                <option value="">Any available turtle</option>
+                {turtles.map(turtle => (
+                  <option key={turtle.turtleID} value={turtle.turtleID}>
+                    🐢 {turtle.name || `Turtle ${turtle.turtleID}`}
+                  </option>
+                ))}
+              </select>
+            </label>
+
+            <div className="coordinates-section">
+              <h4>Coordinates (optional):</h4>
+              <div className="coordinates-grid">
+                <div className="coord-group">
+                  <span>Start:</span>
+                  <input
+                    type="number"
+                    placeholder="X1"
+                    value={parameters.x1}
+                    onChange={(e) => setParameters({...parameters, x1: e.target.value})}
+                  />
+                  <input
+                    type="number"
+                    placeholder="Y1"
+                    value={parameters.y1}
+                    onChange={(e) => setParameters({...parameters, y1: e.target.value})}
+                  />
+                  <input
+                    type="number"
+                    placeholder="Z1"
+                    value={parameters.z1}
+                    onChange={(e) => setParameters({...parameters, z1: e.target.value})}
+                  />
+                </div>
+                <div className="coord-group">
+                  <span>End:</span>
+                  <input
+                    type="number"
+                    placeholder="X2"
+                    value={parameters.x2}
+                    onChange={(e) => setParameters({...parameters, x2: e.target.value})}
+                  />
+                  <input
+                    type="number"
+                    placeholder="Y2"
+                    value={parameters.y2}
+                    onChange={(e) => setParameters({...parameters, y2: e.target.value})}
+                  />
+                  <input
+                    type="number"
+                    placeholder="Z2"
+                    value={parameters.z2}
+                    onChange={(e) => setParameters({...parameters, z2: e.target.value})}
+                  />
+                </div>
+              </div>
+            </div>
+
+            <button type="submit" className="submit-btn">
+              Create Task
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* Filter Tabs */}
+      <div className="task-filters">
+        <button 
+          className={filter === 'all' ? 'active' : ''} 
+          onClick={() => setFilter('all')}
+        >
+          All ({tasks.length})
+        </button>
+        <button 
+          className={filter === 'pending' ? 'active' : ''} 
+          onClick={() => setFilter('pending')}
+        >
+          Pending
+        </button>
+        <button 
+          className={filter === 'in_progress' ? 'active' : ''} 
+          onClick={() => setFilter('in_progress')}
+        >
+          In Progress
+        </button>
+        <button 
+          className={filter === 'completed' ? 'active' : ''} 
+          onClick={() => setFilter('completed')}
+        >
+          Completed
+        </button>
+        <button 
+          className={filter === 'failed' ? 'active' : ''} 
+          onClick={() => setFilter('failed')}
+        >
+          Failed
+        </button>
+      </div>
+
+      {/* Tasks List */}
+      <div className="tasks-list">
+        {loading && <div className="loading">Loading tasks...</div>}
+
+        {!loading && tasks.length === 0 && (
+          <div className="empty-state">
+            <div className="empty-icon">📋</div>
+            <div className="empty-title">No Tasks Found</div>
+            <div className="empty-text">
+              {filter === 'all' 
+                ? 'Create a task to get started!'
+                : `No ${filter.replace('_', ' ')} tasks`}
+            </div>
+          </div>
+        )}
+
+        {tasks.map(task => {
+          const priorityInfo = getPriorityLabel(task.priority);
+          const turtle = turtles.find(t => t.turtleID === task.assignedTurtleId);
+          
+          return (
+            <div key={task.taskId} className="task-card">
+              <div className="task-card-header">
+                <div className="task-title">
+                  <span className="task-icon">{getTaskIcon(task.taskType)}</span>
+                  <span className="task-type">
+                    {taskTypes.find(t => t.value === task.taskType)?.label || task.taskType}
+                  </span>
+                </div>
+                <div className="task-badges">
+                  <span 
+                    className="priority-badge" 
+                    style={{ backgroundColor: priorityInfo.color }}
+                  >
+                    {priorityInfo.label}
+                  </span>
+                  <span 
+                    className="status-badge" 
+                    style={{ backgroundColor: getStatusColor(task.status) }}
+                  >
+                    {task.status.replace('_', ' ')}
+                  </span>
+                </div>
+              </div>
+
+              {task.assignedTurtleId && (
+                <div className="task-assignment">
+                  🐢 {turtle?.name || `Turtle ${task.assignedTurtleId}`}
+                </div>
+              )}
+
+              {task.parameters && Object.keys(task.parameters).length > 0 && (
+                <div className="task-parameters">
+                  <strong>Area:</strong> ({task.parameters.x1}, {task.parameters.y1}, {task.parameters.z1}) → 
+                  ({task.parameters.x2}, {task.parameters.y2}, {task.parameters.z2})
+                </div>
+              )}
+
+              {task.result && (
+                <div className="task-result">
+                  <strong>Result:</strong> {task.result}
+                </div>
+              )}
+
+              <div className="task-actions">
+                {task.status === 'pending' && (
+                  <>
+                    <button onClick={() => updateTaskStatus(task.taskId, 'in_progress')}>
+                      ▶️ Start
+                    </button>
+                    <button onClick={() => deleteTask(task.taskId)}>
+                      🗑️ Delete
+                    </button>
+                  </>
+                )}
+                {task.status === 'in_progress' && (
+                  <>
+                    <button onClick={() => updateTaskStatus(task.taskId, 'completed', 'Task completed')}>
+                      ✅ Complete
+                    </button>
+                    <button onClick={() => updateTaskStatus(task.taskId, 'failed', 'Task failed')}>
+                      ❌ Fail
+                    </button>
+                  </>
+                )}
+                {(task.status === 'completed' || task.status === 'failed') && (
+                  <button onClick={() => deleteTask(task.taskId)}>
+                    🗑️ Delete
+                  </button>
+                )}
+              </div>
+
+              <div className="task-timestamp">
+                Created: {new Date(task.createdAt).toLocaleString()}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TaskPanel;