diff --git a/src/views/User/UserActivities.jsx b/src/views/User/UserActivities.jsx index 4aaf136..03b44eb 100644 --- a/src/views/User/UserActivities.jsx +++ b/src/views/User/UserActivities.jsx @@ -368,7 +368,7 @@ const USER_FILTER = (history, userId) => { const UserActivites = () => { const { data: userProfile } = useUserProfile() - const [tabValue, setTabValue] = React.useState(30) + const [tabValue, setTabValue] = React.useState(7) const [selectedHistory, setSelectedHistory] = React.useState([]) const [enrichedHistory, setEnrichedHistory] = React.useState([]) const [selectedChart, setSelectedChart] = React.useState('history') @@ -840,102 +840,53 @@ const UserActivites = () => { - {/* Main Content Area - Mobile: Stack vertically, Desktop: Side by side */} - - {/* Left Side - Timeline with Filters (Mobile: Full width, Desktop: Flexible) */} - - {/* Improved Filter Bar - Now above timeline */} - - - - Filter Activities - + + + Filter Activities + - - {/* User Filter */} - - - Show activities for: - - { + setSelectedUser(selected) + setSelectedHistory( + enrichedHistory.filter(h => USER_FILTER(h, selected)), + ) + }} + renderValue={() => { + if ( + selectedUser === undefined || + selectedUser === 'all' + ) { + return ( @@ -945,262 +896,366 @@ const UserActivites = () => { > All Users - - {circleUsers.map(user => ( - - ))} - - - - {/* Time Period Filter */} - - - Time period: - - { - setTabValue(tabValue) - refetchHistory(tabValue) - }} - value={tabValue} - sx={{ - borderRadius: 8, - backgroundColor: 'background.surface', - border: '1px solid', - borderColor: 'divider', - }} - > - - {[ - { label: '7 Days', value: 7 }, - { label: '30 Days', value: 30 }, - { label: '90 Days', value: 90 }, - { label: 'All Time', value: 365 }, - ].map((tab, index) => ( - - {tab.label} - - ))} - - - - - - + { + circleUsers.find( + user => user.userId === selectedUser, + )?.displayName + } + + ) + }} + > + + {circleUsers.map(user => ( + + ))} + + - {/* Current Filter Summary */} - - - Showing activities for{' '} - - {selectedUser === undefined || selectedUser === 'all' - ? 'All Users' - : circleUsers.find(user => user.userId === selectedUser) - ?.displayName || 'Unknown User'} - {' '} - over the{' '} - - {tabValue === 365 ? 'All Time' : `Last ${tabValue} Days`} + {/* Time Period Filter */} + + + Time period: - - + { + setTabValue(tabValue) + refetchHistory(tabValue) + }} + value={tabValue} + sx={{ + borderRadius: 8, + backgroundColor: 'background.surface', + border: '1px solid', + borderColor: 'divider', + }} + > + + {[ + { label: '7 Days', value: 7 }, + { label: '30 Days', value: 30 }, + { label: '90 Days', value: 90 }, + { label: 'All Time', value: 365 }, + ].map((tab, index) => ( + + {tab.label} + + ))} + + + + + + - - + {/* Current Filter Summary */} + + + Showing activities for{' '} + + {selectedUser === undefined || selectedUser === 'all' + ? 'All Users' + : circleUsers.find(user => user.userId === selectedUser) + ?.displayName || 'Unknown User'} + {' '} + over the{' '} + + {tabValue === 365 ? 'All Time' : `Last ${tabValue} Days`} + + + - {/* Right Sidebar - Charts (Mobile: Full width, Desktop: Fixed width + sticky) */} - 0 || !choresHistory?.length > 0) ? ( + - {/* Charts Container */} - + + + No activities found + + + No activities found for{' '} + + {selectedUser === undefined || selectedUser === 'all' + ? 'All Users' + : circleUsers.find(user => user.userId === selectedUser) + ?.displayName || 'Unknown User'} + {' '} + in the{' '} + + {tabValue === 365 ? 'All Time' : `Last ${tabValue} Days`} + + . + + + Try selecting a different time period or user filter above. + + + + ) : ( + <> + {/* Main Content Area - Mobile: Stack vertically, Desktop: Side by side */} + - - {/* Main Chart */} - + + + + {/* Right Sidebar - Charts (Mobile: Full width, Desktop: Fixed width + sticky) */} + + {/* Charts Container */} + - - {chartData[selectedChart].title} - - - {chartData[selectedChart].description} - - - {renderPieChart( - chartData[selectedChart].data, - 300, // Increased size for better chart container - true, - selectedChart, - )} - - + + {/* Main Chart */} + + + {chartData[selectedChart].title} + + + {chartData[selectedChart].description} + + + {renderPieChart( + chartData[selectedChart].data, + 300, // Increased size for better chart container + true, + selectedChart, + )} + + - + - {/* Chart Selection Grid */} - - - {Object.entries(chartData) - .filter(([key]) => key !== selectedChart) - .map(([key, { data, title }]) => ( - - setSelectedChart(key)} - variant='plain' - sx={{ - cursor: 'pointer', - p: 1, - transition: 'all 0.2s ease-in-out', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - minHeight: 80, - maxWidth: 90, - '&:hover': { - transform: 'scale(1.02)', - boxShadow: 'sm', - }, - }} - > - - {title} - - + + {Object.entries(chartData) + .filter(([key]) => key !== selectedChart) + .map(([key, { data, title }]) => ( + - {renderPieChart(data, 70, false)} - - - - ))} - - - - - - + setSelectedChart(key)} + variant='plain' + sx={{ + cursor: 'pointer', + p: 1, + transition: 'all 0.2s ease-in-out', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + minHeight: 80, + maxWidth: 90, + '&:hover': { + transform: 'scale(1.02)', + boxShadow: 'sm', + }, + }} + > + + {title} + + + {renderPieChart(data, 70, false)} + + + + ))} + + + + + + + + )} ) }