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

src/qqq/components/widgets/statistics/MiniStatisticsCard.tsx

@@ -0,0 +1,158 @@
+/*
+ * 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 Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+import Icon from "@mui/material/Icon";
+import {ReactNode} from "react";
+import {useMaterialUIController} from "qqq/context";
+import MDTypography from "qqq/components/legacy/MDTypography";
+
+
+// Decalaring props types for MiniStatisticsCard
+interface Props {
+  bgColor?: "white" | "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  title?: {
+    fontWeight?: "light" | "regular" | "medium" | "bold";
+    text?: string;
+  };
+  count: string | number;
+  percentage?: {
+    color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white";
+    text: string | number;
+  };
+  icon: {
+    color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+    component: ReactNode;
+  };
+  direction?: "right" | "left";
+  [key: string]: any;
+}
+
+function MiniStatisticsCard({
+   bgColor,
+   title,
+   count,
+   percentage,
+   icon,
+   direction,
+}: Props): JSX.Element
+{
+   const [controller] = useMaterialUIController();
+   const {darkMode} = controller;
+
+   return (
+      <Card sx={{overflow: "hidden"}}>
+         <Box
+            sx={({palette: {background}}: { palette: any }) => ({
+               background: darkMode && background.card,
+               backgroundColor: bgColor
+            })}
+         >
+            <Box p={2}>
+               <Grid container alignItems="center">
+                  {direction === "left" ? (
+                     <Grid item xs={4}>
+                        <Box
+                           color={bgColor === "white" ? "white" : "dark"}
+                           width="4rem"
+                           height="4rem"
+                           borderRadius="md"
+                           display="flex"
+                           justifyContent="center"
+                           alignItems="center"
+                           sx={{backgroundColor: bgColor === "white" ? icon.color : "white"}}
+                        >
+                           <Icon fontSize="medium" color="inherit">
+                              {icon.component}
+                           </Icon>
+                        </Box>
+                     </Grid>
+                  ) : null}
+                  <Grid item xs={8}>
+                     <Box
+                        ml={direction === "left" ? 2 : 0}
+                        lineHeight={1}
+                        textAlign={direction === "left" ? "right" : "left"}
+                     >
+                        <MDTypography
+                           variant="button"
+                           color={bgColor === "white" ? "text" : "white"}
+                           opacity={bgColor === "white" ? 1 : 0.7}
+                           textTransform="capitalize"
+                           fontWeight={title.fontWeight}
+                        >
+                           {title.text}
+                        </MDTypography>
+                        <MDTypography
+                           variant="h5"
+                           fontWeight="bold"
+                           color={bgColor === "white" ? "dark" : "white"}
+                        >
+                           {count}{" "}
+                           <MDTypography variant="button" color={percentage.color} fontWeight="bold">
+                              {percentage.text}
+                           </MDTypography>
+                        </MDTypography>
+                     </Box>
+                  </Grid>
+                  {direction === "right" ? (
+                     <Grid item xs={4}>
+                        <Box
+                           color={bgColor === "white" ? "white" : "dark"}
+                           width="4rem"
+                           height="4rem"
+                           marginLeft="auto"
+                           borderRadius="md"
+                           display="flex"
+                           justifyContent="center"
+                           alignItems="center"
+                           sx={{backgroundColor: bgColor === "white" ? icon.color : "white"}}
+                        >
+                           <Icon fontSize="medium" color="inherit">
+                              {icon.component}
+                           </Icon>
+                        </Box>
+                     </Grid>
+                  ) : null}
+               </Grid>
+            </Box>
+         </Box>
+      </Card>
+   );
+}
+
+// Declaring default props for MiniStatisticsCard
+MiniStatisticsCard.defaultProps = {
+   bgColor: "white",
+   title: {
+      fontWeight: "light",
+      text: "",
+   },
+   percentage: {
+      color: "success",
+      text: "",
+   },
+   direction: "right",
+};
+
+export default MiniStatisticsCard;