Source: manager/ingredients.jsx

  1. import { useEffect, useState } from 'react';
  2. import { useNavigate } from 'react-router-dom';
  4. /**
  5.  * Ingredients Manager Component
  6.  *
  7.  * Manages the ingredients inventory, allowing users to view, add, and edit ingredients, changing the backend.
  8.  *
  9.  * @returns {JSX.Element} The rendered Ingredients component.
  10.  */
  11. const Ingredients = () => {
  12.   const VITE_BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
  13.   const [ingredients, setIngredients] = useState([]);
  14.   const [isModalOpen, setIsModalOpen] = useState(false);
  15.   const [currentIngredient, setCurrentIngredient] = useState(null);
  16.   const [ingredientForm, setIngredientForm] = useState({
  17.     name: '',
  18.     stock: '',
  19.   });
  20.   
  21.   const navigate = useNavigate();
  23.   /**
  24.    * Fetches all ingredients from the backend and updates the state.
  25.    *
  26.    * @async
  27.    * @function loadIngredientsFromDatabase
  28.    */
  29.   const loadIngredientsFromDatabase = async () => {
  30.     try {
  31.       const response = await fetch(`${VITE_BACKEND_URL}/api/ingredients/`);
  32.       if (!response.ok) {
  33.         throw new Error('Failed to fetch ingredients');
  34.       }
  35.       const data = await response.json();
  36.       setIngredients(data);
  37.     } catch (error) {
  38.       console.error('Error loading ingredients:', error);
  39.     }
  40.   };
  42.   /**
  43.    * Handles input changes in the ingredient form.
  44.    *
  45.    * @param {Object} e - The event object from the input field.
  46.    */
  47.   const handleInputChange = (e) => {
  48.     const { name, value } = e.target;
  49.     setIngredientForm((prevForm) => ({
  50.       ...prevForm,
  51.       [name]: value,
  52.     }));
  53.   };
  55.   /**
  56.    * Opens the Add/Edit modal with specified ingredient data or as a blank form.
  57.    *
  58.    * @param {Object|null} ingredient - The ingredient to edit, or null for a new ingredient.
  59.    */
  60.   const openModal = (ingredient = null) => {
  61.     setCurrentIngredient(ingredient);
  62.     setIngredientForm(
  63.       ingredient || { name: '', stock: '' }
  64.     );
  65.     setIsModalOpen(true);
  66.   };
  68.   /**
  69.    * Closes the Add/Edit modal and resets the form.
  70.    */
  71.   const closeModal = () => {
  72.     setIsModalOpen(false);
  73.     setCurrentIngredient(null);
  74.     setIngredientForm({ name: '', stock: '' });
  75.   };
  77.   /**
  78.    * Submits the form to add or update an ingredient.
  79.    *
  80.    * @async
  81.    * @param {Object} e - The form submit event object.
  82.    */
  83.   const handleSubmit = async (e) => {
  84.     e.preventDefault();
  85.     const method = currentIngredient ? 'PUT' : 'POST';
  86.     const url = currentIngredient
  87.       ? `${VITE_BACKEND_URL}/api/ingredients/update-stock`
  88.       : `${VITE_BACKEND_URL}/api/ingredients/create`;
  90.     try {
  91.       const response = await fetch(url, {
  92.         method,
  93.         headers: { 'Content-Type': 'application/json' },
  94.         body: JSON.stringify(ingredientForm), // Send form data as JSON
  95.       });
  96.       if (!response.ok) {
  97.         throw new Error('Failed to save ingredient');
  98.       }
  99.       await loadIngredientsFromDatabase(); // Refresh the ingredients list
  100.       closeModal(); // Close the modal
  101.     } catch (error) {
  102.       console.error('Error saving ingredient:', error);
  103.     }
  104.   };
  106.   /**
  107.    * Fetches the ingredients when the component is mounted.
  108.    *
  109.    * @useEffect
  110.    */
  111.   useEffect(() => {
  112.     loadIngredientsFromDatabase();
  113.   }, []);
  115.   return (
  116.     <div className="flex flex-col items-center p-8 bg-gray-50 dark:bg-slate-800">
  117.       <button
  118.             className="fixed top-20 left-4 bg-gray-300 text-black font-bold text-2xl rounded-full w-12 h-12 flex items-center justify-center bg-opacity-75 hover:scale-110 hover:bg-gray-400 transition-transform duration-200 ease-in-out"
  119.             onClick={() => navigate(-1)}
  120.             >
  121.             {"<"}
  122.       </button>
  123.       <h1 className="text-4xl font-bold text-red-600 mb-8">Ingredients Inventory</h1>
  124.       <button
  125.         onClick={() => openModal()}
  126.         className="bg-green-600 text-white text-lg px-6 py-2 rounded shadow-lg hover:bg-green-500 transition duration-300 mb-4"
  127.       >
  128.         Add Ingredient
  129.       </button>
  130.       <div className="bg-white border border-gray-300 rounded-lg shadow-lg w-full max-w-4xl overflow-hidden">
  131.         <table className="min-w-full divide-y divide-gray-200 border-collapse">
  132.           <thead className="bg-gray-100">
  133.             <tr>
  134.               <th className="px-16 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
  135.                 Ingredient
  136.               </th>
  137.               <th className="px-16 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
  138.                 Stock
  139.               </th>
  140.               <th className="px-16 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
  141.                 Actions
  142.               </th>
  143.             </tr>
  144.           </thead>
  145.           <tbody className="bg-white divide-y dark:bg-slate-300 divide-gray-200">
  146.             {ingredients.length === 0 ? (
  147.               <tr>
  148.                 <td colSpan="3" className="px-16 py-4 text-center text-gray-500">
  149.                   No ingredients found.
  150.                 </td>
  151.               </tr>
  152.             ) : (
  153.               ingredients.map((ingredient) => (
  154.                 <tr
  155.                   key={ingredient.ingredient_id} // Match the backend's "ingredient_id"
  156.                   className="hover:bg-gray-100 transition duration-300"
  157.                 >
  158.                   <td className="px-16 py-4 whitespace-nowrap text-sm font-medium text-gray-900 border-b border-gray-200">
  159.                     {ingredient.ingredient_name}
  160.                   </td>
  161.                   <td className="px-16 py-4 whitespace-nowrap text-sm text-gray-600 border-b border-gray-200">
  162.                     {ingredient.stock}
  163.                   </td>
  164.                   <td className="px-16 py-4 whitespace-nowrap text-sm text-gray-600 border-b border-gray-200">
  165.                     <button
  166.                       onClick={() =>
  167.                         openModal({
  168.                           name: ingredient.ingredient_name, // Set form data correctly
  169.                           stock: ingredient.stock,
  170.                         })
  171.                       }
  172.                       className="bg-blue-500 text-white px-4 py-1 rounded hover:bg-blue-400 transition duration-300 mr-2"
  173.                     >
  174.                       Edit
  175.                     </button>
  176.                   </td>
  177.                 </tr>
  178.               ))
  179.             )}
  180.           </tbody>
  181.         </table>
  182.       </div>
  184.       {isModalOpen && (
  185.         <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
  186.           <div className="bg-white dark:bg-black p-6 rounded shadow-lg max-w-sm w-full">
  187.             <h2 className="text-xl dark:text-white font-bold mb-4">
  188.               {currentIngredient ? 'Edit Ingredient' : 'Add Ingredient'}
  189.             </h2>
  190.             <form onSubmit={handleSubmit}>
  191.               <div className="mb-4">
  192.                 <label className="block text-gray-700 dark:text-white">Ingredient Name</label>
  193.                 <input
  194.                   type="text"
  195.                   name="name" // Match backend's "name" field
  196.                   value={ingredientForm.name}
  197.                   onChange={handleInputChange}
  198.                   required
  199.                   className="border rounded w-full p-2"
  200.                 />
  201.               </div>
  202.               <div className="mb-4">
  203.                 <label className="block text-gray-700 dark:text-white">Stock</label>
  204.                 <input
  205.                   type="number"
  206.                   name="stock" // Match backend's "stock" field
  207.                   value={ingredientForm.stock}
  208.                   onChange={handleInputChange}
  209.                   required
  210.                   className="border rounded w-full p-2"
  211.                 />
  212.               </div>
  213.               <div className="flex justify-between">
  214.                 <button
  215.                   type="button"
  216.                   onClick={closeModal}
  217.                   className="bg-red-500 text-white px-4 py-1 rounded hover:bg-red-400 transition duration-300"
  218.                 >
  219.                   Cancel
  220.                 </button>
  221.                 <button
  222.                   type="submit"
  223.                   className="bg-blue-500 text-white px-4 py-1 rounded hover:bg-blue-400 transition duration-300"
  224.                 >
  225.                   {currentIngredient ? 'Update' : 'Add'}
  226.                 </button>
  227.               </div>
  228.             </form>
  229.           </div>
  230.         </div>
  231.       )}
  232.     </div>
  233.   );
  234. };
  236. export default Ingredients;