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

package.json

@@ -21,8 +21,8 @@
     "@mui/x-data-grid-pro": "5.13.0",
     "@mui/x-license-pro": "5.12.3",
     "@react-jvectormap/core": "1.0.1",
-    "@react-jvectormap/world": "1.0.0",
     "@react-jvectormap/unitedstates": "1.0.1",
+    "@react-jvectormap/world": "1.0.0",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
     "@testing-library/user-event": "13.5.0",

src/App.tsx

@@ -32,6 +32,8 @@ import {useCookies} from "react-cookie";
 import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
 import {Md5} from "ts-md5/dist/md5";
 import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context";
+import Settings from "layouts/pages/account/settings";
+import ProfileOverview from "layouts/pages/profile/profile-overview";
 import Sidenav from "qqq/components/Sidenav";
 import Configurator from "qqq/components/Temporary/Configurator";
 import MDAvatar from "qqq/components/Temporary/MDAvatar";
@@ -292,6 +294,20 @@ export default function App()
                name: user.name,
                key: user.name,
                icon: <MDAvatar src={profilePicture} alt="{user.name}" size="sm" />,
+               collapse: [
+                  {
+                     name: "My Profile",
+                     key: "my-profile",
+                     route: "/pages/profile/profile-overview",
+                     component: <ProfileOverview />,
+                  },
+                  {
+                     name: "Settings",
+                     key: "profile-settings",
+                     route: "/pages/account/settings",
+                     component: <Settings />,
+                  },
+               ],
             };
             setProfileRoutes(profileRoutes);
 
@@ -419,7 +435,6 @@ export default function App()
                   <Sidenav
                      color={sidenavColor}
                      brand={Logo}
-                     brandName="Nutrifresh One"
                      routes={sideNavRoutes}
                      onMouseEnter={handleOnMouseEnter}
                      onMouseLeave={handleOnMouseLeave}

src/examples/Sidenav/index.tsx

@@ -287,7 +287,7 @@ function Sidenav({ color, brand, brandName, routes, ...rest }: Props): JSX.Eleme
       variant="permanent"
       ownerState={{ transparentSidenav, whiteSidenav, miniSidenav, darkMode }}
     >
-      <MDBox pt={3} mr={1} pb={0} px={4} textAlign="center">
+      <MDBox pt={3} pb={1} px={4} textAlign="center">
         <MDBox
           display={{ xs: "block", xl: "none" }}
           position="absolute"
@@ -302,7 +302,15 @@ function Sidenav({ color, brand, brandName, routes, ...rest }: Props): JSX.Eleme
           </MDTypography>
         </MDBox>
         <MDBox component={NavLink} to="/" display="flex" alignItems="center">
-          <MDBox component="img" src={brand} alt="Brand" width="100%" />
+          {brand && <MDBox component="img" src={brand} alt="Brand" width="2rem" />}
+          <MDBox
+            width={!brandName && "100%"}
+            sx={(theme: any) => sidenavLogoLabel(theme, { miniSidenav })}
+          >
+            <MDTypography component="h6" variant="button" fontWeight="medium" color={textColor}>
+              {brandName}
+            </MDTypography>
+          </MDBox>
         </MDBox>
       </MDBox>
       <Divider

src/qqq/components/Sidenav/index.tsx

@@ -28,6 +28,7 @@ import {useLocation, NavLink} from "react-router-dom";
 import MDBox from "components/MDBox";
 import MDTypography from "components/MDTypography";
 import {useMaterialUIController, setMiniSidenav, setTransparentSidenav, setWhiteSidenav,} from "context";
+import sidenavLogoLabel from "examples/Sidenav/styles/sidenav";
 import AuthenticationButton from "qqq/components/Buttons/AuthenticationButton";
 import SidenavCollapse from "qqq/components/Sidenav/SidenavCollapse";
 import SidenavItem from "qqq/components/Sidenav/SidenavItem";
@@ -37,7 +38,7 @@ import SidenavRoot from "qqq/components/Sidenav/SidenavRoot";
 interface Props {
   color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
   brand?: string;
-  brandName: string;
+  brandName?: string;
   routes: {
     [key: string]:
        | ReactNode
@@ -313,7 +314,13 @@ function Sidenav({color, brand, brandName, routes, ...rest}: Props): JSX.Element
                </MDTypography>
             </MDBox>
             <MDBox component={NavLink} to="/" display="flex" alignItems="center">
-               <MDBox component="img" src={brand} alt="Brand" width="100%" />
+               {brand && <MDBox component="img" src={brand} alt="Brand" width="100%" />}
+               {brandName && <MDBox width={!brandName && "100%"} sx={(theme: any) => sidenavLogoLabel(theme, {miniSidenav})}>
+                  <MDTypography component="h6" variant="button" fontWeight="medium" color={textColor}>
+                     {brandName}
+                  </MDTypography>
+               </MDBox>
+               }
             </MDBox>
          </MDBox>
          <Divider
@@ -332,6 +339,7 @@ function Sidenav({color, brand, brandName, routes, ...rest}: Props): JSX.Element
 Sidenav.defaultProps = {
    color: "info",
    brand: "",
+   brandName: "",
 };
 
 export default Sidenav;

src/qqq/components/Temporary/BookingCard/index.tsx

@@ -1,128 +0,0 @@
-/*
- * 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 Divider from "@mui/material/Divider";
-import Icon from "@mui/material/Icon";
-import {ReactNode} from "react";
-import MDBox from "qqq/components/Temporary/MDBox";
-import MDTypography from "qqq/components/Temporary/MDTypography";
-
-interface Props
-{
-   image: string;
-   title: string;
-   description: string;
-   price: string;
-   location: ReactNode;
-   action?: ReactNode | boolean;
-
-   [key: string]: any;
-}
-
-function BookingCard({image, title, description, price, location, action}: Props): JSX.Element
-{
-   return (
-      <Card
-         sx={{
-            "&:hover .card-header": {
-               transform: action && "translate3d(0, -50px, 0)",
-            },
-         }}
-      >
-         <MDBox
-            position="relative"
-            borderRadius="lg"
-            mt={-3}
-            mx={2}
-            className="card-header"
-            sx={{transition: "transform 300ms cubic-bezier(0.34, 1.61, 0.7, 1)"}}
-         >
-            <MDBox
-               component="img"
-               src={image}
-               alt={title}
-               borderRadius="lg"
-               shadow="md"
-               width="100%"
-               height="100%"
-               position="relative"
-               zIndex={1}
-            />
-            <MDBox
-               borderRadius="lg"
-               shadow="md"
-               width="100%"
-               height="100%"
-               position="absolute"
-               left={0}
-               top="0"
-               sx={{
-                  backgroundImage: `url(${image})`,
-                  transform: "scale(0.94)",
-                  filter: "blur(12px)",
-                  backgroundSize: "cover",
-               }}
-            />
-         </MDBox>
-         <MDBox textAlign="center" pt={3} px={3}>
-            <MDBox display="flex" justifyContent="center" alignItems="center" mt={action ? -8 : -4.25}>
-               {action}
-            </MDBox>
-            <MDTypography variant="h5" fontWeight="regular" sx={{mt: 4}}>
-               {title}
-            </MDTypography>
-            <MDTypography variant="body2" color="text" sx={{mt: 1.5, mb: 1}}>
-               {description}
-            </MDTypography>
-         </MDBox>
-         <Divider />
-         <MDBox
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            pt={0.5}
-            pb={3}
-            px={3}
-            lineHeight={1}
-         >
-            <MDTypography variant="body2" fontWeight="regular" color="text">
-               {price}
-            </MDTypography>
-            <MDBox color="text" display="flex" alignItems="center">
-               <Icon color="inherit" sx={{m: 0.5}}>
-                  place
-               </Icon>
-               <MDTypography variant="button" fontWeight="light" color="text">
-                  {location}
-               </MDTypography>
-            </MDBox>
-         </MDBox>
-      </Card>
-   );
-}
-
-// Declaring default props for BookingCard
-BookingCard.defaultProps = {
-   action: false,
-};
-
-export default BookingCard;

src/qqq/pages/app-home/index.tsx

@@ -168,7 +168,6 @@ function AppHome({app}: Props): JSX.Element
 
    // eslint-disable-next-line no-nested-ternary
    const tileSizeLg = (widgetCount === 0 ? 3 : widgetCount === 1 ? 4 : 6);
-   let gridIndex = 0;
 
    return (
       <BaseLayout>
@@ -179,8 +178,8 @@ function AppHome({app}: Props): JSX.Element
                      <Grid item xs={12} lg={widgetCount === 1 ? 3 : 6}>
                         <Grid container spacing={3}>
                            {
-                              widgets.map((chart) => (
-                                 <Grid key={`${gridIndex++}`} item xs={12} lg={widgetCount === 1 ? 12 : 6}>
+                              widgets.map((chart, i) => (
+                                 <Grid key={`${i}`} item xs={12} lg={widgetCount === 1 ? 12 : 6}>
                                     <MDBox mb={3}>
                                        {
                                           chart.type === "quickSightChart" && (
@@ -245,7 +244,7 @@ function AppHome({app}: Props): JSX.Element
                                                    <MiniStatisticsCard
                                                       title={{fontWeight: "bold", text: table.label}}
                                                       count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : tableCounts.get(table.name).value.toLocaleString()}
-                                                      percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : "total records")}}
+                                                      percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCounts.get(table.name).value === 1 ? "total record" : "total records"))}}
                                                       icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
                                                       direction="right"
                                                    />

src/qqq/pages/dashboards/CarrierPerformance.tsx

@@ -19,13 +19,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {Title} from "@mui/icons-material";
+import {Icon} from "@mui/material";
 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 React, {useState} from "react";
 import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart";
 import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
 import DataTable from "examples/Tables/DataTable";
@@ -33,60 +33,84 @@ 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 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 openArrowIcon = "arrow_drop_down";
+   const closeArrowIcon = "arrow_drop_up";
 
-   const [salesDropdown, setSalesDropdown] = useState<string | null>(null);
-   const [customersDropdown, setCustomersDropdown] = useState<string | null>(null);
-   const [revenueDropdown, setRevenueDropdown] = useState<string | null>(null);
+   const [shipmentsDropdownValue, setShipmentsDropdownValue] = useState<string>("Last 30 Days");
+   const [deliveriesDropdownValue, setDeliveriesDropdownValue] = useState<string>("Last 30 Days");
+   const [failuresDropdownValue, setFailuresDropdownValue] = useState<string>("Last 30 Days");
 
-   const openSalesDropdown = ({currentTarget}: any) => setSalesDropdown(currentTarget);
-   const closeSalesDropdown = ({currentTarget}: any) =>
+   const [shipmentsDropdown, setShipmentsDropdown] = useState<string | null>(null);
+   const [deliveriesDropdown, setDeliveriesDropdown] = useState<string | null>(null);
+   const [failuresDropdown, setFailuresDropdown] = useState<string | null>(null);
+
+   const [shipmentsDropdownIcon, setShipmentsDropdownIcon] = useState<string>(openArrowIcon);
+   const [deliveriesDropdownIcon, setDeliveriesDropdownIcon] = useState<string>(openArrowIcon);
+   const [failuresDropdownIcon, setFailuresDropdownIcon] = useState<string>(openArrowIcon);
+
+   const openShipmentsDropdown = ({currentTarget}: any) =>
    {
-      setSalesDropdown(null);
-      setSalesDropdownValue(currentTarget.innerText || salesDropdownValue);
+      setShipmentsDropdown(currentTarget);
+      setShipmentsDropdownIcon(closeArrowIcon);
+   }
+   const closeShipmentsDropdown = ({currentTarget}: any) =>
+   {
+      setShipmentsDropdown(null);
+      setShipmentsDropdownValue(currentTarget.innerText || shipmentsDropdownValue);
+      setShipmentsDropdownIcon(openArrowIcon);
    };
-   const openCustomersDropdown = ({currentTarget}: any) => setCustomersDropdown(currentTarget);
-   const closeCustomersDropdown = ({currentTarget}: any) =>
+   const openDeliveriesDropdown = ({currentTarget}: any) =>
    {
-      setCustomersDropdown(null);
-      setCustomersDropdownValue(currentTarget.innerText || salesDropdownValue);
+      setDeliveriesDropdown(currentTarget);
+      setDeliveriesDropdownIcon(closeArrowIcon)
+   }
+   const closeDeliveriesDropdown = ({currentTarget}: any) =>
+   {
+      setDeliveriesDropdown(null);
+      setDeliveriesDropdownValue(currentTarget.innerText || shipmentsDropdownValue);
+      setDeliveriesDropdownIcon(openArrowIcon);
    };
-   const openRevenueDropdown = ({currentTarget}: any) => setRevenueDropdown(currentTarget);
-   const closeRevenueDropdown = ({currentTarget}: any) =>
+   const openFailuresDropdown = ({currentTarget}: any) =>
    {
-      setRevenueDropdown(null);
-      setRevenueDropdownValue(currentTarget.innerText || salesDropdownValue);
+      setFailuresDropdown(currentTarget);
+      setFailuresDropdownIcon(closeArrowIcon)
+   }
+   const closeFailuresDropdown = ({currentTarget}: any) =>
+   {
+      setFailuresDropdown(null);
+      setFailuresDropdownValue(currentTarget.innerText || shipmentsDropdownValue);
+      setFailuresDropdownIcon(openArrowIcon);
    };
 
    // 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>
+   const renderMenu = (state: any, open: any, close: any, icon: string) => (
+      <span style={{whiteSpace: "nowrap"}}>
+         <Icon onClick={open} fontSize={"medium"} style={{cursor: "pointer", float: "right"}}>{icon}</Icon>
+         <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>
+      </span>
    );
 
    return (
@@ -105,9 +129,9 @@ function CarrierPerformance(): JSX.Element
                            label: "since last month",
                         }}
                         dropdown={{
-                           action: openSalesDropdown,
-                           menu: renderMenu(salesDropdown, closeSalesDropdown),
-                           value: salesDropdownValue,
+                           action: openShipmentsDropdown,
+                           menu: renderMenu(shipmentsDropdown, openShipmentsDropdown, closeShipmentsDropdown, shipmentsDropdownIcon),
+                           value: shipmentsDropdownValue,
                         }}
                      />
                   </Grid>
@@ -121,9 +145,9 @@ function CarrierPerformance(): JSX.Element
                            label: "since last month",
                         }}
                         dropdown={{
-                           action: openCustomersDropdown,
-                           menu: renderMenu(customersDropdown, closeCustomersDropdown),
-                           value: customersDropdownValue,
+                           action: openDeliveriesDropdown,
+                           menu: renderMenu(deliveriesDropdown, openDeliveriesDropdown, closeDeliveriesDropdown, deliveriesDropdownIcon),
+                           value: deliveriesDropdownValue,
                         }}
                      />
                   </Grid>
@@ -137,9 +161,9 @@ function CarrierPerformance(): JSX.Element
                            label: "since last month",
                         }}
                         dropdown={{
-                           action: openRevenueDropdown,
-                           menu: renderMenu(revenueDropdown, closeRevenueDropdown),
-                           value: revenueDropdownValue,
+                           action: openFailuresDropdown,
+                           menu: renderMenu(failuresDropdown, openFailuresDropdown, closeFailuresDropdown, failuresDropdownIcon),
+                           value: failuresDropdownValue,
                         }}
                      />
                   </Grid>

src/qqq/pages/dashboards/Overview.tsx

@@ -22,15 +22,14 @@
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
 import Tooltip from "@mui/material/Tooltip";
-import booking1 from "assets/images/products/product-1-min.jpg";
-import booking2 from "assets/images/products/product-2-min.jpg";
-import booking3 from "assets/images/products/product-3-min.jpg";
 import DashboardLayout from "qqq/components/DashboardLayout";
 import Footer from "qqq/components/Footer";
 import Navbar from "qqq/components/Navbar";
-import BookingCard from "qqq/components/Temporary/BookingCard";
 import MDBox from "qqq/components/Temporary/MDBox";
 import MDTypography from "qqq/components/Temporary/MDTypography";
+import edisonWarehouse from "qqq/images/warehouses/edison_nj.jpg";
+import pattersonWarehouse from "qqq/images/warehouses/patterson.jpg";
+import stocktonWarehouse from "qqq/images/warehouses/stockton.jpg";
 import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
 import shipmentsByDayBarChartData from "qqq/pages/dashboards/Widgets/Data/ShipmentsByDayBarChartData";
 import shipmentsByMonthLineChartData from "qqq/pages/dashboards/Widgets/Data/ShipmentsByMonthLineChartData";
@@ -38,6 +37,7 @@ import ShipmentsByCarrierPieChart from "qqq/pages/dashboards/Widgets/ShipmentsBy
 import ShipmentsByWarehouse from "qqq/pages/dashboards/Widgets/ShipmentsByWarehouse";
 import SmallLineChart from "qqq/pages/dashboards/Widgets/SmallLineChart";
 import StatisticsCard from "qqq/pages/dashboards/Widgets/StatisticsCard";
+import WarehouseCard from "qqq/pages/dashboards/Widgets/WarehouseCard";
 
 function Overview(): JSX.Element
 {
@@ -75,7 +75,9 @@ function Overview(): JSX.Element
                         <BarChart
                            color="info"
                            title="Total Shipments by Day"
-                           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at auctor leo. Aliquam luctus est purus, ut placerat libero aliquet sed. Quisque consequat sem vitae iaculis tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
+                           description={
+                              <span>Over the last week there have been <strong>3 days</strong> with total shipments <strong>greater than</strong> the daily average of <strong>564 shipments</strong>.</span>
+                           }
                            date="Updated 3 minutes ago"
                            chart={shipmentsByDayBarChartData}
                         />
@@ -91,7 +93,9 @@ function Overview(): JSX.Element
                         <SmallLineChart
                            color="dark"
                            title="shipments by month"
-                           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at auctor leo. Aliquam luctus est purus, ut placerat libero aliquet sed. Quisque consequat sem vitae iaculis tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
+                           description={
+                              <span>Total shipments have been <strong>increasing</strong> over the last eight months.</span>
+                           }
                            date="Just updated"
                            chart={shipmentsByMonthLineChartData}
                         />
@@ -165,10 +169,12 @@ function Overview(): JSX.Element
                <Grid container spacing={3}>
                   <Grid item xs={12} md={6} lg={4}>
                      <MDBox mt={3}>
-                        <BookingCard
-                           image={booking1}
-                           title="Warehouse Performance Report"
-                           description='The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona.'
+                        <WarehouseCard
+                           image={edisonWarehouse}
+                           title="Edison, NJ"
+                           description={
+                              <span>The Edison, NJ warehouse currently has <strong>38 open orders</strong> and <strong>39 ASNs</strong> are expected in the next week.</span>
+                           }
                            price="99% SLA"
                            location="Edison, NJ"
                            action={actionButtons}
@@ -177,10 +183,12 @@ function Overview(): JSX.Element
                   </Grid>
                   <Grid item xs={12} md={6} lg={4}>
                      <MDBox mt={3}>
-                        <BookingCard
-                           image={booking3}
-                           title="Warehouse Performance Report"
-                           description='The place is close to Metro Station and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Milan.'
+                        <WarehouseCard
+                           image={pattersonWarehouse}
+                           title="Patterson, CA"
+                           description={
+                              <span>The Patterson, CA warehouse shipped <strong>32,032</strong> this year.  The delivery SLA is <strong>97.3%</strong>, up <strong>0.8%</strong> from last week.</span>
+                           }
                            price="98% SLA"
                            location="Patterson, CA"
                            action={actionButtons}
@@ -189,10 +197,12 @@ function Overview(): JSX.Element
                   </Grid>
                   <Grid item xs={12} md={6} lg={4}>
                      <MDBox mt={3}>
-                        <BookingCard
-                           image={booking2}
-                           title="Warehouse Performance Report"
-                           description='The place is close to Metro Station and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the night life in London, UK.'
+                        <WarehouseCard
+                           image={stocktonWarehouse}
+                           title="Stockton, CA"
+                           description={
+                              <span>The Stockton, CA warehouse shipped <strong>2,032</strong> packages yesterday. Last week&apos;s failed shipments were down by <strong>12%</strong>.</span>
+                           }
                            price="95% SLA"
                            location="Stockton, CA"
                            action={actionButtons}

src/qqq/pages/dashboards/Widgets/Data/ShipmentsByDayBarChartData.ts

@@ -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;

src/qqq/pages/dashboards/Widgets/Data/TimeInTransitBarChartData.ts

@@ -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],
       },
    ],
 };

src/qqq/pages/dashboards/Widgets/ShipmentsByChannelPieChart.tsx

@@ -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>
    );

src/qqq/pages/dashboards/Widgets/WarehouseCard.tsx

@@ -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"