redesign location card

ohcnetwork · Dec 12, 2023 · 47c1b4b · 47c1b4b
1 parent 05549b5
commit 47c1b4b
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 36 deletions.
diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
@@ -51,10 +51,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 +70,60 @@ 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">
+      <p>
+        <strong>Created:</strong> {created_date?.slice(0, 10)}
+      </p>
+      <p>
+        <strong>Modified:</strong> {modified_date?.slice(0, 10)}
+      </p>
     </div>
   </div>
 );
diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
@@ -204,9 +204,12 @@ export interface LocationModel {
   name?: string;
   description?: string;
   middleware_address?: string;
+  location_type?: string;
   facility?: {
     name: string;
   };
+  created_date?: string;
+  modified_date?: string;
 }
 
 export interface BedModel {