fix: Events(Beta) improvement

src/CAREUI/display/Timeline.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext } from "react";
+import { useTranslation } from "react-i18next";
 import { PerformedByModel } from "../../Components/HCX/misc";
 import { classNames, formatName } from "../../Utils/utils";
 import CareIcon, { IconName } from "../icons/CareIcon";
@@ -49,6 +50,7 @@ interface TimelineNodeProps {
 
 export const TimelineNode = (props: TimelineNodeProps) => {
   const name = useContext(TimelineContext);
+  const { t } = useTranslation();
 
   return (
     <li className="relative flex gap-x-4">
@@ -80,9 +82,12 @@ export const TimelineNode = (props: TimelineNodeProps) => {
                   <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600 md:w-2/3">
                     {props.event.by && (
                       <span className="font-medium text-gray-900">
-                        {formatName(props.event.by)}{" "}
-                        {props.event.by.user_type &&
-                          `(${props.event.by.user_type}) `}
+                        {props.event.by.username.startsWith("asset")
+                          ? t("virtual_nursing_assistant")
+                          : `${formatName(props.event.by)} ${
+                              props.event.by.user_type &&
+                              `(${props.event.by.user_type})`
+                            }`}{" "}
                       </span>
                     )}
                     {props.titleSuffix

src/Components/Facility/ConsultationDetails/Events/EventsList.tsx

@@ -1,12 +1,12 @@
 import { useTranslation } from "react-i18next";
-import { useSlugs } from "../../../../Common/hooks/useSlug";
+import { TimelineNode } from "../../../../CAREUI/display/Timeline";
 import PaginatedList from "../../../../CAREUI/misc/PaginatedList";
+import { useSlugs } from "../../../../Common/hooks/useSlug";
 import routes from "../../../../Redux/api";
-import { TimelineNode } from "../../../../CAREUI/display/Timeline";
 import LoadingLogUpdateCard from "../../Consultations/DailyRounds/LoadingCard";
 import GenericEvent from "./GenericEvent";
-import { EventGeneric } from "./types";
 import { getEventIcon } from "./iconMap";
+import { EventGeneric } from "./types";
 
 export default function EventsList() {
   const [consultationId] = useSlugs("consultation");
@@ -47,14 +47,28 @@ export default function EventsList() {
                     isLast={items.indexOf(item) == items.length - 1}
                   >
                     {(() => {
+                      const values = Object.entries(item.value).filter(
+                        ([_, value]) => value !== null && value !== undefined
+                      );
+
+                      if (values.length === 0) {
+                        return (
+                          <div className="flex w-full flex-col items-center gap-2 md:flex-row">
+                            <span className="text-xs uppercase text-gray-700">
+                              {t("no_changes")}
+                            </span>
+                          </div>
+                        );
+                      }
+
                       switch (item.event_type.name) {
                         case "INTERNAL_TRANSFER":
                         case "CLINICAL":
                         case "DIAGNOSIS":
                         case "ENCOUNTER_SUMMARY":
                         case "HEALTH":
                         default:
-                          return <GenericEvent event={item} />;
+                          return <GenericEvent values={values} />;
                       }
                     })()}
                   </TimelineNode>

src/Components/Facility/ConsultationDetails/Events/GenericEvent.tsx

@@ -1,8 +1,6 @@
 import type { ReactNode } from "react";
-import { EventGeneric } from "./types";
-
 interface IProps {
-  event: EventGeneric;
+  values: Record<string, any>;
 }
 
 /**
@@ -72,10 +70,11 @@ const formatValue = (value: unknown, key?: string): ReactNode => {
   return JSON.stringify(value);
 };
 
-export default function GenericEvent({ event }: IProps) {
+export default function GenericEvent({ values }: IProps) {
+  console.log("value", values);
   return (
     <div className="flex w-full flex-col gap-4 rounded-lg border border-gray-400 p-4 @container">
-      {Object.entries(event.value).map(([key, value]) => (
+      {values.map(([key, value]: [string, any]) => (
         <div className="flex w-full flex-col items-center gap-2 md:flex-row">
           <span className="text-xs uppercase text-gray-700">
             {key.replace(/_/g, " ")}

src/Locale/en/Consultation.json

@@ -33,5 +33,6 @@
   "select_groups": "Select Groups",
   "generate_report": "Generate Report",
   "prev_sessions": "Prev Sessions",
-  "next_sessions": "Next Sessions"
+  "next_sessions": "Next Sessions",
+  "no_changes": "No changes"
 }