SPRINT-18: fixed to dashboards, removed and moved around all the things

2025-07-18 05:10:45 +00:00 · 2023-01-04 11:40:21 -06:00
parent e49f178738
commit 267580b44b
460 changed files with 9717 additions and 11057 deletions
--- a/src/qqq/components/horseshoe/Breadcrumbs.tsx
+++ b/src/qqq/components/horseshoe/Breadcrumbs.tsx
@ -0,0 +1,131 @@
+/*
+ * 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 {Breadcrumbs as MuiBreadcrumbs} from "@mui/material";
+import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import {ReactNode, useContext} from "react";
+import {Link} from "react-router-dom";
+import QContext from "QContext";
+import MDTypography from "qqq/components/legacy/MDTypography";
+
+interface Props
+{
+   icon: ReactNode;
+   title: string;
+   route: string | string[];
+   light?: boolean;
+
+   [key: string]: any;
+}
+
+const ucFirst = (input: string): string =>
+{
+   if (!input)
+   {
+      return (input);
+   }
+   return (input.substring(0, 1).toUpperCase() + input.substring(1));
+};
+
+export const routeToLabel = (route: string): string =>
+{
+   const label = ucFirst(route
+      .replace(".", " ")
+      .replace("-", " ")
+      .replace("_", " ")
+      .replace(/([a-z])([A-Z]+)/g, "$1 $2") // transform personUSA => person USA
+      .replace(/^([A-Z]+)([A-Z])([a-z])/, "$1 $2$3")); // transform USAPerson => USA Person
+   return (label);
+};
+
+function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
+{
+   const routes: string[] | any = route.slice(0, -1);
+   const {pageHeader, setPageHeader} = useContext(QContext);
+
+   let pageTitle = "Nutrifresh One";
+   const fullRoutes: string[] = [];
+   let accumulatedPath = "";
+   for (let i = 0; i < routes.length; i++)
+   {
+      accumulatedPath = `${accumulatedPath}/${routes[i]}`;
+      fullRoutes.push(accumulatedPath);
+      pageTitle = `${routeToLabel(routes[i])} | ${pageTitle}`;
+   }
+
+   document.title = `${ucFirst(title)} | ${pageTitle}`;
+
+   return (
+      <Box mr={{xs: 0, xl: 8}}>
+         <MuiBreadcrumbs
+            sx={{
+               "& .MuiBreadcrumbs-separator": {
+                  color: ({palette: {white, grey}}) => (light ? white.main : grey[600]),
+               },
+            }}
+         >
+            <Link to="/">
+               <MDTypography
+                  component="span"
+                  variant="body2"
+                  color={light ? "white" : "dark"}
+                  opacity={light ? 0.8 : 0.5}
+                  sx={{lineHeight: 0}}
+               >
+                  <Icon>{icon}</Icon>
+               </MDTypography>
+            </Link>
+            {fullRoutes.map((fullRoute: string) => (
+               <Link to={fullRoute} key={fullRoute}>
+                  <MDTypography
+                     component="span"
+                     variant="button"
+                     fontWeight="regular"
+                     textTransform="capitalize"
+                     color={light ? "white" : "dark"}
+                     opacity={light ? 0.8 : 0.5}
+                     sx={{lineHeight: 0}}
+                  >
+                     {routeToLabel(fullRoute.replace(/.*\//, ""))}
+                  </MDTypography>
+               </Link>
+            ))}
+         </MuiBreadcrumbs>
+         <MDTypography
+            pt={1}
+            fontWeight="bold"
+            textTransform="capitalize"
+            variant="h5"
+            color={light ? "white" : "dark"}
+            noWrap
+         >
+            {pageHeader}
+         </MDTypography>
+      </Box>
+   );
+}
+
+QBreadcrumbs.defaultProps = {
+   light: false,
+};
+
+export default QBreadcrumbs;