diff --git a/package.json b/package.json index d6fa350..afe3d21 100644 --- a/package.json +++ b/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", diff --git a/public/apple-icon.png b/public/apple-icon.png index d594bc6..c0fd815 100644 Binary files a/public/apple-icon.png and b/public/apple-icon.png differ diff --git a/public/favicon.png b/public/favicon.png index d594bc6..c0fd815 100644 Binary files a/public/favicon.png and b/public/favicon.png differ diff --git a/src/App.tsx b/src/App.tsx index 3b37357..19e625d 100644 --- a/src/App.tsx +++ b/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: , + collapse: [ + { + name: "My Profile", + key: "my-profile", + route: "/pages/profile/profile-overview", + component: , + }, + { + name: "Settings", + key: "profile-settings", + route: "/pages/account/settings", + component: , + }, + ], }; setProfileRoutes(profileRoutes); @@ -419,7 +435,6 @@ export default function App() - + - + {brand && } + sidenavLogoLabel(theme, { miniSidenav })} + > + + {brandName} + + - + {brand && } + {brandName && sidenavLogoLabel(theme, {miniSidenav})}> + + {brandName} + + + } . - */ - -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 ( - - - - - - - - {action} - - - {title} - - - {description} - - - - - - {price} - - - - place - - - {location} - - - - - ); -} - -// Declaring default props for BookingCard -BookingCard.defaultProps = { - action: false, -}; - -export default BookingCard; diff --git a/src/qqq/images/warehouses/edison_nj.jpg b/src/qqq/images/warehouses/edison_nj.jpg new file mode 100644 index 0000000..c0030e3 Binary files /dev/null and b/src/qqq/images/warehouses/edison_nj.jpg differ diff --git a/src/qqq/images/warehouses/patterson.jpg b/src/qqq/images/warehouses/patterson.jpg new file mode 100644 index 0000000..e950c28 Binary files /dev/null and b/src/qqq/images/warehouses/patterson.jpg differ diff --git a/src/qqq/images/warehouses/stockton.jpg b/src/qqq/images/warehouses/stockton.jpg new file mode 100644 index 0000000..a43da46 Binary files /dev/null and b/src/qqq/images/warehouses/stockton.jpg differ diff --git a/src/qqq/pages/app-home/index.tsx b/src/qqq/pages/app-home/index.tsx index 43038dc..c5961c6 100644 --- a/src/qqq/pages/app-home/index.tsx +++ b/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 ( @@ -179,8 +178,8 @@ function AppHome({app}: Props): JSX.Element { - widgets.map((chart) => ( - + widgets.map((chart, i) => ( + { chart.type === "quickSightChart" && ( @@ -245,7 +244,7 @@ function AppHome({app}: Props): JSX.Element {table.iconName || app.iconName}}} direction="right" /> diff --git a/src/qqq/pages/dashboards/CarrierPerformance.tsx b/src/qqq/pages/dashboards/CarrierPerformance.tsx index 7de0ca6..b7df12c 100644 --- a/src/qqq/pages/dashboards/CarrierPerformance.tsx +++ b/src/qqq/pages/dashboards/CarrierPerformance.tsx @@ -19,13 +19,13 @@ * along with this program. If not, see . */ +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("Last 30 Days"); - const [customersDropdownValue, setCustomersDropdownValue] = useState("Last 30 Days"); - const [revenueDropdownValue, setRevenueDropdownValue] = useState("Last 30 Days"); + const openArrowIcon = "arrow_drop_down"; + const closeArrowIcon = "arrow_drop_up"; - const [salesDropdown, setSalesDropdown] = useState(null); - const [customersDropdown, setCustomersDropdown] = useState(null); - const [revenueDropdown, setRevenueDropdown] = useState(null); + const [shipmentsDropdownValue, setShipmentsDropdownValue] = useState("Last 30 Days"); + const [deliveriesDropdownValue, setDeliveriesDropdownValue] = useState("Last 30 Days"); + const [failuresDropdownValue, setFailuresDropdownValue] = useState("Last 30 Days"); - const openSalesDropdown = ({currentTarget}: any) => setSalesDropdown(currentTarget); - const closeSalesDropdown = ({currentTarget}: any) => + const [shipmentsDropdown, setShipmentsDropdown] = useState(null); + const [deliveriesDropdown, setDeliveriesDropdown] = useState(null); + const [failuresDropdown, setFailuresDropdown] = useState(null); + + const [shipmentsDropdownIcon, setShipmentsDropdownIcon] = useState(openArrowIcon); + const [deliveriesDropdownIcon, setDeliveriesDropdownIcon] = useState(openArrowIcon); + const [failuresDropdownIcon, setFailuresDropdownIcon] = useState(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) => ( - - Last 7 days - Last week - Last 30 days - + const renderMenu = (state: any, open: any, close: any, icon: string) => ( + + {icon} + + Last 7 days + Last week + Last 30 days + + ); 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, }} /> @@ -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, }} /> @@ -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, }} /> diff --git a/src/qqq/pages/dashboards/Overview.tsx b/src/qqq/pages/dashboards/Overview.tsx index ed9ba68..373187b 100644 --- a/src/qqq/pages/dashboards/Overview.tsx +++ b/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 Over the last week there have been 3 days with total shipments greater than the daily average of 564 shipments. + } date="Updated 3 minutes ago" chart={shipmentsByDayBarChartData} /> @@ -91,7 +93,9 @@ function Overview(): JSX.Element Total shipments have been increasing over the last eight months. + } date="Just updated" chart={shipmentsByMonthLineChartData} /> @@ -165,10 +169,12 @@ function Overview(): JSX.Element - The Edison, NJ warehouse currently has 38 open orders and 39 ASNs are expected in the next week. + } price="99% SLA" location="Edison, NJ" action={actionButtons} @@ -177,10 +183,12 @@ function Overview(): JSX.Element - The Patterson, CA warehouse shipped 32,032 this year. The delivery SLA is 97.3%, up 0.8% from last week. + } price="98% SLA" location="Patterson, CA" action={actionButtons} @@ -189,10 +197,12 @@ function Overview(): JSX.Element - The Stockton, CA warehouse shipped 2,032 packages yesterday. Last week's failed shipments were down by 12%. + } price="95% SLA" location="Stockton, CA" action={actionButtons} diff --git a/src/qqq/pages/dashboards/Widgets/Data/ShipmentsByDayBarChartData.ts b/src/qqq/pages/dashboards/Widgets/Data/ShipmentsByDayBarChartData.ts index 3cb336e..8c867df 100644 --- a/src/qqq/pages/dashboards/Widgets/Data/ShipmentsByDayBarChartData.ts +++ b/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; diff --git a/src/qqq/pages/dashboards/Widgets/Data/timeInTransitBarChartData.ts b/src/qqq/pages/dashboards/Widgets/Data/TimeInTransitBarChartData.ts similarity index 91% rename from src/qqq/pages/dashboards/Widgets/Data/timeInTransitBarChartData.ts rename to src/qqq/pages/dashboards/Widgets/Data/TimeInTransitBarChartData.ts index 938022d..e0b8234 100644 --- a/src/qqq/pages/dashboards/Widgets/Data/timeInTransitBarChartData.ts +++ b/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], }, ], }; diff --git a/src/qqq/pages/dashboards/Widgets/ShipmentsByChannelPieChart.tsx b/src/qqq/pages/dashboards/Widgets/ShipmentsByChannelPieChart.tsx index e060a85..4cd4592 100644 --- a/src/qqq/pages/dashboards/Widgets/ShipmentsByChannelPieChart.tsx +++ b/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 ( - Shipments By Carrier YTD + Shipments By Carrier Year To Date - + - + - + - + - + - + - + - + - - - - - More than 1,200,000 sales are made using referral marketing, and{" "} - 700,000 are from social media. - - + + + + + + Fedex and UPS delivered the majority of shipments with a combined percentage of 55%. + The fewest shipments were delivered by AxleHire and OnTrac combining for 6%. + + + + ); diff --git a/src/qqq/pages/dashboards/Widgets/WarehouseCard.tsx b/src/qqq/pages/dashboards/Widgets/WarehouseCard.tsx index 079d3ed..c219bc3 100644 --- a/src/qqq/pages/dashboards/Widgets/WarehouseCard.tsx +++ b/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 ( - +