From bc3d2ca73c2a1f54c4ec0c80b881a5e70d44a3a8 Mon Sep 17 00:00:00 2001
From: Ashutosh Rai <ashu00jnp@gmail.com>
Date: Fri, 23 Feb 2024 18:10:06 +0530
Subject: [PATCH 1/9] fixes responsive design in patient details

---
 src/Components/Common/RelativeDateUserMention.tsx | 2 +-
 src/Components/Patient/SampleTestCard.tsx         | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Components/Common/RelativeDateUserMention.tsx b/src/Components/Common/RelativeDateUserMention.tsx
index 6c5a78c7f09..2af92268987 100644
--- a/src/Components/Common/RelativeDateUserMention.tsx
+++ b/src/Components/Common/RelativeDateUserMention.tsx
@@ -9,7 +9,7 @@ function RelativeDateUserMention(props: {
   withoutSuffix?: boolean;
 }) {
   return (
-    <div className="flex flex-row flex-wrap items-center justify-center ">
+    <div className="flex flex-row flex-wrap items-center justify-start ">
       <div className="tooltip">
         <span
           className={`tooltip-text tooltip-${props.tooltipPosition || "top"}`}
diff --git a/src/Components/Patient/SampleTestCard.tsx b/src/Components/Patient/SampleTestCard.tsx
index f2cc928bf50..4122c03fce2 100644
--- a/src/Components/Patient/SampleTestCard.tsx
+++ b/src/Components/Patient/SampleTestCard.tsx
@@ -139,7 +139,7 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
           </div>
         </div>
       </div>
-      <div className="m-2 mt-4 flex flex-col justify-between gap-4 md:flex-row">
+      <div className="m-2 mt-4 flex flex-col justify-between md:flex-row lg:gap-4">
         <div className="flex flex-col justify-between gap-4 md:flex-row">
           <div>
             <div className="mb-2 text-sm text-gray-700">
@@ -157,7 +157,7 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
           </div>
         </div>
         <div className="flex flex-col gap-2">
-          <div className="flex flex-col items-center justify-end text-sm text-gray-700 md:flex-row">
+          <div className="flex flex-col flex-nowrap items-center justify-end text-sm text-gray-700 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-center">
             Created:{" "}
             <RelativeDateUserMention
               actionDate={itemData.created_date}
@@ -165,7 +165,7 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
               tooltipPosition="left"
             />
           </div>
-          <div className="flex flex-col items-center justify-end text-sm text-gray-700 md:flex-row">
+          <div className="flex flex-col items-center justify-end text-sm text-gray-700 md:flex-col md:items-start lg:flex-row lg:items-center">
             Last Modified:{" "}
             <RelativeDateUserMention
               actionDate={itemData.modified_date}

From f67a927441aa180054cd264a788f352936481171 Mon Sep 17 00:00:00 2001
From: Ashutosh Rai <ashu00jnp@gmail.com>
Date: Thu, 29 Feb 2024 02:29:29 +0530
Subject: [PATCH 2/9] fixes username validation

---
 src/Components/Facility/ConsultationCard.tsx  |  4 +-
 .../Facility/ConsultationDetails/index.tsx    |  2 +
 src/Components/Users/UserAdd.tsx              | 96 ++++++++++---------
 3 files changed, 54 insertions(+), 48 deletions(-)

diff --git a/src/Components/Facility/ConsultationCard.tsx b/src/Components/Facility/ConsultationCard.tsx
index 1c6ec77afde..c1f94735235 100644
--- a/src/Components/Facility/ConsultationCard.tsx
+++ b/src/Components/Facility/ConsultationCard.tsx
@@ -163,7 +163,9 @@ export const ConsultationCard = (props: ConsultationProps) => {
                 `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}/daily-rounds`
               )
             }
-            disabled={itemData.discharge_date}
+            disabled={
+              (itemData.discharge_date as string | undefined) !== undefined
+            }
             authorizeFor={NonReadOnlyUsers}
           >
             Add Consultation Updates
diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index 808a2c90de9..024f5df8d7d 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -127,6 +127,8 @@ export const ConsultationDetails = (props: any) => {
             );
           }
           setConsultationData(data);
+          console.log(consultationData);
+
           const assetRes = data?.current_bed?.bed_object?.id
             ? await dispatch(
                 listAssetBeds({
diff --git a/src/Components/Users/UserAdd.tsx b/src/Components/Users/UserAdd.tsx
index b4d9e9fbca6..595931f866e 100644
--- a/src/Components/Users/UserAdd.tsx
+++ b/src/Components/Users/UserAdd.tsx
@@ -141,9 +141,6 @@ const user_create_reducer = (state = initialState, action: any) => {
   }
 };
 
-const getDate = (value: any) =>
-  value && dayjs(value).isValid() && dayjs(value).toDate();
-
 export const validateRule = (
   condition: boolean,
   content: JSX.Element | string
@@ -164,6 +161,9 @@ export const validateRule = (
   );
 };
 
+const getDate = (value: any) =>
+  value && dayjs(value).isValid() && dayjs(value).toDate();
+
 export const UserAdd = (props: UserProps) => {
   const { goBack } = useAppHistory();
   const { userId } = props;
@@ -183,7 +183,7 @@ export const UserAdd = (props: UserProps) => {
   const [passwordInputInFocus, setPasswordInputInFocus] = useState(false);
   const [confirmPasswordInputInFocus, setConfirmPasswordInputInFocus] =
     useState(false);
-  const [usernameInput, setUsernameInput] = useState("");
+  const [usernameInput, setUsernameInput] = useState<string | any>(null);
 
   const userExistsEnums = {
     idle: 0,
@@ -326,7 +326,7 @@ export const UserAdd = (props: UserProps) => {
 
   const setFacility = (selected: FacilityModel | FacilityModel[] | null) => {
     setSelectedFacility(selected as FacilityModel[]);
-    const form = { ...state.form };
+    const form: any = { ...state.form };
     form.facilities = selected
       ? (selected as FacilityModel[]).map((i) => i.id ?? -1)
       : [];
@@ -619,7 +619,7 @@ export const UserAdd = (props: UserProps) => {
             }}
             formData={state.form}
           />
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2">
             <div className="md:col-span-2">
               <FieldLabel>Facilities</FieldLabel>
               <FacilitySelect
@@ -724,59 +724,61 @@ export const UserAdd = (props: UserProps) => {
               {usernameInputInFocus && (
                 <div className="text-small pl-2 text-gray-500">
                   <div>
-                    {usernameExists !== userExistsEnums.idle && (
-                      <>
-                        {usernameExists === userExistsEnums.checking ? (
-                          <span>
-                            <CareIcon
-                              icon="l-record-audio"
-                              className="text-xl"
-                            />{" "}
-                            checking...
-                          </span>
-                        ) : (
-                          <>
-                            {usernameExists === userExistsEnums.exists ? (
-                              <div>
-                                <CareIcon
-                                  icon="l-times-circle"
-                                  className="text-xl text-red-500"
-                                />{" "}
-                                <span className="text-red-500">
-                                  Username is not available
-                                </span>
-                              </div>
-                            ) : (
-                              <div>
-                                <CareIcon
-                                  icon="l-check-circle"
-                                  className="text-xl text-green-500"
-                                />{" "}
-                                <span className="text-primary-500">
-                                  Username is available
-                                </span>
-                              </div>
-                            )}
-                          </>
-                        )}
-                      </>
-                    )}
+                    {usernameInput &&
+                      usernameExists !== userExistsEnums.idle && (
+                        <>
+                          {usernameExists === userExistsEnums.checking ? (
+                            <span>
+                              <CareIcon
+                                icon="l-record-audio"
+                                className="text-xl"
+                              />{" "}
+                              checking...
+                            </span>
+                          ) : (
+                            <>
+                              {usernameExists === userExistsEnums.exists ? (
+                                <div>
+                                  <CareIcon
+                                    icon="l-times-circle"
+                                    className="text-xl text-red-500"
+                                  />{" "}
+                                  <span className="text-red-500">
+                                    Username is not available
+                                  </span>
+                                </div>
+                              ) : (
+                                <div>
+                                  <CareIcon
+                                    icon="l-check-circle"
+                                    className="text-xl text-green-500"
+                                  />{" "}
+                                  <span className="text-primary-500">
+                                    Username is available
+                                  </span>
+                                </div>
+                              )}
+                            </>
+                          )}
+                        </>
+                      )}
                   </div>
                   <div>
                     {validateRule(
-                      usernameInput.length >= 4 && usernameInput.length <= 16,
+                      usernameInput?.length >= 4 && usernameInput?.length <= 16,
                       "Username should be 4-16 characters long"
                     )}
                   </div>
                   <div>
                     {validateRule(
                       /^[a-z0-9._-]*$/.test(usernameInput),
-                      "Username can only contain lowercase letters, numbers, and . _ -"
+                      "Username can only contain lowercase letters, numbers, and . _ - "
                     )}
                   </div>
                   <div>
                     {validateRule(
-                      /^[a-z0-9].*[a-z0-9]$/i.test(usernameInput),
+                      usernameInput &&
+                        /^[a-zA-Z0-9].*[a-zA-Z0-9]$/.test(usernameInput),
                       "Username must start and end with a letter or number"
                     )}
                   </div>
@@ -930,7 +932,7 @@ export const UserAdd = (props: UserProps) => {
                 />
               ))}
           </div>
-          <div className="mt-4 flex flex-col justify-end gap-2 md:flex-row">
+          <div className="mt-4 flex flex-col  gap-2 sm:justify-end md:flex-row">
             <Cancel onClick={() => goBack()} />
             <Submit onClick={handleSubmit} label={buttonText} />
           </div>

From 6564585647b64c9c6df9e3873f552d1b28b7a874 Mon Sep 17 00:00:00 2001
From: Ashutosh Rai <ashu00jnp@gmail.com>
Date: Thu, 29 Feb 2024 15:58:52 +0530
Subject: [PATCH 3/9] fixes button resposive of user card

---
 src/Components/Common/components/Page.tsx |  2 +-
 src/Components/Users/ManageUsers.tsx      | 36 +++++++++++------------
 src/Routers/AppRouter.tsx                 |  2 +-
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/Components/Common/components/Page.tsx b/src/Components/Common/components/Page.tsx
index ce5e84deefe..031daa5aa44 100644
--- a/src/Components/Common/components/Page.tsx
+++ b/src/Components/Common/components/Page.tsx
@@ -32,7 +32,7 @@ export default function Page(props: PageProps) {
   if (!props.noImplicitPadding) {
     if (!props.hideBack || props.componentRight)
       padding = "md:px-6 px-3 py-3.5";
-    else padding = "px-6 py-5";
+    else padding = "md:px-6 md:py-5 sm:px-0";
   }
 
   return (
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index 1a39b57ec53..ac87b29f6ea 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -1,15 +1,15 @@
-import * as Notification from "../../Utils/Notifications.js";
 import { lazy, useState } from "react";
+import * as Notification from "../../Utils/Notifications.js";
 import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
 import ButtonV2, { Submit } from "../Common/components/ButtonV2";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import ConfirmHomeFacilityUpdateDialog from "./ConfirmHomeFacilityUpdateDialog";
 import CountBlock from "../../CAREUI/display/Count";
-import { FacilityModel } from "../Facility/models";
 import { FacilitySelect } from "../Common/FacilitySelect";
+import { FacilityModel } from "../Facility/models";
 import SearchInput from "../Form/SearchInput";
-import SkillsSlideOver from "./SkillsSlideOver";
 import SlideOverCustom from "../../CAREUI/interactive/SlideOver";
+import SkillsSlideOver from "./SkillsSlideOver";
 import { USER_TYPES } from "../../Common/constants";
 import UnlinkFacilityDialog from "./UnlinkFacilityDialog";
 import UserDeleteDialog from "./UserDeleteDialog";
@@ -141,6 +141,14 @@ export default function ManageUsers() {
     await refetchUserList();
   };
 
+  const handleDelete = (user: any) => {
+    setUserData({
+      show: true,
+      username: user.username,
+      name: `${user.first_name} ${user.last_name} `,
+    });
+  };
+
   const handleSubmit = async () => {
     const { res, error } = await request(routes.deleteUser, {
       pathParams: { username: userData.username },
@@ -159,14 +167,6 @@ export default function ManageUsers() {
     await refetchUserList();
   };
 
-  const handleDelete = (user: any) => {
-    setUserData({
-      show: true,
-      username: user.username,
-      name: `${user.first_name} ${user.last_name}`,
-    });
-  };
-
   let userList: any[] = [];
 
   userListData?.results &&
@@ -177,7 +177,7 @@ export default function ManageUsers() {
         <div
           key={`usr_${user.id}`}
           id={`usr_${idx}`}
-          className=" mt-6 w-full md:px-4 lg:w-1/2 xl:w-1/3"
+          className="mt-6 w-full md:px-4 lg:w-1/2 xl:w-1/3"
         >
           <div className="relative block h-full overflow-visible rounded-lg bg-white shadow hover:border-primary-500">
             <div className="flex h-full flex-col justify-between @container">
@@ -248,8 +248,8 @@ export default function ManageUsers() {
                 <div
                   className={`flex ${
                     isExtremeSmallScreen
-                      ? " flex-wrap "
-                      : " flex-col justify-between md:flex-row "
+                      ? "flex-wrap"
+                      : "flex-col justify-between md:flex-row"
                   } gap-2 md:grid md:grid-cols-2`}
                 >
                   {user.user_type && (
@@ -328,9 +328,7 @@ export default function ManageUsers() {
                 )}
                 <div
                   className={`${
-                    isExtremeSmallScreen
-                      ? "flex flex-wrap "
-                      : "grid grid-cols-2 "
+                    isExtremeSmallScreen ? "flex flex-wrap" : "grid grid-cols-2"
                   }`}
                 >
                   {user.created_by && (
@@ -369,7 +367,7 @@ export default function ManageUsers() {
                 </div>
               </div>
               {user.username && (
-                <div className="mb-0 mt-auto flex w-full flex-col justify-between gap-2 p-4">
+                <div className="mb-0 mt-auto flex w-full flex-col justify-between gap-2 p-2 md:p-4">
                   <div className="flex flex-col gap-2 @sm:flex-row">
                     <ButtonV2
                       id="facilities"
@@ -577,6 +575,7 @@ function UserFacilities(props: { user: any }) {
     previousFacility: undefined,
     newFacility: undefined,
   });
+
   const hideReplaceHomeFacilityModal = () => {
     setReplaceHomeFacility({
       show: false,
@@ -585,6 +584,7 @@ function UserFacilities(props: { user: any }) {
       newFacility: undefined,
     });
   };
+
   const hideUnlinkFacilityModal = () => {
     setUnlinkFacilityData({
       show: false,
diff --git a/src/Routers/AppRouter.tsx b/src/Routers/AppRouter.tsx
index 56d8b31573b..8d3048e464f 100644
--- a/src/Routers/AppRouter.tsx
+++ b/src/Routers/AppRouter.tsx
@@ -145,7 +145,7 @@ export default function AppRouter() {
             id="pages"
             className="flex-1 overflow-y-scroll pb-4 focus:outline-none md:py-0"
           >
-            <div className="max-w-8xl mx-auto p-3">{pages}</div>
+            <div className="max-w-8xl mx-auto sm:p-0 md:p-3">{pages}</div>
           </main>
         </div>
       </div>

From d19d06a4ae665f77052d95a31cac15a87c16d4cb Mon Sep 17 00:00:00 2001
From: Ashutosh Rai <ashu00jnp@gmail.com>
Date: Sun, 3 Mar 2024 01:16:09 +0530
Subject: [PATCH 4/9] fix in searching user type

---
 src/Components/Users/UserAdd.tsx | 50 ++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/Components/Users/UserAdd.tsx b/src/Components/Users/UserAdd.tsx
index 595931f866e..00a765181bb 100644
--- a/src/Components/Users/UserAdd.tsx
+++ b/src/Components/Users/UserAdd.tsx
@@ -41,6 +41,7 @@ import routes from "../../Redux/api";
 import request from "../../Utils/request/request";
 import useQuery from "../../Utils/request/useQuery";
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import AutocompleteFormField from "../Form/FormFields/Autocomplete";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -266,6 +267,17 @@ export const UserAdd = (props: UserProps) => {
     },
   });
 
+  const { loading: isStateLoading } = useQuery(routes.statesList, {
+    onResponse: (result) => {
+      if (!result || !result.res || !result.data) return;
+      if (userIndex <= USER_TYPES.indexOf("StateAdmin")) {
+        setStates([authUser.state_object!]);
+      } else {
+        setStates(result.data.results);
+      }
+    },
+  });
+
   const { loading: isLocalbodyLoading } = useQuery(
     routes.getAllLocalBodyByDistrict,
     {
@@ -282,17 +294,6 @@ export const UserAdd = (props: UserProps) => {
     }
   );
 
-  const { loading: isStateLoading } = useQuery(routes.statesList, {
-    onResponse: (result) => {
-      if (!result || !result.res || !result.data) return;
-      if (userIndex <= USER_TYPES.indexOf("StateAdmin")) {
-        setStates([authUser.state_object!]);
-      } else {
-        setStates(result.data.results);
-      }
-    },
-  });
-
   const handleDateChange = (e: FieldChangeEvent<Date>) => {
     if (dayjs(e.value).isValid()) {
       dispatch({
@@ -583,10 +584,6 @@ export const UserAdd = (props: UserProps) => {
     }
   };
 
-  if (isLoading) {
-    return <Loading />;
-  }
-
   const field = (name: string) => {
     return {
       id: name,
@@ -597,14 +594,18 @@ export const UserAdd = (props: UserProps) => {
     };
   };
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
     <Page
       title={headerText}
       options={
         <Link
-          href="https://school.coronasafe.network/targets/12953"
+          href="https://school.coronasafe.network/targets/12953 "
           className="inline-block rounded border border-gray-600 bg-gray-50 px-4 py-2 text-gray-600 transition hover:bg-gray-100"
-          target="_blank"
+          target="_blank "
         >
           <CareIcon icon="l-info-circle" className="text-lg" /> &nbsp;Need Help?
         </Link>
@@ -631,15 +632,26 @@ export const UserAdd = (props: UserProps) => {
                 showAll={false}
               />
             </div>
-            <SelectFormField
+
+            {/* <SelectFormField
               {...field("user_type")}
               required
               label="User Type"
               options={userTypes}
               optionLabel={(o) => o.role + (o.readOnly ? " (Read Only)" : "")}
               optionValue={(o) => o.id}
-            />
+            /> */}
 
+            <AutocompleteFormField
+              {...field("user_type")}
+              label="User Type"
+              placeholder="Search for a user type..."
+              // value={userTypes}
+              options={userTypes ?? []}
+              optionLabel={(o) => o.role + (o.readOnly ? " (Read Only)" : "")}
+              optionValue={(o) => o.id}
+              required
+            />
             {state.form.user_type === "Doctor" && (
               <>
                 <TextFormField

From 6e85db44a65cd6c4b1dface2fa8d4503c68abd66 Mon Sep 17 00:00:00 2001
From: Ashutosh Rai <ashu00jnp@gmail.com>
Date: Sun, 3 Mar 2024 23:31:56 +0530
Subject: [PATCH 5/9] Revert "fixes button resposive of user card"

This reverts commit 6564585647b64c9c6df9e3873f552d1b28b7a874.
---
 src/Components/Common/components/Page.tsx |  2 +-
 src/Components/Users/ManageUsers.tsx      | 36 +++++++++++------------
 src/Routers/AppRouter.tsx                 |  2 +-
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/Components/Common/components/Page.tsx b/src/Components/Common/components/Page.tsx
index 031daa5aa44..ce5e84deefe 100644
--- a/src/Components/Common/components/Page.tsx
+++ b/src/Components/Common/components/Page.tsx
@@ -32,7 +32,7 @@ export default function Page(props: PageProps) {
   if (!props.noImplicitPadding) {
     if (!props.hideBack || props.componentRight)
       padding = "md:px-6 px-3 py-3.5";
-    else padding = "md:px-6 md:py-5 sm:px-0";
+    else padding = "px-6 py-5";
   }
 
   return (
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index ac87b29f6ea..1a39b57ec53 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -1,15 +1,15 @@
-import { lazy, useState } from "react";
 import * as Notification from "../../Utils/Notifications.js";
+import { lazy, useState } from "react";
 import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
 import ButtonV2, { Submit } from "../Common/components/ButtonV2";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import ConfirmHomeFacilityUpdateDialog from "./ConfirmHomeFacilityUpdateDialog";
 import CountBlock from "../../CAREUI/display/Count";
-import { FacilitySelect } from "../Common/FacilitySelect";
 import { FacilityModel } from "../Facility/models";
+import { FacilitySelect } from "../Common/FacilitySelect";
 import SearchInput from "../Form/SearchInput";
-import SlideOverCustom from "../../CAREUI/interactive/SlideOver";
 import SkillsSlideOver from "./SkillsSlideOver";
+import SlideOverCustom from "../../CAREUI/interactive/SlideOver";
 import { USER_TYPES } from "../../Common/constants";
 import UnlinkFacilityDialog from "./UnlinkFacilityDialog";
 import UserDeleteDialog from "./UserDeleteDialog";
@@ -141,14 +141,6 @@ export default function ManageUsers() {
     await refetchUserList();
   };
 
-  const handleDelete = (user: any) => {
-    setUserData({
-      show: true,
-      username: user.username,
-      name: `${user.first_name} ${user.last_name} `,
-    });
-  };
-
   const handleSubmit = async () => {
     const { res, error } = await request(routes.deleteUser, {
       pathParams: { username: userData.username },
@@ -167,6 +159,14 @@ export default function ManageUsers() {
     await refetchUserList();
   };
 
+  const handleDelete = (user: any) => {
+    setUserData({
+      show: true,
+      username: user.username,
+      name: `${user.first_name} ${user.last_name}`,
+    });
+  };
+
   let userList: any[] = [];
 
   userListData?.results &&
@@ -177,7 +177,7 @@ export default function ManageUsers() {
         <div
           key={`usr_${user.id}`}
           id={`usr_${idx}`}
-          className="mt-6 w-full md:px-4 lg:w-1/2 xl:w-1/3"
+          className=" mt-6 w-full md:px-4 lg:w-1/2 xl:w-1/3"
         >
           <div className="relative block h-full overflow-visible rounded-lg bg-white shadow hover:border-primary-500">
             <div className="flex h-full flex-col justify-between @container">
@@ -248,8 +248,8 @@ export default function ManageUsers() {
                 <div
                   className={`flex ${
                     isExtremeSmallScreen
-                      ? "flex-wrap"
-                      : "flex-col justify-between md:flex-row"
+                      ? " flex-wrap "
+                      : " flex-col justify-between md:flex-row "
                   } gap-2 md:grid md:grid-cols-2`}
                 >
                   {user.user_type && (
@@ -328,7 +328,9 @@ export default function ManageUsers() {
                 )}
                 <div
                   className={`${
-                    isExtremeSmallScreen ? "flex flex-wrap" : "grid grid-cols-2"
+                    isExtremeSmallScreen
+                      ? "flex flex-wrap "
+                      : "grid grid-cols-2 "
                   }`}
                 >
                   {user.created_by && (
@@ -367,7 +369,7 @@ export default function ManageUsers() {
                 </div>
               </div>
               {user.username && (
-                <div className="mb-0 mt-auto flex w-full flex-col justify-between gap-2 p-2 md:p-4">
+                <div className="mb-0 mt-auto flex w-full flex-col justify-between gap-2 p-4">
                   <div className="flex flex-col gap-2 @sm:flex-row">
                     <ButtonV2
                       id="facilities"
@@ -575,7 +577,6 @@ function UserFacilities(props: { user: any }) {
     previousFacility: undefined,
     newFacility: undefined,
   });
-
   const hideReplaceHomeFacilityModal = () => {
     setReplaceHomeFacility({
       show: false,
@@ -584,7 +585,6 @@ function UserFacilities(props: { user: any }) {
       newFacility: undefined,
     });
   };
-
   const hideUnlinkFacilityModal = () => {
     setUnlinkFacilityData({
       show: false,
diff --git a/src/Routers/AppRouter.tsx b/src/Routers/AppRouter.tsx
index 8d3048e464f..56d8b31573b 100644
--- a/src/Routers/AppRouter.tsx
+++ b/src/Routers/AppRouter.tsx
@@ -145,7 +145,7 @@ export default function AppRouter() {
             id="pages"
             className="flex-1 overflow-y-scroll pb-4 focus:outline-none md:py-0"
           >
-            <div className="max-w-8xl mx-auto sm:p-0 md:p-3">{pages}</div>
+            <div className="max-w-8xl mx-auto p-3">{pages}</div>
           </main>
         </div>
       </div>

From cb71fc4535fe4c695c6833d9b18fa1567a4d617f Mon Sep 17 00:00:00 2001
From: Ashutosh Rai <ashu00jnp@gmail.com>
Date: Sun, 3 Mar 2024 23:32:27 +0530
Subject: [PATCH 6/9] Revert "fixes username validation"

This reverts commit f67a927441aa180054cd264a788f352936481171.
---
 src/Components/Facility/ConsultationCard.tsx  |  4 +-
 .../Facility/ConsultationDetails/index.tsx    |  2 -
 src/Components/Users/UserAdd.tsx              | 96 +++++++++----------
 3 files changed, 48 insertions(+), 54 deletions(-)

diff --git a/src/Components/Facility/ConsultationCard.tsx b/src/Components/Facility/ConsultationCard.tsx
index c1f94735235..1c6ec77afde 100644
--- a/src/Components/Facility/ConsultationCard.tsx
+++ b/src/Components/Facility/ConsultationCard.tsx
@@ -163,9 +163,7 @@ export const ConsultationCard = (props: ConsultationProps) => {
                 `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}/daily-rounds`
               )
             }
-            disabled={
-              (itemData.discharge_date as string | undefined) !== undefined
-            }
+            disabled={itemData.discharge_date}
             authorizeFor={NonReadOnlyUsers}
           >
             Add Consultation Updates
diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index 024f5df8d7d..808a2c90de9 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -127,8 +127,6 @@ export const ConsultationDetails = (props: any) => {
             );
           }
           setConsultationData(data);
-          console.log(consultationData);
-
           const assetRes = data?.current_bed?.bed_object?.id
             ? await dispatch(
                 listAssetBeds({
diff --git a/src/Components/Users/UserAdd.tsx b/src/Components/Users/UserAdd.tsx
index 00a765181bb..023985c1a90 100644
--- a/src/Components/Users/UserAdd.tsx
+++ b/src/Components/Users/UserAdd.tsx
@@ -142,6 +142,9 @@ const user_create_reducer = (state = initialState, action: any) => {
   }
 };
 
+const getDate = (value: any) =>
+  value && dayjs(value).isValid() && dayjs(value).toDate();
+
 export const validateRule = (
   condition: boolean,
   content: JSX.Element | string
@@ -162,9 +165,6 @@ export const validateRule = (
   );
 };
 
-const getDate = (value: any) =>
-  value && dayjs(value).isValid() && dayjs(value).toDate();
-
 export const UserAdd = (props: UserProps) => {
   const { goBack } = useAppHistory();
   const { userId } = props;
@@ -184,7 +184,7 @@ export const UserAdd = (props: UserProps) => {
   const [passwordInputInFocus, setPasswordInputInFocus] = useState(false);
   const [confirmPasswordInputInFocus, setConfirmPasswordInputInFocus] =
     useState(false);
-  const [usernameInput, setUsernameInput] = useState<string | any>(null);
+  const [usernameInput, setUsernameInput] = useState("");
 
   const userExistsEnums = {
     idle: 0,
@@ -327,7 +327,7 @@ export const UserAdd = (props: UserProps) => {
 
   const setFacility = (selected: FacilityModel | FacilityModel[] | null) => {
     setSelectedFacility(selected as FacilityModel[]);
-    const form: any = { ...state.form };
+    const form = { ...state.form };
     form.facilities = selected
       ? (selected as FacilityModel[]).map((i) => i.id ?? -1)
       : [];
@@ -620,7 +620,7 @@ export const UserAdd = (props: UserProps) => {
             }}
             formData={state.form}
           />
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div className="md:col-span-2">
               <FieldLabel>Facilities</FieldLabel>
               <FacilitySelect
@@ -736,61 +736,59 @@ export const UserAdd = (props: UserProps) => {
               {usernameInputInFocus && (
                 <div className="text-small pl-2 text-gray-500">
                   <div>
-                    {usernameInput &&
-                      usernameExists !== userExistsEnums.idle && (
-                        <>
-                          {usernameExists === userExistsEnums.checking ? (
-                            <span>
-                              <CareIcon
-                                icon="l-record-audio"
-                                className="text-xl"
-                              />{" "}
-                              checking...
-                            </span>
-                          ) : (
-                            <>
-                              {usernameExists === userExistsEnums.exists ? (
-                                <div>
-                                  <CareIcon
-                                    icon="l-times-circle"
-                                    className="text-xl text-red-500"
-                                  />{" "}
-                                  <span className="text-red-500">
-                                    Username is not available
-                                  </span>
-                                </div>
-                              ) : (
-                                <div>
-                                  <CareIcon
-                                    icon="l-check-circle"
-                                    className="text-xl text-green-500"
-                                  />{" "}
-                                  <span className="text-primary-500">
-                                    Username is available
-                                  </span>
-                                </div>
-                              )}
-                            </>
-                          )}
-                        </>
-                      )}
+                    {usernameExists !== userExistsEnums.idle && (
+                      <>
+                        {usernameExists === userExistsEnums.checking ? (
+                          <span>
+                            <CareIcon
+                              icon="l-record-audio"
+                              className="text-xl"
+                            />{" "}
+                            checking...
+                          </span>
+                        ) : (
+                          <>
+                            {usernameExists === userExistsEnums.exists ? (
+                              <div>
+                                <CareIcon
+                                  icon="l-times-circle"
+                                  className="text-xl text-red-500"
+                                />{" "}
+                                <span className="text-red-500">
+                                  Username is not available
+                                </span>
+                              </div>
+                            ) : (
+                              <div>
+                                <CareIcon
+                                  icon="l-check-circle"
+                                  className="text-xl text-green-500"
+                                />{" "}
+                                <span className="text-primary-500">
+                                  Username is available
+                                </span>
+                              </div>
+                            )}
+                          </>
+                        )}
+                      </>
+                    )}
                   </div>
                   <div>
                     {validateRule(
-                      usernameInput?.length >= 4 && usernameInput?.length <= 16,
+                      usernameInput.length >= 4 && usernameInput.length <= 16,
                       "Username should be 4-16 characters long"
                     )}
                   </div>
                   <div>
                     {validateRule(
                       /^[a-z0-9._-]*$/.test(usernameInput),
-                      "Username can only contain lowercase letters, numbers, and . _ - "
+                      "Username can only contain lowercase letters, numbers, and . _ -"
                     )}
                   </div>
                   <div>
                     {validateRule(
-                      usernameInput &&
-                        /^[a-zA-Z0-9].*[a-zA-Z0-9]$/.test(usernameInput),
+                      /^[a-z0-9].*[a-z0-9]$/i.test(usernameInput),
                       "Username must start and end with a letter or number"
                     )}
                   </div>
@@ -944,7 +942,7 @@ export const UserAdd = (props: UserProps) => {
                 />
               ))}
           </div>
-          <div className="mt-4 flex flex-col  gap-2 sm:justify-end md:flex-row">
+          <div className="mt-4 flex flex-col justify-end gap-2 md:flex-row">
             <Cancel onClick={() => goBack()} />
             <Submit onClick={handleSubmit} label={buttonText} />
           </div>

From b91541ee6063fefa06d956f697b44296bee97e7d Mon Sep 17 00:00:00 2001
From: Ashutosh Rai <ashu00jnp@gmail.com>
Date: Sun, 3 Mar 2024 23:32:55 +0530
Subject: [PATCH 7/9] Revert "fixes responsive design in patient details"

This reverts commit bc3d2ca73c2a1f54c4ec0c80b881a5e70d44a3a8.
---
 src/Components/Common/RelativeDateUserMention.tsx | 2 +-
 src/Components/Patient/SampleTestCard.tsx         | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Components/Common/RelativeDateUserMention.tsx b/src/Components/Common/RelativeDateUserMention.tsx
index 2af92268987..6c5a78c7f09 100644
--- a/src/Components/Common/RelativeDateUserMention.tsx
+++ b/src/Components/Common/RelativeDateUserMention.tsx
@@ -9,7 +9,7 @@ function RelativeDateUserMention(props: {
   withoutSuffix?: boolean;
 }) {
   return (
-    <div className="flex flex-row flex-wrap items-center justify-start ">
+    <div className="flex flex-row flex-wrap items-center justify-center ">
       <div className="tooltip">
         <span
           className={`tooltip-text tooltip-${props.tooltipPosition || "top"}`}
diff --git a/src/Components/Patient/SampleTestCard.tsx b/src/Components/Patient/SampleTestCard.tsx
index 4122c03fce2..f2cc928bf50 100644
--- a/src/Components/Patient/SampleTestCard.tsx
+++ b/src/Components/Patient/SampleTestCard.tsx
@@ -139,7 +139,7 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
           </div>
         </div>
       </div>
-      <div className="m-2 mt-4 flex flex-col justify-between md:flex-row lg:gap-4">
+      <div className="m-2 mt-4 flex flex-col justify-between gap-4 md:flex-row">
         <div className="flex flex-col justify-between gap-4 md:flex-row">
           <div>
             <div className="mb-2 text-sm text-gray-700">
@@ -157,7 +157,7 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
           </div>
         </div>
         <div className="flex flex-col gap-2">
-          <div className="flex flex-col flex-nowrap items-center justify-end text-sm text-gray-700 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-center">
+          <div className="flex flex-col items-center justify-end text-sm text-gray-700 md:flex-row">
             Created:{" "}
             <RelativeDateUserMention
               actionDate={itemData.created_date}
@@ -165,7 +165,7 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
               tooltipPosition="left"
             />
           </div>
-          <div className="flex flex-col items-center justify-end text-sm text-gray-700 md:flex-col md:items-start lg:flex-row lg:items-center">
+          <div className="flex flex-col items-center justify-end text-sm text-gray-700 md:flex-row">
             Last Modified:{" "}
             <RelativeDateUserMention
               actionDate={itemData.modified_date}

From 61f7b6d5e3744625ff192df67ebc7a0ab364c923 Mon Sep 17 00:00:00 2001
From: Ashutosh Rai <ashu00jnp@gmail.com>
Date: Mon, 4 Mar 2024 00:55:55 +0530
Subject: [PATCH 8/9] fixes searching user types

---
 src/Components/Users/UserAdd.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Users/UserAdd.tsx b/src/Components/Users/UserAdd.tsx
index 023985c1a90..693567d0ba7 100644
--- a/src/Components/Users/UserAdd.tsx
+++ b/src/Components/Users/UserAdd.tsx
@@ -327,7 +327,7 @@ export const UserAdd = (props: UserProps) => {
 
   const setFacility = (selected: FacilityModel | FacilityModel[] | null) => {
     setSelectedFacility(selected as FacilityModel[]);
-    const form = { ...state.form };
+    const form: any = { ...state.form };
     form.facilities = selected
       ? (selected as FacilityModel[]).map((i) => i.id ?? -1)
       : [];

From 217eee728db13e5c9825f6295a373b513ff23998 Mon Sep 17 00:00:00 2001
From: Ashutosh Rai <ashu00jnp@gmail.com>
Date: Thu, 7 Mar 2024 01:08:42 +0530
Subject: [PATCH 9/9] removed comment and any type

---
 src/Components/Users/UserAdd.tsx | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/Components/Users/UserAdd.tsx b/src/Components/Users/UserAdd.tsx
index 693567d0ba7..40e4e3af093 100644
--- a/src/Components/Users/UserAdd.tsx
+++ b/src/Components/Users/UserAdd.tsx
@@ -268,12 +268,15 @@ export const UserAdd = (props: UserProps) => {
   });
 
   const { loading: isStateLoading } = useQuery(routes.statesList, {
-    onResponse: (result) => {
-      if (!result || !result.res || !result.data) return;
+    onResponse: ({ data }) => {
+      if (!data) {
+        return;
+      }
+
       if (userIndex <= USER_TYPES.indexOf("StateAdmin")) {
         setStates([authUser.state_object!]);
       } else {
-        setStates(result.data.results);
+        setStates(data.results);
       }
     },
   });
@@ -327,9 +330,9 @@ export const UserAdd = (props: UserProps) => {
 
   const setFacility = (selected: FacilityModel | FacilityModel[] | null) => {
     setSelectedFacility(selected as FacilityModel[]);
-    const form: any = { ...state.form };
+    const form = { ...state.form };
     form.facilities = selected
-      ? (selected as FacilityModel[]).map((i) => i.id ?? -1)
+      ? (selected as FacilityModel[]).map((i) => parseInt(i.id as string) ?? -1)
       : [];
     dispatch({ type: "set_form", form });
   };
@@ -633,25 +636,16 @@ export const UserAdd = (props: UserProps) => {
               />
             </div>
 
-            {/* <SelectFormField
-              {...field("user_type")}
-              required
-              label="User Type"
-              options={userTypes}
-              optionLabel={(o) => o.role + (o.readOnly ? " (Read Only)" : "")}
-              optionValue={(o) => o.id}
-            /> */}
-
             <AutocompleteFormField
               {...field("user_type")}
               label="User Type"
               placeholder="Search for a user type..."
-              // value={userTypes}
               options={userTypes ?? []}
               optionLabel={(o) => o.role + (o.readOnly ? " (Read Only)" : "")}
               optionValue={(o) => o.id}
               required
             />
+
             {state.form.user_type === "Doctor" && (
               <>
                 <TextFormField