Surveillance d'ateliers cimenterie

import React, { useState } from 'react';

const App = () => {
  const [selectedZone, setSelectedZone] = useState(null);
  const [tasks, setTasks] = useState([]);

  const zones = [
    { id: 'BC1', name: 'Broyeur Cru 1', sector: 'Cru' },
    { id: 'BC2', name: 'Broyeur Cru 2', sector: 'Cru' },
    { id: 'Four1', name: 'Four 1', sector: 'Cuisson' },
    { id: 'Four2', name: 'Four 2', sector: 'Cuisson' },
    { id: 'BK1', name: 'BK1', sector: 'Ciment' },
    { id: 'BK2', name: 'BK2', sector: 'Ciment' },
    { id: 'BK3', name: 'BK3', sector: 'Ciment' }
  ];

  const handleZoneSelect = (zoneId) => {
    setSelectedZone(zoneId);
    // Fetch tasks for the selected zone
    setTasks([
      { id: 1, description: 'Check temperature', completed: false, comments: '', timestamp: new Date() },
      { id: 2, description: 'Inspect machinery', completed: false, comments: '', timestamp: new Date() }
    ]);
  };

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

  return (
    <div className="min-h-screen bg-gray-100">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-2xl font-bold">Cimenterie Monitoring</h1>
      </header>
      <main className="p-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="bg-white p-4 rounded-lg shadow">
            <h2 className="text-xl font-semibold mb-4">Select Zone</h2>
            {zones.map(zone => (
              <div key={zone.id} className="mb-2">
                <button
                  onClick={() => handleZoneSelect(zone.id)}
                  className="w-full text-left p-2 hover:bg-gray-200 rounded">
                  {zone.name} ({zone.sector})
                </button>
              </div>
            ))}
          </div>
          <div className="col-span-2 bg-white p-4 rounded-lg shadow">
            <h2 className="text-xl font-semibold mb-4">Tasks</h2>
            {tasks.map(task => (
              <div key={task.id} className="mb-2 p-2 border-b">
                <div className="flex justify-between">
                  <span>{task.description}</span>
                  <button
                    onClick={() => handleTaskCompletion(task.id)}
                    className={`px-2 py-1 rounded ${task.completed ? 'bg-green-500' : 'bg-red-500'} text-white`}>
                    {task.completed ? 'Completed' : 'Not Completed'}
                  </button>
                </div>
                <div className="text-sm text-gray-600">{task.timestamp.toLocaleString()}</div>
              </div>
            ))}
          </div>
        </div>
      </main>
    </div>
  );
};

export default App;