Login Page - Copy this React, Tailwind Component to your project

import React, { useEffect, useState } from "react"; import axios from "axios"; import {Button, Form, Toast, ToastContainer } from "react-bootstrap"; import { Truck, Globe, CheckCircle } from "lucide-react"; import HubEmployeeNavbar from "./HubEmployeeNavbar"; import OrderDetailsModal from "./OrderDetailsModal"; import ForwardOrderModal from "./ForwardOrderModal"; import OrderTable from "./OrderTable"; import "./ViewOrders.css"; const BASE_URL = "https://localhost:7051/api"; const Dashboard = () => { const [orders, setOrders] = useState(null); const [selectedOrder, setSelectedOrder] = useState(null); const [setNextHubLocation] = useState(""); const [showDetailsModal, setShowDetailsModal] = useState(false); const [showModal, setShowModal] = useState(false); const [nextHub, setNextHub] = useState(null); const [deliveryAgents, setDeliveryAgents] = useState([]); const [selectedAgent, setSelectedAgent] = useState(""); const [errorMessage, setErrorMessage] = useState(""); const [showToast, setShowToast] = useState(false); const [toastMessage, setToastMessage] = useState(""); const [toastVariant, setToastVariant] = useState("success"); const [categoryFilter, setCategoryFilter] = useState("domestic"); const [deliveryModeFilter, setDeliveryModeFilter] = useState("all"); useEffect(() => { fetchOrders(); fetchDeliveryAgents(); }, []); const showToastMessage = (message, variant = "success") => { setToastMessage(message); setToastVariant(variant); setShowToast(true); }; const handleError = (error, customMessage = "An error occurred") => { const message = error?.response?.data?.message || error.message || customMessage; console.error(message); showToastMessage(message, "danger"); setErrorMessage(message); }; const fetchOrders = async () => { try { const response = await axios.get(`${BASE_URL}/Order/for-hub`, { headers: { Authorization: `Bearer ${sessionStorage.getItem("token")}`, }, }); setOrders(response.data); } catch (error) { handleError(error, "Failed to fetch orders."); } }; const fetchDeliveryAgents = async () => { try { const response = await axios.get(`${BASE_URL}/DeliveryAgent/GetAvailableDeliveryAgents`, { headers: { Authorization: `Bearer ${sessionStorage.getItem("token")}`, }, }); setDeliveryAgents(response.data); } catch (error) { handleError(error, "Failed to fetch delivery agents."); } }; const handleShowDetails = (order) => { setSelectedOrder(order); setShowDetailsModal(true); }; const handleMarkPickedUp = async (orderId) => { try { await axios.post( `${BASE_URL}/DeliveryAgent/mark-picked-up/${orderId}`, null, { headers: { Authorization: `Bearer ${sessionStorage.getItem("token")}`, }, } ); showToastMessage("Order marked as picked up successfully!", "success"); fetchOrders(); } catch (error) { handleError(error, "Failed to mark the order as picked up."); } }; const handleMarkDelivered = async (orderId) => { try { await axios.post( `${BASE_URL}/DeliveryAgent/mark-delivered/${orderId}`, null, { headers: { Authorization: `Bearer ${sessionStorage.getItem("token")}`, }, } ); showToastMessage("Order marked as delivered!", "success"); fetchOrders(); } catch (error) { handleError(error, "Failed to mark the order as delivered."); } }; const handleShowModal = (order) => { console.log('handleShowModal called with order:', order); setSelectedOrder(order); fetchNextHub(order.id); setShowModal(true); }; const fetchNextHub = async (orderId) => { try { const response = await axios.get(`https://localhost:7051/api/Order/next-hub/${orderId}`, { headers: { Authorization: `Bearer ${sessionStorage.getItem("token")}`, }, }); console.log("fetech") console.log("Next Hub for Order:", response); // Log next hub data console.log("nextHub is",response.data.location); setNextHub(response.data.city); setNextHubLocation(response.data.Location); } catch (error) { console.error("Error fetching next hub:", error); } }; const handleAssignAgent = async () => { if (!selectedAgent) { alert("Please select a delivery agent."); return; } try { await axios.post( `${BASE_URL}/DeliveryAgent/assign-agent/${selectedOrder.id}?agentId=${selectedAgent}`, null, { headers: { Authorization: `Bearer ${sessionStorage.getItem("token")}`, }, } ); alert("Delivery agent assigned successfully"); setShowModal(false); fetchOrders(); } catch (error) { console.error("Error assigning delivery agent:", error?.response || error.message || error); setErrorMessage("Error assigning delivery agent: " + (error?.response?.data?.message || error.message)); } }; const handleMarkReceived = async (orderId) => { try { await axios.post( `${BASE_URL}/Order/confirm-receipt/${orderId}`, null, { headers: { Authorization: `Bearer ${sessionStorage.getItem("token")}`, }, } ); showToastMessage("Order marked as received!", "success"); fetchOrders(); } catch (error) { handleError(error, "Failed to mark the order as received."); } }; const handleCategoryFilterChange = (filterType) => { setCategoryFilter(filterType); }; const handleDeliveryModeFilterChange = (event) => { setDeliveryModeFilter(event.target.value); }; const handleForward = async () => { try { // Fetch the next hub for the selected order const response = await axios.get( `https://localhost:7051/api/Order/next-hub/${selectedOrder.id}`, { headers: { Authorization: `Bearer ${sessionStorage.getItem("token")}`, }, } ); const nextHubLocation = response.data.city; // Assuming 'location' contains the next hub's location console.log("Next Hub for Order:", nextHubLocation); if (!nextHubLocation) { showToastMessage("Next hub location is not available.", "warning"); return; } // Forward the order to the next hub await axios.post( `${BASE_URL}/Order/forward/${selectedOrder.id}`, { nextHubLocation }, { headers: { Authorization: `Bearer ${sessionStorage.getItem("token")}`, }, } ); showToastMessage("Order forwarded successfully", "success"); setShowModal(false); fetchOrders(); // Refresh orders after successful forwarding } catch (error) { console.error("Error forwarding order:", error?.response || error.message || error); showToastMessage( "Error forwarding order: " + (error?.response?.data?.message || error.message), "danger" ); } }; const filterOrders = (orders) => { if (!orders) return []; const filteredByCategory = categoryFilter === "domestic" ? orders.domestic : orders.international; if (deliveryModeFilter === "all") return filteredByCategory; return Object.keys(filteredByCategory) .filter((key) => key.toLowerCase().includes(deliveryModeFilter.toLowerCase())) .reduce((acc, key) => { acc[key] = filteredByCategory[key]; return acc; }, {}); }; const formatDeliveryModeName = (mode) => { const modeMappings = { doortoDoor: "Door-to-Door", hubtoHub: "Hub-to-Hub", doortoHub: "Door-to-Hub", hubtoDoor: "Hub-to-Door", }; return modeMappings[mode] || mode; // Fallback to the original name if not in the mappings }; const renderOrderTable = (categoryName, categoryOrders) => { const formattedName = formatDeliveryModeName(categoryName); console.log(formattedName) if (!Array.isArray(categoryOrders) || categoryOrders.length === 0) { return ( <div className="text-center py-4"> <h4>No orders available in the {formattedName} category.</h4> </div> ); } return ( <OrderTable key={formattedName} categoryName={formattedName} categoryOrders={categoryOrders} handleShowDetails={handleShowDetails} handleMarkPickedUp={handleMarkPickedUp} handleMarkReceived={handleMarkReceived} handleMarkDelivered={handleMarkDelivered} handleShowModal={handleShowModal} /> ); }; if (!orders) return <p>Loading orders...</p>; const filteredOrders = filterOrders(orders.categorizedOrders); return ( <div> <HubEmployeeNavbar /> <div className="dashboard-layout"> <div className="filter-bar"> <div className="filter-group"> {/* Order Type Filter */} <div className="filter-category"> <h6 className="filter-label">Order Type:</h6> <div className="filter-buttons"> <Button variant={categoryFilter === "domestic" ? "primary" : "outline-primary"} className="filter-btn" onClick={() => handleCategoryFilterChange("domestic")} > <Truck size={18} className="me-2" /> Domestic </Button> <Button variant={categoryFilter === "international" ? "primary" : "outline-primary"} className="filter-btn" onClick={() => handleCategoryFilterChange("international")} > <Globe size={18} className="me-2" /> International </Button> </div> </div> {/* Delivery Mode Filter */} <div className="filter-category"> <h6 className="filter-label">Delivery Mode:</h6> <Form.Select value={deliveryModeFilter} onChange={handleDeliveryModeFilterChange} className="filter-dropdown" > <option value="all">All</option> <option value="DoortoDoor">Door-to-Door</option> <option value="hubtoHub">Hub-to-Hub</option> <option value="doortoHub">Door-to-Hub</option> <option value="hubtoDoor">Hub-to-Door</option> </Form.Select> </div> </div> </div> <main className="dashboard-content flex-grow-1"> {errorMessage && ( <div className="alert alert-danger" role="alert"> {errorMessage} </div> )} <ToastContainer position="top-end" className="p-3"> <Toast bg={toastVariant} onClose={() => setShowToast(false)} show={showToast} delay={3000} autohide > <CheckCircle size={18} className="me-2 text-success" /> {toastMessage} </Toast> </ToastContainer> {Object.entries(filteredOrders).map(([categoryName, categoryOrders]) => renderOrderTable(categoryName, categoryOrders) )} </main> </div> <OrderDetailsModal show={showDetailsModal} onHide={() => setShowDetailsModal(false)} selectedOrder={selectedOrder} /> <ForwardOrderModal show={showModal} onHide={() => setShowModal(false)} selectedOrder={selectedOrder} nextHub={nextHub} deliveryAgents={deliveryAgents} selectedAgent={selectedAgent} setSelectedAgent={setSelectedAgent} handleMarkPickedUp={handleMarkPickedUp} handleMarkDelivered={handleMarkDelivered} handleForward={handleForward} handleAssignAgent={handleAssignAgent} /> </div> ); }; export default Dashboard;