Skip to content

Commit

Permalink
feat: update page to use new Widgets,helpers,classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@trevor-anderson
trevor-anderson committed Feb 20, 2024
1 parent 3b42a35 commit a1ae748
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 74 deletions.
129 changes: 68 additions & 61 deletions src/pages/Dashboard/DashboardPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,82 @@
import { styled } from "@mui/material/styles";
import Text, { typographyClasses } from "@mui/material/Typography";
import { WidgetContainer, widgetClassNames } from "@/components/Widgets";
import { DashboardDataContextProvider } from "./DashboardDataContext";
import { DashboardWidgetContainer } from "./DashboardWidgetContainer";
import { InvoiceAmountTotalsWidget } from "./InvoiceAmountTotalsWidget";
import { WorkOrdersPerMonthChart, InvoicesPerMonthChart } from "./ItemsPerMonthCharts";
import { WorkOrdersByStatusCounter, InvoicesByStatusCounter } from "./StatusCountWidgets";
import { InvoicesByStatusCounter } from "./InvoicesByStatusCounter";
import { InvoicesPerMonthChart } from "./InvoicesPerMonthChart";
import { WorkOrderUpcomingEventsWidget } from "./WorkOrderUpcomingEventsWidget";
import { WorkOrdersByStatusCounter } from "./WorkOrdersByStatusCounter";
import { WorkOrdersPerMonthChart } from "./WorkOrdersPerMonthChart";
import { dashboardPageClassNames } from "./classNames";

// IDEA Idea for new widget: count number of overdue work orders, and/or how many are due/scheduled in x days
// IDEA Idea for new widget/page: CALENDAR VIEW, for due/scheduled dates
// IDEA Idea for new widget/page: Colored layout of WOs, highlighted by priority

export const DashboardPage = () => {
return (
<DashboardDataContextProvider>
<StyledDiv className={dashboardPageClassNames.root}>
{/* TOP ROW VIEW HEADER */}

<Text variant="h1">Dashboard</Text>

{/* WIDGETS AREA: flex row of WorkOrder-widgets then Invoice-widgets */}
/**
* **DashboardPage** - renders when path is "/home" and user is both authenticated and authorized.
*
* // IDEA Idea for new widget: count number of overdue work orders, and/or how many are due/scheduled in x days.
* // IDEA Idea for new widget/page: CALENDAR VIEW, for due/scheduled dates of WOs and INVs.
* // IDEA Idea for new widget/page: Colored layout of WOs, highlighted by priority.
*/
export const DashboardPage = () => (
<DashboardDataContextProvider>
<StyledDiv className={dashboardPageClassNames.root}>
{/* TOP ROW VIEW HEADER */}

<Text variant="h1">Dashboard</Text>

{/* WIDGETS AREA: flex row of WorkOrder-widgets then Invoice-widgets */}

<div className={dashboardPageClassNames.widgetsArea}>
{/* Work Order Widgets */}

<div className={dashboardPageClassNames.widgetsGroup}>
<div className={dashboardPageClassNames.widgetsSubGroup}>
<WidgetContainer size="small">
<WorkOrdersByStatusCounter />
</WidgetContainer>
<WidgetContainer size="small">
<WorkOrderUpcomingEventsWidget />
</WidgetContainer>
</div>

<div className={dashboardPageClassNames.widgetsArea}>
{/* Work Order Widgets */}
<WidgetContainer size="large">
<WorkOrdersPerMonthChart />
</WidgetContainer>
</div>

<div className={dashboardPageClassNames.widgetsGroup}>
<div className={dashboardPageClassNames.widgetsSubGroup}>
<DashboardWidgetContainer size="small">
<WorkOrdersByStatusCounter />
</DashboardWidgetContainer>
<DashboardWidgetContainer size="small">
<WorkOrderUpcomingEventsWidget />
</DashboardWidgetContainer>
</div>
{/* Invoice Widgets */}

<DashboardWidgetContainer size="large">
<WorkOrdersPerMonthChart />
</DashboardWidgetContainer>
<div className={dashboardPageClassNames.widgetsGroup}>
<div className={dashboardPageClassNames.widgetsSubGroup}>
<WidgetContainer size="small">
<InvoicesByStatusCounter />
</WidgetContainer>
<WidgetContainer size="small">
<InvoiceAmountTotalsWidget />
</WidgetContainer>
</div>

{/* Invoice Widgets */}

<div className={dashboardPageClassNames.widgetsGroup}>
<div className={dashboardPageClassNames.widgetsSubGroup}>
<DashboardWidgetContainer size="small">
<InvoicesByStatusCounter />
</DashboardWidgetContainer>
<DashboardWidgetContainer size="small">
<InvoiceAmountTotalsWidget />
</DashboardWidgetContainer>
</div>

<DashboardWidgetContainer size="large">
<InvoicesPerMonthChart />
</DashboardWidgetContainer>
</div>
<WidgetContainer size="large">
<InvoicesPerMonthChart />
</WidgetContainer>
</div>
</StyledDiv>
</DashboardDataContextProvider>
);
};
</div>
</StyledDiv>
</DashboardDataContextProvider>
);

// Exported as "Component" for react-router-dom lazy loading
export const Component = DashboardPage;

const StyledDiv = styled("div")(({ theme }) => {
const StyledDiv = styled("div")(({ theme: { breakpoints } }) => {
const viewPadding = "0.75rem";

const headerHeight = "2rem";
const headerBottomMargin = "0.5rem";

return {
height: "100%",
minHeight: "100%",
padding: viewPadding,
overflowY: "auto",

Expand All @@ -82,18 +89,18 @@ const StyledDiv = styled("div")(({ theme }) => {

/* The widgets' layout is defined by three levels of nested containers:
1. widgets-area col < 1200px < row Contains two widget groups, 1 for WOs, 1 for INVs.
2. widgets-group col Contains 1 large widget and 2 small ones.
3. widgets-subgroup col < 600px < row Container for 2 small widgets' layout.
*/
1. widgets-area col < 1200px < row Contains two widget groups, 1 for WOs, 1 for INVs.
2. widgets-group col Contains 1 large widget and 2 small ones.
3. widgets-subgroup col < 600px < row Container for 2 small widgets' layout.
*/

[`& > .${dashboardPageClassNames.widgetsArea}`]: {
minHeight: `calc( 100% - (${viewPadding} * 2 + ${headerHeight}))`,
width: "100%",
display: "flex",
flexDirection: "column",

[theme.breakpoints.up("xl")]: {
[breakpoints.up("xl")]: {
height: `calc( 100% - (${viewPadding} * 2 + ${headerHeight}))`,
flexDirection: "row",
},
Expand All @@ -105,14 +112,14 @@ const StyledDiv = styled("div")(({ theme }) => {
flexDirection: "column",
justifyContent: "space-between",

[theme.breakpoints.up("xl")]: {
[breakpoints.up("xl")]: {
height: "100%",
width: "50%",
},

// LARGE widgets:

[`& > .${dashboardPageClassNames.widgetLarge}`]: {
[`& > .${widgetClassNames.sizeLarge}`]: {
height: "27rem",
},

Expand All @@ -122,18 +129,18 @@ const StyledDiv = styled("div")(({ theme }) => {
display: "flex",
flexDirection: "column",

[theme.breakpoints.up(700)]: {
[breakpoints.up(700)]: {
flexDirection: "row",
flexGrow: 1,
alignItems: "center",
},

// SMALL widgets:

[`& > .${dashboardPageClassNames.widgetSmall}`]: {
[`& > .${widgetClassNames.sizeSmall}`]: {
height: "20rem",

[theme.breakpoints.up(700)]: {
[breakpoints.up(700)]: {
width: "calc( 50% - 1.5rem )",
},
},
Expand Down
21 changes: 8 additions & 13 deletions src/pages/Dashboard/classNames.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
/**
* Class names for `Dashboard` page components (src/pages/Dashboard/).
*/
export const dashboardPageClassNames = {
root: "dashboard-page-root",
widgetsArea: "dashboard-page-widgets-area",
widgetsGroup: "dashboard-page-widgets-group",
widgetsSubGroup: "dashboard-page-widgets-sub-group",
widgetLarge: "dashboard-page-widget-size-large",
widgetSmall: "dashboard-page-widget-size-small",
// status widget classNames
statusWidgetRow: "dashboard-status-widget-row",
statusWidgetHeaderRow: "dashboard-status-widget-header-row",
statusWidgetLeftCol: "dashboard-status-widget-left-col",
statusWidgetMiddleCol: "dashboard-status-widget-middle-col",
statusWidgetRightCol: "dashboard-status-widget-right-col",
};
root: "dashboard-page__root",
widgetsArea: "dashboard-page__widgets-area",
widgetsGroup: "dashboard-page__widgets-group",
widgetsSubGroup: "dashboard-page__widgets-sub-group",
} as const;

0 comments on commit a1ae748

Please sign in to comment.