Coffee Orders

Import React, { useState, useEffect } from "react"; import Navbar from "./Navbar"; import { FaEye, FaEdit, FaTrash } from "react icons/fa"; import { Link } from "react router dom"; const GetAllCoffee = () => { const [coffees, setCoffees] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchCoffees = async () => { try { const response = await fetch("http://localhost:4000/coffees"); if (!response.ok) { throw new Error("Network response was not ok"); } const data = await response.json(); setCoffees(data); } catch (err) { setError("Error fetching coffee data. Please try again later."); } finally { setLoading(false); } }; fetchCoffees(); }, []); const handleDelete = async (id) => { const confirmDelete = window.confirm("Are you sure you want to delete this Coffee?"); if (confirmDelete) { try { const response = await fetch(`http://localhost:4000/coffees/${id}`, { method: 'DELETE' }); if (!response.ok) { throw new Error("Error deleting coffee item"); } setCoffees(coffees.filter((coffee) => coffee._id !== id)); } catch (err) { alert("Error deleting Coffee: " + err.message); } } }; if (loading) { return ( <div className="flex items center justify center h screen"> <div className="animate spin rounded full h 32 w 32 border t 2 border b 2 border gray 900"></div> </div> ); } if (error) { return ( <div className="bg red 100 border border red 400 text red 700 px 4 py 3 rounded relative" role="alert"> <strong className="font bold">Error!</strong> <span className="block sm:inline"> {error}</span> </div> ); } return ( <div className="bg gray 900 min h screen text white"> <Navbar /> <div className="container mx auto p 6" style={{marginTop:"40px"}}> <h2 className="text 3xl font bold mb 6">Coffee Orders</h2> <div className="overflow x auto bg gray 800 shadow md rounded lg"> <table className="min w full table auto"> <thead> <tr className="bg gray 700 text gray 300 uppercase text sm leading normal"> <th className="py 3 px 6 text left">Customer ID</th> <th className="py 3 px 6 text left">Customer Name</th> <th className="py 3 px 6 text left">Order Item</th> <th className="py 3 px 6 text center">Number of Items</th> <th className="py 3 px 6 text center">Table Number</th> <th className="py 3 px 6 text center">Category</th> <th className="py 3 px 6 text center">Actions</th> </tr> </thead> <tbody className="text gray 300 text sm font light"> {coffees.map((coffee) => ( <tr key={coffee._id} className="border b border gray 600 hover:bg gray 700"> <td className="py 3 px 6 text left whitespace nowrap">{coffee.Customer_id}</td> <td className="py 3 px 6 text left">{coffee.Customer_Name}</td> <td className="py 3 px 6 text left">{coffee.Order_item}</td> <td className="py 3 px 6 text center">{coffee.No_Of_Item}</td> <td className="py 3 px 6 text center">{coffee.Table_No}</td> <td className="py 3 px 6 text center">{coffee.Category}</td> <td className="py 3 px 6 text center"> <div className="flex justify center space x 4"> <Link to={`/coffees/${coffee._id}`} className="text blue 500 hover:text blue 700"> <FaEye size={20} /> </Link> <Link to={`/Coffees/update/${coffee._id}`} className="text yellow 500 hover:text yellow 700"> <FaEdit size={20} /> </Link> <button onClick={() => handleDelete(coffee._id)} className="text red 500 hover:text red 700" > <FaTrash size={20} /> </button> </div> </td> </tr> ))} </tbody> </table> </div> <div className="flex justify start p 5"> <Link to="/Coffees/add" className="bg blue 500 text white font bold py 2 px 4 rounded hover:bg blue 600 transition duration 300 ease in out"> Add Data </Link> </div> </div> </div> ); }; export default GetAllCoffee; update this code make more beautiful and atractive