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/service/AlertsProvider.jsx

@@ -0,0 +1,84 @@
+import { Alert, Box } from '@mui/joy'
+import PropTypes from 'prop-types'
+import { createContext, useCallback, useContext, useState } from 'react'
+
+const FADE_DURATION = 400 // ms
+const ALERT_DURATION = 5000 // ms
+
+const AlertsContext = createContext()
+
+// Helper function to create a delay
+const delay = ms => new Promise(res => setTimeout(res, ms))
+
+export const AlertsProvider = ({ children }) => {
+  const [show, setShow] = useState(false)
+  const [visibleAlert, setVisibleAlert] = useState(null)
+
+  const showAlert = useCallback(async alertObj => {
+    setVisibleAlert(alertObj)
+    setShow(false)
+
+    await delay(10)
+
+    setShow(true)
+    await delay(ALERT_DURATION)
+
+    setShow(false)
+    await delay(FADE_DURATION)
+
+    setVisibleAlert(null)
+  }, [])
+
+  const hideAlert = useCallback(() => {
+    setShow(false)
+    // Wait for the fade out transition to complete before unmounting
+    setTimeout(() => {
+      setVisibleAlert(null)
+    }, FADE_DURATION)
+  }, [])
+
+  return (
+    <AlertsContext.Provider value={{ showAlert, hideAlert }}>
+      {children}
+      {visibleAlert && (
+        <Box
+          sx={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            zIndex: 2000,
+            overflow: 'hidden',
+          }}
+        >
+          <Alert
+            variant='soft'
+            color={visibleAlert.color || 'primary'}
+            startDecorator={visibleAlert.icon}
+            onClick={hideAlert}
+            sx={{
+              transition: `transform ${FADE_DURATION}ms ease-in-out, opacity ${FADE_DURATION}ms ease-in-out`,
+              transform: show ? 'translateY(0)' : 'translateY(-100%)',
+              opacity: show ? 1 : 0,
+              pointerEvents: show ? 'auto' : 'none',
+              width: '100%',
+              justifyContent: 'center',
+              alignItems: 'center',
+              padding: '4px',
+              fontSize: '10px',
+              fontWeight: 'md',
+            }}
+          >
+            {visibleAlert.message}
+          </Alert>
+        </Box>
+      )}
+    </AlertsContext.Provider>
+  )
+}
+
+AlertsProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+export const useAlerts = () => useContext(AlertsContext)