QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-19 05:40:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

PRDONE-94: updates from code review feedback, final tweaks to dashboard mocks

Browse Source
This commit is contained in:
Tim Chamberlain
2022-09-02 20:47:28 -05:00
parent 7cd3d26ead
commit ea5becce4c
17 changed files with 163 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/qqq/pages/dashboards/Widgets/Data/ShipmentsByDayBarChartData.ts
View File

@ -21,7 +21,7 @@
const shipmentsByDayBarChartData = {
labels: ["M", "T", "W", "T", "F", "S", "S"],
datasets: {label: "Sales", data: [50, 20, 10, 22, 50, 10, 40]},
datasets: {label: "Sales", data: [503, 202, 1001, 354, 659, 938, 350]},
};
export default shipmentsByDayBarChartData;

4
src/qqq/pages/dashboards/Widgets/Data/timeInTransitBarChartData.ts → src/qqq/pages/dashboards/Widgets/Data/TimeInTransitBarChartData.ts
View File

@ -24,12 +24,12 @@ interface Types {
}
const timeInTransitBarChartData: Types = {
labels: ["<1", "1", "2", "3", "3+"],
labels: ["1", "2", "3", "3+"],
datasets: [
{
label: " time in transit",
color: "dark",
data: [150, 2088, 8888, 5883, 203],
data: [2088, 8888, 5883, 203],
},
],
};

45
src/qqq/pages/dashboards/Widgets/ShipmentsByChannelPieChart.tsx
View File

@ -20,6 +20,7 @@
*/
import Card from "@mui/material/Card";
import Divider from "@mui/material/Divider";
import Grid from "@mui/material/Grid";
import {useMaterialUIController} from "context";
import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot";
@ -36,54 +37,50 @@ function ShipmentsByCarrierPieChart(): JSX.Element
return (
<Card sx={{height: "100%"}}>
<MDBox display="flex" justifyContent="space-between" alignItems="center" pt={2} px={2}>
<MDTypography variant="h6">Shipments By Carrier YTD</MDTypography>
<MDTypography variant="h6">Shipments By Carrier Year To Date</MDTypography>
</MDBox>
<MDBox mt={3}>
<Grid container alignItems="center">
<Grid item xs={7}>
<PieChart chart={shipmentsByCarrierPieChartData} height="12.5rem" />
<PieChart chart={shipmentsByCarrierPieChartData} height="9.5rem" />
</Grid>
<Grid item xs={5}>
<MDBox pr={1}>
<MDBox mb={1}>
<MDBox>
<MDBadgeDot color="dark" size="sm" badgeContent="AxleHire" />
</MDBox>
<MDBox mb={1}>
<MDBox>
<MDBadgeDot color="info" size="sm" badgeContent="CDL" />
</MDBox>
<MDBox mb={1}>
<MDBox>
<MDBadgeDot color="primary" size="sm" badgeContent="DHL" />
</MDBox>
<MDBox mb={1}>
<MDBox>
<MDBadgeDot color="success" size="sm" badgeContent="FedEx" />
</MDBox>
<MDBox mb={1}>
<MDBox>
<MDBadgeDot color="error" size="sm" badgeContent="LSO" />
</MDBox>
<MDBox mb={1}>
<MDBox>
<MDBadgeDot color="secondary" size="sm" badgeContent="OnTrac" />
</MDBox>
<MDBox mb={1}>
<MDBox>
<MDBadgeDot color="warning" size="sm" badgeContent="UPS" />
</MDBox>
</MDBox>
</Grid>
</Grid>
</MDBox>
<MDBox
pt={4}
pb={2}
px={2}
display="flex"
flexDirection={{xs: "column", sm: "row"}}
mt="auto"
>
<MDBox width={{xs: "100%", sm: "60%"}} lineHeight={1}>
<MDTypography variant="button" color="text" fontWeight="light">
More than <strong>1,200,000</strong> sales are made using referral marketing, and{" "}
<strong>700,000</strong> are from social media.
</MDTypography>
</MDBox>
<Divider />
<Grid container>
<Grid item xs={12}>
<MDBox pb={2} px={2} display="flex" flexDirection={{xs: "column", sm: "row"}} mt="auto" >
<MDTypography variant="button" color="text" fontWeight="light">
<strong>Fedex and UPS</strong> delivered the majority of shipments with a combined percentage of <strong>55%</strong>.
The fewest shipments were delivered by <strong>AxleHire and OnTrac</strong> combining for <strong>6%</strong>.
</MDTypography>
</MDBox>
</Grid>
</Grid>
</MDBox>
</Card>
);

10
src/qqq/pages/dashboards/Widgets/WarehouseCard.tsx
View File

@ -29,7 +29,7 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
interface Props {
image: string;
title: string;
description: string;
description: string | ReactNode;
price: string;
location: ReactNode;
action?: ReactNode | boolean;
@ -39,13 +39,7 @@ interface Props {
function WarehouseCard({image, title, description, price, location, action}: Props): JSX.Element
{
return (
<Card
sx={{
"&:hover .card-header": {
transform: action && "translate3d(0, -50px, 0)",
},
}}
>
<Card>
<MDBox
position="relative"
borderRadius="lg"