OH2-377 | Fix the dashboard

src/components/accessories/dashboard/admissions/Admissions.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -25,10 +25,12 @@ export const Admissions: FC<IOwnProps> = ({ period }) => {
     dispatch(getAgeTypes());
     dispatch(getAdmissionTypes());
     dispatch(getWards());
-  }, [dispatch]);
+  }, [dispatch, period]);
+
   useEffect(() => {
     dispatch(getAdmissions({ admissionrange: period }));
-  }, [period]);
+  }, [period, dispatch]);
+
   const {
     admissionStatus,
     admissionTypeStatus,

src/components/accessories/dashboard/admissions/admissionByAgeType/AdmissionByAgeType.tsx

@@ -1,4 +1,3 @@
-import { Skeleton } from "@mui/lab";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,6 +12,7 @@ import { TDashboardComponentProps } from "../../layouts/types";
 import { DataSummary } from "../../summary/DataSummary";
 import { IOwnProps } from "../types";
 
+import { Skeleton } from "@mui/material";
 import "../../card/styles.scss";
 
 export const AdmissionsByAgeType: FC<TDashboardComponentProps & IOwnProps> = ({
@@ -30,7 +30,7 @@ export const AdmissionsByAgeType: FC<TDashboardComponentProps & IOwnProps> = ({
 
   useEffect(() => {
     dispatch(getAdmissions({ admissionrange: period }));
-  }, [period]);
+  }, [period, dispatch]);
 
   const { total, success, status, ageTypeStatus, data, csvData } =
     useAdmByAgeTypeData();

src/components/accessories/dashboard/admissions/admissionBySex/AdmissionBySex.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";

src/components/accessories/dashboard/admissions/admissionByTypes/AdmissionByTypes.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -25,13 +25,12 @@ export const AdmissionsByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   const admtcardRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    //dispatch(getAdmissions({ admissionrange: period }));
     dispatch(getAdmissionTypes());
   }, [dispatch]);
 
   useEffect(() => {
     dispatch(getAdmissions({ admissionrange: period }));
-  }, [period]);
+  }, [period, dispatch]);
 
   const { total, success, status, admissionTypeStatus, data, csvData } =
     useAdmByAdmTypeData();

src/components/accessories/dashboard/admissions/admissionByWards/AdmissionByWards.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -25,13 +25,12 @@ export const AdmissionsByWards: FC<TDashboardComponentProps & IOwnProps> = ({
   const cardRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    //dispatch(getAdmissions({ admissionrange: period }));
     dispatch(getWards());
   }, [dispatch]);
 
   useEffect(() => {
     dispatch(getAdmissions({ admissionrange: period }));
-  }, [period]);
+  }, [period, dispatch]);
 
   const { total, success, status, wardStatus, data, csvData } =
     useAdmByAdmWardData();

src/components/accessories/dashboard/discharges/Discharges.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -38,11 +38,11 @@ export const Discharges: FC<IOwnProps> = ({ period }) => {
     dispatch(getAgeTypes());
     dispatch(getDischargeTypes());
     dispatch(getWards());
-  }, [dispatch]);
+  }, [dispatch, period]);
 
   useEffect(() => {
     dispatch(getDischarges({ dischargerange: period }));
-  }, [period]);
+  }, [period, dispatch]);
 
   return (
     <>

src/components/accessories/dashboard/discharges/dischargesByAgeTypes/DischargesByAgeTypes.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";

src/components/accessories/dashboard/discharges/dischargesBySex/DischargesBySex.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";

src/components/accessories/dashboard/discharges/dischargesByTypes/DischargesByTypes.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";

src/components/accessories/dashboard/discharges/dischargesByWards/DischargesByWards.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -26,11 +26,11 @@ export const DischargesByWards: FC<TDashboardComponentProps & IOwnProps> = ({
   useEffect(() => {
     dispatch(getDischarges({ dischargerange: period }));
     dispatch(getWards());
-  }, [dispatch]);
+  }, [dispatch, period]);
 
   useEffect(() => {
     dispatch(getDischarges({ dischargerange: period }));
-  }, [period]);
+  }, [period, dispatch]);
 
   const { total, success, status, wardStatus, data, csvData } =
     useDisByWardData();

src/components/accessories/dashboard/opds/Opds.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -23,15 +23,8 @@ export const Opds: FC<IOwnProps> = ({ period }) => {
     );
     dispatch(getAgeTypes());
   }, [dispatch, period]);
-  const {
-    ageTypeStatus,
-    opdStatus,
-    dataByAgeType,
-    dataBySex,
-    success,
-    total,
-    opds,
-  } = useData();
+  const { ageTypeStatus, opdStatus, dataByAgeType, dataBySex, success, total } =
+    useData();
 
   return (
     <>

src/components/accessories/dashboard/opds/opdByAgeTypes/OpdByAgeTypes.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";

src/components/accessories/dashboard/opds/opdsBySex/OpdBySex.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";

src/state/layouts/slice.ts

@@ -1,14 +1,14 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-import { initial } from "./initial";
-import * as thunks from "./thunk";
-import { ApiResponse } from "state/types";
 import { isEmpty } from "lodash";
 import { Layouts } from "react-grid-layout";
+import { ApiResponse } from "state/types";
 import {
   decodeLayoutConfig,
   encodeLayout,
   toolboxDashboards,
 } from "../../components/accessories/dashboard/layouts/consts";
+import { initial } from "./initial";
+import * as thunks from "./thunk";
 
 export const layoutSlice = createSlice({
   name: "layouts",
@@ -72,6 +72,9 @@ export const layoutSlice = createSlice({
           ...payload,
           configValue: encodeLayout({ layout, toolbox }),
         };
+
+        state.layouts = layout;
+        state.toolbox = toolbox;
       })
       .addCase(thunks.getLayouts.rejected, (state, action) => {
         state.getLayouts = ApiResponse.error(action.payload);