feat: update user activity filters to allow selection of last 7 days and improve UI layout

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,18 +840,8 @@ const UserActivites = () => {
           </Typography>
         </Stack>
       </Box>
-      {/* Main Content Area - Mobile: Stack vertically, Desktop: Side by side */}
+
-      <Box
+      {/* Filter Controls - Always visible */}
-        sx={{
-          display: 'flex',
-          flexDirection: { xs: 'column', lg: 'row' },
-          gap: 3,
-          alignItems: 'flex-start',
-        }}
-      >
-        {/* Left Side - Timeline with Filters (Mobile: Full width, Desktop: Flexible) */}
-        <Box sx={{ flex: 1, minWidth: 0, width: '100%' }}>
-          {/* Improved Filter Bar - Now above timeline */}
       <Card
         variant='outlined'
         sx={{
@@ -1057,6 +1047,69 @@ const UserActivites = () => {
         </Typography>
       </Box>
 
+      {/* Conditional Content Based on Data Availability */}
+      {(!choresData.res?.length > 0 || !choresHistory?.length > 0) ? (
+        <Container
+          maxWidth='md'
+          sx={{
+            textAlign: 'center',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            height: '50vh',
+          }}
+        >
+          <EventBusy
+            sx={{
+              fontSize: '6rem',
+              mb: 1,
+            }}
+          />
+
+          <Typography level='h3' gutterBottom>
+            No activities found
+          </Typography>
+          <Typography level='body1' sx={{ mb: 1 }}>
+            No activities found for{' '}
+            <Typography
+              component='span'
+              sx={{ fontWeight: 600, color: 'primary.500' }}
+            >
+              {selectedUser === undefined || selectedUser === 'all'
+                ? 'All Users'
+                : circleUsers.find(user => user.userId === selectedUser)
+                    ?.displayName || 'Unknown User'}
+            </Typography>{' '}
+            in the{' '}
+            <Typography
+              component='span'
+              sx={{ fontWeight: 600, color: 'primary.500' }}
+            >
+              {tabValue === 365 ? 'All Time' : `Last ${tabValue} Days`}
+            </Typography>
+            .
+          </Typography>
+          <Typography level='body-sm' sx={{ color: 'text.secondary', mb: 2 }}>
+            Try selecting a different time period or user filter above.
+          </Typography>
+          <Button variant='soft' sx={{ mt: 2 }}>
+            <Link to='/chores'>Go back to chores</Link>
+          </Button>
+        </Container>
+      ) : (
+        <>
+          {/* Main Content Area - Mobile: Stack vertically, Desktop: Side by side */}
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: { xs: 'column', lg: 'row' },
+              gap: 3,
+              alignItems: 'flex-start',
+            }}
+          >
+            {/* Left Side - Timeline (Mobile: Full width, Desktop: Flexible) */}
+            <Box sx={{ flex: 1, minWidth: 0, width: '100%' }}>
               <ChoreHistoryTimeline history={selectedHistory} />
             </Box>
 
@@ -1201,6 +1254,8 @@ const UserActivites = () => {
               </Card>
             </Box>
           </Box>
+        </>
+      )}
     </Container>
   )
 }