Surveillance Cimenterie Eagle Eye

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [selectedZone, setSelectedZone] = useState('');
  const [tasks, setTasks] = useState([]);
  const [comments, setComments] = useState({});

  const zones = {
    'Raw Sector': ['Raw Mill 1 (BC1)', 'Raw Mill 2 (BC2)'],
    'Baking Sector': ['Kiln 1', 'Kiln 2'],
    'Cement Sector': ['BK1', 'BK2', 'BK3']
  };

  const handleZoneSelect = (zone) => {
    setSelectedZone(zone);
    setTasks([
      { id: 1, description: 'Check temperature', completed: false },
      { id: 2, description: 'Inspect machinery', completed: false }
    ]);
  };

  const toggleTaskCompletion = (taskId) => {
    setTasks(tasks.map(task =>
      task.id === taskId ? { ...task, completed: !task.completed } : task
    ));
  };

  const addComment = (taskId, comment) => {
    setComments({ ...comments, [taskId]: comment });
  };

  return (
    <div className="App">
      <header className="bg-blue-500 text-white p-4">
        <h1 className="text-2xl">Eagle Eye</h1>
      </header>
      <div className="flex">
        <aside className="w-1/4 bg-gray-100 p-4">
          {Object.entries(zones).map(([sector, zoneList]) => (
            <div key={sector} className="mb-4">
              <h2 className="font-bold">{sector}</h2>
              {zoneList.map(zone => (
                <button key={zone} onClick={() => handleZoneSelect(zone)} className="block p-2 hover:bg-gray-200">
                  {zone}
                </button>
              ))}
            </div>
          ))}
        </aside>
        <main className="flex-1 p-4">
          <h2 className="text-xl mb-4">{selectedZone || 'Select a Zone'}</h2>
          {tasks.map(task => (
            <div key={task.id} className="mb-4 p-4 border rounded">
              <div className="flex justify-between">
                <span>{task.description}</span>
                <button onClick={() => toggleTaskCompletion(task.id)} className={`px-4 py-2 ${task.completed ? 'bg-green-500' : 'bg-red-500'} text-white`}>
                  {task.completed ? 'Completed' : 'Not Completed'}
                </button>
              </div>
              <input type="text" placeholder="Add a comment" onBlur={(e) => addComment(task.id, e.target.value)} className="mt-2 p-2 border rounded w-full" />
              {comments[task.id] && <p className="mt-2 text-sm text-gray-600">Comment: {comments[task.id]}</p>}
            </div>
          ))}
        </main>
      </div>
    </div>
  );
};

export default App;