Fix: UI changes in shifting and resources pages (#9437)

ohcnetwork · Dec 18, 2024 · 3618853 · 3618853
1 parent f56e6f5
commit 3618853
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 71 deletions.
diff --git a/src/components/Resource/ResourceBoard.tsx b/src/components/Resource/ResourceBoard.tsx
@@ -93,7 +93,11 @@ export default function BoardView() {
             currentTab={boardFilter !== ACTIVE ? 1 : 0}
           />
           <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
-            <Button variant={"primary"} onClick={onListViewBtnClick}>
+            <Button
+              variant={"primary"}
+              onClick={onListViewBtnClick}
+              className="h-10.8 px-4 py-2"
+            >
               <CareIcon icon="l-list-ul" className="mr-2" />
               {t("list_view")}
             </Button>

diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
@@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";
 
 import { ExportButton } from "@/components/Common/Export";
 import Loading from "@/components/Common/Loading";
-import Page from "@/components/Common/Page";
+import PageTitle from "@/components/Common/PageTitle";
 import { ResourceModel } from "@/components/Facility/models";
 import SearchInput from "@/components/Form/SearchInput";
 import BadgesList from "@/components/Resource/ResourceBadges";
@@ -194,45 +194,55 @@ export default function ListView() {
   };
 
   return (
-    <Page
-      title={t("resource")}
-      hideBack
-      componentRight={
-        <ExportButton
-          action={async () => {
-            const { data } = await request(routes.downloadResourceRequests, {
-              query: { ...appliedFilters, csv: true },
-            });
-            return data ?? null;
-          }}
-          filenamePrefix="resource_requests"
-        />
-      }
-      breadcrumbs={false}
-      options={
-        <>
-          <div className="md:px-4"></div>
-          <div className="mt-2 flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
-            <SearchInput
-              name="title"
-              value={qParams.title}
-              onChange={(e) => updateQuery({ [e.name]: e.value })}
-              placeholder={t("search_resource")}
-            />
-          </div>
+    <div className="flex-col px-2 pb-2">
+      <div className="flex w-full flex-col items-center justify-between lg:flex-row">
+        <div className="w-1/3 lg:w-1/4">
+          <PageTitle
+            title={t("resource")}
+            hideBack
+            className="mx-3 md:mx-5"
+            componentRight={
+              <ExportButton
+                action={async () => {
+                  const { data } = await request(
+                    routes.downloadResourceRequests,
+                    {
+                      query: { ...appliedFilters, csv: true },
+                    },
+                  );
+                  return data ?? null;
+                }}
+                filenamePrefix="resource_requests"
+              />
+            }
+            breadcrumbs={false}
+          />
+        </div>
+
+        <div className="flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
+          <SearchInput
+            name="title"
+            value={qParams.title}
+            onChange={(e) => updateQuery({ [e.name]: e.value })}
+            placeholder={t("search_resource")}
+            className="w-full md:w-60"
+          />
 
-          <div className="mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
-            <Button variant={"primary"} onClick={onBoardViewBtnClick}>
-              <CareIcon icon="l-list-ul" className="rotate-90 mr-2" />
+          <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
+            <Button
+              variant={"primary"}
+              onClick={onBoardViewBtnClick}
+              className="h-10.8 px-4 py-2"
+            >
+              <CareIcon icon="l-list-ul" className="mr-2" />
               {t("board_view")}
             </Button>
             <AdvancedFilterButton
               onClick={() => advancedFilter.setShow(true)}
             />
           </div>
-        </>
-      }
-    >
+        </div>
+      </div>
       <BadgesList {...{ appliedFilters, FilterBadges }} />
 
       <div className="px-1">
@@ -282,6 +292,6 @@ export default function ListView() {
         showResourceStatus={true}
         key={window.location.search}
       />
-    </Page>
+    </div>
   );
 }
diff --git a/src/components/Shifting/ShiftingBoard.tsx b/src/components/Shifting/ShiftingBoard.tsx
@@ -124,7 +124,11 @@ export default function BoardView() {
           />
 
           <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
-            <Button variant={"primary"} onClick={onListViewBtnClick}>
+            <Button
+              variant={"primary"}
+              onClick={onListViewBtnClick}
+              className="h-10.8 px-4 py-2"
+            >
               <CareIcon icon="l-list-ul" className="mr-2" />
               {t("list_view")}
             </Button>

diff --git a/src/components/Shifting/ShiftingList.tsx b/src/components/Shifting/ShiftingList.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 
 import { ExportButton } from "@/components/Common/Export";
 import Loading from "@/components/Common/Loading";
-import Page from "@/components/Common/Page";
+import PageTitle from "@/components/Common/PageTitle";
 import SearchInput from "@/components/Form/SearchInput";
 import BadgesList from "@/components/Shifting/ShiftingBadges";
 import { formatFilter } from "@/components/Shifting/ShiftingCommons";
@@ -49,46 +49,52 @@ export default function ListView() {
   });
 
   return (
-    <Page
-      title={t("shifting")}
-      hideBack
-      componentRight={
-        <ExportButton
-          action={async () => {
-            const { data } = await request(routes.downloadShiftRequests, {
-              query: { ...formatFilter(qParams), csv: true },
-            });
-            return data ?? null;
-          }}
-          filenamePrefix="shift_requests"
-        />
-      }
-      breadcrumbs={false}
-      options={
-        <>
-          <div className="md:px-4"></div>
+    <div className="flex-col px-2 pb-2">
+      <div className="flex w-full flex-col items-center justify-between lg:flex-row">
+        <div className="w-1/3 lg:w-1/4">
+          <PageTitle
+            title={t("shifting")}
+            className="mx-3 md:mx-5"
+            hideBack
+            componentRight={
+              <ExportButton
+                action={async () => {
+                  const { data } = await request(routes.downloadShiftRequests, {
+                    query: { ...formatFilter(qParams), csv: true },
+                  });
+                  return data ?? null;
+                }}
+                filenamePrefix="shift_requests"
+              />
+            }
+            breadcrumbs={false}
+          />
+        </div>
+        <div className="flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
+          <SearchInput
+            name="patient_name"
+            value={qParams.patient_name}
+            onChange={(e) => updateQuery({ [e.name]: e.value })}
+            placeholder={t("search_patient")}
+            className="w-full md:w-60"
+          />
 
-          <div className="mt-2 flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
-            <SearchInput
-              name="patient_name"
-              value={qParams.patient_name}
-              onChange={(e) => updateQuery({ [e.name]: e.value })}
-              placeholder={t("search_patient")}
-            />
-          </div>
-
-          <div className="mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
-            <Button variant={"primary"} onClick={onBoardViewBtnClick}>
-              <CareIcon icon="l-list-ul" className="rotate-90 mr-2" />
+          <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
+            <Button
+              variant={"primary"}
+              onClick={onBoardViewBtnClick}
+              className="h-10.8 px-4 py-2"
+            >
+              <CareIcon icon="l-list-ul" className="mr-2" />
               {t("board_view")}
             </Button>
             <AdvancedFilterButton
               onClick={() => advancedFilter.setShow(true)}
             />
           </div>
-        </>
-      }
-    >
+        </div>
+      </div>
+
       <BadgesList {...{ qParams, FilterBadges }} />
 
       <div>
@@ -121,6 +127,6 @@ export default function ListView() {
         {...advancedFilter}
         key={window.location.search}
       />
-    </Page>
+    </div>
   );
 }