Orders Grid - Copy this React, Tailwind Component to your project
import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import './OrderDashboard.css'; import OrderStatus from './OrderStatus'; // Import the OrderStatus component const baseUrl = process.env.REACT_APP_API_URL; const OrderDashboard = () => { const navigate = useNavigate(); const [orderHistory, setOrderHistory] = useState([]); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(''); const [isRatingModalOpen, setIsRatingModalOpen] = useState(false); const [selectedOrderId, setSelectedOrderId] = useState(null); const [rating, setRating] = useState(0); const [description, setDescription] = useState(''); const [searchQuery, setSearchQuery] = useState(''); const [ratedOrders, setRatedOrders] = useState({}); const [isTrackStatusModalOpen, setTrackStatusModalOpen] = useState(false); // For track status modal const [trackStatusOrderId, setTrackStatusOrderId] = useState(null); // For the selected order ID in the track status modal const userId = sessionStorage.getItem('id'); const authToken = sessionStorage.getItem('token'); // Fetch orders and their ratings const fetchOrdersWithRatings = async () => { try { const response = await fetch( `${baseUrl}/Order/history/${userId}`, { headers: { Authorization: `Bearer ${authToken}`, 'Content-Type': 'application/json', }, } ); if (!response.ok) { throw new Error('Failed to fetch order history'); } const data = await response.json(); // Fetch ratings for each order const updatedOrders = await Promise.all( data.map(async (order) => { try { const ratingResponse = await fetch( `${baseUrl}/Rating/${order.id}`, { headers: { Authorization: `Bearer ${authToken}`, 'Content-Type': 'application/json', }, } ); if (ratingResponse.ok) { const ratings = await ratingResponse.json(); const averageRating = ratings.reduce((sum, r) => sum + r.rating, 0) / ratings.length; return { ...order, rating: averageRating }; } } catch (error) { console.error('Error fetching ratings for order', order.id, error); } return order; // Return the original order if ratings fetch fails }) ); setOrderHistory(updatedOrders); } catch (err) { console.error('Error fetching orders:', err); setError('Failed to fetch order history. Please try again.'); } finally { setIsLoading(false); } }; useEffect(() => { fetchOrdersWithRatings(); }, [userId, authToken]); const handleOpenRatingModal = (orderId) => { setSelectedOrderId(orderId); setIsRatingModalOpen(true); setRating(0); // Reset rating setDescription(''); // Reset description }; const handleSubmitRating = async () => { if (rating < 1 || rating > 5) { alert('Please select a rating between 1 and 5.'); return; } try { const response = await fetch(`${baseUrl}/Rating`, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${authToken}`, }, body: JSON.stringify({ OrderDetailsId: selectedOrderId, Rating: rating, Feedback: description, CustomerId: userId, }), }); if (!response.ok) { throw new Error('Failed to submit rating'); } // Refresh order history after submitting rating fetchOrdersWithRatings(); // Close modal after submission setIsRatingModalOpen(false); } catch (err) { console.error('Error submitting rating:', err); alert('Failed to submit rating. Please try again.'); } }; // Track Status Modal Logic const handleOpenTrackStatusModal = (orderId) => { setTrackStatusOrderId(orderId); setTrackStatusModalOpen(true); }; const handleCloseTrackStatusModal = () => { setTrackStatusModalOpen(false); }; // Filter orders based on the search query const filteredOrders = orderHistory.filter((order) => order.id.toString().includes(searchQuery) ); if (isLoading) { return <div>Loading...</div>; } if (error) { return <div>{error}</div>; } return ( <div> <div className="order-dashboard"> {/* Search Filter for Order ID */} <div className='order_History_Name'>Order History</div> <div className="search-container"> <input type="text" className="search-input" placeholder="Search by Order ID" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} /> </div> <div className="card-container"> {filteredOrders.map((order) => ( <div key={order.id} className="order-card"> <div className="order-card-header"> <h5>Order ID: {order.id}</h5> <div>Status: {order.status}</div> </div> <div className="order-card-body"> <div><strong>Pickup Address:</strong> {order.pickupLocation}</div> <div><strong>Drop Address:</strong> {order.destinationLocation}</div> <div><strong>Delivery Mode:</strong> {order.deliveryMode}</div> </div> <div className="order-card-footer"> {order.status === 'Delivered' ? ( order.rating ? ( <div> {[1, 2, 3, 4, 5].map((star) => ( <span key={star} className={`star ${star <= order.rating ? 'filled' : ''}`} > ★ </span> ))} <span className="feedback">Rated</span> <div> <button className="viewdetails" onClick={() => navigate(`/viewdetails/${order.id}`)} // Navigate to ViewDetails page > View Details </button> </div> </div> ) : ( <button className="RateOrder" onClick={() => handleOpenRatingModal(order.id)} > Rate Order </button> ) ) : ( <button className="trackstatus" onClick={() => handleOpenTrackStatusModal(order.id)} > Track Status </button> )} </div> </div> ))} </div> {/* Rating Modal */} {isRatingModalOpen && ( <div className="rating-modal"> <div className="modal-content"> <h4>Rate Your Order</h4> <div className="stars"> {[1, 2, 3, 4, 5].map((star) => ( <span key={star} className={`star ${star <= rating ? 'filled' : ''}`} onClick={() => setRating(star)} > ★ </span> ))} </div> <textarea className="form-control" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Write feedback (optional)" /> <button className="SubmitRating" onClick={handleSubmitRating} > Submit Rating </button> <button className="btn btn-secondary mt-3" onClick={() => setIsRatingModalOpen(false)} > Cancel </button> </div> </div> )} {/* Track Status Modal */} {isTrackStatusModalOpen && ( <div className="modal-overlay"> <div className="modal-content-full"> <div className="order-modal-header"> <div className="left-part"> <h5>Track Your Order Status</h5> </div> <div className="right-part"> <button className="close-btn" onClick={handleCloseTrackStatusModal} > × </button> </div> </div> <div className="modal-body"> <OrderStatus orderId={trackStatusOrderId} /> </div> </div> </div> )} </div> </div> ); }; export default OrderDashboard; update this code