From a8180a04ab9071cd4d2060d7660ba7b12140c2b7 Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Wed, 18 Feb 2026 00:19:33 -0500
Subject: [PATCH] add NoteViewerModal and integrate note viewing functionality
 in HistoryCard

---
 src/views/History/ChoreHistory.jsx | 11 +++++++++++
 src/views/History/HistoryCard.jsx  |  7 ++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/views/History/ChoreHistory.jsx b/src/views/History/ChoreHistory.jsx
index 33d7248..506faf0 100644
--- a/src/views/History/ChoreHistory.jsx
+++ b/src/views/History/ChoreHistory.jsx
@@ -34,6 +34,7 @@ import { ChoreHistoryStatus } from '../../utils/Chores'
 import LoadingComponent from '../components/Loading'
 import EditHistoryModal from '../Modals/EditHistoryModal'
 import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
+import NoteViewerModal from '../Modals/Inputs/NoteViewerModal'
 import HistoryCard from './HistoryCard'
 
 const ChoreHistory = () => {
@@ -44,6 +45,7 @@ const ChoreHistory = () => {
   const [editHistory, setEditHistory] = useState(null)
   const { confirmModalConfig, showConfirmation } = useConfirmationModal()
   const [showMoreInfoId, setShowMoreInfoId] = useState(null)
+  const [noteViewerConfig, setNoteViewerConfig] = useState({ isOpen: false })
   const { showSuccess, showError } = useNotification()
   // React Query hooks
   const { data: choreHistoryData, isLoading } = useChoreHistory(choreId)
@@ -362,6 +364,14 @@ const ChoreHistory = () => {
                 performers={performers}
                 allHistory={choreHistory}
                 index={index}
+                onViewNote={notes => {
+                  setNoteViewerConfig({
+                    isOpen: true,
+                    title: `Updated at ${moment(historyEntry.updatedAt).format('LLLL')}`,
+                    content: notes,
+                    onClose: () => setNoteViewerConfig({ isOpen: false }),
+                  })
+                }}
                 onToggleActions={() => {
                   const id = historyEntry.id || index
                   if (showMoreInfoId === id) {
@@ -432,6 +442,7 @@ const ChoreHistory = () => {
         historyRecord={editHistory}
       />
       <ConfirmationModal config={confirmModalConfig} />
+      <NoteViewerModal config={noteViewerConfig} />
     </Container>
   )
 }
diff --git a/src/views/History/HistoryCard.jsx b/src/views/History/HistoryCard.jsx
index 8e562d2..a4dbe28 100644
--- a/src/views/History/HistoryCard.jsx
+++ b/src/views/History/HistoryCard.jsx
@@ -91,6 +91,7 @@ const HistoryCard = ({
   historyEntry,
   index,
   onToggleActions,
+  onViewNote,
 }) => {
   const performer = performers.find(p => p.userId === historyEntry.completedBy)
   const assignedTo = performers.find(p => p.userId === historyEntry.assignedTo)
@@ -259,7 +260,11 @@ const HistoryCard = ({
                   variant='plain'
                   color='neutral'
                   startDecorator={<EventNote />}
-                  sx={{ maxWidth: '120px', overflow: 'hidden' }}
+                  sx={{ maxWidth: '120px', overflow: 'hidden', cursor: 'pointer' }}
+                  onClick={e => {
+                    e.stopPropagation()
+                    onViewNote?.(historyEntry.notes)
+                  }}
                 >
                   Note
                 </Chip>