Update for List View in Shifting from Gird LayOut to List Layout

src/Components/Resource/ListView.tsx

@@ -1,20 +1,20 @@
 import { navigate } from "raviger";
-import ListFilter from "./ListFilter";
-import { formatFilter } from "./Commons";
-import BadgesList from "./BadgesList";
-import { formatDateTime } from "../../Utils/utils";
-import useFilters from "../../Common/hooks/useFilters";
-import { ExportButton } from "../Common/Export";
-import ButtonV2 from "../Common/components/ButtonV2";
 import { useTranslation } from "react-i18next";
-import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
+import useFilters from "../../Common/hooks/useFilters";
+import routes from "../../Redux/api";
 import dayjs from "../../Utils/dayjs";
+import request from "../../Utils/request/request";
 import useQuery from "../../Utils/request/useQuery";
-import routes from "../../Redux/api";
+import { formatDateTime } from "../../Utils/utils";
+import { ExportButton } from "../Common/Export";
+import ButtonV2 from "../Common/components/ButtonV2";
 import Page from "../Common/components/Page";
 import SearchInput from "../Form/SearchInput";
-import request from "../../Utils/request/request";
+import BadgesList from "./BadgesList";
+import { formatFilter } from "./Commons";
+import ListFilter from "./ListFilter";
 
 import Loading from "@/Components/Common/Loading";
 export default function ListView() {
@@ -50,10 +50,7 @@ export default function ListView() {
     }
 
     return data.map((resource: any) => (
-      <div
-        key={`resource_${resource.id}`}
-        className="mt-6 w-full md:w-1/2 md:px-7"
-      >
+      <div key={`resource_${resource.id}`} className="mt-2 w-full md:px-3">
         <div className="h-full overflow-hidden rounded-lg bg-white shadow">
           <div className={"flex h-full flex-col justify-between p-4"}>
             <div>
@@ -73,10 +70,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title="Resource status"
-                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
+                    className="font-small flex items-center text-sm leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-truck" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-secondary-900">
+                    <dd className="text-sm font-semibold leading-5 text-secondary-900">
                       {resource.status}
                     </dd>
                   </dt>
@@ -87,30 +84,30 @@ export default function ListView() {
                     className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-plane-departure" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-secondary-900">
+                    <dd className="text-sm font-semibold leading-5 text-secondary-900">
                       {(resource.origin_facility_object || {}).name}
                     </dd>
                   </dt>
                 </div>
                 <div className="sm:col-span-1">
                   <dt
                     title="Resource approving facility"
-                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
+                    className="flex items-center text-sm font-semibold leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-user-check" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-secondary-900">
+                    <dd className="text-sm font-semibold leading-5 text-secondary-900">
                       {(resource.approving_facility_object || {}).name}
                     </dd>
                   </dt>
                 </div>
                 <div className="sm:col-span-1">
                   <dt
                     title=" Assigned facility"
-                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
+                    className="flex items-center text-sm font-semibold leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-plane-arrival" className="m-2" />
 
-                    <dd className="text-sm font-bold leading-5 text-secondary-900">
+                    <dd className="text-sm font-semibold leading-5 text-secondary-900">
                       {(resource.assigned_facility_object || {}).name ||
                         "Yet to be decided"}
                     </dd>
@@ -121,7 +118,7 @@ export default function ListView() {
                   <dt
                     title="  Last Modified"
                     className={
-                      "flex items-center text-sm font-medium leading-5 " +
+                      "flex items-center text-sm font-semibold leading-5 " +
                       (dayjs()
                         .subtract(2, "hours")
                         .isBefore(resource.modified_date)
@@ -130,7 +127,7 @@ export default function ListView() {
                     }
                   >
                     <CareIcon icon="l-stopwatch" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5">
+                    <dd className="text-sm font-semibold leading-5">
                       {formatDateTime(resource.modified_date) || "--"}
                     </dd>
                   </dt>
@@ -171,26 +168,22 @@ export default function ListView() {
       breadcrumbs={false}
       options={
         <>
-          <div className="md:px-4">
+          <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="w-32">
-            {/* dummy div to align space as per board view */}
-          </div>
-          <div className="flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
+          <div className="mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
+            <AdvancedFilterButton
+              onClick={() => advancedFilter.setShow(true)}
+            />
             <ButtonV2 className="py-[11px]" onClick={onBoardViewBtnClick}>
               <CareIcon icon="l-list-ul" className="rotate-90" />
               {t("board_view")}
             </ButtonV2>
-
-            <AdvancedFilterButton
-              onClick={() => advancedFilter.setShow(true)}
-            />
           </div>
         </>
       }
@@ -215,8 +208,7 @@ export default function ListView() {
                 {t("refresh_list")}
               </button>
             </div>
-
-            <div className="mb-5 flex flex-wrap md:-mx-4">
+            <div className="mt-4 grid gap-x-2 gap-y-2 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
               {data?.results && showResourceCardList(data?.results)}
             </div>
             <div>

src/Components/Resource/ResourceBoardView.tsx

@@ -1,23 +1,23 @@
-import { useState } from "react";
+import dayjs from "dayjs";
 import { Link, navigate } from "raviger";
-import ListFilter from "./ListFilter";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
 import { RESOURCE_CHOICES } from "../../Common/constants";
-import BadgesList from "./BadgesList";
-import { formatFilter } from "./Commons";
 import useFilters from "../../Common/hooks/useFilters";
+import routes from "../../Redux/api";
+import request from "../../Utils/request/request";
+import { classNames, formatDateTime, formatName } from "../../Utils/utils";
 import { ExportButton } from "../Common/Export";
 import ButtonV2 from "../Common/components/ButtonV2";
-import { useTranslation } from "react-i18next";
-import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
-import CareIcon from "../../CAREUI/icons/CareIcon";
-import SearchInput from "../Form/SearchInput";
 import Tabs from "../Common/components/Tabs";
-import request from "../../Utils/request/request";
-import routes from "../../Redux/api";
-import KanbanBoard from "../Kanban/Board";
 import { ResourceModel } from "../Facility/models";
-import { classNames, formatDateTime, formatName } from "../../Utils/utils";
-import dayjs from "dayjs";
+import SearchInput from "../Form/SearchInput";
+import KanbanBoard from "../Kanban/Board";
+import BadgesList from "./BadgesList";
+import { formatFilter } from "./Commons";
+import ListFilter from "./ListFilter";
 
 import PageTitle from "@/Components/Common/PageTitle";
 const resourceStatusOptions = RESOURCE_CHOICES.map((obj) => obj.text);
@@ -43,7 +43,7 @@ export default function BoardView() {
   return (
     <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">
+        <div className="mt-4 w-1/3 lg:w-1/4">
           <PageTitle
             title={t("resource")}
             hideBack
@@ -66,13 +66,15 @@ export default function BoardView() {
           />
         </div>
 
-        <div className="flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
+        <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="mr-4 mt-2">
           <Tabs
             tabs={[
               { text: t("active"), value: 0 },
@@ -81,15 +83,14 @@ export default function BoardView() {
             onTabChange={(tab) => setBoardFilter(tab ? COMPLETED : ACTIVE)}
             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">
-            <ButtonV2 className="py-[11px]" onClick={onListViewBtnClick}>
-              <CareIcon icon="l-list-ul" />
-              {t("list_view")}
-            </ButtonV2>
-            <AdvancedFilterButton
-              onClick={() => advancedFilter.setShow(true)}
-            />
-          </div>
+        </div>
+
+        <div className="mt-2 flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
+          <AdvancedFilterButton onClick={() => advancedFilter.setShow(true)} />
+          <ButtonV2 className="py-[11px]" onClick={onListViewBtnClick}>
+            <CareIcon icon="l-list-ul" />
+            {t("list_view")}
+          </ButtonV2>
         </div>
       </div>
 

src/Components/Shifting/BoardView.tsx

@@ -3,30 +3,30 @@ import {
   SHIFTING_CHOICES_WARTIME,
 } from "../../Common/constants";
 
-import BadgesList from "./BadgesList";
 import { ExportButton } from "../Common/Export";
-import ListFilter from "./ListFilter";
 import SearchInput from "../Form/SearchInput";
+import BadgesList from "./BadgesList";
 import { formatFilter } from "./Commons";
+import ListFilter from "./ListFilter";
 
+import PageTitle from "@/Components/Common/PageTitle";
+import careConfig from "@careConfig";
+import dayjs from "dayjs";
 import { Link, navigate } from "raviger";
-import useFilters from "../../Common/hooks/useFilters";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import ButtonV2 from "../Common/components/ButtonV2";
-import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
 import CareIcon from "../../CAREUI/icons/CareIcon";
-import Tabs from "../Common/components/Tabs";
-import careConfig from "@careConfig";
-import KanbanBoard from "../Kanban/Board";
+import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
+import useAuthUser from "../../Common/hooks/useAuthUser";
+import useFilters from "../../Common/hooks/useFilters";
+import routes from "../../Redux/api";
+import request from "../../Utils/request/request";
 import { classNames, formatDateTime, formatName } from "../../Utils/utils";
-import dayjs from "dayjs";
+import ButtonV2 from "../Common/components/ButtonV2";
+import Tabs from "../Common/components/Tabs";
 import ConfirmDialog from "../Common/ConfirmDialog";
 import { ShiftingModel } from "../Facility/models";
-import useAuthUser from "../../Common/hooks/useAuthUser";
-import request from "../../Utils/request/request";
-import routes from "../../Redux/api";
-import PageTitle from "@/Components/Common/PageTitle";
+import KanbanBoard from "../Kanban/Board";
 
 export default function BoardView() {
   const { qParams, updateQuery, FilterBadges, advancedFilter } = useFilters({
@@ -81,7 +81,7 @@ export default function BoardView() {
   return (
     <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">
+        <div className="mt-4 w-1/3 lg:w-1/4">
           <PageTitle
             title={t("shifting")}
             className="mx-3 md:mx-5"
@@ -100,14 +100,16 @@ export default function BoardView() {
             breadcrumbs={false}
           />
         </div>
-        <div className="flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
+        <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="mr-4 mt-2">
           <Tabs
             tabs={[
               { text: t("active"), value: 0 },
@@ -118,19 +120,17 @@ export default function BoardView() {
             }
             currentTab={boardFilter[0].text !== activeBoards[0].text ? 1 : 0}
           />
+        </div>
 
-          <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
-            <ButtonV2
-              className="py-[11px]"
-              onClick={() => navigate("/shifting/list", { query: qParams })}
-            >
-              <CareIcon icon="l-list-ul" />
-              {t("list_view")}
-            </ButtonV2>
-            <AdvancedFilterButton
-              onClick={() => advancedFilter.setShow(true)}
-            />
-          </div>
+        <div className="mt-2 flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
+          <AdvancedFilterButton onClick={() => advancedFilter.setShow(true)} />
+          <ButtonV2
+            className="py-[11px]"
+            onClick={() => navigate("/shifting/list", { query: qParams })}
+          >
+            <CareIcon icon="l-list-ul" />
+            {t("list_view")}
+          </ButtonV2>
         </div>
       </div>
       <KanbanBoard<ShiftingModel>