From 73203a5234f60d04b41c3c1cebe99641047eb370 Mon Sep 17 00:00:00 2001
From: Akalintha007 <93814531+Akalintha007@users.noreply.github.com>
Date: Tue, 27 Sep 2022 10:45:04 +0530
Subject: [PATCH] added filter functionality and integratedn get patients api

---
 package.json                                  |  11 +-
 src/HospitalRun.tsx                           |  64 ++---
 src/imagings/requests/NewImagingRequest.tsx   |   2 +-
 src/incidents/report/ReportIncident.tsx       |   2 +-
 src/incidents/view/ViewIncident.tsx           |   2 +-
 src/labs/ViewLab.tsx                          |   4 +-
 src/labs/requests/NewLabRequest.tsx           |   2 +-
 src/medications/ViewMedication.tsx            |   2 +-
 src/patients/ContactInfo.tsx                  |   7 +-
 src/patients/allergies/NewAllergyModal.tsx    |   2 +-
 src/patients/allergies/ViewAllergy.tsx        |   2 +-
 src/patients/care-goals/AddCareGoalModal.tsx  |   2 +-
 src/patients/care-goals/CareGoalTab.tsx       |   2 +-
 src/patients/care-goals/ViewCareGoal.tsx      |   2 +-
 src/patients/care-goals/ViewCareGoals.tsx     |   2 +-
 src/patients/care-plans/AddCarePlanModal.tsx  |   2 +-
 src/patients/care-plans/CarePlanTab.tsx       |   2 +-
 src/patients/care-plans/ViewCarePlan.tsx      |   2 +-
 src/patients/care-plans/ViewCarePlans.tsx     |   2 +-
 src/patients/diagnoses/AddDiagnosisModal.tsx  |   2 +-
 src/patients/diagnoses/Diagnoses.tsx          |   2 +-
 src/patients/diagnoses/ViewDiagnoses.tsx      |   2 +-
 src/patients/diagnoses/ViewDiagnosis.tsx      |   2 +-
 src/patients/edit/EditPatient.tsx             |   2 +-
 src/patients/hooks/usePatients.tsx            |   9 +
 src/patients/notes/NewNoteModal.tsx           |   2 +-
 src/patients/notes/ViewNote.tsx               |   2 +-
 src/patients/patient-slice.ts                 |   2 +-
 .../related-persons/AddRelatedPersonModal.tsx |   2 +-
 src/patients/search/SearchPatients.tsx        | 161 ++++++++++--
 src/patients/search/ViewPatients.tsx          |   2 +-
 src/patients/search/ViewPatientsTable.tsx     |  12 +-
 .../search/filter/FormControlLabelCustom.tsx  |  57 +++++
 src/patients/search/filter/PatientFilter.tsx  | 237 ++++++++++++++++++
 src/patients/search/filter/theme.tsx          |  14 ++
 src/patients/util/constants.ts                |  18 ++
 src/patients/view/ViewPatient.tsx             |   2 +-
 src/patients/visits/AddVisitModal.tsx         |   2 +-
 src/patients/visits/ViewVisit.tsx             |   2 +-
 .../appointments/edit/EditAppointment.tsx     |   2 +-
 .../util/scheduling-appointment.util.ts       |   4 +-
 .../appointments/view/ViewAppointment.tsx     |   2 +-
 src/shared/components/Sidebar.tsx             |   1 +
 src/shared/util/DataHelpers.tsx               |   2 +-
 src/user/user-slice.ts                        |   2 +-
 45 files changed, 574 insertions(+), 89 deletions(-)
 create mode 100644 src/patients/search/filter/FormControlLabelCustom.tsx
 create mode 100644 src/patients/search/filter/PatientFilter.tsx
 create mode 100644 src/patients/search/filter/theme.tsx
 create mode 100644 src/patients/util/constants.ts

diff --git a/package.json b/package.json
index 739ab3dbc4..9ec3ae7522 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,11 @@
   "private": false,
   "license": "MIT",
   "dependencies": {
+    "@emotion/react": "~11.10.4",
+    "@emotion/styled": "~11.10.4",
     "@hospitalrun/components": "~3.4.0",
+    "@mui/icons-material": "~5.10.6",
+    "@mui/material": "~5.10.6",
     "@reduxjs/toolkit": "~1.7.0",
     "@types/escape-string-regexp": "~2.0.1",
     "@types/json2csv": "~5.0.1",
@@ -39,7 +43,8 @@
     "redux-thunk": "~2.4.0",
     "relational-pouch": "~4.0.0",
     "shortid": "^2.2.15",
-    "typescript": "~3.8.3",
+    "tslib": "~2.4.0",
+    "typescript": "~4.8.3",
     "uuid": "^8.0.0",
     "validator": "^13.0.0"
   },
@@ -75,7 +80,7 @@
     "@types/react": "~17.0.0",
     "@types/react-dom": "~17.0.0",
     "@types/react-redux": "~7.1.5",
-    "@types/react-router": "~5.1.2",
+    "@types/react-router": "~5.1.19",
     "@types/react-router-dom": "~5.3.0",
     "@types/redux-mock-store": "~1.0.1",
     "@types/shortid": "^0.0.29",
@@ -116,7 +121,7 @@
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "commit": "npx git-cz",
-    "start": "npm run translation:check && react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "update": "npx npm-check -u",
     "prepublishOnly": "npm run build",
diff --git a/src/HospitalRun.tsx b/src/HospitalRun.tsx
index 4bd60bdd01..7433d82315 100644
--- a/src/HospitalRun.tsx
+++ b/src/HospitalRun.tsx
@@ -29,38 +29,40 @@ const HospitalRun = () => {
       <NetworkStatusMessage />
       <Navbar />
       <div className="container-fluid">
-        <div className="col-md-2">
-          <Sidebar />
+        <div>
+          <Sidebar/>
         </div>
-        <ButtonBarProvider>
-          <div className="row">
-            <main
-              role="main"
-              className={`${
-                sidebarCollapsed ? 'col-md-10 col-lg-11' : 'col-md-9 col-lg-10'
-              } ml-sm-auto px-4`}
-            >
-              <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
-                <h1 className="h2">{title}</h1>
-                <ButtonToolBar />
-              </div>
-              <Breadcrumbs />
-              <div>
-                <Switch>
-                  <Route exact path="/" component={Dashboard} />
-                  <Route path="/appointments" component={Appointments} />
-                  <Route path="/patients" component={Patients} />
-                  <Route path="/labs" component={Labs} />
-                  <Route path="/medications" component={Medications} />
-                  <Route path="/incidents" component={Incidents} />
-                  <Route path="/settings" component={Settings} />
-                  <Route path="/imaging" component={Imagings} />
-                </Switch>
-              </div>
-              <Toaster autoClose={5000} hideProgressBar draggable />
-            </main>
-          </div>
-        </ButtonBarProvider>
+        
+          <ButtonBarProvider>
+            <div>
+              <main
+                role="main"
+                className={`${
+                  sidebarCollapsed ? 'col-md-10 col-lg-11' : 'col-md-9 col-lg-10'
+                } ml-sm-auto px-4`}
+              >
+                <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+                  <h1 className="h2">{title}</h1>
+                  <ButtonToolBar />
+                </div>
+                <Breadcrumbs />
+                <div>
+                  <Switch>
+                    <Route exact path="/" component={Dashboard} />
+                    <Route path="/appointments" component={Appointments} />
+                    <Route path="/patients" component={Patients} />
+                    <Route path="/labs" component={Labs} />
+                    <Route path="/medications" component={Medications} />
+                    <Route path="/incidents" component={Incidents} />
+                    <Route path="/settings" component={Settings} />
+                    <Route path="/imaging" component={Imagings} />
+                  </Switch>
+                </div>
+                <Toaster autoClose={5000} hideProgressBar draggable />
+              </main>
+            </div>
+          </ButtonBarProvider>
+     
       </div>
     </div>
   )
diff --git a/src/imagings/requests/NewImagingRequest.tsx b/src/imagings/requests/NewImagingRequest.tsx
index f6afe5eeb5..60389519c5 100644
--- a/src/imagings/requests/NewImagingRequest.tsx
+++ b/src/imagings/requests/NewImagingRequest.tsx
@@ -111,7 +111,7 @@ const NewImagingRequest = () => {
     try {
       await mutate(newImagingRequest)
       history.push(`/imaging`)
-    } catch (e) {
+    } catch (e: any) {
       setError(e)
     }
   }
diff --git a/src/incidents/report/ReportIncident.tsx b/src/incidents/report/ReportIncident.tsx
index 62bee68cf8..cd808ed294 100644
--- a/src/incidents/report/ReportIncident.tsx
+++ b/src/incidents/report/ReportIncident.tsx
@@ -58,7 +58,7 @@ const ReportIncident = () => {
     try {
       const data = await mutate(incident as Incident)
       history.push(`/incidents/${data?.id}`)
-    } catch (e) {
+    } catch (e: any) {
       setError(e)
     }
   }
diff --git a/src/incidents/view/ViewIncident.tsx b/src/incidents/view/ViewIncident.tsx
index 7862f660c6..7d459e54cf 100644
--- a/src/incidents/view/ViewIncident.tsx
+++ b/src/incidents/view/ViewIncident.tsx
@@ -9,7 +9,7 @@ import { RootState } from '../../shared/store'
 import ViewIncidentDetails from './ViewIncidentDetails'
 
 const ViewIncident = () => {
-  const { id } = useParams()
+  const { id } = useParams<any>()
   const { permissions } = useSelector((root: RootState) => root.user)
   const { t } = useTranslator()
   const updateTitle = useUpdateTitle()
diff --git a/src/labs/ViewLab.tsx b/src/labs/ViewLab.tsx
index 95b38758da..4cded630b2 100644
--- a/src/labs/ViewLab.tsx
+++ b/src/labs/ViewLab.tsx
@@ -24,7 +24,7 @@ const getTitle = (patient: Patient | undefined, lab: Lab | undefined) =>
   patient && lab ? `${lab.type} for ${patient.fullName}(${lab.code})` : ''
 
 const ViewLab = () => {
-  const { id } = useParams()
+  const { id } = useParams<any>()
   const { t } = useTranslator()
   const history = useHistory()
   const { permissions } = useSelector((state: RootState) => state.user)
@@ -132,7 +132,7 @@ const ViewLab = () => {
         )
       }
       setError(undefined)
-    } catch (e) {
+    } catch (e: any) {
       setError(e)
     }
   }
diff --git a/src/labs/requests/NewLabRequest.tsx b/src/labs/requests/NewLabRequest.tsx
index 2e1c1b0e73..0056340203 100644
--- a/src/labs/requests/NewLabRequest.tsx
+++ b/src/labs/requests/NewLabRequest.tsx
@@ -118,7 +118,7 @@ const NewLabRequest = () => {
         }`,
       )
       setError(undefined)
-    } catch (e) {
+    } catch (e: any) {
       setError(e)
     }
   }
diff --git a/src/medications/ViewMedication.tsx b/src/medications/ViewMedication.tsx
index 3303aebea2..87c9bf8f9f 100644
--- a/src/medications/ViewMedication.tsx
+++ b/src/medications/ViewMedication.tsx
@@ -20,7 +20,7 @@ const getTitle = (patient: Patient | undefined, medication: Medication | undefin
   patient && medication ? `${medication.medication} for ${patient.fullName}` : ''
 
 const ViewMedication = () => {
-  const { id } = useParams()
+  const { id } = useParams<any>()
   const { t } = useTranslator()
   const history = useHistory()
   const dispatch = useDispatch()
diff --git a/src/patients/ContactInfo.tsx b/src/patients/ContactInfo.tsx
index 7b1ba4148e..0b7fd78cd5 100644
--- a/src/patients/ContactInfo.tsx
+++ b/src/patients/ContactInfo.tsx
@@ -38,8 +38,9 @@ const ContactInfo = (props: Props): ReactElement => {
   const header = (
     <Row className="header mb-2">
       <Column xs={12} sm={4}>
-        <span className="">{t('patient.contactInfoType.label')}</span>
-        <span className="d-sm-none"> &amp; {t(label)}</span>
+        {/* <span className="">{t('patient.contactInfoType.label')}</span>
+        <span className="d-sm-none"> &amp; {t(label)}</span> */}
+         <Label text={`${name} Type`} />
       </Column>
       <Column className="d-none d-sm-block" sm={8}>
         {t(label)}
@@ -81,7 +82,7 @@ const ContactInfo = (props: Props): ReactElement => {
       <Row key={entry.id}>
         <Column sm={4}>
           <div className="form-group" data-testid={`${name}Type${i}Select`}>
-            <Label text={`${name}Type${i}`} />
+            {/* <Label text={`${name}Type${i}`} /> */}
             <Select
               id={`${name}Type${i}Select`}
               options={typeOptions}
diff --git a/src/patients/allergies/NewAllergyModal.tsx b/src/patients/allergies/NewAllergyModal.tsx
index e47f6f96b8..c436eebc52 100644
--- a/src/patients/allergies/NewAllergyModal.tsx
+++ b/src/patients/allergies/NewAllergyModal.tsx
@@ -33,7 +33,7 @@ const NewAllergyModal = (props: NewAllergyModalProps) => {
     try {
       await mutate({ patientId, allergy })
       onCloseButtonClick()
-    } catch (e) {
+    } catch (e: any) {
       setAllergyError(e)
     }
   }
diff --git a/src/patients/allergies/ViewAllergy.tsx b/src/patients/allergies/ViewAllergy.tsx
index 0cafce09e8..fccfc5843a 100644
--- a/src/patients/allergies/ViewAllergy.tsx
+++ b/src/patients/allergies/ViewAllergy.tsx
@@ -8,7 +8,7 @@ import useAllergy from '../hooks/useAllergy'
 
 const ViewAllergy = () => {
   const { t } = useTranslator()
-  const { allergyId, id: patientId } = useParams()
+  const { allergyId, id: patientId } = useParams<any>()
   const { data, status } = useAllergy(patientId, allergyId)
 
   if (data === undefined || status === 'loading') {
diff --git a/src/patients/care-goals/AddCareGoalModal.tsx b/src/patients/care-goals/AddCareGoalModal.tsx
index fc122b6e6b..0199e7ba1a 100644
--- a/src/patients/care-goals/AddCareGoalModal.tsx
+++ b/src/patients/care-goals/AddCareGoalModal.tsx
@@ -48,7 +48,7 @@ const AddCareGoalModal = (props: Props) => {
     try {
       await mutate({ patientId: patient.id, careGoal })
       onClose()
-    } catch (e) {
+    } catch (e: any) {
       setCareGoalError(e)
     }
   }
diff --git a/src/patients/care-goals/CareGoalTab.tsx b/src/patients/care-goals/CareGoalTab.tsx
index 7d6816c1d2..6212a37887 100644
--- a/src/patients/care-goals/CareGoalTab.tsx
+++ b/src/patients/care-goals/CareGoalTab.tsx
@@ -13,7 +13,7 @@ import ViewCareGoal from './ViewCareGoal'
 import ViewCareGoals from './ViewCareGoals'
 
 const CareGoalTab = () => {
-  const { id: patientId } = useParams()
+  const { id: patientId } = useParams<any>()
   const { t } = useTranslator()
   const { permissions } = useSelector((state: RootState) => state.user)
   const { data, status } = usePatient(patientId)
diff --git a/src/patients/care-goals/ViewCareGoal.tsx b/src/patients/care-goals/ViewCareGoal.tsx
index 83573322b8..680d458a53 100644
--- a/src/patients/care-goals/ViewCareGoal.tsx
+++ b/src/patients/care-goals/ViewCareGoal.tsx
@@ -6,7 +6,7 @@ import useCareGoal from '../hooks/useCareGoal'
 import CareGoalForm from './CareGoalForm'
 
 const ViewCareGoal = () => {
-  const { careGoalId, id: patientId } = useParams()
+  const { careGoalId, id: patientId } = useParams<any>()
   const { data: careGoal, status } = useCareGoal(patientId, careGoalId)
 
   if (careGoal === undefined || status === 'loading') {
diff --git a/src/patients/care-goals/ViewCareGoals.tsx b/src/patients/care-goals/ViewCareGoals.tsx
index d0b41ae25c..5a42439616 100644
--- a/src/patients/care-goals/ViewCareGoals.tsx
+++ b/src/patients/care-goals/ViewCareGoals.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom'
 import CareGoalTable from './CareGoalTable'
 
 const ViewCareGoals = () => {
-  const { id } = useParams()
+  const { id } = useParams<any>()
 
   return <CareGoalTable patientId={id} />
 }
diff --git a/src/patients/care-plans/AddCarePlanModal.tsx b/src/patients/care-plans/AddCarePlanModal.tsx
index 2ccd88d0bf..f7a0c551f8 100644
--- a/src/patients/care-plans/AddCarePlanModal.tsx
+++ b/src/patients/care-plans/AddCarePlanModal.tsx
@@ -49,7 +49,7 @@ const AddCarePlanModal = (props: Props) => {
     try {
       await mutate({ patientId: patient.id, carePlan })
       onClose()
-    } catch (e) {
+    } catch (e: any) {
       setCarePlanError(e)
     }
   }
diff --git a/src/patients/care-plans/CarePlanTab.tsx b/src/patients/care-plans/CarePlanTab.tsx
index bf28f86351..bd30c29768 100644
--- a/src/patients/care-plans/CarePlanTab.tsx
+++ b/src/patients/care-plans/CarePlanTab.tsx
@@ -13,7 +13,7 @@ import ViewCarePlan from './ViewCarePlan'
 import ViewCarePlans from './ViewCarePlans'
 
 const CarePlanTab = () => {
-  const { id: patientId } = useParams()
+  const { id: patientId } = useParams<any>()
   const { t } = useTranslator()
   const { permissions } = useSelector((state: RootState) => state.user)
   const { data, status } = usePatient(patientId)
diff --git a/src/patients/care-plans/ViewCarePlan.tsx b/src/patients/care-plans/ViewCarePlan.tsx
index a44e54fcb9..f3ce5844df 100644
--- a/src/patients/care-plans/ViewCarePlan.tsx
+++ b/src/patients/care-plans/ViewCarePlan.tsx
@@ -7,7 +7,7 @@ import usePatient from '../hooks/usePatient'
 import CarePlanForm from './CarePlanForm'
 
 const ViewCarePlan = () => {
-  const { carePlanId, id: patientId } = useParams()
+  const { carePlanId, id: patientId } = useParams<any>()
   const { data: patient, status: patientStatus } = usePatient(patientId)
   const { data: carePlan, status: carePlanStatus } = useCarePlan(patientId, carePlanId)
 
diff --git a/src/patients/care-plans/ViewCarePlans.tsx b/src/patients/care-plans/ViewCarePlans.tsx
index fcc15542c3..a127dd80b6 100644
--- a/src/patients/care-plans/ViewCarePlans.tsx
+++ b/src/patients/care-plans/ViewCarePlans.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom'
 import CarePlanTable from './CarePlanTable'
 
 const ViewCarePlans = () => {
-  const { id } = useParams()
+  const { id } = useParams<any>()
 
   return <CarePlanTable patientId={id} />
 }
diff --git a/src/patients/diagnoses/AddDiagnosisModal.tsx b/src/patients/diagnoses/AddDiagnosisModal.tsx
index 3d99e9246a..fa0e64e5ac 100644
--- a/src/patients/diagnoses/AddDiagnosisModal.tsx
+++ b/src/patients/diagnoses/AddDiagnosisModal.tsx
@@ -42,7 +42,7 @@ const AddDiagnosisModal = (props: NewDiagnosisModalProps) => {
     try {
       await mutate({ diagnosis, patientId: patient.id })
       onCloseButtonClick()
-    } catch (e) {
+    } catch (e: any) {
       setDiagnosisError(e)
     }
   }
diff --git a/src/patients/diagnoses/Diagnoses.tsx b/src/patients/diagnoses/Diagnoses.tsx
index a7b099ee4b..5862800660 100644
--- a/src/patients/diagnoses/Diagnoses.tsx
+++ b/src/patients/diagnoses/Diagnoses.tsx
@@ -14,7 +14,7 @@ import ViewDiagnoses from './ViewDiagnoses'
 import ViewDiagnosis from './ViewDiagnosis'
 
 const Diagnoses = () => {
-  const { id: patientId } = useParams()
+  const { id: patientId } = useParams<any>()
   const { t } = useTranslator()
   const { permissions } = useSelector((state: RootState) => state.user)
   const { data, status } = usePatient(patientId)
diff --git a/src/patients/diagnoses/ViewDiagnoses.tsx b/src/patients/diagnoses/ViewDiagnoses.tsx
index 8885edcd38..212f351319 100644
--- a/src/patients/diagnoses/ViewDiagnoses.tsx
+++ b/src/patients/diagnoses/ViewDiagnoses.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom'
 import DiagnosisTable from './DiagnosisTable'
 
 const ViewDiagnoses = () => {
-  const { id: patientId } = useParams()
+  const { id: patientId } = useParams<any>()
 
   return <DiagnosisTable patientId={patientId} />
 }
diff --git a/src/patients/diagnoses/ViewDiagnosis.tsx b/src/patients/diagnoses/ViewDiagnosis.tsx
index 0d57edadb2..8a3c25ed66 100644
--- a/src/patients/diagnoses/ViewDiagnosis.tsx
+++ b/src/patients/diagnoses/ViewDiagnosis.tsx
@@ -7,7 +7,7 @@ import usePatient from '../hooks/usePatient'
 import DiagnosisForm from './DiagnosisForm'
 
 const ViewDiagnosis = () => {
-  const { diagnosisId, id: patientId } = useParams()
+  const { diagnosisId, id: patientId } = useParams<any>()
   const { data: patient, status: patientStatus } = usePatient(patientId)
   const { data: diagnosis, status: diagnosisStatus } = useDiagnosis(patientId, diagnosisId)
 
diff --git a/src/patients/edit/EditPatient.tsx b/src/patients/edit/EditPatient.tsx
index b0f9ad53fc..16b1999560 100644
--- a/src/patients/edit/EditPatient.tsx
+++ b/src/patients/edit/EditPatient.tsx
@@ -17,7 +17,7 @@ const EditPatient = () => {
   const { t } = useTranslator()
   const history = useHistory()
   const dispatch = useDispatch()
-  const { id } = useParams()
+  const { id } = useParams<any>()
 
   const { data: givenPatient, status } = usePatient(id)
   const [patient, setPatient] = useState({} as Patient)
diff --git a/src/patients/hooks/usePatients.tsx b/src/patients/hooks/usePatients.tsx
index 64f42804f0..d4be735a2c 100644
--- a/src/patients/hooks/usePatients.tsx
+++ b/src/patients/hooks/usePatients.tsx
@@ -15,6 +15,15 @@ async function fetchPatients(_: any, searchRequest: PatientSearchRequest): Promi
   return { totalCount, patients }
 }
 
+// async function filterPatients(
+//   _: any,
+//   searchRequest: PatientSearchRequest,
+// ): Promise<PatientsResult> {
+//   const patients = await PatientRepository.search(searchRequest.queryString)
+//   const totalCount = await PatientRepository.count()
+//   return { totalCount, patients }
+// }
+
 export default function usePatients(searchRequest: PatientSearchRequest) {
   return useQuery(['patients', searchRequest], fetchPatients)
 }
diff --git a/src/patients/notes/NewNoteModal.tsx b/src/patients/notes/NewNoteModal.tsx
index 6074f6cd86..d3a2d6f230 100644
--- a/src/patients/notes/NewNoteModal.tsx
+++ b/src/patients/notes/NewNoteModal.tsx
@@ -35,7 +35,7 @@ const NewNoteModal = (props: Props) => {
       await mutate({ patientId, note })
       setNote(initialNoteState)
       onCloseButtonClick()
-    } catch (e) {
+    } catch (e: any) {
       setNoteError(e)
     }
   }
diff --git a/src/patients/notes/ViewNote.tsx b/src/patients/notes/ViewNote.tsx
index 5aef2b0117..510791040b 100644
--- a/src/patients/notes/ViewNote.tsx
+++ b/src/patients/notes/ViewNote.tsx
@@ -8,7 +8,7 @@ import usePatientNote from '../hooks/usePatientNote'
 
 const ViewNote = () => {
   const { t } = useTranslator()
-  const { noteId, id: patientId } = useParams()
+  const { noteId, id: patientId } = useParams<any>()
   const { data, status } = usePatientNote(patientId, noteId)
 
   if (data === undefined || status === 'loading') {
diff --git a/src/patients/patient-slice.ts b/src/patients/patient-slice.ts
index 0524556172..f3af06367a 100644
--- a/src/patients/patient-slice.ts
+++ b/src/patients/patient-slice.ts
@@ -188,7 +188,7 @@ export const addDiagnosis = (
   if (isEmpty(newDiagnosisError)) {
     const patient = await PatientRepository.find(patientId)
     const diagnoses = patient.diagnoses || []
-    diagnoses.push({ id: uuid(), ...diagnosis })
+    diagnoses.push({  ...diagnosis ,id: uuid()})
     patient.diagnoses = diagnoses
 
     await dispatch(updatePatient(patient, onSuccess))
diff --git a/src/patients/related-persons/AddRelatedPersonModal.tsx b/src/patients/related-persons/AddRelatedPersonModal.tsx
index 2de08a6e9c..840dafd021 100644
--- a/src/patients/related-persons/AddRelatedPersonModal.tsx
+++ b/src/patients/related-persons/AddRelatedPersonModal.tsx
@@ -64,7 +64,7 @@ const AddRelatedPersonModal = (props: Props) => {
     try {
       await mutate({ patientId, relatedPerson })
       onCloseButtonClick()
-    } catch (e) {
+    } catch (e: any) {
       setRelatedPersonError(e)
     }
   }
diff --git a/src/patients/search/SearchPatients.tsx b/src/patients/search/SearchPatients.tsx
index cfe75f129c..86f4b2bbb4 100644
--- a/src/patients/search/SearchPatients.tsx
+++ b/src/patients/search/SearchPatients.tsx
@@ -1,30 +1,163 @@
 import { Column, Container, Row } from '@hospitalrun/components'
-import React, { useCallback, useState } from 'react'
-
+import React, { useCallback, useEffect, useState } from 'react'
+import { Button } from '@hospitalrun/components'
 import PatientSearchRequest from '../models/PatientSearchRequest'
 import PatientSearchInput from './PatientSearchInput'
 import ViewPatientsTable from './ViewPatientsTable'
+import FilterMenu from './filter/PatientFilter'
+import { data } from './../util/constants'
+import PatientRepository from '../../shared/db/PatientRepository'
+import Patient from '../../shared/model/Patient'
+
+export interface ILabelsContext {
+  filterLabels: string[]
+  setFilterLabels: React.Dispatch<React.SetStateAction<string[]>>
+}
+export const LabelsContext = React.createContext<ILabelsContext>({
+  filterLabels: [],
+  setFilterLabels: () => {},
+})
 
 const SearchPatients = () => {
   const [searchRequest, setSearchRequest] = useState<PatientSearchRequest>({ queryString: '' })
+  const [filterMenuState, setFilterMenuState] = useState(false)
+  const [filterLabels, setFilterLabels] = useState<string[]>([])
+  const filterLabelsValue = { filterLabels, setFilterLabels }
+  const [filteredPatientData, setFilteredPatientData] = useState<Patient[]>([])
+  const [filterValues, setFilterValues] = useState<Array<String>>([])
+  const [clearFilterS, setClearFilterS]= useState(false)
+  const [trigger, setTrigger]= useState<boolean>(false)
+ 
+
+  
 
   const onSearchRequestChange = useCallback((newSearchRequest: PatientSearchRequest) => {
     setSearchRequest(newSearchRequest)
   }, [])
 
+  const openFilterMenu = () => {
+    setFilterMenuState(true)
+  }
+
+  const handleClose = () => {
+    setFilterMenuState(!filterMenuState)
+  }
+  const clearFilter = () => {
+    setFilteredPatientData([])
+    setClearFilterS(false)
+    setTrigger(true)
+  }
+const changeTrigger = (param:boolean) =>{
+  setTrigger(param)
+}
+
+
+
+ 
+  let allFilterData: any = []
+  useEffect(() => {
+   
+  }, [allFilterData]);
+
+  function getAge(dateString:string) {   
+    var today = new Date();
+    var birthDate = new Date(dateString);
+    var age = today.getFullYear() - birthDate.getFullYear();
+    return age;
+}
+
+  const filterAllPatientData1 = async (param:any) => {
+    console.log('paramValues: ',param,param.length)
+    if (param?.length > 0) {
+     
+      let tempData = await PatientRepository.findAll()
+      param.map((data:String)=>{
+        tempData.map((data2)=>{
+          if(data === data2.sex){
+            allFilterData.push(data2)
+            console.log('newdata: ', allFilterData)
+          }
+          else{
+            let age=getAge(data2.dateOfBirth)
+            if(data === '0 - 20 yrs' && age<=20 && !allFilterData.includes(data2)){
+              allFilterData.push(data2)
+            }
+            if(data === '21 - 40 yrs' && age>20 && age<=40 && !allFilterData.includes(data2)){
+              allFilterData.push(data2)
+            }
+            if(data === '41 - 60 yrs' && age>40 && age<=60 && !allFilterData.includes(data2)){
+              allFilterData.push(data2)
+            }
+            if(data === '61 + yrs' && age>60 && !allFilterData.includes(data2)){
+              allFilterData.push(data2)
+            }
+          }
+         
+        })
+      })
+      console.log('allFilterData: ',allFilterData)        
+      setFilteredPatientData(allFilterData)
+      console.log('filteredPatientData',filteredPatientData)
+    }
+  }
+
   return (
-    <div>
-      <Container>
-        <Row>
-          <Column md={12}>
-            <PatientSearchInput onChange={onSearchRequestChange} />
-          </Column>
-        </Row>
-        <Row>
-          <ViewPatientsTable searchRequest={searchRequest} />
-        </Row>
-      </Container>
-    </div>
+    <LabelsContext.Provider value={filterLabelsValue}>
+      <div>
+        <Container>
+          <FilterMenu
+            filterMenuState={filterMenuState}
+            handleClose={handleClose}
+            data={data}
+            handleFilters={(param) => {
+              console.log('param: ', param)
+              setFilterValues(param)
+              console.log('insidefilterValues: ', filterValues)
+              filterAllPatientData1(param)
+              setClearFilterS(true)
+            }}
+            handleApply={() => {}}
+            clearFilters={changeTrigger}
+            trigger={trigger}
+            
+          />
+          <Row>
+            <Column md={12}>
+              <Row>
+                <Column md={8} style={{ paddingLeft: '0px' }}>
+                  <PatientSearchInput data-testid={'searcinput'} onChange={onSearchRequestChange} />
+                </Column>
+                <Column md={2} style={{ display: 'flex', justifyContent: 'end', padding: '0px' }}>
+                  <Button
+                    style={{ width: '7vw', height: '2.97rem' }}
+                    key="filterButton"
+                    outlined
+                    color="success"
+                    onClick={openFilterMenu}
+                  >
+                    Filter
+                  </Button>
+                </Column>
+                <Column md={2} style={{ display: 'flex', justifyContent: 'end', padding: '0px' }}>
+                  <Button
+                    style={{ width: '7vw', height: '2.97rem' }}
+                    key="filterButton"
+                    outlined
+                    color="success"
+                    onClick={clearFilter}
+                  >
+                    Clear Filter
+                  </Button>
+                </Column>
+              </Row>
+            </Column>
+          </Row>
+          <Row>
+            <ViewPatientsTable searchRequest={searchRequest} filtered={clearFilterS} patientData={clearFilterS ? filteredPatientData : []} />
+          </Row>
+        </Container>
+      </div>
+    </LabelsContext.Provider>
   )
 }
 
diff --git a/src/patients/search/ViewPatients.tsx b/src/patients/search/ViewPatients.tsx
index d659a0339b..d9dc221616 100644
--- a/src/patients/search/ViewPatients.tsx
+++ b/src/patients/search/ViewPatients.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@hospitalrun/components'
 import React, { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
-import { useHistory } from 'react-router'
+import { useHistory } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useButtonToolbarSetter } from '../../page-header/button-toolbar/ButtonBarProvider'
diff --git a/src/patients/search/ViewPatientsTable.tsx b/src/patients/search/ViewPatientsTable.tsx
index 8e047d445f..d36f7520f8 100644
--- a/src/patients/search/ViewPatientsTable.tsx
+++ b/src/patients/search/ViewPatientsTable.tsx
@@ -1,9 +1,11 @@
 import { Table } from '@hospitalrun/components'
 import React from 'react'
-import { useHistory } from 'react-router'
+//import { AnyIfEmpty } from 'react-redux'
+import { useHistory } from 'react-router-dom'
 
 import Loading from '../../shared/components/Loading'
 import useTranslator from '../../shared/hooks/useTranslator'
+import Patient from '../../shared/model/Patient'
 import { formatDate } from '../../shared/util/formatDate'
 import usePatients from '../hooks/usePatients'
 import PatientSearchRequest from '../models/PatientSearchRequest'
@@ -11,6 +13,8 @@ import NoPatientsExist from './NoPatientsExist'
 
 interface Props {
   searchRequest: PatientSearchRequest
+  filtered:Boolean
+  patientData:Patient[]
 }
 
 const ViewPatientsTable = (props: Props) => {
@@ -28,8 +32,10 @@ const ViewPatientsTable = (props: Props) => {
   }
 
   return (
+    <>
     <Table
-      data={data.patients}
+    
+      data={props.filtered ? props.patientData : data.patients}
       getID={(row) => row.id}
       columns={[
         { label: t('patient.code'), key: 'code' },
@@ -45,6 +51,8 @@ const ViewPatientsTable = (props: Props) => {
       actionsHeaderText={t('actions.label')}
       actions={[{ label: t('actions.view'), action: (row) => history.push(`/patients/${row.id}`) }]}
     />
+    {console.log('patientdata: ',props.patientData)}
+    </>
   )
 }
 
diff --git a/src/patients/search/filter/FormControlLabelCustom.tsx b/src/patients/search/filter/FormControlLabelCustom.tsx
new file mode 100644
index 0000000000..5bb801f66c
--- /dev/null
+++ b/src/patients/search/filter/FormControlLabelCustom.tsx
@@ -0,0 +1,57 @@
+
+ import { Checkbox, FormControlLabel, styled, ThemeProvider } from '@mui/material';
+import React from 'react';
+import theme from './theme';
+
+ 
+ interface CheckBoxProps {
+   label: string | undefined;
+   onLabelChange?: (event: React.ChangeEvent<HTMLInputElement>, labelChecked: boolean) => void;
+   labelChecked?: boolean;
+   disabled?: boolean;
+   name?: string;
+ }
+ 
+ const StyledFormControlLabel = styled(FormControlLabel)(() => ({
+   '& .MuiFormControlLabel-label': {
+     fontWeight: '500',
+     
+   },
+ }));
+ 
+ const StyledCheckbox = styled(Checkbox)({
+   '&:hover': {
+     backgroundColor: 'transparent',
+   },
+   '& .MuiSvgIcon-root': {
+     width: '1rem',
+     height: '1rem',
+     borderRadius: '0.3rem',
+   },
+ });
+ 
+ const CheckBoxComponent = (props: CheckBoxProps) => {
+   const { label, onLabelChange, disabled, labelChecked, name } = props;
+ 
+   return (
+    <ThemeProvider theme={theme}>
+     <StyledFormControlLabel
+       control={
+         <StyledCheckbox  
+          color='primary'        
+           onChange={onLabelChange}
+           value={label}
+           name={name}
+           checked={labelChecked}
+           disabled={disabled}
+           {...props}
+         />
+       }
+       label={label}
+     />
+     </ThemeProvider>
+   );
+ };
+ 
+ export default CheckBoxComponent;
+ 
\ No newline at end of file
diff --git a/src/patients/search/filter/PatientFilter.tsx b/src/patients/search/filter/PatientFilter.tsx
new file mode 100644
index 0000000000..6a6923cb39
--- /dev/null
+++ b/src/patients/search/filter/PatientFilter.tsx
@@ -0,0 +1,237 @@
+import { Dialog, Grid, Paper, Typography, styled, IconButton } from '@mui/material'
+import React, { useContext, useEffect, useState } from 'react'
+import CloseIcon from '@mui/icons-material/Close'
+import { Button } from '@hospitalrun/components'
+import CheckBoxComponent from './FormControlLabelCustom'
+import { LabelsContext } from '../SearchPatients'
+
+interface FilterMenuProps {
+  data: Data[]
+  filterMenuState: boolean
+  handleClose: () => void
+  handleFilters: (param: any) => void
+  handleApply: () => void
+  clearFilters: (param: boolean) => void
+  trigger: boolean
+}
+
+interface Data {
+  id: string
+  name: string
+  inputs: string[]
+}
+
+const ButtonGrid = styled(Grid)({
+  paddingRight: '16px',
+})
+
+const MenuContainer = styled(Grid)({
+  display: 'flex',
+  justifyContent: 'end',
+  paddingTop: '39px',
+})
+
+const MainContainer = styled(Grid)({
+  maxWidth: '546px',
+  maxHeight: '464px',
+})
+
+const CloseIconContainer = styled(Grid)({
+  justifyContent: 'end',
+})
+
+const StyledPaper = styled(Paper)({
+  paddingRight: '25px',
+  paddingLeft: '50px',
+  paddingTop: '31px',
+  paddingBottom: '32px',
+})
+
+const CloseButton = styled(IconButton)({
+  marginTop: '-24px',
+  marginRight: '-17px',
+})
+
+const renderCheckbox = (
+  index: number,
+  checkboxInputs: string[],
+  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void,
+  checked: Object,
+) => {
+  let checkedArray = Object.values(checked)
+  let checkedKeys = Object.keys(checked)
+  index--
+  return checkboxInputs.map((input) => {
+    index++
+    return (
+      <Grid item>
+        <CheckBoxComponent
+          label={input}
+          labelChecked={checkedArray[index]}
+          name={checkedKeys[index]}
+          onLabelChange={handleChange}
+          aria-hidden="true"
+        />
+      </Grid>
+    )
+  })
+}
+
+const renderCheckboxSecond = (
+  index: number,
+  checkboxInputs: string[],
+  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void,
+  checked: Object,
+) => {
+  let checkedArray = Object.values(checked)
+  let checkedKeys = Object.keys(checked)
+  index--
+  return checkboxInputs.map((input) => {
+    index++
+    return (
+      <Grid item xs={4}>
+        <CheckBoxComponent
+          label={input}
+          labelChecked={checkedArray[index]}
+          name={checkedKeys[index]}
+          onLabelChange={handleChange}
+          aria-hidden="true"
+        />
+      </Grid>
+    )
+  })
+}
+
+const renderSet = (
+  data: Data[],
+  checked: Object,
+  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void,
+) => {
+  let index = -4
+  return data.map((entry) => {
+    index += entry.inputs.length
+    return (
+      <Grid item xs={5}>
+        <Grid container>
+          <Grid item xs={12}>
+            <Typography variant="h5" children={entry.name} />
+          </Grid>
+
+          <Grid item>
+            {entry.name === 'Blood Group'
+              ? renderCheckboxSecond(index, entry.inputs, handleChange, checked)
+              : renderCheckbox(index, entry.inputs, handleChange, checked)}
+          </Grid>
+        </Grid>
+      </Grid>
+    )
+  })
+}
+
+const FilterMenu: React.FC<FilterMenuProps> = ({
+  filterMenuState,
+  handleClose,
+  data,
+  handleFilters,
+  handleApply,
+  clearFilters,
+  trigger,
+}) => {
+  const [checked, setChecked] = useState({
+    gMale: false,
+    gFemale: false,
+    gOther: false,
+    gUnknown: false,
+    ageZeroTwenty: false,
+    ageTwentyForty: false,
+    ageFortySixty: false,
+    ageSixtyPlus: false,
+  })
+  const [filters, setFilters] = useState<Array<string>>([])
+  let filterContext = useContext(LabelsContext)
+
+  useEffect(() => {}, [filters])
+
+  useEffect(() => {
+    if(trigger){
+      clearAll()
+    }
+  }, [trigger])
+
+  const clearAll = () => {
+    filters.splice(0, filters.length)
+    setChecked({
+      gMale: false,
+      gFemale: false,
+      gOther: false,
+      gUnknown: false,
+      ageZeroTwenty: false,
+      ageTwentyForty: false,
+      ageFortySixty: false,
+      ageSixtyPlus: false,
+    })
+    setFilters([...filters])
+    clearFilters(true)
+  }
+
+  const applyFilter = () => {
+    filterContext.setFilterLabels([...filters])
+    handleFilters(filters)
+    handleApply()
+    clearFilters(false)
+    handleClose()
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!filters.includes(event.target.value)) {
+      filters.push(event.target.value)
+    }
+    console.log('event: ', event.target.value)
+    setFilters([...filters])
+    setChecked({
+      ...checked,
+      [event.target.name]: event.target.checked,
+    })
+    console.log('filters: ', filters)
+  }
+
+  return (
+    <Dialog
+      open={filterMenuState}
+      onClose={handleClose}
+      PaperComponent={StyledPaper}
+      aria-hidden="true"
+    >
+      <CloseIconContainer container>
+        <CloseButton aria-label="delete" onClick={handleClose}>
+          <CloseIcon />
+        </CloseButton>
+      </CloseIconContainer>
+      <MainContainer container rowSpacing={5} columnSpacing={6}>
+        {renderSet(data, checked, handleChange)}
+      </MainContainer>
+      <MenuContainer container direction="row">
+        <ButtonGrid item>
+          <Button
+            style={{ width: '10rem', height: '2.97rem' }}
+            outlined
+            color="success"
+            onClick={clearAll}
+          >
+            Clear All
+          </Button>
+        </ButtonGrid>
+        <Grid item>
+          <Button
+            style={{ width: '10rem', height: '2.97rem' }}
+            color="primary"
+            onClick={applyFilter}
+          >
+            Apply
+          </Button>
+        </Grid>
+      </MenuContainer>
+    </Dialog>
+  )
+}
+export default FilterMenu
diff --git a/src/patients/search/filter/theme.tsx b/src/patients/search/filter/theme.tsx
new file mode 100644
index 0000000000..7945919423
--- /dev/null
+++ b/src/patients/search/filter/theme.tsx
@@ -0,0 +1,14 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+
+  palette: {
+    primary: {
+      main: '#273647',
+     
+    },
+
+  },
+});
+
+export default theme;
\ No newline at end of file
diff --git a/src/patients/util/constants.ts b/src/patients/util/constants.ts
new file mode 100644
index 0000000000..066c72294f
--- /dev/null
+++ b/src/patients/util/constants.ts
@@ -0,0 +1,18 @@
+export const data = [
+  {
+    id: 'Gender',
+    name: 'Gender',
+    inputs: ['male', 'female', 'other', 'unknown'],
+  },
+  {
+    id: 'Age',
+    name: 'Age',
+    inputs: ['0 - 20 yrs', '21 - 40 yrs', '41 - 60 yrs', '61 + yrs'],
+  },
+  // {
+  //   id: 'BloodGroup',
+  //   name: 'Blood Group',
+  //   inputs: ['O+', 'AB+', 'A+', 'B+','O-', 'AB-', 'A-', 'B-'],
+  // },
+
+]
diff --git a/src/patients/view/ViewPatient.tsx b/src/patients/view/ViewPatient.tsx
index 29acd8d0c8..d00603a0e7 100644
--- a/src/patients/view/ViewPatient.tsx
+++ b/src/patients/view/ViewPatient.tsx
@@ -39,7 +39,7 @@ const ViewPatient = () => {
   const { path } = useRouteMatch()
   const setButtonToolBar = useButtonToolbarSetter()
 
-  const { id } = useParams()
+  const { id } = useParams<any>()
   const { permissions } = useSelector((state: RootState) => state.user)
   const { data: patient, status } = usePatient(id)
 
diff --git a/src/patients/visits/AddVisitModal.tsx b/src/patients/visits/AddVisitModal.tsx
index 441ee6f4f5..abd703f37b 100644
--- a/src/patients/visits/AddVisitModal.tsx
+++ b/src/patients/visits/AddVisitModal.tsx
@@ -46,7 +46,7 @@ const AddVisitModal = ({ show, onCloseButtonClick, patientId }: Props) => {
     try {
       await mutate({ patientId, visit })
       onClose()
-    } catch (e) {
+    } catch (e: any) {
       setError(e)
     }
   }
diff --git a/src/patients/visits/ViewVisit.tsx b/src/patients/visits/ViewVisit.tsx
index e332ffb08e..59978fcf9a 100644
--- a/src/patients/visits/ViewVisit.tsx
+++ b/src/patients/visits/ViewVisit.tsx
@@ -9,7 +9,7 @@ interface Props {
   patientId: string
 }
 const ViewVisit = ({ patientId }: Props) => {
-  const { visitId } = useParams()
+  const { visitId } = useParams<any>()
 
   const { data: visit, status } = useVisit(patientId, visitId)
 
diff --git a/src/scheduling/appointments/edit/EditAppointment.tsx b/src/scheduling/appointments/edit/EditAppointment.tsx
index 5a0b7e8fe3..0b2ba094b9 100644
--- a/src/scheduling/appointments/edit/EditAppointment.tsx
+++ b/src/scheduling/appointments/edit/EditAppointment.tsx
@@ -15,7 +15,7 @@ import { getAppointmentLabel } from '../util/scheduling-appointment.util'
 
 const EditAppointment = () => {
   const { t } = useTranslator()
-  const { id } = useParams()
+  const { id } = useParams<any>()
 
   const updateTitle = useUpdateTitle()
   useEffect(() => {
diff --git a/src/scheduling/appointments/util/scheduling-appointment.util.ts b/src/scheduling/appointments/util/scheduling-appointment.util.ts
index 78344cd4f9..ac049e500f 100644
--- a/src/scheduling/appointments/util/scheduling-appointment.util.ts
+++ b/src/scheduling/appointments/util/scheduling-appointment.util.ts
@@ -1,6 +1,6 @@
 import Appointment from '../../../shared/model/Appointment'
 
-const options = {
+const options : Intl.DateTimeFormatOptions= {
   year: 'numeric',
   month: '2-digit',
   day: '2-digit',
@@ -9,7 +9,7 @@ const options = {
 }
 
 function toLocaleString(date: Date) {
-  return date.toLocaleString([], options)
+  return date.toLocaleString([],options)
 }
 
 export function getAppointmentLabel(appointment: Appointment | undefined) {
diff --git a/src/scheduling/appointments/view/ViewAppointment.tsx b/src/scheduling/appointments/view/ViewAppointment.tsx
index df84cb2638..23b5518ecb 100644
--- a/src/scheduling/appointments/view/ViewAppointment.tsx
+++ b/src/scheduling/appointments/view/ViewAppointment.tsx
@@ -25,7 +25,7 @@ const ViewAppointment = () => {
     }
   }, [updateTitle, t])
 
-  const { id } = useParams()
+  const { id } = useParams<any>()
   const history = useHistory()
   const [deleteMutate] = useDeleteAppointment()
   const [showDeleteConfirmation, setShowDeleteConfirmation] = useState<boolean>(false)
diff --git a/src/shared/components/Sidebar.tsx b/src/shared/components/Sidebar.tsx
index 0ed2ca4aba..31ae8ce6d9 100644
--- a/src/shared/components/Sidebar.tsx
+++ b/src/shared/components/Sidebar.tsx
@@ -61,6 +61,7 @@ const Sidebar = () => {
   }
 
   const listSubItemStyle: CSSProperties = {
+    width:'16vw',
     cursor: 'pointer',
     fontSize: 'small',
     borderBottomWidth: 0,
diff --git a/src/shared/util/DataHelpers.tsx b/src/shared/util/DataHelpers.tsx
index c8797f3235..7714c9be61 100644
--- a/src/shared/util/DataHelpers.tsx
+++ b/src/shared/util/DataHelpers.tsx
@@ -1,6 +1,6 @@
 import { Parser } from 'json2csv'
 
-export function getCSV<T>(data: T[]): string {
+export function getCSV(data: object[]): string {
   const fields = Object.keys(data[0])
   const opts = { fields }
   const parser = new Parser(opts)
diff --git a/src/user/user-slice.ts b/src/user/user-slice.ts
index 58d04df231..63210dd820 100644
--- a/src/user/user-slice.ts
+++ b/src/user/user-slice.ts
@@ -113,7 +113,7 @@ export const login = (username: string, password: string): AppThunk => async (di
         permissions: initialState.permissions,
       }),
     )
-  } catch (error) {
+  } catch (error:any) {
     if (!username || !password) {
       dispatch(
         loginError({