From a8beedcf981089650a82bf120a287981d765ff7a Mon Sep 17 00:00:00 2001
From: Anvesh Nalimela <151531961+AnveshNalimela@users.noreply.github.com>
Date: Mon, 18 Nov 2024 19:06:06 +0530
Subject: [PATCH] Design of List View layout  in Resource Page (#9096)

---
 public/locale/en.json                    |   4 +
 src/components/Resource/ResourceList.tsx | 174 ++++++++++++++++++++---
 2 files changed, 160 insertions(+), 18 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index 21fa1bea6ba..e281d8239bf 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",
   "URINATION_FREQUENCY__DECREASED": "Decreased",
   "URINATION_FREQUENCY__INCREASED": "Increased",
   "URINATION_FREQUENCY__NORMAL": "Normal",
@@ -1103,6 +1106,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..6eecf7fcef2 100644
--- a/src/components/Resource/ResourceList.tsx
+++ b/src/components/Resource/ResourceList.tsx
@@ -1,6 +1,7 @@
-import { navigate } from "raviger";
+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";
 
@@ -11,7 +12,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 +20,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 {
@@ -48,15 +49,140 @@ export default function ListView() {
   const showResourceCardList = (data: ResourceModel[]) => {
     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 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>
+
+          <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  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 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  leading-4"
+                >
+                  <Chip
+                    size="small"
+                    variant={
+                      resource.status === "APPROVED" ? "primary" : "secondary"
+                    }
+                    startIcon="l-truck"
+                    text={t(`${resource.status}`)}
+                    className={`text-lg font-bold rounded-full uppercase ${
+                      resource.status === "APPROVED"
+                        ? "bg-sky-200"
+                        : "bg-yellow-200 "
+                    }`}
+                  />
+                </dt>
+              )}
+
+              <div>
+                {resource.emergency && (
+                  <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>
+                )}
+              </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 +205,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 +214,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 +247,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>