qqq-frontend-material-dashboard/src/qqq/components/Temporary/MiniStatisticsCard/index.tsx

/*
 * 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 Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import {ReactNode} from "react";
import {useMaterialUIController} from "context";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/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"}}>
         <MDBox
            bgColor={bgColor}
            variant="gradient"
            sx={({palette: {background}}: { palette: any }) => ({
               background: darkMode && background.card,
            })}
         >
            <MDBox p={2}>
               <Grid container alignItems="center">
                  {direction === "left" ? (
                     <Grid item xs={4}>
                        <MDBox
                           variant="gradient"
                           bgColor={bgColor === "white" ? icon.color : "white"}
                           color={bgColor === "white" ? "white" : "dark"}
                           width="4rem"
                           height="4rem"
                           borderRadius="md"
                           display="flex"
                           justifyContent="center"
                           alignItems="center"
                           shadow="md"
                        >
                           <Icon fontSize="medium" color="inherit">
                              {icon.component}
                           </Icon>
                        </MDBox>
                     </Grid>
                  ) : null}
                  <Grid item xs={8}>
                     <MDBox
                        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>
                     </MDBox>
                  </Grid>
                  {direction === "right" ? (
                     <Grid item xs={4}>
                        <MDBox
                           variant="gradient"
                           bgColor={bgColor === "white" ? icon.color : "white"}
                           color={bgColor === "white" ? "white" : "dark"}
                           width="4rem"
                           height="4rem"
                           marginLeft="auto"
                           borderRadius="md"
                           display="flex"
                           justifyContent="center"
                           alignItems="center"
                           shadow="md"
                        >
                           <Icon fontSize="medium" color="inherit">
                              {icon.component}
                           </Icon>
                        </MDBox>
                     </Grid>
                  ) : null}
               </Grid>
            </MDBox>
         </MDBox>
      </Card>
   );
}

// Declaring default props for MiniStatisticsCard
MiniStatisticsCard.defaultProps = {
   bgColor: "white",
   title: {
      fontWeight: "light",
      text: "",
   },
   percentage: {
      color: "success",
      text: "",
   },
   direction: "right",
};

export default MiniStatisticsCard;