From f7c0b57682f72e1021db3ddef1d4ff5574424b1e Mon Sep 17 00:00:00 2001
From: AnveshNalimela <nalimelaanvesh@gmail.com>
Date: Wed, 13 Nov 2024 00:17:44 +0530
Subject: [PATCH 1/5] Redesigned the Resource list view

---
 public/locale/en.json                    |   1 +
 src/components/Resource/ResourceList.tsx | 161 ++++++++++++++++++++---
 2 files changed, 144 insertions(+), 18 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index 1159c4ab0dc..5846b126788 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1091,6 +1091,7 @@
   "resource_approving_facility": "Resource approving facility",
   "resource_origin_facility": "Origin Facility",
   "resource_request": "Resource Request",
+  "resource_status": "Resource Status",
   "result": "Result",
   "result_date": "Result Date",
   "result_details": "Result details",
diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
index 8a12545d7d1..0356f04a877 100644
--- a/src/components/Resource/ResourceList.tsx
+++ b/src/components/Resource/ResourceList.tsx
@@ -1,4 +1,4 @@
-import { navigate } from "raviger";
+import { Link, navigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -11,7 +11,6 @@ import Page from "@/components/Common/Page";
 import { ResourceModel } from "@/components/Facility/models";
 import SearchInput from "@/components/Form/SearchInput";
 import BadgesList from "@/components/Resource/ResourceBadges";
-import ResourceBlock from "@/components/Resource/ResourceBlock";
 import { formatFilter } from "@/components/Resource/ResourceCommons";
 import ListFilter from "@/components/Resource/ResourceFilter";
 
@@ -20,6 +19,7 @@ import useFilters from "@/hooks/useFilters";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useQuery from "@/Utils/request/useQuery";
+import { formatDateTime } from "@/Utils/utils";
 
 export default function ListView() {
   const {
@@ -46,17 +46,130 @@ export default function ListView() {
   });
 
   const showResourceCardList = (data: ResourceModel[]) => {
+    if (loading) {
+      return <Loading />;
+    }
     if (data && !data.length) {
       return (
-        <div className="mt-64 flex flex-1 justify-center text-secondary-600">
+        <div className="w-full mt-64 flex flex-1 justify-center text-secondary-600">
           {t("no_results_found")}
         </div>
       );
     }
 
-    return data.map((resource, i) => (
-      <div key={i} className="rounded-lg border border-secondary-300 bg-white">
-        <ResourceBlock resource={resource} />
+    return data.map((resource: ResourceModel, i) => (
+      <div key={i} className="w-full border-b-2 border-gray-100 col-span-6">
+        <div className="border-3  flex grid w-full gap-1 overflow-hidden bg-white p-4 shadow sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-5">
+          <div className="col-span-1 px-3 text-left">
+            <div className="text-sm font-bold capitalize">{resource.title}</div>
+          </div>
+
+          <div className="col-span-1 flex flex-col px-2 text-left">
+            <div className="category">
+              <dt
+                title={t("LOG_UPDATE_FIELD_LABEL__patient_category")}
+                className="flex items-center text-sm font-medium leading-5 text-secondary-500"
+              >
+                <CareIcon icon="l-box" className="text-lg mr-1" />
+                <dd className="text-sm font-bold leading-5 text-secondary-900">
+                  {resource.category || ""}
+                </dd>
+              </dt>
+            </div>
+            <div className="address mt-1">
+              <dd className="text-xs font-medium leading-5">
+                {resource.sub_category || "--"}
+              </dd>
+            </div>
+          </div>
+
+          <div className="col-span-1 flex flex-col px-3 text-left">
+            <div className="3xl:flex-row mb-2 flex gap-2 sm:flex-row md:flex-row lg:flex-col xl:flex-row 2xl:flex-row ">
+              {resource.status == "TRANSPORTATION TO BE ARRANGED" ? (
+                <dt
+                  title={t("resource_status")}
+                  className="w-3/4 mt-1 h-fit flex h-5 shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4  overflow-hidden whitespace-nowrap text-ellipsis truncate bg-gray-200"
+                >
+                  <CareIcon icon="l-truck" className="mr-2" />
+                  <dd className="text-sky-600 truncate">{resource.status}</dd>
+                </dt>
+              ) : (
+                <dt
+                  title={t("resource_status")}
+                  className={`w-fit mt-1 h-fit flex h-5 shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4  ${
+                    resource.status === "APPROVED"
+                      ? "bg-sky-200"
+                      : "bg-yellow-200 text-yellow-500"
+                  }`}
+                >
+                  <CareIcon icon="l-truck" className="mr-2" />
+                  <dd className="text-sky-600">{resource.status}</dd>
+                </dt>
+              )}
+
+              <div>
+                {resource.emergency && (
+                  <span className="inline-block shrink-0 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium leading-4 text-red-800">
+                    {t("emergency")}
+                  </span>
+                )}
+              </div>
+            </div>
+
+            <div className="text-center">
+              <dt
+                title={t("last_modified")}
+                className={"flex items-center text-sm font-medium leading-5"}
+              >
+                <CareIcon icon="l-stopwatch" className="mr-1" />
+                <dd className="text-xs font-medium leading-5">
+                  {formatDateTime(resource.modified_date) || "--"}
+                </dd>
+              </dt>
+            </div>
+          </div>
+
+          <div className="col-span-1 text-left">
+            <dt
+              title={t("origin_facility")}
+              className="flex items-center text-left 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">
+                {resource.origin_facility_object?.name}
+              </dd>
+            </dt>
+
+            <dt
+              title={t("resource_approving_facility")}
+              className="flex items-center text-left text-sm font-medium leading-5 text-secondary-500"
+            >
+              <CareIcon icon="l-user-check" className="mr-2" />
+              <dd className="text-sm font-bold leading-5 text-secondary-900">
+                {resource.approving_facility_object?.name}
+              </dd>
+            </dt>
+
+            <dt
+              title={t("assigned_facility")}
+              className="flex items-center text-left text-sm font-medium leading-5 text-secondary-500"
+            >
+              <CareIcon icon="l-plane-arrival" className="mr-2" />
+              <dd className="text-sm font-bold leading-5 text-secondary-900">
+                {resource.assigned_facility_object?.name ||
+                  t("yet_to_be_decided")}
+              </dd>
+            </dt>
+          </div>
+          <div className="col-span-1 mt-2 flex flex-col text-left">
+            <Link
+              href={`/resource/${resource.id}`}
+              className="flex w-full items-center justify-center gap-2 rounded-lg border border-secondary-300 bg-secondary-200 p-2 text-sm font-semibold text-inherit transition-all hover:bg-secondary-300"
+            >
+              <CareIcon icon="l-eye" className="text-lg" /> {t("all_details")}
+            </Link>
+          </div>
+        </div>
       </div>
     ));
   };
@@ -79,7 +192,8 @@ export default function ListView() {
       breadcrumbs={false}
       options={
         <>
-          <div className="md:px-4">
+          <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}
@@ -87,18 +201,15 @@ export default function ListView() {
               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">
-            <ButtonV2 className="py-[11px]" onClick={onBoardViewBtnClick}>
-              <CareIcon icon="l-list-ul" className="rotate-90" />
-              {t("board_view")}
-            </ButtonV2>
 
+          <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>
           </div>
         </>
       }
@@ -123,10 +234,24 @@ export default function ListView() {
                 {t("refresh_list")}
               </button>
             </div>
-
-            <div className="mb-5 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-              {data?.results && showResourceCardList(data?.results)}
+            <div className="mx-5 mt-5 grid w-full gap-2 border-b-2 border-gray-100 p-4 text-sm font-medium sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-5">
+              <div className="col-span-1 uppercase sm:text-center md:text-center lg:block lg:text-left">
+                {t("resource")}
+              </div>
+              <div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
+                {t("LOG_UPDATE_FIELD_LABEL__patient_category")}
+              </div>
+              <div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
+                {t("consent__status")}
+              </div>
+              <div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
+                {t("facilities")}
+              </div>
+              <div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
+                {t("LOG_UPDATE_FIELD_LABEL__action")}
+              </div>
             </div>
+            <div>{showResourceCardList(data?.results || [])}</div>
             <div>
               <Pagination totalCount={data?.count || 0} />
             </div>

From 6d76dc2cb922965487ec15c1d96f7a44d768359b Mon Sep 17 00:00:00 2001
From: AnveshNalimela <nalimelaanvesh@gmail.com>
Date: Wed, 13 Nov 2024 18:05:28 +0530
Subject: [PATCH 2/5] made changes suggested by coderabbit

---
 src/components/Resource/ResourceList.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
index 0356f04a877..9ee7b24c5c7 100644
--- a/src/components/Resource/ResourceList.tsx
+++ b/src/components/Resource/ResourceList.tsx
@@ -46,9 +46,6 @@ export default function ListView() {
   });
 
   const showResourceCardList = (data: ResourceModel[]) => {
-    if (loading) {
-      return <Loading />;
-    }
     if (data && !data.length) {
       return (
         <div className="w-full mt-64 flex flex-1 justify-center text-secondary-600">
@@ -85,7 +82,7 @@ export default function ListView() {
 
           <div className="col-span-1 flex flex-col px-3 text-left">
             <div className="3xl:flex-row mb-2 flex gap-2 sm:flex-row md:flex-row lg:flex-col xl:flex-row 2xl:flex-row ">
-              {resource.status == "TRANSPORTATION TO BE ARRANGED" ? (
+              {resource.status === "TRANSPORTATION TO BE ARRANGED" ? (
                 <dt
                   title={t("resource_status")}
                   className="w-3/4 mt-1 h-fit flex h-5 shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4  overflow-hidden whitespace-nowrap text-ellipsis truncate bg-gray-200"

From 38eb8e6dbfda8c76f80369fdbedf63c88bd84f56 Mon Sep 17 00:00:00 2001
From: AnveshNalimela <nalimelaanvesh@gmail.com>
Date: Fri, 15 Nov 2024 09:50:02 +0530
Subject: [PATCH 3/5] added translations and used chip component

---
 public/locale/en.json                    |  3 ++
 src/components/Resource/ResourceList.tsx | 37 ++++++++++++++++--------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index 49bf5d59b82..288fd880663 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -5,6 +5,7 @@
   "APPETITE__NO_TASTE_FOR_FOOD": "No taste for food",
   "APPETITE__REDUCED": "Reduced",
   "APPETITE__SATISFACTORY": "Satisfactory",
+  "APPROVED": "Approved",
   "AUTOMATED": "Automated",
   "BED_WITH_OXYGEN_SUPPORT": "Bed with Oxygen Support",
   "BLADDER_DRAINAGE__CONDOM_CATHETER": "Condom Catheter",
@@ -140,6 +141,7 @@
   "OXYGEN_MODALITY__NON_REBREATHING_MASK_short": "NRM",
   "OXYGEN_MODALITY__SIMPLE_FACE_MASK": "Simple Face Mask",
   "OXYGEN_MODALITY__SIMPLE_FACE_MASK_short": "SFM",
+  "PENDING": "Pending",
   "PRESCRIPTION_FREQUENCY_BD": "Twice daily",
   "PRESCRIPTION_FREQUENCY_HS": "Night only",
   "PRESCRIPTION_FREQUENCY_OD": "Once daily",
@@ -205,6 +207,7 @@
   "SORT_OPTIONS__taken_at": "Oldest taken date first",
   "Submit": "Submit",
   "TELEMEDICINE": "Telemedicine",
+  "TRANSPORTATION TO BE ARRANGED": "Transportation to be arranged",
   "URINATION_FREQUENCY__DECREASED": "Decreased",
   "URINATION_FREQUENCY__INCREASED": "Increased",
   "URINATION_FREQUENCY__NORMAL": "Normal",
diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
index 9ee7b24c5c7..bd4ad07b430 100644
--- a/src/components/Resource/ResourceList.tsx
+++ b/src/components/Resource/ResourceList.tsx
@@ -1,6 +1,7 @@
 import { Link, navigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
+import Chip from "@/CAREUI/display/Chip";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 import { AdvancedFilterButton } from "@/CAREUI/interactive/FiltersSlideover";
 
@@ -55,7 +56,7 @@ export default function ListView() {
     }
 
     return data.map((resource: ResourceModel, i) => (
-      <div key={i} className="w-full border-b-2 border-gray-100 col-span-6">
+      <div key={i} className="w-full border-b-2 border-gray-200 col-span-6">
         <div className="border-3  flex grid w-full gap-1 overflow-hidden bg-white p-4 shadow sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-5">
           <div className="col-span-1 px-3 text-left">
             <div className="text-sm font-bold capitalize">{resource.title}</div>
@@ -85,28 +86,40 @@ export default function ListView() {
               {resource.status === "TRANSPORTATION TO BE ARRANGED" ? (
                 <dt
                   title={t("resource_status")}
-                  className="w-3/4 mt-1 h-fit flex h-5 shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4  overflow-hidden whitespace-nowrap text-ellipsis truncate bg-gray-200"
+                  className="w-3/4 mt-1 h-fit flex h-5 shrink-0 items-center px-2 py-0.5 text-xs font-medium leading-4  overflow-hidden whitespace-nowrap text-ellipsis truncate"
                 >
-                  <CareIcon icon="l-truck" className="mr-2" />
-                  <dd className="text-sky-600 truncate">{resource.status}</dd>
+                  <Chip
+                    size="small"
+                    variant="secondary"
+                    startIcon="l-truck"
+                    text={t(`${resource.status}`)}
+                    className="text-lg font-bold text-sky-600 truncate bg-gray-300 rounded-full"
+                  />
                 </dt>
               ) : (
                 <dt
                   title={t("resource_status")}
-                  className={`w-fit mt-1 h-fit flex h-5 shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4  ${
-                    resource.status === "APPROVED"
-                      ? "bg-sky-200"
-                      : "bg-yellow-200 text-yellow-500"
-                  }`}
+                  className="w-fit mt-1 h-fit flex h-5 shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4"
                 >
-                  <CareIcon icon="l-truck" className="mr-2" />
-                  <dd className="text-sky-600">{resource.status}</dd>
+                  <Chip
+                    size="small"
+                    variant={
+                      resource.status === "APPROVED" ? "primary" : "secondary"
+                    }
+                    startIcon="l-truck"
+                    text={t(`${resource.status}`)}
+                    className={`text-lg font-bold rounded-full ${
+                      resource.status === "APPROVED"
+                        ? "bg-sky-200"
+                        : "bg-yellow-200 "
+                    }`}
+                  />
                 </dt>
               )}
 
               <div>
                 {resource.emergency && (
-                  <span className="inline-block shrink-0 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium leading-4 text-red-800">
+                  <span className="mt-1.5 inline-block shrink-0 rounded-full bg-red-100 px-2 py-1 text-xs font-medium leading-4 text-red-800">
                     {t("emergency")}
                   </span>
                 )}

From 7f1d15996a6fe13eb9209241897a6898eecea215 Mon Sep 17 00:00:00 2001
From: AnveshNalimela <nalimelaanvesh@gmail.com>
Date: Fri, 15 Nov 2024 09:56:48 +0530
Subject: [PATCH 4/5] made few alignments and adjusted:

---
 public/locale/en.json                    | 2 +-
 src/components/Resource/ResourceList.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index 288fd880663..6b7fc0d82c6 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -207,7 +207,7 @@
   "SORT_OPTIONS__taken_at": "Oldest taken date first",
   "Submit": "Submit",
   "TELEMEDICINE": "Telemedicine",
-  "TRANSPORTATION TO BE ARRANGED": "Transportation to be arranged",
+  "TRANSPORTATION TO BE ARRANGED": "Transportation",
   "URINATION_FREQUENCY__DECREASED": "Decreased",
   "URINATION_FREQUENCY__INCREASED": "Increased",
   "URINATION_FREQUENCY__NORMAL": "Normal",
diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
index bd4ad07b430..07f4ce51b64 100644
--- a/src/components/Resource/ResourceList.tsx
+++ b/src/components/Resource/ResourceList.tsx
@@ -86,20 +86,20 @@ export default function ListView() {
               {resource.status === "TRANSPORTATION TO BE ARRANGED" ? (
                 <dt
                   title={t("resource_status")}
-                  className="w-3/4 mt-1 h-fit flex h-5 shrink-0 items-center px-2 py-0.5 text-xs font-medium leading-4  overflow-hidden whitespace-nowrap text-ellipsis truncate"
+                  className="w-3/4 mt-1 h-fit flex h-5 shrink-0 items-center  overflow-hidden whitespace-nowrap text-ellipsis truncate"
                 >
                   <Chip
                     size="small"
                     variant="secondary"
                     startIcon="l-truck"
                     text={t(`${resource.status}`)}
-                    className="text-lg font-bold text-sky-600 truncate bg-gray-300 rounded-full"
+                    className="text-lg font-bold text-sky-600 truncate bg-gray-300 rounded-full uppercase text-center"
                   />
                 </dt>
               ) : (
                 <dt
                   title={t("resource_status")}
-                  className="w-fit mt-1 h-fit flex h-5 shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4"
+                  className="w-fit mt-1 h-fit flex h-5 shrink-0 items-center rounded-full  leading-4"
                 >
                   <Chip
                     size="small"
@@ -108,7 +108,7 @@ export default function ListView() {
                     }
                     startIcon="l-truck"
                     text={t(`${resource.status}`)}
-                    className={`text-lg font-bold rounded-full ${
+                    className={`text-lg font-bold rounded-full uppercase ${
                       resource.status === "APPROVED"
                         ? "bg-sky-200"
                         : "bg-yellow-200 "

From fab749803c1d86eebb1d05410836e9e22270b8e1 Mon Sep 17 00:00:00 2001
From: AnveshNalimela <nalimelaanvesh@gmail.com>
Date: Fri, 15 Nov 2024 10:03:25 +0530
Subject: [PATCH 5/5] Removed shadow and added proper borders

---
 src/components/Resource/ResourceList.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
index 07f4ce51b64..6eecf7fcef2 100644
--- a/src/components/Resource/ResourceList.tsx
+++ b/src/components/Resource/ResourceList.tsx
@@ -56,8 +56,11 @@ export default function ListView() {
     }
 
     return data.map((resource: ResourceModel, i) => (
-      <div key={i} className="w-full border-b-2 border-gray-200 col-span-6">
-        <div className="border-3  flex grid w-full gap-1 overflow-hidden bg-white p-4 shadow sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-5">
+      <div
+        key={i}
+        className="w-full border border-b-2 border-gray-200  col-span-6"
+      >
+        <div className=" flex grid w-full gap-1 overflow-hidden bg-white p-4    sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-5">
           <div className="col-span-1 px-3 text-left">
             <div className="text-sm font-bold capitalize">{resource.title}</div>
           </div>