chore: Align with develop

SteveGT96 · Jan 9, 2025 · 470e2fb · 470e2fb
2 parents 2710930 + c244480
commit 470e2fb
Show file tree

Hide file tree

Showing 15 changed files with 84 additions and 147 deletions.
diff --git a/src/components/accessories/admin/users/usersTable/UsersTable.tsx b/src/components/accessories/admin/users/usersTable/UsersTable.tsx
@@ -79,7 +79,7 @@ export const UsersTable = ({ headerActions, onEdit, onDelete }: IOwnProps) => {
   const header = ["userName", "userGroupName", "desc", "deleted"];
   const label = {
     userName: t("user.username"),
-    userGroupName: t("user.groups"),
+    userGroupName: t("user.group"),
     desc: t("user.description"),
     deleted: t("common.deleted"),
   };
@@ -88,14 +88,14 @@ export const UsersTable = ({ headerActions, onEdit, onDelete }: IOwnProps) => {
     (state) =>
       state.usergroups.groupList.data?.map((item) => ({
         value: item.code ?? "",
-        label: item.desc ?? item.code ?? "",
+        label: item.code ?? "",
       })) ?? []
   );
 
   const filters: TFilterField[] = [
     {
       key: "userGroupName",
-      label: t("user.groups"),
+      label: t("user.group"),
       type: "select",
       options: userGroupOptions,
     },
@@ -115,8 +115,7 @@ export const UsersTable = ({ headerActions, onEdit, onDelete }: IOwnProps) => {
     return data.map((item) => {
       return {
         userName: item.userName ?? "",
-        userGroupName:
-          item.userGroupName?.desc ?? item.userGroupName?.code ?? "",
+        userGroupName: item.userGroupName?.code ?? "",
         desc: item.desc ?? "",
         passwd: item.passwd ?? "",
         deleted: item.deleted ? <CheckOutlined fontSize="small" /> : "",

diff --git a/src/components/accessories/charts/pie/styles.scss b/src/components/accessories/charts/pie/styles.scss
@@ -1,7 +1,12 @@
-@import "../../../../styles/variables";
-@import "../../../../../node_modules/susy/sass/susy";
-
-// .pie {
-//   max-width: 300px;
-//   max-height: 300px;
-// }
+@import "../../../../styles/variables";
+@import "../../../../../node_modules/susy/sass/susy";
+
+// .pie {
+//   max-width: 300px;
+//   max-height: 300px;
+// }
+
+canvas {
+  height: unset !important;
+  width: unset !important;
+}
diff --git a/src/components/accessories/dashboard/admissions/admissionByAgeType/AdmissionByAgeType.tsx b/src/components/accessories/dashboard/admissions/admissionByAgeType/AdmissionByAgeType.tsx
@@ -1,5 +1,5 @@
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdmByAgeTypeData } from "../../../../../libraries/dashboardUtils/admissions/useAdmByAgeTypeData";
 import { getAdmissions } from "../../../../../state/admissions";
@@ -14,6 +14,7 @@ import { IOwnProps } from "../types";
 import { Skeleton } from "@mui/material";
 import { getAgeTypes } from "state/types/ageTypes";
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const AdmissionsByAgeType: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -35,14 +36,7 @@ export const AdmissionsByAgeType: FC<TDashboardComponentProps & IOwnProps> = ({
   const { total, success, status, ageTypeStatus, data, csvData } =
     useAdmByAgeTypeData();
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -75,11 +69,7 @@ export const AdmissionsByAgeType: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Barchart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Barchart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.admregistered")}
             value={total.toString()}

diff --git a/src/components/accessories/dashboard/admissions/admissionBySex/AdmissionBySex.tsx b/src/components/accessories/dashboard/admissions/admissionBySex/AdmissionBySex.tsx
@@ -69,11 +69,7 @@ export const AdmissionsBySex: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Piechart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Piechart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.admregistered")}
             value={total.toString()}

diff --git a/src/components/accessories/dashboard/admissions/admissionByTypes/AdmissionByTypes.tsx b/src/components/accessories/dashboard/admissions/admissionByTypes/AdmissionByTypes.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdmByAdmTypeData } from "../../../../../libraries/dashboardUtils/admissions/useAdmByAdmTypeData";
 import { getAdmissions } from "../../../../../state/admissions";
@@ -14,6 +14,7 @@ import { IOwnProps } from "../types";
 
 import { getAdmissionTypes } from "../../../../../state/types/admissions";
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const AdmissionsByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -35,14 +36,7 @@ export const AdmissionsByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   const { total, success, status, admissionTypeStatus, data, csvData } =
     useAdmByAdmTypeData();
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -75,11 +69,7 @@ export const AdmissionsByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Piechart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Piechart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.admregistered")}
             value={total.toString()}

diff --git a/src/components/accessories/dashboard/admissions/admissionByWards/AdmissionByWards.tsx b/src/components/accessories/dashboard/admissions/admissionByWards/AdmissionByWards.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdmByAdmWardData } from "../../../../../libraries/dashboardUtils/admissions/useAdmByWardData";
 import { getAdmissions } from "../../../../../state/admissions";
@@ -14,6 +14,7 @@ import { DataSummary } from "../../summary/DataSummary";
 import { IOwnProps } from "../types";
 
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const AdmissionsByWards: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -35,14 +36,7 @@ export const AdmissionsByWards: FC<TDashboardComponentProps & IOwnProps> = ({
   const { total, success, status, wardStatus, data, csvData } =
     useAdmByAdmWardData();
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -75,11 +69,7 @@ export const AdmissionsByWards: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Barchart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Barchart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.admregistered")}
             value={total.toString()}

diff --git a/src/components/accessories/dashboard/card/styles.scss b/src/components/accessories/dashboard/card/styles.scss
@@ -2,17 +2,26 @@
   .MuiListItemIcon-root {
     min-width: 30px !important;
   }
-  
+
   display: flex;
   align-items: center;
   text-decoration: none;
 }
 
-.DashboardCard-item{
+.DashboardCard-item {
   display: flex;
   flex-direction: column;
   max-height: 100%;
 
+  .MuiCardContent-root {
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    canvas {
+      justify-self: center;
+    }
+  }
+
   .DashboardCard-item-header {
     padding: 1px 16px 8px 16px;
     align-items: center;
@@ -24,12 +33,12 @@
     flex: 1 1 auto;
     max-height: calc(100% - 40px);
   }
-  
+
   .MuiCardHeader-action {
     margin-top: 0;
 
     .MuiIconButton-root {
       padding: 5px !important;
     }
   }
-}
+}
diff --git a/...components/accessories/dashboard/discharges/dischargesByAgeTypes/DischargesByAgeTypes.tsx b/...components/accessories/dashboard/discharges/dischargesByAgeTypes/DischargesByAgeTypes.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { getAgeTypes } from "state/types/ageTypes";
 import { useDisByAgeTypeData } from "../../../../../libraries/dashboardUtils/discharges/useDisByAgeTypeData";
@@ -14,6 +14,7 @@ import { DataSummary } from "../../summary/DataSummary";
 import { IOwnProps } from "../types";
 
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const DischargesByAgeTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -35,14 +36,7 @@ export const DischargesByAgeTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   const { total, success, status, ageTypeStatus, data, csvData } =
     useDisByAgeTypeData();
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -73,11 +67,7 @@ export const DischargesByAgeTypes: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Barchart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Barchart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.disregistered")}
             value={total.toString()}

diff --git a/src/components/accessories/dashboard/discharges/dischargesBySex/DischargesBySex.tsx b/src/components/accessories/dashboard/discharges/dischargesBySex/DischargesBySex.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { getDischarges } from "../../../../../state/admissions";
 import { DashboardCard } from "../../card/DashboardCard";
@@ -13,6 +13,7 @@ import { useDisBySexData } from "../../../../../libraries/dashboardUtils/dischar
 import { Piechart } from "../../../charts/pie/Piechart";
 import DataDownloadButton from "../../../dataDownloadButton/DataDownloadButton";
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const DischargesBySex: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -29,14 +30,7 @@ export const DischargesBySex: FC<TDashboardComponentProps & IOwnProps> = ({
 
   const { total, success, status, data, csvData } = useDisBySexData();
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -67,11 +61,7 @@ export const DischargesBySex: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Piechart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Piechart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.disregistered")}
             value={total.toString()}

diff --git a/src/components/accessories/dashboard/discharges/dischargesByTypes/DischargesByTypes.tsx b/src/components/accessories/dashboard/discharges/dischargesByTypes/DischargesByTypes.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useDisByDisTypeData } from "../../../../../libraries/dashboardUtils/discharges/useDisByDisTypeData";
 import { getDischarges } from "../../../../../state/admissions";
@@ -14,6 +14,7 @@ import { IOwnProps } from "../types";
 
 import { getDischargeTypes } from "../../../../../state/types/discharges";
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const DischargesByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -35,14 +36,7 @@ export const DischargesByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   const { total, success, status, dischargeTypeStatus, data, csvData } =
     useDisByDisTypeData();
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -73,11 +67,7 @@ export const DischargesByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Piechart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Piechart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.disregistered")}
             value={total.toString()}