From 90dc7555654b844a8f411cd4fe979971fae521e4 Mon Sep 17 00:00:00 2001
From: Devdeep Ghosh <63492939+thedevildude@users.noreply.github.com>
Date: Wed, 24 Apr 2024 17:40:24 +0530
Subject: [PATCH] Added Timeline UI for Bed Activity (#6901)

* BedActivityTimeline component added

* In Use indicator added to BedActivityTimeLine

* fixed deepscan failure due to missing key prop

* UI revision | reduced IN USE size | created BedTitleSuffix component

* moved BedActivityTimeline one level up

* Timeline note accepts react node | Bed timeline ui changed

* improved logic for showing asset changes

* moved all input fields to one row

* changed in use badge color

* Introduced i button popover to BedActivityTimeline

* Added Asset diffing function

* minor css change

* added icons for adding and removing asset

* no assets linked text added

* moved input fields back to different lines

* changed in use bed timeline node icon to l-bed

* added missing key props to map objects

* added icon style customizability for Timeline Node

* fixed null value error

* icon color changed for first node

* added divider between form and timeline | moved button to right

* Refactor BedAllocationNode and BedTimelineAsset components

* fixed linting

* fixed linting

* minor fixes based on review

---------

Co-authored-by: rithviknishad <mail@rithviknishad.dev>
---
 src/CAREUI/display/Timeline.tsx               |  16 +-
 .../Consultations/BedActivityTimeline.tsx     | 260 ++++++++++++++++++
 .../Facility/Consultations/Beds.tsx           |  72 +----
 3 files changed, 287 insertions(+), 61 deletions(-)
 create mode 100644 src/Components/Facility/Consultations/BedActivityTimeline.tsx

diff --git a/src/CAREUI/display/Timeline.tsx b/src/CAREUI/display/Timeline.tsx
index b2401630e93..3414a792398 100644
--- a/src/CAREUI/display/Timeline.tsx
+++ b/src/CAREUI/display/Timeline.tsx
@@ -10,7 +10,9 @@ export interface TimelineEvent<TType = string> {
   timestamp: string;
   by: PerformedByModel | undefined;
   icon: IconName;
-  notes?: string;
+  iconStyle?: string;
+  iconWrapperStyle?: string;
+  notes?: string | React.ReactNode;
   cancelled?: boolean;
 }
 
@@ -126,9 +128,17 @@ interface TimelineNodeTitleProps {
 export const TimelineNodeTitle = (props: TimelineNodeTitleProps) => {
   return (
     <>
-      <div className="relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500">
+      <div
+        className={classNames(
+          props.event.iconWrapperStyle,
+          "relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500",
+        )}
+      >
         <CareIcon
-          className="text-base text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white"
+          className={classNames(
+            props.event.iconStyle,
+            "text-base text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white",
+          )}
           aria-hidden="true"
           icon={props.event.icon}
         />
diff --git a/src/Components/Facility/Consultations/BedActivityTimeline.tsx b/src/Components/Facility/Consultations/BedActivityTimeline.tsx
new file mode 100644
index 00000000000..679913e34fd
--- /dev/null
+++ b/src/Components/Facility/Consultations/BedActivityTimeline.tsx
@@ -0,0 +1,260 @@
+import Chip from "../../../CAREUI/display/Chip";
+import Timeline, {
+  TimelineEvent,
+  TimelineNode,
+  TimelineNodeTitle,
+} from "../../../CAREUI/display/Timeline";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
+import { classNames, formatDateTime, relativeTime } from "../../../Utils/utils";
+import { AssetData } from "../../Assets/AssetTypes";
+import { CurrentBed } from "../models";
+import { Popover, Transition } from "@headlessui/react";
+import { Fragment } from "react";
+
+interface AssetDiff {
+  newlyLinkedAssets: AssetData[];
+  existingAssets: AssetData[];
+  unlinkedAssets: AssetData[];
+}
+
+const getAssetDiff = (a: AssetData[], b: AssetData[]): AssetDiff => {
+  const newlyLinkedAssets: AssetData[] = [];
+  const existingAssets: AssetData[] = [];
+  const unlinkedAssets: AssetData[] = [];
+
+  const bMap: Map<string, AssetData> = new Map();
+  b.forEach((asset) => bMap.set(asset.id, asset));
+  a.forEach((asset) => {
+    if (!bMap.has(asset.id)) {
+      unlinkedAssets.push(asset);
+    } else {
+      existingAssets.push(asset);
+    }
+  });
+  b.forEach((asset) => {
+    if (!a.find((aAsset) => aAsset.id === asset.id)) {
+      newlyLinkedAssets.push(asset);
+    }
+  });
+
+  return {
+    newlyLinkedAssets,
+    existingAssets,
+    unlinkedAssets,
+  };
+};
+
+interface Props {
+  consultationBeds: CurrentBed[];
+  loading?: boolean;
+}
+
+export default function BedActivityTimeline({
+  consultationBeds,
+  loading,
+}: Props) {
+  return (
+    <>
+      <Timeline
+        className={classNames(
+          "py-4 md:px-3",
+          loading && "animate-pulse opacity-70",
+        )}
+        name="bed-allocation"
+      >
+        {consultationBeds.map((bed, index) => {
+          return (
+            <BedAllocationNode
+              key={`activity-${bed.id}`}
+              bed={bed}
+              prevBed={consultationBeds[index + 1] ?? undefined}
+              isLastNode={index === consultationBeds.length - 1}
+            />
+          );
+        })}
+      </Timeline>
+    </>
+  );
+}
+
+const BedAllocationNode = ({
+  bed,
+  prevBed,
+  isLastNode,
+}: {
+  bed: CurrentBed;
+  prevBed?: CurrentBed;
+  isLastNode: boolean;
+}) => {
+  const { newlyLinkedAssets, existingAssets, unlinkedAssets } = getAssetDiff(
+    prevBed?.assets_objects ?? [],
+    bed.assets_objects ?? [],
+  );
+  const event: TimelineEvent = {
+    type: "allocated",
+    timestamp: bed.start_date,
+    by: undefined,
+    icon: "l-bed",
+    iconWrapperStyle: bed.end_date === null ? "bg-green-500" : "",
+    iconStyle: bed.end_date === null ? "text-white" : "",
+    notes:
+      newlyLinkedAssets.length === 0 &&
+      existingAssets.length === 0 &&
+      unlinkedAssets.length === 0 ? (
+        ""
+      ) : (
+        <BedTimelineAsset
+          newlyLinkedAssets={newlyLinkedAssets}
+          existingAssets={existingAssets}
+          unlinkedAssets={unlinkedAssets}
+        />
+      ),
+  };
+
+  return (
+    <>
+      <TimelineNode
+        name="bed"
+        event={event}
+        title={
+          <BedTimelineNodeTitle
+            event={event}
+            titleSuffix={<BedTitleSuffix bed={bed} prevBed={prevBed} />}
+            bed={bed}
+          />
+        }
+        isLast={isLastNode}
+      />
+    </>
+  );
+};
+
+const BedTimelineAsset = ({
+  newlyLinkedAssets,
+  existingAssets,
+  unlinkedAssets,
+}: {
+  newlyLinkedAssets: AssetData[];
+  existingAssets: AssetData[];
+  unlinkedAssets: AssetData[];
+}) => {
+  return (
+    <div className="flex flex-col gap-1">
+      <p className="text-md font-semibold">Assets</p>
+      {newlyLinkedAssets.length === 0 &&
+        existingAssets.length === 0 &&
+        unlinkedAssets.length === 0 && (
+          <p className="text-gray-500">No assets linked</p>
+        )}
+      {newlyLinkedAssets.length > 0 &&
+        newlyLinkedAssets.map((newAsset) => (
+          <div key={newAsset.id} className="flex gap-1 text-primary">
+            <CareIcon icon="l-plus-circle" />
+            <span>{newAsset.name}</span>
+          </div>
+        ))}
+      {existingAssets.length > 0 &&
+        existingAssets.map((existingAsset) => (
+          <div key={existingAsset.id} className="flex gap-1">
+            <CareIcon icon="l-check-circle" />
+            <span>{existingAsset.name}</span>
+          </div>
+        ))}
+      {unlinkedAssets.length > 0 &&
+        unlinkedAssets.map((unlinkedAsset) => (
+          <div key={unlinkedAsset.id} className="flex gap-1 text-gray-500">
+            <CareIcon icon="l-minus-circle" />
+            <span className="line-through">{unlinkedAsset.name}</span>
+          </div>
+        ))}
+    </div>
+  );
+};
+
+const BedTimelineNodeTitle = (props: {
+  event: TimelineEvent;
+  titleSuffix: React.ReactNode;
+  bed: CurrentBed;
+}) => {
+  const { event, titleSuffix, bed } = props;
+
+  return (
+    <TimelineNodeTitle event={event}>
+      <div className="flex w-full justify-between gap-2">
+        <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600 md:w-2/3">
+          {titleSuffix}
+        </p>
+        <div className="md:w-fit">
+          <BedActivityIButtonPopover bed={bed} />
+        </div>
+      </div>
+    </TimelineNodeTitle>
+  );
+};
+
+const BedTitleSuffix = ({
+  bed,
+  prevBed,
+}: {
+  bed: CurrentBed;
+  isLastNode?: boolean;
+  prevBed?: CurrentBed;
+}) => {
+  return (
+    <div className="flex flex-col">
+      <div className="flex gap-x-2">
+        <span>{formatDateTime(bed.start_date).split(";")[0]}</span>
+        <span className="text-gray-500">-</span>
+        <span>{formatDateTime(bed.start_date).split(";")[1]}</span>
+      </div>
+      <p>
+        {bed.bed_object.id === prevBed?.bed_object.id
+          ? "Asset changed in" + " "
+          : "Transferred to" + " "}
+        <span className="font-semibold">{`${bed.bed_object.name} (${bed.bed_object.bed_type}) in ${bed.bed_object.location_object?.name}`}</span>
+        {bed.end_date === null && (
+          <Chip
+            text="In Use"
+            startIcon="l-notes"
+            size="small"
+            variant="primary"
+            className="ml-5"
+          />
+        )}
+      </p>
+    </div>
+  );
+};
+
+const BedActivityIButtonPopover = ({
+  bed,
+}: {
+  event?: TimelineEvent;
+  bed?: CurrentBed;
+}) => {
+  return (
+    <Popover className="relative text-sm text-gray-500 md:text-base">
+      <Popover.Button>
+        <CareIcon
+          icon="l-info-circle"
+          className="cursor-pointer text-gray-500 hover:text-gray-600"
+        />
+      </Popover.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel className="absolute z-10 -ml-20 mt-2 w-48 -translate-x-1/2 rounded-lg border border-gray-200 bg-gray-100 p-2 shadow">
+          <p className="text-xs text-gray-600">
+            updated {relativeTime(bed?.start_date)}
+          </p>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+};
diff --git a/src/Components/Facility/Consultations/Beds.tsx b/src/Components/Facility/Consultations/Beds.tsx
index cb43d4655e0..9803be81e76 100644
--- a/src/Components/Facility/Consultations/Beds.tsx
+++ b/src/Components/Facility/Consultations/Beds.tsx
@@ -13,7 +13,6 @@ import CircularProgress from "../../Common/components/CircularProgress.js";
 import { FieldLabel } from "../../Form/FormFields/FormField";
 import Loading from "../../Common/Loading";
 import TextFormField from "../../Form/FormFields/TextFormField";
-import { formatDateTime } from "../../../Utils/utils";
 import dayjs from "../../../Utils/dayjs";
 import { AssetSelect } from "../../Common/AssetSelect.js";
 import DialogModal from "../../Common/Dialog.js";
@@ -24,6 +23,7 @@ import {
   AssetData,
 } from "../../Assets/AssetTypes.js";
 import Chip from "../../../CAREUI/display/Chip.js";
+import BedActivityTimeline from "./BedActivityTimeline";
 
 interface BedsProps {
   facilityId: string;
@@ -192,7 +192,7 @@ const Beds = (props: BedsProps) => {
       )}
       {!discharged ? (
         <form onSubmit={handleSubmit}>
-          <div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
+          <div className="grid grid-cols-1 gap-2">
             <div>
               <FieldLabel id="asset-type">Bed</FieldLabel>
               <BedSelect
@@ -214,6 +214,7 @@ const Beds = (props: BedsProps) => {
               onChange={(e) => setStartDate(e.value)}
               max={dayjs().format("YYYY-MM-DDTHH:mm")}
               error=""
+              errorClassName="hidden"
             />
             <div>
               <FieldLabel id="assets-link-label">Link Assets</FieldLabel>
@@ -229,7 +230,7 @@ const Beds = (props: BedsProps) => {
               />
             </div>
           </div>
-          <div className="mt-4 flex flex-row justify-center">
+          <div className="mt-4 flex flex-row justify-end">
             <div>
               <ButtonV2 variant="primary" type="submit">
                 <CareIcon icon="l-bed" className="text-xl" />
@@ -242,63 +243,18 @@ const Beds = (props: BedsProps) => {
         ""
       )}
       <div>
+        <hr className="mt-4 border-t-2" />
         <h3 className="my-4 text-lg">Previous beds: </h3>
-        <div className="overflow-hidden rounded-xl">
-          <div className="grid grid-cols-4 gap-px">
-            <div className="bg-primary-500 py-2 text-center font-bold text-white">
-              Bed
-            </div>
-            <div className="bg-primary-500 py-2 text-center font-bold text-white">
-              Location
-            </div>
-            <div className="bg-primary-500 py-2 text-center font-bold text-white">
-              Start Date
-            </div>
-            <div className="bg-primary-500 py-2 text-center font-bold text-white">
-              End Date
-            </div>
+        {consultationBeds.length > 0 ? (
+          <BedActivityTimeline
+            consultationBeds={consultationBeds}
+            loading={loading}
+          />
+        ) : (
+          <div className="bg-primary-100 py-2 text-center">
+            No beds allocated yet
           </div>
-          {consultationBeds.length > 0 ? (
-            consultationBeds.map((bed) => (
-              <div className="grid grid-cols-4 gap-px" key={bed?.id}>
-                <div className="break-words bg-primary-100 p-2 text-center">
-                  {bed?.bed_object?.name}
-                  {bed?.assets_objects && bed.assets_objects.length > 0 && (
-                    <span
-                      className={
-                        " ml-2 h-6 cursor-pointer rounded-md bg-primary-500 px-2 text-xs font-semibold text-white"
-                      }
-                      onClick={() => setShowBedDetails(bed)}
-                    >
-                      {bed.assets_objects.length}
-                    </span>
-                  )}
-                </div>
-                <div className="bg-primary-100 py-2 text-center">
-                  {bed?.bed_object?.location_object?.name}
-                </div>
-                <div className="break-words bg-primary-100 p-2 text-center">
-                  {formatDateTime(bed?.start_date)}
-                </div>
-                {bed?.end_date ? (
-                  <div className="break-words bg-primary-100 p-2 text-center">
-                    {formatDateTime(bed?.end_date)}
-                  </div>
-                ) : (
-                  <div className="bg-primary-100 p-2 text-center">
-                    <span className="rounded-full border border-yellow-500 bg-yellow-100 px-1 text-sm text-yellow-500 ">
-                      In Use
-                    </span>
-                  </div>
-                )}
-              </div>
-            ))
-          ) : (
-            <div className="bg-primary-100 py-2 text-center">
-              No beds allocated yet
-            </div>
-          )}
-        </div>
+        )}
       </div>
     </div>
   );