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}
/>
+
)
}
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={}
- sx={{ maxWidth: '120px', overflow: 'hidden' }}
+ sx={{ maxWidth: '120px', overflow: 'hidden', cursor: 'pointer' }}
+ onClick={e => {
+ e.stopPropagation()
+ onViewNote?.(historyEntry.notes)
+ }}
>
Note