bed management ui enchancement

src/Components/Facility/BedManagement.tsx

@@ -13,6 +13,7 @@ import routes from "../../Redux/api";
 import useQuery from "../../Utils/request/useQuery";
 import useFilters from "../../Common/hooks/useFilters";
 import useAuthUser from "../../Common/hooks/useAuthUser";
+import RecordMeta from "../../CAREUI/display/RecordMeta";
 const Loading = lazy(() => import("../Common/Loading"));
 
 interface BedManagementProps {
@@ -29,6 +30,8 @@ interface BedRowProps {
  triggerRerender: () => void;
  locationId: string;
  isOccupied: boolean;
+ created_date: string;
+ modified_date: string;
 }
 
 const BedRow = (props: BedRowProps) => {
@@ -41,6 +44,8 @@ const BedRow = (props: BedRowProps) => {
  locationId,
  bedType,
  isOccupied,
+ created_date,
+ modified_date,
  } = props;
  const [bedData, setBedData] = useState<{
  show: boolean;
@@ -74,48 +79,44 @@ const BedRow = (props: BedRowProps) => {
  };
 
  return (
- <>
+ <div>
  <BedDeleteDialog
  name={bedData.name}
  show={bedData.show}
  handleCancel={handleDeleteCancel}
  handleOk={handleDeleteConfirm}
  />
- <div
- key={id}
- className="w-full items-center justify-between border-b py-4 lg:flex"
- >
- <div className="mt-2 space-y-2 px-4 lg:w-3/4">
- <div className="flex flex-col sm:flex-row">
+ <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 w-full items-start justify-between gap-2">
+ <div className="flex items-center gap-3">
  <p
  className="inline break-words text-xl capitalize"
  id="view-bed-name"
  >
  {name}
- </p>{" "}
- &nbsp;
- <div id="view-bedbadges">
- {LOCATION_BED_TYPES.find((item) => item.id === bedType) && (
- <p className="mb-1 inline-flex w-fit items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium capitalize leading-5 text-blue-800">
- {LOCATION_BED_TYPES.find(
- (item) => item.id === bedType,
- )?.name?.slice(0, 25) + (bedType.length > 25 ? "..." : "")}
- </p>
- )}
- <p
- className={`${
- isOccupied
- ? "bg-warning-100 text-warning-600"
- : "bg-primary-100 text-primary-600"
- } mb-1 ml-1 inline-flex w-fit items-center rounded-md px-2.5 py-0.5 text-sm font-medium capitalize leading-5`}
- >
- {isOccupied ? "Occupied" : "Vacant"}
- </p>
- </div>
+ </p>
  </div>
- <p className="break-all">{description}</p>
  </div>
- <div className="mt-4 flex flex-col gap-2 lg:mt-0 lg:flex-row">
+ <div id="view-bedbadges">
+ {LOCATION_BED_TYPES.find((item) => item.id === bedType) && (
+ <p className="mb-1 inline-flex w-fit items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium capitalize leading-5 text-blue-800">
+ {LOCATION_BED_TYPES.find(
+ (item) => item.id === bedType,
+ )?.name?.slice(0, 25) + (bedType.length > 25 ? "..." : "")}
+ </p>
+ )}
+ <p
+ className={`${
+ isOccupied
+ ? "bg-warning-100 text-warning-600"
+ : "bg-primary-100 text-primary-600"
+ } mb-1 inline-flex w-fit items-center rounded-md px-2.5 py-0.5 text-sm font-medium capitalize leading-5 min-[400px]:ml-1`}
+ >
+ {isOccupied ? "Occupied" : "Vacant"}
+ </p>
+ </div>
+ <p className="break-all">{description}</p>
+ <div className="mt-4 flex flex-col justify-between gap-2 lg:flex-row">
  <ButtonV2
  id="edit-bed-button"
  href={`/facility/${facilityId}/location/${locationId}/beds/${id}/update`}
@@ -149,8 +150,12 @@ const BedRow = (props: BedRowProps) => {
  Delete
  </ButtonV2>
  </div>
+ <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>
- </>
+ </div>
  );
 };
 
@@ -177,30 +182,36 @@ export const BedManagement = (props: BedManagementProps) => {
  });
 
  if (data?.results.length) {
- BedList = data.results.map((bedItem: BedModel) => (
- <BedRow
- id={bedItem.id ?? ""}
- facilityId={facilityId ?? ""}
- name={bedItem.name ?? ""}
- description={bedItem.description ?? ""}
- bedType={bedItem.bed_type ?? ""}
- triggerRerender={refetch}
- key={locationId ?? ""}
- locationId={locationId ?? ""}
- isOccupied={bedItem.is_occupied ?? false}
- />
- ));
+ BedList = (
+ <div className="my-8 grid gap-3 lg:mx-8 min-[1100px]:grid-cols-2 min-[1560px]:grid-cols-3">
+ {data.results.map((bedItem: BedModel) => (
+ <BedRow
+ id={bedItem.id ?? ""}
+ facilityId={facilityId ?? ""}
+ name={bedItem.name ?? ""}
+ description={bedItem.description ?? ""}
+ bedType={bedItem.bed_type ?? ""}
+ triggerRerender={refetch}
+ key={locationId ?? ""}
+ locationId={locationId ?? ""}
+ isOccupied={bedItem.is_occupied ?? false}
+ created_date={bedItem.created_date ?? ""}
+ modified_date={bedItem.modified_date ?? ""}
+ />
+ ))}
+ </div>
+ );
  } else if (data?.results.length === 0) {
  BedList = (
- <p className="flex w-full justify-center bg-white p-5 text-center text-2xl font-bold text-gray-500">
+ <p className="my-8 flex w-full justify-center bg-white p-5 text-center text-2xl font-bold text-gray-500">
  No beds available in this location
  </p>
  );
  }
 
  bed = (
  <>
- <div className="mt-5 flex grow flex-wrap bg-white p-4">{BedList}</div>
+ {BedList}
  {Boolean(data?.count && data.count > 0) && (
  <div className="mt-4 flex w-full justify-center">
  <Pagination totalCount={data?.count ?? 0} />