mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-19 05:40:44 +00:00
PRDONE-94: updated dashboards, new styles everywhere, moved 90% of codes we are using under qqq directory
This commit is contained in:
Tim Chamberlain
210
src/qqq/pages/dashboards/CarrierPerformance.tsx
Normal file
210
src/qqq/pages/dashboards/CarrierPerformance.tsx
Normal file
@ -0,0 +1,210 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import {useState} from "react";
|
||||
import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart";
|
||||
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
|
||||
import DataTable from "examples/Tables/DataTable";
|
||||
import Footer from "qqq/components/Footer";
|
||||
import Navbar from "qqq/components/Navbar";
|
||||
import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import MDButton from "qqq/components/Temporary/MDButton";
|
||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
import ShipmentsByWarehouseTable from "qqq/pages/dashboards/Tables/ShipmentsByWarehouseTable";
|
||||
import carrierSpendData from "qqq/pages/dashboards/Widgets/Data/CarrierSpendData";
|
||||
import carrierVolumeLineChartData from "qqq/pages/dashboards/Widgets/Data/CarrierVolumeLineChartData";
|
||||
import smallShipmentsByWarehouseData from "qqq/pages/dashboards/Widgets/Data/SmallShipmentsByWarehouseData";
|
||||
import timeInTransitBarChartData from "qqq/pages/dashboards/Widgets/Data/timeInTransitBarChartData";
|
||||
import ShipmentsByCarrierPieChart from "qqq/pages/dashboards/Widgets/ShipmentsByChannelPieChart";
|
||||
import SimpleStatisticsCard from "qqq/pages/dashboards/Widgets/SimpleStatisticsCard";
|
||||
import HorizontalBarChart from "./Widgets/HorizontalBarChart";
|
||||
|
||||
function CarrierPerformance(): JSX.Element
|
||||
{
|
||||
const [salesDropdownValue, setSalesDropdownValue] = useState<string>("Last 30 Days");
|
||||
const [customersDropdownValue, setCustomersDropdownValue] = useState<string>("Last 30 Days");
|
||||
const [revenueDropdownValue, setRevenueDropdownValue] = useState<string>("Last 30 Days");
|
||||
|
||||
const [salesDropdown, setSalesDropdown] = useState<string | null>(null);
|
||||
const [customersDropdown, setCustomersDropdown] = useState<string | null>(null);
|
||||
const [revenueDropdown, setRevenueDropdown] = useState<string | null>(null);
|
||||
|
||||
const openSalesDropdown = ({currentTarget}: any) => setSalesDropdown(currentTarget);
|
||||
const closeSalesDropdown = ({currentTarget}: any) =>
|
||||
{
|
||||
setSalesDropdown(null);
|
||||
setSalesDropdownValue(currentTarget.innerText || salesDropdownValue);
|
||||
};
|
||||
const openCustomersDropdown = ({currentTarget}: any) => setCustomersDropdown(currentTarget);
|
||||
const closeCustomersDropdown = ({currentTarget}: any) =>
|
||||
{
|
||||
setCustomersDropdown(null);
|
||||
setCustomersDropdownValue(currentTarget.innerText || salesDropdownValue);
|
||||
};
|
||||
const openRevenueDropdown = ({currentTarget}: any) => setRevenueDropdown(currentTarget);
|
||||
const closeRevenueDropdown = ({currentTarget}: any) =>
|
||||
{
|
||||
setRevenueDropdown(null);
|
||||
setRevenueDropdownValue(currentTarget.innerText || salesDropdownValue);
|
||||
};
|
||||
|
||||
// Dropdown menu template for the DefaultStatisticsCard
|
||||
const renderMenu = (state: any, close: any) => (
|
||||
<Menu
|
||||
anchorEl={state}
|
||||
transformOrigin={{vertical: "top", horizontal: "center"}}
|
||||
open={Boolean(state)}
|
||||
onClose={close}
|
||||
keepMounted
|
||||
disableAutoFocusItem
|
||||
>
|
||||
<MenuItem onClick={close}>Last 7 days</MenuItem>
|
||||
<MenuItem onClick={close}>Last week</MenuItem>
|
||||
<MenuItem onClick={close}>Last 30 days</MenuItem>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Navbar />
|
||||
<MDBox py={3}>
|
||||
<MDBox mb={3}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<SimpleStatisticsCard
|
||||
title="total shipments"
|
||||
count="50,234"
|
||||
percentage={{
|
||||
color: "success",
|
||||
value: "+5%",
|
||||
label: "since last month",
|
||||
}}
|
||||
dropdown={{
|
||||
action: openSalesDropdown,
|
||||
menu: renderMenu(salesDropdown, closeSalesDropdown),
|
||||
value: salesDropdownValue,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<SimpleStatisticsCard
|
||||
title="Successful deliveries"
|
||||
count="49,234"
|
||||
percentage={{
|
||||
color: "success",
|
||||
value: "+12%",
|
||||
label: "since last month",
|
||||
}}
|
||||
dropdown={{
|
||||
action: openCustomersDropdown,
|
||||
menu: renderMenu(customersDropdown, closeCustomersDropdown),
|
||||
value: customersDropdownValue,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<SimpleStatisticsCard
|
||||
title="service failures"
|
||||
count="832"
|
||||
percentage={{
|
||||
color: "error",
|
||||
value: "+1.2%",
|
||||
label: "since last month",
|
||||
}}
|
||||
dropdown={{
|
||||
action: openRevenueDropdown,
|
||||
menu: renderMenu(revenueDropdown, closeRevenueDropdown),
|
||||
value: revenueDropdownValue,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<MDBox mb={3}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<ShipmentsByCarrierPieChart />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} lg={8}>
|
||||
<DefaultLineChart
|
||||
title="Carrier Volume by Month"
|
||||
description={
|
||||
<MDBox display="flex" justifyContent="space-between">
|
||||
<MDBox display="flex" ml={-1}>
|
||||
<MDBadgeDot color="dark" size="sm" badgeContent="AxleHire" />
|
||||
<MDBadgeDot color="info" size="sm" badgeContent="CDL" />
|
||||
<MDBadgeDot color="primary" size="sm" badgeContent="DHL" />
|
||||
<MDBadgeDot color="success" size="sm" badgeContent="FedEx" />
|
||||
<MDBadgeDot color="error" size="sm" badgeContent="LSO" />
|
||||
<MDBadgeDot color="secondary" size="sm" badgeContent="OnTrac" />
|
||||
<MDBadgeDot color="warning" size="sm" badgeContent="UPS" />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
}
|
||||
chart={carrierVolumeLineChartData}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<Grid container spacing={3} mb={3}>
|
||||
<Grid item xs={12}>
|
||||
<Card>
|
||||
<MDBox pt={3} px={3}>
|
||||
<MDTypography variant="h6" fontWeight="medium">
|
||||
Spend by Carrier YTD
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox py={1}>
|
||||
<DataTable
|
||||
table={carrierSpendData}
|
||||
entriesPerPage={false}
|
||||
showTotalEntries={false}
|
||||
isSorted={false}
|
||||
noEndBorder
|
||||
/>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<MDBox mb={3}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} lg={8}>
|
||||
<HorizontalBarChart title="Time in Transit Last 30 Days" chart={timeInTransitBarChartData} />
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={4}>
|
||||
<ShipmentsByWarehouseTable title="Shipments by Warehouse" rows={smallShipmentsByWarehouseData} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Footer />
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default CarrierPerformance;
|
||||
Reference in New Issue
Block a user