Style: update donor alert heading for consistency

package.json

@@ -29,20 +29,20 @@
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^6.1.10",
     "@mui/material": "^6.1.10",
-    "@mui/x-date-pickers": "^7.23.0",
+    "@mui/x-date-pickers": "^7.23.1",
     "@zl-asica/react": "^0.3.10",
     "dayjs": "^1.11.13",
     "es-toolkit": "^1.29.0",
     "firebase": "^11.0.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router-dom": "^7.0.2",
     "sonner": "^1.7.0",
     "zustand": "^5.0.2"
   },
   "devDependencies": {
-    "@types/react": "^18.3.13",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "@vitest/ui": "^2.1.8",
@@ -54,9 +54,9 @@
     "lint-staged": "^15.2.10",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.17.0",
-    "vite": "^6.0.2",
+    "vite": "^6.0.3",
     "vite-plugin-checker": "^0.8.0",
-    "vite-tsconfig-paths": "^5.1.2",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^2.1.8"
   },
   "engines": {

src/components/Alerts/DonorAlerts.tsx

@@ -57,16 +57,11 @@ const DonorAlerts = () => {
 
   return (
     <Box sx={{ px: 2 }}>
-      <Typography
-        variant='h4'
-        sx={{ mb: 1, ml: 2 }}
-      >
-        Alerts
-      </Typography>
+      <h1 style={{ marginLeft: '20px' }}>Alerts</h1>
       <Typography
         variant='subtitle1'
         color='text.secondary'
-        sx={{ mb: 3, ml: 2 }}
+        sx={{ mb: 2, ml: 2 }}
       >
         Needs recently added by your saved organizations
       </Typography>

src/components/Home/DonorDashboard/index.tsx

@@ -3,16 +3,19 @@ import { useState, useMemo } from 'react';
 
 import OrganizationCard from './OrganizationCard';
 
-import { useOrganizationStore } from '@/stores';
+import { useOrganizationStore, useUserStore } from '@/stores';
 
-import { SearchBar, Filters } from '@/components/common';
+import { SearchBar, Filters, LoadingCircle } from '@/components/common';
 
 const DonorDashboard = () => {
   const [searchQuery, setSearchQuery] = useState('');
   const [needsQuery, setNeedsQuery] = useState('');
   const [descriptionQuery, setDescriptionQuery] = useState('');
   const [locationQuery, setLocationQuery] = useState('');
 
+  const loading = useUserStore((state) => state.loading);
+  if (loading) return <LoadingCircle />;
+
   const organizationProfiles = useOrganizationStore(
     (state) => state.organizationProfiles
   );

src/components/Schedule/index.tsx

@@ -15,18 +15,21 @@ import dayjs from 'dayjs';
 
 import EventsCalendar from './EventsCalendar';
 
+import { useEventStore } from '@/stores';
+
 import {
   generateICSFile,
   generateCombinedICSFile,
 } from '@/utils/generateICSFile';
 
 interface ScheduleBaseProps {
-  events: DonationEvent[];
   title: string;
   description: string;
 }
 
-const ScheduleBase = ({ events, title, description }: ScheduleBaseProps) => {
+const ScheduleBase = ({ title, description }: ScheduleBaseProps) => {
+  const events = useEventStore((store) => store.events);
+
   const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs());
   const [selectedEvent, setSelectedEvent] = useState<DonationEvent | null>(
     null

src/pages/Schedule.tsx

@@ -1,4 +1,4 @@
-import { useUserStore, useEventStore } from '@/stores';
+import { useUserStore } from '@/stores';
 
 import ScheduleBase from '@/components/Schedule';
 
@@ -7,8 +7,6 @@ const DonorSchedule = () => {
 
   if (!user) return null;
 
-  const events = useEventStore((store) => store.events);
-
   const title =
     user.role === 'donor'
       ? 'Your Donation Schedule'
@@ -20,7 +18,6 @@ const DonorSchedule = () => {
 
   return (
     <ScheduleBase
-      events={events}
       title={title}
       description={description}
     />

src/routes.tsx

@@ -9,7 +9,7 @@ import Schedule from '@/pages/Schedule';
 import Saved from '@/pages/Saved';
 import Alerts from '@/pages/Alerts';
 
-import { ProtectedRoute, Layout } from '@/components/common';
+import { ProtectedRoute, Layout, LoadingCircle } from '@/components/common';
 
 const AppRoutes = () => {
   const routeConfig = [
@@ -20,13 +20,16 @@ const AppRoutes = () => {
 
   const loading = useUserStore((state) => state.loading);
   const user = useUserStore((state) => state.user);
+  const fetchProfiles = useOrganizationStore((state) => state.fetchProfiles);
   const subscribeToProfiles = useOrganizationStore(
     (state) => state.subscribeToProfiles
   );
   const error = useOrganizationStore((state) => state.error);
 
   useEffect(() => {
     if (!loading && (!user || user.role !== 'organization')) {
+      fetchProfiles();
+
       const unsubscribe = subscribeToProfiles;
 
       return () => unsubscribe && unsubscribe();
@@ -39,6 +42,8 @@ const AppRoutes = () => {
     }
   }, [error]);
 
+  if (loading) return <LoadingCircle />;
+
   return (
     <Routes>
       <Route