Redesign location card UI (#6853)

* redesign location card * used RecordMeta component for created and modified date
ohcnetwork · Dec 20, 2023 · 83c4524 · 83c4524
1 parent 541f9b2
commit 83c4524
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 38 deletions.
diff --git a/src/Components/Assets/AssetTypes.tsx b/src/Components/Assets/AssetTypes.tsx
@@ -20,7 +20,6 @@ export interface AssetLocationObject {
     id: string;
     name: string;
   };
-  middleware_address?: string;
 }
 
 export enum AssetType {

diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
@@ -6,6 +6,7 @@ import Page from "../Common/components/Page";
 import routes from "../../Redux/api";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
 import { LocationModel } from "./models";
+import RecordMeta from "../../CAREUI/display/RecordMeta";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -51,10 +52,11 @@ export default function LocationManagement({ facilityId }: Props) {
           <PaginatedList.WhenLoading>
             <Loading />
           </PaginatedList.WhenLoading>
-
-          <PaginatedList.Items<LocationModel> className="my-8 flex grow flex-col gap-3 lg:mx-8">
-            {(item) => <Location {...item} />}
-          </PaginatedList.Items>
+          <div className="w-full @container">
+            <PaginatedList.Items<LocationModel> className="my-8 grid gap-3 @4xl:grid-cols-2 @6xl:grid-cols-3 @[100rem]:grid-cols-4 lg:mx-8">
+              {(item) => <Location {...item} />}
+            </PaginatedList.Items>
+          </div>
 
           <div className="flex w-full items-center justify-center">
             <PaginatedList.Paginator hideIfSinglePage />
@@ -69,43 +71,56 @@ const Location = ({
   name,
   description,
   middleware_address,
+  location_type,
+  created_date,
+  modified_date,
   id,
 }: LocationModel) => (
-  <div className="w-full items-center justify-between rounded border border-gray-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400 lg:flex">
-    <div className="lg:w-3/4">
-      <div className="w-full items-baseline gap-4 lg:flex lg:items-center">
-        <p className="break-words text-xl lg:mr-4 lg:w-3/4">
-          {name}
-          <p className="break-all text-sm text-gray-700">
-            {description || "-"}
-          </p>
-        </p>
-        <p className="break-all text-sm lg:mr-4 lg:w-3/4">
-          {middleware_address}
-        </p>
+  <div className="flex h-full w-full flex-col rounded border border-gray-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
+    <div className="flex-1">
+      <div className="flex w-full items-center justify-between gap-2">
+        <div className="flex items-center gap-3">
+          <p className="break-words text-xl font-medium">{name}</p>
+          <div className="h-fit rounded-full border-2 border-primary-500 bg-primary-100 px-3 py-[3px]">
+            <p className="text-xs font-bold text-primary-500">
+              {location_type}
+            </p>
+          </div>
+        </div>
+        <ButtonV2
+          variant="secondary"
+          border
+          href={`location/${id}/update`}
+          authorizeFor={NonReadOnlyUsers}
+        >
+          <CareIcon className="care-l-pen text-lg" />
+          Edit
+        </ButtonV2>
       </div>
+      <p className="mt-3 break-all text-sm font-medium text-gray-700">
+        {description || "-"}
+      </p>
+      <p className="mt-3 text-sm font-semibold text-gray-700">
+        Middleware Address:
+      </p>
+      <p className="mt-1 break-all font-mono text-sm font-bold text-gray-700">
+        {middleware_address || "-"}
+      </p>
     </div>
 
-    <div className="mt-4 flex flex-col gap-2 lg:mt-0 lg:flex-row">
-      <ButtonV2
-        variant="secondary"
-        border
-        className="w-full lg:w-auto"
-        href={`location/${id}/update`}
-        authorizeFor={NonReadOnlyUsers}
-      >
-        <CareIcon className="care-l-pen text-lg" />
-        Edit
-      </ButtonV2>
-      <ButtonV2
-        variant="secondary"
-        border
-        className="w-full lg:w-auto"
-        href={`location/${id}/beds`}
-      >
-        <CareIcon className="care-l-bed text-lg" />
-        Manage Beds
-      </ButtonV2>
+    <ButtonV2
+      variant="secondary"
+      border
+      className="mt-3 w-full"
+      href={`location/${id}/beds`}
+    >
+      <CareIcon className="care-l-bed text-lg" />
+      Manage Beds
+    </ButtonV2>
+
+    <div className="mt-3 flex items-center justify-between gap-4 text-sm font-medium text-gray-700">
+      <RecordMeta time={created_date} prefix="Created:" />
+      <RecordMeta time={modified_date} prefix="Modified:" />
     </div>
   </div>
 );
diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
@@ -1,7 +1,7 @@
 import { AssignedToObjectModel, DailyRoundsModel } from "../Patient/models";
 import { ProcedureType } from "../Common/prescription-builder/ProcedureBuilder";
 import { NormalPrescription, PRNPrescription } from "../Medicine/models";
-import { AssetData } from "../Assets/AssetTypes";
+import { AssetData, AssetLocationType } from "../Assets/AssetTypes";
 import { UserBareMinimum } from "../Users/models";
 import { RouteToFacility } from "../Common/RouteToFacilitySelect";
 import { ConsultationDiagnosis, CreateDiagnosis } from "../Diagnosis/types";
@@ -205,9 +205,12 @@ export interface LocationModel {
   name?: string;
   description?: string;
   middleware_address?: string;
+  location_type?: AssetLocationType;
   facility?: {
     name: string;
   };
+  created_date?: string;
+  modified_date?: string;
 }
 
 export interface BedModel {