Styled Card - Copy this React, Mui Component to your project

import React, { useState } from 'react'; import { Box, Card, Typography, Grid, Tabs, Tab, IconButton, Chip, TextField, InputAdornment, Button, LinearProgress, useTheme, useMediaQuery, Container, Paper, MenuItem, Menu, ListItemText, ListItem, List } from '@mui/material'; import { styled } from '@mui/system'; import { FaTruck, FaSearch, FaShip, FaTrain, FaBox, FaEllipsisV, FaBars } from 'react-icons/fa'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip, ResponsiveContainer } from 'recharts'; const StyledCard = styled(Card)(({ theme }) => ({ padding: theme.spacing(2), backgroundColor: '#fff', borderRadius: 16, boxShadow: '0 4px 12px rgba(0,0,0,0.1)', transition: 'all 0.3s ease', "&:hover": { boxShadow: '0 8px 24px rgba(0,0,0,0.15)' }, [theme.breakpoints.down("sm")]: { padding: theme.spacing(1), borderRadius: 12 } })); const TabPanel = ({ children, value, index }) => ( <div role="tabpanel" hidden={value !== index} style={{ width: '100%' }}> {value === index && <Box p={3}>{children}</Box>} </div> ); const EnhancedMetricCard = ({ title, value, icon, progress, data }) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); return ( <StyledCard> <Box display="flex" flexDirection="column"> <Typography variant="h6" color="text.primary" gutterBottom> {title} </Typography> <Typography variant="h3" style={{ fontWeight: 700, color: theme.palette.primary.main }}> {value} </Typography> {icon} <ResponsiveContainer width="100%" height={200}> <LineChart data={data}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="name" /> <YAxis /> <Line type="monotone" dataKey="value" stroke="#8884d8" activeDot={{ r: 8 }} /> <RechartsTooltip /> </LineChart> </ResponsiveContainer> <LinearProgress variant="determinate" value={progress} /> </Box> </StyledCard> ); }; const ShipmentsDashboard = () => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('md')); const [activeTab, setActiveTab] = useState(0); return ( <Container> <Box sx={{ my: 4 }}> <Typography variant="h4" component="h1" gutterBottom> Shipments Overview </Typography> <Tabs value={activeTab} onChange={(e, newValue) => setActiveTab(newValue)} aria-label="shipment tabs"> <Tab label="Overview" /> <Tab label="LTL" /> <Tab label="Truckload" /> <Tab label="Intermodal" /> <Tab label="Ocean" /> </Tabs> <TabPanel value={activeTab} index={0}> {/* Dynamic content for each tab can be rendered here */} </TabPanel> {/* More TabPanels for other tabs */} </Box> </Container> ); }; export default ShipmentsDashboard;