added loading/error states to admin directory, updated rejection screen

Author: YashK2005

backend/migrations/versions/8d2cd99b9eb8_add_rejected_enum_value_to_user_model.py

@@ -1,7 +1,7 @@
 """add rejected enum value to User model
 
 Revision ID: 8d2cd99b9eb8
-Revises: b56e0bf600a2
+Revises: 9f1a6d727929
 Create Date: 2025-10-30 19:50:23.495788
 
 """
@@ -12,7 +12,7 @@
 
 # revision identifiers, used by Alembic.
 revision: str = "8d2cd99b9eb8"
-down_revision: Union[str, None] = "b56e0bf600a2"
+down_revision: Union[str, None] = "9f1a6d727929"
 branch_labels: Union[str, Sequence[str], None] = None
 depends_on: Union[str, Sequence[str], None] = None
 

frontend/src/components/admin/DirectoryDataProvider.tsx

@@ -15,10 +15,21 @@ export function DirectoryDataProvider({ children }: DirectoryDataProviderProps)
   useEffect(() => {
     const fetchUsers = async () => {
       try {
+        setLoading(true);
+        setError(null);
         const response = await baseAPIClient.get('/users');
-        setUsers(response.data.users || response.data);
+        const usersData = response.data?.users || response.data || [];
+        setUsers(Array.isArray(usersData) ? usersData : []);
       } catch (err) {
-        setError(err as Error);
+        const error =
+          err instanceof Error
+            ? err
+            : new Error(
+                typeof err === 'object' && err !== null && 'message' in err
+                  ? String(err.message)
+                  : 'Failed to fetch users. Please try again.',
+              );
+        setError(error);
         console.error('Failed to fetch users:', err);
       } finally {
         setLoading(false);

frontend/src/components/intake/rejection-screen.tsx

@@ -1,6 +1,10 @@
-import React from 'react';
-import { Box, Text, VStack } from '@chakra-ui/react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Box, Link, Text, VStack } from '@chakra-ui/react';
 import { COLORS } from '@/constants/form';
+import type { AuthenticatedUser, UserRole } from '@/types/authTypes';
+import { UserRole as UserRoleEnum } from '@/types/authTypes';
+import { getCurrentUser, syncCurrentUser } from '@/APIClients/authAPIClient';
+import { roleIdToUserRole } from '@/utils/roleUtils';
 
 // X mark icon component
 const XMarkIcon: React.FC = () => (
@@ -28,6 +32,53 @@ const XMarkIcon: React.FC = () => (
 );
 
 export function RejectionScreen() {
+  const [userRole, setUserRole] = useState<UserRole | null>(null);
+
+  useEffect(() => {
+    const resolveRole = (user: AuthenticatedUser): UserRole | null => {
+      if (!user) return null;
+      if ('role' in user && user.role) {
+        return user.role as UserRole;
+      }
+      const roleId = user.user?.roleId ?? (user.roleId as unknown as number | undefined) ?? null;
+      return roleIdToUserRole(roleId);
+    };
+
+    const hydrateRole = async () => {
+      const localUser = getCurrentUser();
+      let resolved = resolveRole(localUser);
+      if (!resolved) {
+        const synced = await syncCurrentUser();
+        resolved = resolveRole(synced);
+      }
+      setUserRole(resolved ?? UserRoleEnum.PARTICIPANT);
+    };
+
+    void hydrateRole();
+  }, []);
+
+  const content = useMemo(() => {
+    if (userRole === UserRoleEnum.VOLUNTEER) {
+      return {
+        title: "You're unable to continue this application.",
+        body: [
+          'Thank you for your interest in becoming a peer support volunteer.',
+          'You must meet all of the eligibility criteria to continue.',
+          'Please reach out to [email protected] for more information about volunteering with LLSC.',
+        ],
+      };
+    }
+
+    return {
+      title: "You're unable to continue this application.",
+      body: [
+        'Thank you for your interest in First Connections.',
+        'To continue as a participant you must meet each of the eligibility requirements.',
+        'Please reach out to [email protected] if you have questions or need help finding other support options.',
+      ],
+    };
+  }, [userRole]);
+
   return (
     <Box minH="100vh" bg="white" display="flex" alignItems="center" justifyContent="center" py={12}>
       <VStack gap={6}>
@@ -40,23 +91,50 @@ export function RejectionScreen() {
           color={COLORS.veniceBlue}
           mb={2}
         >
-          Your request has been declined.
+          {content.title}
         </Text>
 
-        <Text
-          fontFamily="system-ui, -apple-system, sans-serif"
-          fontSize="18px"
-          color={COLORS.fieldGray}
-          lineHeight="1.6"
-          maxW="600px"
-          textAlign="center"
-        >
-          For any inquiries, please reach us at{' '}
-          <Text as="span" color={COLORS.teal} fontWeight={500}>
-            [email protected]
-          </Text>
-          .
-        </Text>
+        <VStack gap={1} maxW="640px">
+          {content.body.map((sentence, index) => {
+            const EMAIL_TOKEN = '[email protected]';
+            const hasEmail = sentence.includes(EMAIL_TOKEN);
+            let prefix = '';
+            let suffix = '';
+            if (hasEmail) {
+              const parts = sentence.split(EMAIL_TOKEN);
+              prefix = parts[0] ?? '';
+              suffix = parts[1] ?? '';
+            }
+
+            return (
+              <Text
+                key={`${sentence}-${index}`}
+                fontFamily="system-ui, -apple-system, sans-serif"
+              fontSize="18px"
+              color={COLORS.fieldGray}
+              lineHeight="1.6"
+              textAlign="center"
+            >
+                {hasEmail ? (
+                  <>
+                    {prefix}
+                    <Link
+                      href="mailto:[email protected]"
+                      color={COLORS.teal}
+                      textDecoration="underline"
+                      fontWeight={600}
+                    >
+                      [email protected]
+                    </Link>
+                    {suffix}
+                  </>
+                ) : (
+                  sentence
+                )}
+            </Text>
+            );
+          })}
+        </VStack>
       </VStack>
     </Box>
   );

frontend/src/constants/formStatusRoutes.ts

@@ -10,6 +10,7 @@ export const PARTICIPANT_STATUS_ROUTES: StatusRouteMap = {
   [FormStatus.SECONDARY_APPLICATION_TODO]: '/participant/ranking',
   [FormStatus.SECONDARY_APPLICATION_SUBMITTED]: '/participant/ranking/thank-you',
   [FormStatus.COMPLETED]: '/participant/dashboard',
+  [FormStatus.REJECTED]: '/rejection',
 };
 
 export const VOLUNTEER_STATUS_ROUTES: StatusRouteMap = {
@@ -20,6 +21,7 @@ export const VOLUNTEER_STATUS_ROUTES: StatusRouteMap = {
   [FormStatus.SECONDARY_APPLICATION_TODO]: '/volunteer/secondary-application',
   [FormStatus.SECONDARY_APPLICATION_SUBMITTED]: '/volunteer/secondary-application/thank-you',
   [FormStatus.COMPLETED]: '/volunteer/dashboard',
+  [FormStatus.REJECTED]: '/rejection',
 };
 
 export const ADMIN_STATUS_ROUTES: StatusRouteMap = {
@@ -30,6 +32,7 @@ export const ADMIN_STATUS_ROUTES: StatusRouteMap = {
   [FormStatus.SECONDARY_APPLICATION_TODO]: '/admin',
   [FormStatus.SECONDARY_APPLICATION_SUBMITTED]: '/admin',
   [FormStatus.COMPLETED]: '/admin',
+  [FormStatus.REJECTED]: '/admin',
 };
 
 export const ROLE_STATUS_ROUTES: Record<UserRole, StatusRouteMap> = {