feat: Enhance UserPoints component with improved filtering and layout

- Updated UserPoints component to include a more user-friendly filter bar with enhanced styling.
- Added a summary section to display the current filter context.
- Refactored user selection and time period filtering logic for better clarity and performance.
- Improved the layout of points cards and history sections for better visual hierarchy.
- Integrated a bar chart for visual representation of points over time.
- Updated redeem points functionality with better user feedback.

feat: Add keyboard shortcuts in AddTaskModal for improved usability

- Implemented keyboard shortcuts for adding descriptions, subtasks, and due dates.
- Enhanced user experience by providing visual hints for keyboard shortcuts.
- Refactored task creation logic to streamline the process.

fix: Refactor ChoreActionMenu to handle mouse events and improve accessibility

- Added mouse enter and leave event handlers for better interaction feedback.
- Adjusted menu positioning for improved usability.

refactor: Update RichTextEditor to support focus handling from parent components

- Converted RichTextEditor to use forwardRef for better integration with parent components.
- Exposed focus and blur methods for external control.
- Improved image upload handling with better error management.

fix: Adjust SubTask component to handle Enter key behavior correctly

- Modified key event handling to prevent unintended task creation when holding meta or ctrl keys.
- Added autoFocus prop to new task input for better user experience.

src/views/Modals/Inputs/DateModal.jsx

@@ -1,13 +1,6 @@
-import React, { useState } from 'react'
-import {
-  Modal,
-  Button,
-  Input,
-  ModalDialog,
-  ModalClose,
-  Box,
-  Typography,
-} from '@mui/joy'
+import { Box, Button, Input, Typography } from '@mui/joy'
+import { useState } from 'react'
+import FadeModal from '../../../components/common/FadeModal'
 
 function DateModal({ isOpen, onClose, onSave, current, title }) {
   const [date, setDate] = useState(
@@ -20,26 +13,23 @@ function DateModal({ isOpen, onClose, onSave, current, title }) {
   }
 
   return (
-    <Modal open={isOpen} onClose={onClose}>
-      <ModalDialog>
-        {/* <ModalClose /> */}
-        <Typography variant='h4'>{title}</Typography>
-        <Input
-          sx={{ mt: 3 }}
-          type='date'
-          value={date}
-          onChange={e => setDate(e.target.value)}
-        />
-        <Box display={'flex'} justifyContent={'space-around'} mt={1}>
-          <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
-            Save
-          </Button>
-          <Button onClick={onClose} variant='outlined'>
-            Cancel
-          </Button>
-        </Box>
-      </ModalDialog>
-    </Modal>
+    <FadeModal open={isOpen} onClose={onClose}>
+      <Typography variant='h4'>{title}</Typography>
+      <Input
+        sx={{ mt: 3 }}
+        type='date'
+        value={date}
+        onChange={e => setDate(e.target.value)}
+      />
+      <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+        <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
+          Save
+        </Button>
+        <Button onClick={onClose} variant='outlined'>
+          Cancel
+        </Button>
+      </Box>
+    </FadeModal>
   )
 }
 export default DateModal