mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 05:10:45 +00:00
SPRINT-12: added skeletons throughout widgets, fixed page header under breadcrumb, misc other improvements
This commit is contained in:
Tim Chamberlain
@ -24,7 +24,8 @@ import {Icon} from "@mui/material";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import QContext from "QContext";
|
||||
import DashboardLayout from "qqq/components/DashboardLayout";
|
||||
import Footer from "qqq/components/Footer";
|
||||
import Navbar from "qqq/components/Navbar";
|
||||
@ -115,12 +116,15 @@ function CarrierPerformance(): JSX.Element
|
||||
|
||||
const [qInstance, setQInstance] = useState(null as QInstance);
|
||||
const [dataLoaded, setDataLoaded] = useState(false);
|
||||
const {pageHeader, setPageHeader} = useContext(QContext);
|
||||
|
||||
//////////////////////////
|
||||
// load meta data first //
|
||||
//////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
setPageHeader("Carrier Performance");
|
||||
|
||||
(async () =>
|
||||
{
|
||||
const newQInstance = await qController.loadMetaData();
|
||||
|
||||
@ -23,7 +23,8 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import {useEffect, useState} from "react";
|
||||
import {useContext, useEffect, useState} from "react";
|
||||
import QContext from "QContext";
|
||||
import DashboardLayout from "qqq/components/DashboardLayout";
|
||||
import Footer from "qqq/components/Footer";
|
||||
import Navbar from "qqq/components/Navbar";
|
||||
@ -66,6 +67,7 @@ function Overview(): JSX.Element
|
||||
const [warehouseData, setWarehouseData] = useState([] as LocationCardData[]);
|
||||
|
||||
const [qInstance, setQInstance] = useState(null as QInstance);
|
||||
const {pageHeader, setPageHeader} = useContext(QContext);
|
||||
|
||||
|
||||
//////////////////////////
|
||||
@ -73,6 +75,8 @@ function Overview(): JSX.Element
|
||||
//////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
setPageHeader("Overview");
|
||||
|
||||
(async () =>
|
||||
{
|
||||
const newQInstance = await qController.loadMetaData();
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {Skeleton} from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Grid from "@mui/material/Grid";
|
||||
@ -76,7 +77,7 @@ function MultiStatisticsCard({title, data}: Props): JSX.Element
|
||||
</Grid>
|
||||
<Grid container>
|
||||
{
|
||||
data && data.statisticsGroupData && (
|
||||
data && data.statisticsGroupData ? (
|
||||
data.statisticsGroupData.map((statisticsGroup, i1) =>
|
||||
<Grid key={`statgroup-${i1}`} item xs={3} lg={3} sx={{textAlign: "center"}}>
|
||||
<MDBox p={3} pt={3} sx={{alignItems: "center"}}>
|
||||
@ -112,6 +113,34 @@ function MultiStatisticsCard({title, data}: Props): JSX.Element
|
||||
</MDBox>
|
||||
</Grid>
|
||||
)
|
||||
) : (
|
||||
Array(4).fill(0).map((_, i) =>
|
||||
<Grid key={`item-${i}`} item xs={3} lg={3} sx={{textAlign: "center"}}>
|
||||
<MDBox p={3} pt={3} sx={{alignItems: "center"}}>
|
||||
<MDBox>
|
||||
<MDTypography variant="h6">
|
||||
<Icon sx={{fontSize: "30px", margin: "5px", color: "grey"}} fontSize="medium">pending</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox>
|
||||
<MDTypography variant="h6">
|
||||
<Skeleton />
|
||||
</MDTypography>
|
||||
<MDTypography variant="subtitle2">
|
||||
<Skeleton />
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<Divider sx={{margin: "10px"}}></Divider>
|
||||
<MDBox sx={{alignItems: "center"}}>
|
||||
<MDBox key={`stat-${i}`}>
|
||||
<MDTypography variant="subtitle2">
|
||||
<Skeleton />
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
)
|
||||
)
|
||||
}
|
||||
</Grid>
|
||||
|
||||
@ -65,11 +65,7 @@ function StepperCard({data}: Props): JSX.Element
|
||||
marginTop: "9px",
|
||||
marginRight: "30px",
|
||||
marginLeft: "30px",
|
||||
},
|
||||
"& .MuiStepConnector-completed":
|
||||
{
|
||||
color: "red !important"
|
||||
}
|
||||
}
|
||||
})(StepConnector);
|
||||
|
||||
console.log(`data ${JSON.stringify(data)}`);
|
||||
@ -132,7 +128,21 @@ function StepperCard({data}: Props): JSX.Element
|
||||
</Step>
|
||||
))
|
||||
) : (
|
||||
<Skeleton width="100%" height="80px" />
|
||||
|
||||
Array(5).fill(0).map((_, i) =>
|
||||
<Step key={`step-${i}`}>
|
||||
<MDBox>
|
||||
<StepLabel icon={<Pending />} sx={{
|
||||
color: "#ced4da",
|
||||
fontSize: "35px",
|
||||
"& .MuiStepLabel-label.MuiStepLabel-alternativeLabel":
|
||||
{
|
||||
color: "#ced4da !important",
|
||||
}
|
||||
}}><Skeleton /></StepLabel>
|
||||
</MDBox>
|
||||
</Step>
|
||||
)
|
||||
)
|
||||
}
|
||||
</Stepper>
|
||||
|
||||
@ -24,10 +24,17 @@ import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Table from "@mui/material/Table";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableContainer from "@mui/material/TableContainer";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import parse from "html-react-parser";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {NavLink} from "react-router-dom";
|
||||
import DefaultCell from "layouts/dashboards/sales/components/DefaultCell";
|
||||
import DataTable, {TableDataInput} from "qqq/components/Temporary/DataTable";
|
||||
import DataTableBodyCell from "qqq/components/Temporary/DataTable/DataTableBodyCell";
|
||||
import DataTableHeadCell from "qqq/components/Temporary/DataTable/DataTableHeadCell";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
|
||||
@ -175,17 +182,30 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
) : (
|
||||
<MDBox p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
|
||||
<MDTypography
|
||||
variant="subtitle2"
|
||||
color="secondary"
|
||||
fontWeight="regular"
|
||||
>
|
||||
<Skeleton />
|
||||
<Skeleton />
|
||||
<Skeleton />
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<TableContainer sx={{boxShadow: "none"}}>
|
||||
<Table>
|
||||
<MDBox component="thead">
|
||||
<TableRow key="header">
|
||||
{Array(8).fill(0).map((_, i) =>
|
||||
<DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center">
|
||||
<Skeleton width="100%" />
|
||||
</DataTableHeadCell>
|
||||
)}
|
||||
</TableRow>
|
||||
</MDBox>
|
||||
<TableBody>
|
||||
{Array(5).fill(0).map((_, i) =>
|
||||
<TableRow sx={{verticalAlign: "top"}} key={`row-${i}`}>
|
||||
{Array(8).fill(0).map((_, j) =>
|
||||
<DataTableBodyCell key={`cell-${i}-${j}`} align="center">
|
||||
<DefaultCell><Skeleton /></DefaultCell>
|
||||
</DataTableBodyCell>
|
||||
)}
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)
|
||||
}
|
||||
</MDBox>
|
||||
|
||||
Reference in New Issue
Block a user