feat: enhance Sidepanel with chore history integration and improve Calendar styles

src/views/Chores/Sidepanel.jsx

@@ -1,13 +1,20 @@
 import { Box, Sheet } from '@mui/joy'
 import { useMediaQuery } from '@mui/material'
 import { useEffect, useState } from 'react'
+import { useChoresHistory } from '../../queries/ChoreQueries'
 import { ChoresGrouper } from '../../utils/Chores'
 import CalendarView from '../components/CalendarView'
+import ActivitiesCard from './ActivitesCard'
 import WelcomeCard from './WelcomeCard'
 
 const Sidepanel = ({ chores }) => {
   const isLargeScreen = useMediaQuery(theme => theme.breakpoints.up('md'))
   const [dueDatePieChartData, setDueDatePieChartData] = useState([])
+  const {
+    data: choresHistory,
+    isChoresHistoryLoading,
+    handleLimitChange: refetchHistory,
+  } = useChoresHistory(7, true)
 
   useEffect(() => {
     setDueDatePieChartData(generateChoreDuePieChartData(chores))
@@ -33,6 +40,7 @@ const Sidepanel = ({ chores }) => {
   return (
     <Box>
       <WelcomeCard chores={chores} />
+      <ActivitiesCard chores={chores} choreHistory={choresHistory} />
       <Sheet
         variant='plain'
         sx={{
@@ -45,7 +53,7 @@ const Sidepanel = ({ chores }) => {
           boxShadow: 'sm',
           borderRadius: 20,
           height: '80vh',
-          width: '290px',
+          width: '315px',
         }}
       >
         <Box sx={{ width: '100%' }}>

src/views/Chores/WelcomeCard.jsx

@@ -1,3 +1,4 @@
+import { Person } from '@mui/icons-material'
 import { Avatar, Box, Button, Sheet, Typography } from '@mui/joy'
 
 import { useContext, useEffect, useState } from 'react'
@@ -5,18 +6,14 @@ import { useImpersonateUser } from '../../contexts/ImpersonateUserContext'
 import { UserContext } from '../../contexts/UserContext'
 import { useCircleMembers } from '../../queries/UserQueries'
 import UserModal from '../Modals/Inputs/UserModal'
-const WelcomeCard = chores => {
+const WelcomeCard = () => {
   const { impersonatedUser, setImpersonatedUser } = useImpersonateUser()
   const [isAdmin, setIsAdmin] = useState(false)
   const { userProfile } = useContext(UserContext)
   const [isModalOpen, setIsModalOpen] = useState(false)
-  const [summarytext, setSummaryText] = useState('')
 
-  const {
-    data: circleMembersData,
-    isLoading: isCircleMembersLoading,
-    handleRefetch: handleCircleMembersRefetch,
-  } = useCircleMembers()
+  const { data: circleMembersData, isLoading: isCircleMembersLoading } =
+    useCircleMembers()
 
   useEffect(() => {
     if (userProfile && userProfile?.id) {
@@ -50,14 +47,28 @@ const WelcomeCard = chores => {
           justifyContent: 'space-between',
           boxShadow: 'sm',
           borderRadius: 20,
-          width: '290px',
+          width: '315px',
           mb: 1,
         }}
       >
         <Box sx={{ textAlign: 'center', width: '100%' }}>
+          {/* Header */}
+          <Box sx={{ mb: 2 }}>
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                gap: 1,
+              }}
+            >
+              <Person color='primary' />
+              <Typography level='title-md'>Current User</Typography>
+            </Box>
+          </Box>
           <Box sx={{ mb: 2 }}>
             <Typography level='title-md' sx={{ mb: 0.5 }}>
-              Who's checking in?
+              Who&apos;s checking in?
             </Typography>
           </Box>
           <Button
@@ -106,6 +117,21 @@ const WelcomeCard = chores => {
           mb: 2,
         }}
       >
+        {/* Header */}
+        <Box sx={{ mb: 2, width: '100%' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-start',
+              gap: 1,
+            }}
+          >
+            <Person color='primary' />
+            <Typography level='title-md'>Current User</Typography>
+          </Box>
+        </Box>
+
         <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
           <Box sx={{ mr: 2 }}>
             <Avatar

src/views/components/Calendar.css

@@ -11,6 +11,8 @@
   text-decoration: none;
   font-weight: 500;
   padding: 0.5em;
+  color: #666;
+  font-size: 0.875rem;
 }
 
 .react-calendar__month-view__weekdays__weekday abbr {
@@ -19,31 +21,67 @@
   cursor: default;
 }
 
+/* reduce the naivation bar height */
+.react-calendar__navigation {
+  height: 30px;
+  margin-bottom: 10px;
+}
+
 .react-calendar__tile {
   padding: 10px;
   max-height: 40px;
   min-width: 40px;
   text-align: center;
-  border-radius: 50px;
-  transition: background-color 0.3s ease;
+  border-radius: 50%;
+  transition: all 0.2s ease-in-out;
+  position: relative;
+  font-size: 0.875rem;
 }
 
 .react-calendar__tile:enabled:hover {
-  background-color: #cbcbcb;
+  background-color: rgba(8, 114, 221, 0.08);
+  color: #0872dd;
 }
 
+/* Active/Selected date */
 .react-calendar__tile--active {
-  border: 1px dotted #4ec1a2e3 !important;
-  /* background-color: inherit; */
+  background-color: #0872dd !important;
+  color: white !important;
+  border: none !important;
+  box-shadow: 0 2px 4px rgba(8, 114, 221, 0.2);
 }
 
+.react-calendar__tile--active:hover {
+  background-color: #0766c7 !important;
+}
+
+/* Today's date */
 .react-calendar__tile--now {
-  background-color: #007bff !important;
-  border-radius: 50px;
+  background-color: transparent !important;
+  border: 1.5px solid #0872dd !important;
+  color: #0872dd !important;
+  font-weight: 500;
 }
 
 .react-calendar__tile--now:enabled:hover {
-  background-color: rgba(0, 123, 255, 0.1);
+  background-color: rgba(8, 114, 221, 0.08) !important;
+}
+
+/* Disabled dates */
+.react-calendar__tile:disabled {
+  color: #cbd5e1;
+  cursor: not-allowed;
+  background: transparent;
+}
+
+/* Weekend dates */
+.react-calendar__month-view__days__day--weekend {
+  color: #64748b;
+}
+
+/* Neighboring month dates */
+.react-calendar__month-view__days__day--neighboringMonth {
+  color: #94a3b8;
 }
 
 .dot-container {
@@ -90,7 +128,3 @@
     opacity 0.2s ease,
     visibility 0.2s ease;
 }
-
-.react-calendar__month-view__days__day--weekend {
-  color: inherit;
-}

src/views/components/CalendarView.jsx

@@ -1,3 +1,4 @@
+import { CalendarMonth } from '@mui/icons-material'
 import { Box, Card, CardContent, Chip, Grid, Typography } from '@mui/joy'
 import moment from 'moment'
 import React, { useState } from 'react'
@@ -81,15 +82,30 @@ const CalendarView = ({ chores }) => {
         justifyContent: 'center',
       }}
     >
+      {/* Calendar Header */}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          gap: 1,
+          width: '100%',
+          mb: 2,
+        }}
+      >
+        <CalendarMonth color='primary' />
+        <Typography level='title-md'>Calendar Overview</Typography>
+      </Box>
+
       <Calendar
         tileContent={tileContent}
         onChange={d => {
           setSeletedDate(new Date(d))
         }}
         // format the days from MON, TUE, WED, THU, FRI, SAT, SUN to first three letters:
-        // formatShortWeekday={(locale, date) =>
-        //   ['S', 'M', 'T', 'W', 'T', 'F', 'S'][date.getDay()]
-        // }
+        formatShortWeekday={(locale, date) =>
+          ['S', 'M', 'T', 'W', 'T', 'F', 'S'][date.getDay()]
+        }
       />
       {!selectedDate && (
         <Grid container ml={-3} mt={1}>