Aplicación para Insumos de CUARZO

import React, { useState } from 'react';

const App = () => {
  const [userType, setUserType] = useState('admin');
  const [supplies, setSupplies] = useState([]);
  const [draft, setDraft] = useState([]);

  const handleSupplyChange = (index, field, value) => {
    const updatedSupplies = [...supplies];
    updatedSupplies[index][field] = value;
    setSupplies(updatedSupplies);
  };

  const handleSaveDraft = () => {
    setDraft([...supplies]);
  };

  const handleSubmit = () => {
    // Logic to submit the supplies
  };

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-7xl mx-auto">
        <h1 className="text-3xl font-bold text-center mb-8">CUARZO Supply Management</h1>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h2 className="text-xl font-semibold mb-4">Bar Supplies</h2>
            {supplies.map((supply, index) => (
              <div key={index} className="mb-4">
                <label className="block text-sm font-medium text-gray-700">{supply.name}</label>
                <input
                  type="number"
                  value={supply.quantity}
                  onChange={(e) => handleSupplyChange(index, 'quantity', e.target.value)}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                />
                <select
                  value={supply.unit}
                  onChange={(e) => handleSupplyChange(index, 'unit', e.target.value)}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                >
                  <option value="grams">Grams</option>
                  <option value="kilograms">Kilograms</option>
                  <option value="pieces">Pieces</option>
                  <option value="boxes">Boxes</option>
                  <option value="bags">Bags</option>
                </select>
              </div>
            ))}
            <button
              onClick={handleSaveDraft}
              className="mt-4 w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600"
            >
              Save Draft
            </button>
            <button
              onClick={handleSubmit}
              className="mt-4 w-full bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600"
            >
              Submit List
            </button>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h2 className="text-xl font-semibold mb-4">Floor Supplies</h2>
            {/* Similar structure as Bar Supplies */}
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h2 className="text-xl font-semibold mb-4">Kitchen Supplies</h2>
            {/* Similar structure as Bar Supplies */}
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;