Enhancements to Encounter Discussion/Notes | Fix Translation

src/pages/Encounters/tabs/EncounterNotesTab.tsx

@@ -8,11 +8,13 @@ import {
   Info,
   Loader2,
   MessageCircle,
+  MessageSquare,
   MessageSquarePlus,
   Plus,
   Send,
   Users,
 } from "lucide-react";
+import { Link, usePathParams } from "raviger";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useInView } from "react-intersection-observer";
@@ -52,6 +54,7 @@ import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 import { PaginatedResponse } from "@/Utils/request/types";
+import { relativeTime } from "@/Utils/utils";
 import { EncounterTabProps } from "@/pages/Encounters/EncounterShow";
 import { Message } from "@/types/notes/messages";
 import { Thread } from "@/types/notes/threads";
@@ -118,6 +121,7 @@ const ThreadItem = ({
 // Message item component
 const MessageItem = ({ message }: { message: Message }) => {
   const authUser = useAuthUser();
+  const { facilityId } = usePathParams("/facility/:facilityId/*")!;
   const isCurrentUser = authUser?.external_id === message.created_by.id;
 
   return (
@@ -135,15 +139,19 @@ const MessageItem = ({ message }: { message: Message }) => {
       >
         <TooltipProvider>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <div className="flex">
-                <Avatar
-                  name={message.created_by.username}
-                  imageUrl={message.created_by.profile_picture_url}
-                  className="w-8 h-8 rounded-full object-cover"
-                />
-              </div>
-            </TooltipTrigger>
+            <Link
+              href={`/facility/${facilityId}/users/${message.created_by.username}`}
+            >
+              <TooltipTrigger asChild>
+                <div className="flex pr-2">
+                  <Avatar
+                    name={message.created_by.username}
+                    imageUrl={message.created_by.profile_picture_url}
+                    className="w-8 h-8 rounded-full object-cover ring-1 ring-transparent hover:ring-red-200 transition"
+                  />
+                </div>
+              </TooltipTrigger>
+            </Link>
             <TooltipContent>
               <p>{message.created_by.username}</p>
             </TooltipContent>
@@ -161,15 +169,25 @@ const MessageItem = ({ message }: { message: Message }) => {
           </span>
           <div
             className={cn(
-              "p-3 rounded-lg break-words",
+              "pt-3 px-3 pb-1 rounded-lg break-words",
               isCurrentUser
                 ? "bg-primary-100 text-white rounded-br-none"
                 : "bg-gray-100 rounded-bl-none",
             )}
           >
             {message.message && (
-              <div className="mt-4">
-                <Markdown content={message.message} className="text-sm" />
+              <div className="mt-2">
+                <Markdown content={message.message} className="text-sm mb-2" />
+                <span className="text-xs text-gray-500 flex justify-end">
+                  <Tooltip>
+                    <TooltipTrigger>
+                      {relativeTime(message.created_date)}
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {new Date(message.created_date).toLocaleString()}
+                    </TooltipContent>
+                  </Tooltip>
+                </span>
               </div>
             )}
           </div>
@@ -240,7 +258,7 @@ const NewThreadDialog = ({
 
         <DialogFooter>
           <Button variant="outline" onClick={onClose} disabled={isCreating}>
-            {t("Cancel")}
+            {t("cancel")}
           </Button>
           <Button
             onClick={() => onCreate(title)}
@@ -251,7 +269,7 @@ const NewThreadDialog = ({
             ) : (
               <MessageSquarePlus className="h-4 w-4 mr-2" />
             )}
-            {t("Create")}
+            {t("create")}
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -400,6 +418,12 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
 
   const handleCreateThread = (title: string) => {
     if (title.trim()) {
+      if (
+        threadsData?.results.some((thread) => thread.title === title.trim())
+      ) {
+        toast.error("Thread with this title already exists.");
+        return;
+      }
       createThreadMutation.mutate({
         title: title.trim(),
         encounter: encounter.id,
@@ -535,10 +559,25 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
                       ?.title
                   }
                 </h2>
-                <div className="flex items-center gap-2 text-xs text-gray-500">
-                  <Users className="h-4 w-4" />
-                  <span>{messages.length}</span>
-                </div>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div className="flex items-center gap-2 text-xs text-gray-500 cursor-pointer">
+                      <Users className="h-4 w-4" />
+                      <span>
+                        {new Set(messages.map((m) => m.created_by.id)).size}
+                      </span>
+                      <MessageSquare className="h-4 w-4 ml-3" />
+                      <span>{messages.length}</span>
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>
+                      Participants:{" "}
+                      {new Set(messages.map((m) => m.created_by.id)).size}
+                    </p>
+                    <p>Messages: {messages.length}</p>
+                  </TooltipContent>
+                </Tooltip>
               </div>
             ) : (
               <div className="text-center text-sm font-medium text-gray-500">

src/types/notes/messages.ts

@@ -5,5 +5,6 @@ export interface Message {
   message: string;
   message_history: Record<string, unknown>;
   created_by: UserBase;
+  created_date: Date;
   updated_by: UserBase;
 }