Default Component - Copy this React, Mui Component to your project

Import React, { useEffect, useState } from 'react'; import { useUser } from '../../components/user/UserContext'; import { Container, Box, Typography, CircularProgress, Grid, Card, CardContent, Chip, useTheme, useMediaQuery } from '@mui/material'; import { HourglassEmpty, Build, FlightTakeoff, CheckCircleOutline } from '@mui/icons material'; // New icons for status import { styled } from '@mui/system'; import { format } from 'date fns'; // Ensure you have installed date fns import Header from '../Header'; // Glassmorphic style for container const GlassmorphicContainer = styled(Box)(({ theme }) => ({ background: "rgba(255, 255, 255, 0.1)", backdropFilter: "blur(10px)", borderRadius: theme.spacing(2), padding: theme.spacing(3), boxShadow: "0 8px 32px 0 rgba(31, 38, 135, 0.37)" })); // Order Card Style const OrderCard = styled(Card)(({ theme }) => ({ transition: "all 0.3s ease", cursor: "pointer", background: "rgba(255, 255, 255, 0.8)", "&:hover": { transform: "translateY( 4px)", boxShadow: theme.shadows[8] } })); // Status Chip Style const StatusChip = styled(Chip)(({ status, theme }) => { const statusColors = { pending: "#ffa726", processing: "#29b6f6", shipped: "#66bb6a", delivered: "#43a047" }; return { backgroundColor: statusColors[status] || "#grey", color: "#fff", fontWeight: 600 }; }); const OrderHistory = () => { const { user, loading } = useUser(); // Get user and loading from context const [orders, setOrders] = useState([]); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); useEffect(() => { const fetchOrders = async () => { if (user && user._id) { try { const response = await fetch(`http://localhost:5000/api/orders/user/${user._id}`); const data = await response.json(); setOrders(data); // Update state with the fetched orders } catch (error) { console.error('Error fetching order history:', error); } } else { console.log("User is not logged in or _id is missing."); } }; if (user) { fetchOrders(); // Fetch orders only when the user is logged in } }, [user]); // Loading state if (loading) { return ( <Box display="flex" justifyContent="center" alignItems="center" minHeight="60vh"> <CircularProgress /> </Box> ); } if (!user) { return <Typography variant="h6" align="center" sx={{ padding: 2 }}>Please log in to view your order history.</Typography>; } // Reverse orders to display the latest one first const sortedOrders = [...orders].reverse(); // Get status icons for the orders const getStatusIcon = (status) => { switch (status) { case "pending": return <HourglassEmpty />; case "processing": return <Build />; case "shipped": return <FlightTakeoff />; case "delivered": return <CheckCircleOutline />; default: return <HourglassEmpty />; } }; return ( <Box sx={{ position: 'relative', minHeight: '100vh', width: '100%', overflow: 'hidden', background: 'linear gradient(to left, rgb(184, 226, 216), rgb(240, 206, 168))', }} > {/* Header Component */} <Header /> <Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'flex start', paddingBottom: 2 }}> <Container maxWidth="lg" sx={{ padding: 4, marginTop: 15 }}> <GlassmorphicContainer> <Typography variant="h4" align="center" gutterBottom> Order History </Typography> {sortedOrders.length === 0 ? ( <Typography variant="h6" align="center">No orders found.</Typography> ) : ( <Grid container spacing={3}> {sortedOrders.map((order) => ( <Grid item xs={12} key={order._id}> <OrderCard> <CardContent> <Grid container spacing={2} alignItems="center"> <Grid item xs={12} sm={2}> <Box component="img" src={order.image || "https://via.placeholder.com/150"} // Default image in case no image is present alt="Product" sx={{ width: "100%", height: "auto", borderRadius: 1, objectFit: "cover" }} /> </Grid> <Grid item xs={12} sm={7}> <Typography variant="h6" gutterBottom> Order ID: {order._id} </Typography> <Typography color="textSecondary" gutterBottom> {/* Check if order.date is valid */} {isNaN(new Date(order.date)) ? ( <span>Invalid Date</span> // Fallback message ) : ( `Placed on ${format(new Date(order.date), "MMMM dd, yyyy")}` )} </Typography> {order.items.map((item, index) => ( <Typography key={index} variant="body2" color="textSecondary"> {item.quantity}x {item.name} ₹{item.price.toFixed(2)} </Typography> ))} </Grid> <Grid item xs={12} sm={3} sx={{ display: "flex", flexDirection: "column", alignItems: isMobile ? "flex start" : "flex end", gap: 1 }}> <Typography variant="h6" color="primary"> ₹{order.totalPrice.toFixed(2)} </Typography> <StatusChip icon={getStatusIcon(order.status)} label={order.status.toUpperCase()} status={order.status} /> </Grid> </Grid> </CardContent> </OrderCard> </Grid> ))} </Grid> )} </GlassmorphicContainer> </Container> </Box> </Box> ); }; export default OrderHistory; make this more stylish , unique design