diff --git a/src/views/User/UserActivities.jsx b/src/views/User/UserActivities.jsx
index fa12fcf..08678eb 100644
--- a/src/views/User/UserActivities.jsx
+++ b/src/views/User/UserActivities.jsx
@@ -4,6 +4,7 @@ import {
AccessTime,
Check,
EventBusy,
+ EventNote,
Group,
HourglassEmpty,
Redo,
@@ -34,6 +35,7 @@ import {
import React, { useEffect, useState } from 'react'
import { useChores, useChoresHistory } from '../../queries/ChoreQueries'
+import NoteViewerModal from '../Modals/Inputs/NoteViewerModal'
import { useCircleMembers, useUserProfile } from '../../queries/UserQueries.jsx'
import { ChoresGrouper } from '../../utils/Chores'
import { COLORS, TASK_COLOR } from '../../utils/Colors.jsx'
@@ -55,7 +57,7 @@ const groupByDate = history => {
return aggregated
}
-const ChoreHistoryItem = ({ time, name, points, status, performer }) => {
+const ChoreHistoryItem = ({ time, name, points, status, performer, notes, onViewNote }) => {
const getStatusIcon = status => {
switch (status) {
case 0:
@@ -120,12 +122,27 @@ const ChoreHistoryItem = ({ time, name, points, status, performer }) => {
{`${points} points`}
)}
+ {notes && (
+ }
+ sx={{ cursor: 'pointer' }}
+ onClick={e => {
+ e.stopPropagation()
+ onViewNote?.(notes)
+ }}
+ >
+ Note
+
+ )}
)
}
-const ChoreHistoryTimeline = ({ history }) => {
+const ChoreHistoryTimeline = ({ history, onViewNote }) => {
const groupedHistory = groupByDate(history)
const sortedEntries = Object.entries(groupedHistory).sort(
@@ -166,6 +183,8 @@ const ChoreHistoryTimeline = ({ history }) => {
name={record.choreName}
points={record.points}
status={record.status}
+ notes={record.notes}
+ onViewNote={onViewNote}
/>
>
))}
@@ -385,6 +404,7 @@ const UserActivites = () => {
const [selectedHistory, setSelectedHistory] = React.useState([])
const [enrichedHistory, setEnrichedHistory] = React.useState([])
const [selectedChart, setSelectedChart] = React.useState('history')
+ const [noteViewerConfig, setNoteViewerConfig] = useState({ isOpen: false })
const [historyPieChartData, setHistoryPieChartData] = React.useState([])
const [choreDuePieChartData, setChoreDuePieChartData] = React.useState([])
@@ -1085,7 +1105,17 @@ const UserActivites = () => {
>
{/* Left Side - Timeline (Mobile: Full width, Desktop: Flexible) */}
-
+ {
+ setNoteViewerConfig({
+ isOpen: true,
+ title: 'Note',
+ content: notes,
+ onClose: () => setNoteViewerConfig({ isOpen: false }),
+ })
+ }}
+ />
{/* Right Sidebar - Charts (Mobile: Full width, Desktop: Fixed width + sticky) */}
@@ -1235,6 +1265,7 @@ const UserActivites = () => {
>
)}
+
)
}