Timeline style view for Daily Rounds

src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import RecordMeta from "../../../../CAREUI/display/RecordMeta";
+// import RecordMeta from "../../../../CAREUI/display/RecordMeta";
 import CareIcon from "../../../../CAREUI/icons/CareIcon";
 import ButtonV2 from "../../../Common/components/ButtonV2";
 import { DailyRoundsModel } from "../../../Patient/models";
@@ -13,24 +13,54 @@ interface Props {
   onUpdateLog?: () => void;
 }
 
-const getName = (item: any) => {
-  return `${item?.first_name} ${item?.last_name} (${item?.user_type})`;
-};
+// const getName = (item: any) => {
+//   return `${item?.first_name} ${item?.last_name} (${item?.user_type})`;
+// };
 
 const DefaultLogUpdateCard = ({ round, ...props }: Props) => {
   const { t } = useTranslation();
-  const telemedicine_doctor_update =
-    round.created_by_telemedicine || round.last_updated_by_telemedicine;
+  // const telemedicine_doctor_update =
+  //   round.created_by_telemedicine || round.last_updated_by_telemedicine;
 
-  const by = props.consultationData.assigned_to_object || round.created_by;
+  // const by = props.consultationData.assigned_to_object || round.created_by;
 
   return (
-    <div
-      className={`flex w-full flex-col gap-4 rounded-lg p-4 shadow @container ${
-        telemedicine_doctor_update ? "bg-purple-200" : "bg-white"
-      }`}
-    >
-      <div className="flex flex-col items-start gap-1">
+    <div className="flex w-full flex-col gap-4 rounded-lg p-2 @container">
+      <LogUpdateCardAttribute
+        attributeKey="patient_category"
+        attributeValue={round.patient_category}
+      />
+      <LogUpdateCardAttribute
+        attributeKey="physical_examination_info"
+        attributeValue={round.physical_examination_info}
+      />
+      <LogUpdateCardAttribute
+        attributeKey="other_details"
+        attributeValue={round.other_details}
+      />
+      <div className="mt-2 flex items-center gap-2">
+        <ButtonV2
+          variant="secondary"
+          border
+          ghost
+          size="small"
+          onClick={props.onViewDetails}
+        >
+          <CareIcon className="care-l-eye text-lg" />
+          <span>{t("view_details")}</span>
+        </ButtonV2>
+        <ButtonV2
+          variant="secondary"
+          border
+          ghost
+          size="small"
+          onClick={props.onUpdateLog}
+        >
+          <CareIcon className="care-l-pen text-lg" />
+          <span>{t("update_log")}</span>
+        </ButtonV2>
+      </div>
+      {/* <div className="flex flex-col items-start gap-1">
         <div className="flex w-min items-center gap-2 rounded-full border bg-gray-50 text-gray-500">
           <div className="rounded-full bg-gray-100 px-1.5 py-0.5">
             <CareIcon className="care-l-user-nurse text-lg" />
@@ -89,7 +119,7 @@ const DefaultLogUpdateCard = ({ round, ...props }: Props) => {
             </ButtonV2>
           )}
         </div>
-      </div>
+      </div> */}
     </div>
   );
 };

src/Components/Facility/Consultations/DailyRounds/VirtualNursingAssistantLogUpdateCard.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
-import RecordMeta from "../../../../CAREUI/display/RecordMeta";
-import CareIcon from "../../../../CAREUI/icons/CareIcon";
+// import RecordMeta from "../../../../CAREUI/display/RecordMeta";
+// import CareIcon from "../../../../CAREUI/icons/CareIcon";
 import { DailyRoundsModel } from "../../../Patient/models";
 import LogUpdateCardAttribute from "./LogUpdateCardAttribute";
 
@@ -67,8 +67,8 @@ const VirtualNursingAssistantLogUpdateCard = (props: Props) => {
   const diffKeys = Object.keys(diff);
 
   return (
-    <div className="flex w-full flex-col gap-4 rounded-lg border border-green-300 bg-white p-4 shadow shadow-primary-500/20">
-      <div className="flex flex-col items-start gap-1">
+    <div className="flex w-full flex-col gap-4 rounded-lg border border-green-300 bg-white p-4 shadow-primary-500/20">
+      {/* <div className="flex flex-col items-start gap-1">
         <div className="flex w-min items-center gap-2 rounded-full border bg-green-50 text-primary-400">
           <div className="rounded-full bg-green-100 px-1.5 py-0.5">
             <CareIcon className="care-l-robot text-lg" />
@@ -80,7 +80,7 @@ const VirtualNursingAssistantLogUpdateCard = (props: Props) => {
         <span className="flex gap-1 text-xs text-gray-700">
           {t("created")} <RecordMeta time={props.round.created_date} />
         </span>
-      </div>
+      </div> */}
       <div className="flex flex-col gap-1">
         {diffKeys.length > 0 ? (
           Object.keys(diff).map((key) => (

src/Components/Facility/Consultations/DailyRoundsList.tsx

@@ -10,6 +10,13 @@ import PageTitle from "../../Common/PageTitle";
 import DailyRoundsFilter from "./DailyRoundsFilter";
 import { ConsultationModel } from "../models";
 import { useSlugs } from "../../../Common/hooks/useSlug";
+import Timeline, {
+  TimelineNode,
+  // TimelineNodeNotes,
+} from "../../../CAREUI/display/Timeline";
+// import CareIcon from "../../../CAREUI/icons/CareIcon";
+// import ButtonV2 from "../../Common/components/ButtonV2";
+// import LogUpdateCardAttribute from "./DailyRounds/LogUpdateCardAttribute";
 
 interface Props {
   consultation: ConsultationModel;
@@ -51,32 +58,108 @@ export default function DailyRoundsList({ consultation }: Props) {
                   ))}
                 </>
               </PaginatedList.WhenLoading>
-              <PaginatedList.Items<DailyRoundsModel> className="flex grow flex-col gap-3">
-                {(item, items) => {
-                  if (item.rounds_type === "AUTOMATED") {
-                    return (
-                      <VirtualNursingAssistantLogUpdateCard
-                        round={item}
-                        previousRound={items[items.indexOf(item) + 1]}
-                      />
-                    );
-                  }
+              <Timeline
+                className="rounded-lg bg-white py-4 shadow"
+                name="log update"
+              >
+                <PaginatedList.Items<DailyRoundsModel> className="flex grow flex-col gap-3">
+                  {(item, items) => {
+                    if (item.rounds_type === "AUTOMATED") {
+                      return (
+                        <TimelineNode
+                          event={{
+                            type: "created",
+                            timestamp: item.created_date?.toString() ?? "",
+                            by: {
+                              // ...item.created_by,
+                              user_type: item.created_by?.user_type ?? "",
+                              first_name: "Virtual",
+                              last_name: "Assistant",
+                              username: "",
+                              id: "",
+                              email: "",
+                              last_login: "",
+                            },
+                            icon: "l-history",
+                          }}
+                          isLast={false}
+                        >
+                          <VirtualNursingAssistantLogUpdateCard
+                            round={item}
+                            previousRound={items[items.indexOf(item) + 1]}
+                          />
+                        </TimelineNode>
+                      );
+                    }
 
-                  const itemUrl =
-                    item.rounds_type === "NORMAL"
-                      ? `${consultationUrl}/daily-rounds/${item.id}`
-                      : `${consultationUrl}/daily_rounds/${item.id}`;
+                    const itemUrl =
+                      item.rounds_type === "NORMAL"
+                        ? `${consultationUrl}/daily-rounds/${item.id}`
+                        : `${consultationUrl}/daily_rounds/${item.id}`;
 
-                  return (
-                    <DefaultLogUpdateCard
-                      round={item}
-                      consultationData={consultation}
-                      onViewDetails={() => navigate(itemUrl)}
-                      onUpdateLog={() => navigate(`${itemUrl}/update`)}
-                    />
-                  );
-                }}
-              </PaginatedList.Items>
+                    return (
+                      <TimelineNode
+                        event={{
+                          type: "created",
+                          timestamp: item.created_date?.toString() ?? "",
+                          by: {
+                            // ...item.created_by,
+                            user_type: item.created_by?.user_type ?? "",
+                            first_name: item.created_by?.first_name ?? "",
+                            last_name: item.created_by?.last_name ?? "",
+                            username: "",
+                            id: "",
+                            email: "",
+                            last_login: "",
+                          },
+                          icon: "l-history",
+                        }}
+                        isLast={items.indexOf(item) == items.length - 1}
+                      >
+                        {/* <LogUpdateCardAttribute
+                          attributeKey="patient_category"
+                          attributeValue={item.patient_category}
+                        />
+                        <LogUpdateCardAttribute
+                          attributeKey="physical_examination_info"
+                          attributeValue={item.physical_examination_info}
+                        />
+                        <LogUpdateCardAttribute
+                          attributeKey="other_details"
+                          attributeValue={item.other_details}
+                        />
+                        <div className="mt-2 flex items-center gap-2">
+                          <ButtonV2
+                            variant="secondary"
+                            border
+                            ghost
+                            onClick={() => navigate(itemUrl)}
+                          >
+                            <CareIcon className="care-l-eye text-lg" />
+                            <span>{t("view_details")}</span>
+                          </ButtonV2>
+                          <ButtonV2
+                            variant="secondary"
+                            border
+                            ghost
+                            className="tooltip"
+                            onClick={() => navigate(`${itemUrl}/update`)}
+                          >
+                            <CareIcon className="care-l-pen text-lg" />
+                            <span>{t("update_log")}</span>
+                          </ButtonV2>
+                        </div> */}
+                        <DefaultLogUpdateCard
+                          round={item}
+                          consultationData={consultation}
+                          onViewDetails={() => navigate(itemUrl)}
+                          onUpdateLog={() => navigate(`${itemUrl}/update`)}
+                        />
+                      </TimelineNode>
+                    );
+                  }}
+                </PaginatedList.Items>
+              </Timeline>
               <div className="flex w-full items-center justify-center">
                 <PaginatedList.Paginator hideIfSinglePage />
               </div>