feat: migrate app state to bootstrap endpoint

Use GET /me/bootstrap as the primary authenticated state source per ADR-0003. AuthContext now fetches and exposes typed bootstrapData, Header and class/detail admin checks use bootstrap permissions/roles, dashboard surfaces onboarding/calendar/timetable/graph status, and graph navigation derives school setup state from bootstrap instead of /school/status. Refs: t_44353587
2026-05-28 19:07:07 +01:00 · 2026-05-28 19:07:07 +01:00 · 65ce1bede8
commit 65ce1bede8
parent 67e47fc47f
6 changed files with 270 additions and 81 deletions
--- a/src/contexts/AuthContext.tsx
+++ b/src/contexts/AuthContext.tsx
@ -5,6 +5,8 @@ import { CCUser, CCUserMetadata, authService } from '../services/auth/authServic
 import { logger } from '../debugConfig';
 import { supabase } from '../supabaseClient';
 import { storageService, StorageKeys } from '../services/auth/localStorageService';
+import { fetchBootstrapData, BootstrapResponse, invalidateBootstrapCache } from '../services/bootstrap/bootstrapService';
+

 export interface AuthContextType {
  user: CCUser | null;
@ -15,6 +17,7 @@ export interface AuthContextType {
  signIn: (email: string, password: string) => Promise<void>;
  signOut: () => Promise<void>;
  clearError: () => void;
+  bootstrapData: BootstrapResponse | null;
 }

 export const AuthContext = createContext<AuthContextType>({
@ -25,7 +28,8 @@ export const AuthContext = createContext<AuthContextType>({
  error: null,
  signIn: async () => {},
  signOut: async () => {},
-  clearError: () => {}
+  clearError: () => {},
+  bootstrapData: null
 });

 export function AuthProvider({ children }: { children: React.ReactNode }) {
@ -35,8 +39,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [accessToken, setAccessToken] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);
+  const [bootstrapData, setBootstrapData] = useState<BootstrapResponse | null>(null);

-  const apiBase = import.meta.env.VITE_API_BASE as string;

  const persistSession = useCallback((session: Session | null) => {
    if (session) {
@ -71,15 +75,15 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
    return { user: resolvedUser, role: resolvedRole };
  }, []);

-  const triggerUserInit = useCallback((token: string) => {
-    fetch(`${apiBase}/user/init`, {
-      method: 'POST',
-      headers: { Authorization: `Bearer ${token}` },
-    })
-      .then(r => r.json())
-      .then(data => logger.debug('auth-context', '✅ User init', data))
-      .catch(err => logger.warn('auth-context', '⚠️ User init failed', { err }));
-  }, [apiBase]);
+  const loadBootstrap = useCallback(async (token: string | null | undefined) => {
+    if (!token) {
+      setBootstrapData(null);
+      return null;
+    }
+    const bootstrap = await fetchBootstrapData(token);
+    setBootstrapData(bootstrap);
+    return bootstrap;
+  }, []);

  useEffect(() => {
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
@ -94,7 +98,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
              setUser(resolvedUser);
              setUserRole(role);
              setAccessToken(session.access_token ?? null);
-              triggerUserInit(session.access_token);
+              await loadBootstrap(session.access_token);
            } catch (buildError) {
              logger.error('auth-context', '❌ Failed to build user from session', { event, error: buildError });
              setUser(null);
@ -119,6 +123,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
              setUser(resolvedUser);
              setUserRole(role);
              setAccessToken(session.access_token ?? null);
+              await loadBootstrap(session.access_token);
            } catch (buildError) {
              logger.error('auth-context', '❌ Failed to build user from session', { event, error: buildError });
              setUser(null);
@ -140,13 +145,15 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
          setUser(null);
          setUserRole(null);
          setAccessToken(null);
+          setBootstrapData(null);
+          invalidateBootstrapCache();
          setLoading(false);
        }
      }
    );

    return () => subscription.unsubscribe();
-  }, [buildUserFromSupabase, persistSession, triggerUserInit]);
+  }, [buildUserFromSupabase, persistSession, loadBootstrap]);

  const signIn = async (email: string, password: string) => {
    try {
@ -167,6 +174,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
          setUser(resolvedUser);
          setUserRole(role);
          setAccessToken(data.session?.access_token ?? null);
+          await loadBootstrap(data.session?.access_token ?? null);
      }
    } catch (error) {
      logger.error('auth-context', '❌ Sign in failed', { error });
@ -205,7 +213,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
        error,
        signIn,
        signOut,
-        clearError
+        clearError,
+        bootstrapData
      }}
    >
      {children}
--- a/src/pages/Header.tsx
+++ b/src/pages/Header.tsx
@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import {
@ -38,54 +38,24 @@ import { HEADER_HEIGHT } from './Layout';
 import { logger } from '../debugConfig';
 import { GraphNavigator } from '../components/navigation/GraphNavigator';

-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8000';

 const Header: React.FC = () => {
  const theme = useTheme();
  const navigate = useNavigate();
  const location = useLocation();
-  const { user, signOut, accessToken } = useAuth();
+  const { user, signOut, bootstrapData } = useAuth();
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const [isPlatformAdmin, setIsPlatformAdmin] = useState(false);
-  const [schoolRole, setSchoolRole] = useState<string | null>(null);
  const [isAuthenticated, setIsAuthenticated] = useState(!!user);
  const showGraphNavigation = location.pathname === '/single-player';
+  const isPlatformAdmin = bootstrapData?.permissions?.platform_admin ?? false;
+  const schoolRole = bootstrapData?.active_institute?.membership_role ?? null;
  const isSchoolAdmin = schoolRole === 'school_admin' || schoolRole === 'department_head';

  useEffect(() => {
    setIsAuthenticated(!!user);
  }, [user]);

-  // Check platform admin status and school role once on login
-  const checkAdminStatus = useCallback(async () => {
-    if (!accessToken) return;
-    // Platform admin check
-    try {
-      const res = await fetch(`${API_BASE}/admin/stats`, {
-        headers: { Authorization: `Bearer ${accessToken}` },
-      });
-      setIsPlatformAdmin(res.ok);
-    } catch {
-      setIsPlatformAdmin(false);
-    }
-    // School role check
-    try {
-      const res = await fetch(`${API_BASE}/school/status`, {
-        headers: { Authorization: `Bearer ${accessToken}` },
-      });
-      if (res.ok) {
-        const data = await res.json();
-        setSchoolRole(data.user_role || null);
-      }
-    } catch {
-      setSchoolRole(null);
-    }
-  }, [accessToken]);

-  useEffect(() => {
-    if (accessToken) checkAdminStatus();
-    else { setIsPlatformAdmin(false); setSchoolRole(null); }
-  }, [accessToken, checkAdminStatus]);

  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
--- a/src/pages/timetable/ClassDetailPage.tsx
+++ b/src/pages/timetable/ClassDetailPage.tsx
@ -116,7 +116,7 @@ function AddStudentDialog({ open, onClose, onAdd, accessToken, existingIds }: Ad
 const ClassDetailPage: React.FC = () => {
    const { classId } = useParams<{ classId: string }>();
    const navigate = useNavigate();
-    const { accessToken, user } = useAuth();
+    const { accessToken, user, bootstrapData } = useAuth();

    const [cls, setCls] = useState<ClassDetail | null>(null);
    const [loading, setLoading] = useState(true);
@ -131,24 +131,19 @@ const ClassDetailPage: React.FC = () => {
        setLoading(true);
        setError(null);
        try {
-            const [clsRes, roleRes] = await Promise.all([
-                fetch(`${API_BASE}/classes/${classId}`, {
-                    headers: { Authorization: `Bearer ${accessToken}` },
-                }).then(r => r.json()),
-                fetch(`${API_BASE}/school/status`, {
-                    headers: { Authorization: `Bearer ${accessToken}` },
-                }).then(r => r.json()),
-            ]);
+            const clsRes = await fetch(`${API_BASE}/classes/${classId}`, {
+                headers: { Authorization: `Bearer ${accessToken}` },
+            }).then(r => r.json());
            if (clsRes.id) setCls(clsRes);
            else setError(clsRes.detail || 'Class not found');
-            const role = roleRes.user_role || '';
+            const role = bootstrapData?.active_institute?.membership_role || '';
            setIsAdmin(role === 'school_admin' || role === 'department_head');
        } catch (e: any) {
            setError(e.message);
        } finally {
            setLoading(false);
        }
-    }, [accessToken, classId]);
+    }, [accessToken, classId, bootstrapData]);

    useEffect(() => { load(); }, [load]);

--- a/src/pages/user/dashboardPage.tsx
+++ b/src/pages/user/dashboardPage.tsx
@ -1,8 +1,10 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
+  Alert,
  Box,
  Button,
+  Chip,
  Container,
  Grid,
  Paper,
@ -10,17 +12,28 @@ import {
  Typography
 } from '@mui/material';
 import { useAuth } from '../../contexts/AuthContext';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import WarningIcon from '@mui/icons-material/Warning';
 import { useUser } from '../../contexts/UserContext';

 const DashboardPage: React.FC = () => {
  const navigate = useNavigate();
-  const { user: authUser } = useAuth();
+  const { user: authUser, bootstrapData } = useAuth();
  const { profile, loading } = useUser();

  const displayName = profile?.display_name || authUser?.display_name || authUser?.username || 'Member';
  const emailAddress = profile?.email || authUser?.email || '';
  const userType = profile?.user_type || authUser?.user_type || '';

+  const activeInstitute = bootstrapData?.active_institute;
+  const activeMembership = bootstrapData?.memberships?.find(
+    (m) => m.institute_id === activeInstitute?.id && m.is_active
+  );
+  const schoolName = activeMembership?.institute?.name;
+  const onboarding = bootstrapData?.onboarding;
+  const calendarOk = bootstrapData?.calendar_status?.available && !bootstrapData?.calendar_status?.needs_setup;
+  const timetableOk = bootstrapData?.timetable_status?.available && !bootstrapData?.timetable_status?.needs_setup;
+
  return (
    <Container maxWidth="lg" sx={{ py: 6 }}>
      <Stack spacing={6}>
@ -88,6 +101,79 @@ const DashboardPage: React.FC = () => {
            </Paper>
          </Grid>
        </Grid>
+        {/* Bootstrap Status Section */}
+        {bootstrapData && (
+          <Stack spacing={3}>
+            <Typography variant="h5" component="h2">
+              Your school
+            </Typography>
+            <Grid container spacing={3}>
+              <Grid item xs={12} md={6}>
+                <Paper elevation={2} sx={{ p: 3 }}>
+                  <Typography variant="h6" gutterBottom>
+                    Institute
+                  </Typography>
+                  <Stack spacing={1}>
+                    <Typography variant="body1" fontWeight={600}>
+                      {schoolName || 'No school assigned'}
+                    </Typography>
+                    {activeInstitute?.membership_role && (
+                      <Chip
+                        label={activeInstitute.membership_role.replace(/_/g, ' ')}
+                        size="small"
+                        color="primary"
+                        variant="outlined"
+                      />
+                    )}
+                    <Typography variant="body2" color="text.secondary">
+                      Status: {bootstrapData.school_status}
+                    </Typography>
+                  </Stack>
+                </Paper>
+              </Grid>
+
+              <Grid item xs={12} md={6}>
+                <Paper elevation={2} sx={{ p: 3, height: '100%' }}>
+                  <Typography variant="h6" gutterBottom>
+                    System status
+                  </Typography>
+                  <Stack spacing={1.5}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      {calendarOk ? <CheckCircleIcon color="success" fontSize="small" /> : <WarningIcon color="warning" fontSize="small" />}
+                      <Typography variant="body2">
+                        Calendar: {calendarOk ? 'Ready' : 'Needs setup'}
+                      </Typography>
+                    </Box>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      {timetableOk ? <CheckCircleIcon color="success" fontSize="small" /> : <WarningIcon color="warning" fontSize="small" />}
+                      <Typography variant="body2">
+                        Timetable: {timetableOk ? 'Ready' : 'Needs setup'}
+                      </Typography>
+                    </Box>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      {bootstrapData?.graph_status?.available ? <CheckCircleIcon color="success" fontSize="small" /> : <WarningIcon color="warning" fontSize="small" />}
+                      <Typography variant="body2">
+                        Graph projection: {bootstrapData?.graph_status?.projection_state || 'unknown'}
+                      </Typography>
+                    </Box>
+                  </Stack>
+                </Paper>
+              </Grid>
+            </Grid>
+
+            {onboarding && onboarding.next_step !== 'complete' && (
+              <Alert severity="info" sx={{ mt: 1 }}>
+                <Typography variant="body2" fontWeight={600}>
+                  {onboarding.message}
+                </Typography>
+                <Typography variant="body2" sx={{ mt: 0.5 }}>
+                  Next step: {onboarding.next_step.replace(/_/g, ' ')}
+                </Typography>
+              </Alert>
+            )}
+          </Stack>
+        )}
+
      </Stack>
    </Container>
  );
--- a/src/services/bootstrap/bootstrapService.ts
+++ b/src/services/bootstrap/bootstrapService.ts
@ -0,0 +1,123 @@
+import { logger } from '../../debugConfig';
+
+const apiBase = (import.meta.env.VITE_API_BASE as string) || '';
+
+export interface BootstrapProfile {
+  id: string;
+  email: string;
+  display_name: string;
+  user_type: string;
+  school_id: string | null;
+}
+
+export interface BootstrapMembership {
+  institute_id: string;
+  role: string;
+  status: string;
+  is_active: boolean;
+  institute: {
+    id: string;
+    name: string;
+    urn: string | null;
+  };
+}
+
+export interface BootstrapActiveInstitute {
+  id: string | null;
+  source: string;
+  membership_role: string | null;
+}
+
+export interface BootstrapPermissions {
+  platform_admin: boolean;
+  platform_super_admin: boolean;
+  can_create_school: boolean;
+  can_manage_school: boolean;
+  can_manage_calendar: boolean;
+  can_manage_timetable: boolean;
+  can_invite_staff: boolean;
+  can_manage_classes: boolean;
+  can_view_student_data: boolean;
+  can_use_canvas: boolean;
+}
+
+export interface BootstrapOnboarding {
+  next_step: string;
+  required: string[];
+  optional: string[];
+  message: string;
+}
+
+export interface BootstrapCalendarStatus {
+  available: boolean;
+  academic_year_count: number;
+  term_count: number;
+  current_academic_year_id: string | null;
+  needs_setup: boolean;
+}
+
+export interface BootstrapTimetableStatus {
+  available: boolean;
+  teacher_timetable_id: string | null;
+  slot_count: number;
+  needs_setup: boolean;
+}
+
+export interface BootstrapGraphStatus {
+  available: boolean;
+  user_db: string | null;
+  institute_db: string | null;
+  projection_state: string;
+  needs_rebuild: boolean;
+  last_checked_at: string | null;
+  error_code: string | null;
+}
+
+export interface BootstrapResponse {
+  profile: BootstrapProfile;
+  memberships: BootstrapMembership[];
+  active_institute: BootstrapActiveInstitute;
+  permissions: BootstrapPermissions;
+  school_status: string;
+  onboarding: BootstrapOnboarding;
+  calendar_status: BootstrapCalendarStatus;
+  timetable_status: BootstrapTimetableStatus;
+  graph_status: BootstrapGraphStatus;
+}
+
+let cachedBootstrap: BootstrapResponse | null = null;
+let cacheTimestamp = 0;
+const CACHE_TTL_MS = 60_000; // 60 second cache
+
+export async function fetchBootstrapData(accessToken: string): Promise<BootstrapResponse | null> {
+  if (!accessToken) return null;
+
+  // Return cached data if fresh
+  if (cachedBootstrap && Date.now() - cacheTimestamp < CACHE_TTL_MS) {
+    return cachedBootstrap;
+  }
+
+  try {
+    const res = await fetch(`${apiBase}/me/bootstrap`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+
+    if (!res.ok) {
+      logger.warn('bootstrap-service', `Bootstrap fetch failed: ${res.status}`);
+      return cachedBootstrap; // Return stale cache on error
+    }
+
+    const data: BootstrapResponse = await res.json();
+    cachedBootstrap = data;
+    cacheTimestamp = Date.now();
+    return data;
+  } catch (err) {
+    logger.error('bootstrap-service', 'Bootstrap fetch error', { err });
+    return cachedBootstrap; // Return stale cache on error
+  }
+}
+
+export function invalidateBootstrapCache(): void {
+  cachedBootstrap = null;
+  cacheTimestamp = 0;
+}
--- a/src/utils/tldraw/ui-overrides/components/shared/navigation/CCGraphNavPanel.tsx
+++ b/src/utils/tldraw/ui-overrides/components/shared/navigation/CCGraphNavPanel.tsx
@ -483,11 +483,10 @@ function TreeItem({ node, depth, onSelect, onExpand }: TreeItemProps) {
 // ─── Main Panel ───────────────────────────────────────────────────────────────

 export function CCGraphNavPanel() {
-    const { accessToken } = useAuth();
+    const { accessToken, bootstrapData } = useAuth();
    const navigate = useNavigate();
    const { navigateToNeoNode, context } = useNavigationStore();
    const [tree, setTree] = useState<TreeNode | null>(null);
-    const [schoolStatus, setSchoolStatus] = useState<SchoolStatus | null>(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

@ -526,19 +525,31 @@ export function CCGraphNavPanel() {
        }
    }, [accessToken, apiBase]);

-    const fetchSchoolStatus = useCallback(async () => {
-        if (!accessToken) return;
-        try {
-            const res = await fetch(`${apiBase}/school/status`, {
-                headers: { Authorization: `Bearer ${accessToken}` },
-            });
-            if (!res.ok) return;
-            const data = await res.json();
-            setSchoolStatus(data);
-        } catch {
-            // non-fatal — panel still works without school status
-        }
-    }, [accessToken, apiBase]);
+    const schoolStatus = useMemo<SchoolStatus | null>(() => {
+        if (!bootstrapData) return null;
+        const membershipRole = bootstrapData.active_institute?.membership_role ?? undefined;
+        const activeMembership = bootstrapData.memberships?.find(
+            (m) => m.institute_id === bootstrapData.active_institute?.id && m.is_active
+        );
+        return {
+            status: bootstrapData.school_status,
+            user_role: membershipRole,
+            school_id: bootstrapData.active_institute?.id ?? undefined,
+            school_has_calendar: bootstrapData.calendar_status.available && !bootstrapData.calendar_status.needs_setup,
+            teacher_has_timetable: bootstrapData.timetable_status.available && !bootstrapData.timetable_status.needs_setup,
+            timetable_id: bootstrapData.timetable_status.teacher_timetable_id,
+            periods_template: [],
+            school_info: activeMembership?.institute ? {
+                name: activeMembership.institute.name,
+                urn: activeMembership.institute.urn ?? '',
+                website: '',
+                address: {},
+                headteacher: '',
+                term_dates_url: '',
+                staff_list_url: '',
+            } : undefined,
+        };
+    }, [bootstrapData]);

    useEffect(() => {
        if (accessToken && !tree) fetchTree();
@ -553,9 +564,6 @@ export function CCGraphNavPanel() {
        }
    }, [tree]);

-    useEffect(() => {
-        if (accessToken && !schoolStatus) fetchSchoolStatus();
-    }, [accessToken, schoolStatus, fetchSchoolStatus]);

    // Fetch timetable term nodes when switching to term view
    useEffect(() => {
@ -637,7 +645,6 @@ export function CCGraphNavPanel() {

    const refreshAll = useCallback(() => {
        setTree(null);
-        setSchoolStatus(null);
        setAcademicCalendarStatus('idle');
        setAcademicTerms([]);
    }, []);
@ -726,9 +733,8 @@ export function CCGraphNavPanel() {
                onClose={() => setOnboardingWizardOpen(false)}
                onComplete={() => {
                    setOnboardingWizardOpen(false);
-                    // Reload tree + school status after successful onboarding
+                    // Reload tree after successful onboarding; bootstrap state refreshes from AuthContext
                    setTree(null);
-                    setSchoolStatus(null);
                }}
                apiBase={apiBase}
            />