fix(portal): add X-Impersonation-Session-Id headers to fix 404s (GRO-286)

Add missing X-Impersonation-Session-Id header to portal API calls in
AccountSettings, ReportCards, and Appointments components. Also add
sessionId prop to ReportCards since it was missing.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/src/portal/CustomerPortal.tsx

@@ -133,7 +133,7 @@ export function CustomerPortal() {
       case "pets":
         return <PetProfiles readOnly={!!isReadOnly} sessionId={sessionId} />;
       case "reports":
-        return <ReportCards />;
+        return <ReportCards sessionId={sessionId} />;
       case "billing":
         return <BillingPayments readOnly={!!isReadOnly} sessionId={sessionId} />;
       case "messages":

apps/web/src/portal/sections/AccountSettings.tsx

@@ -72,7 +72,9 @@ function PersonalInfo({ sessionId, readOnly }: { sessionId: string | null; readO
     const fetchPersonalInfo = async () => {
       try {
         setLoading(true);
-        const response = await fetch("/api/portal/me");
+        const response = await fetch("/api/portal/me", {
+          headers: { "X-Impersonation-Session-Id": sessionId },
+        });
         if (response.ok) {
           const data: PersonalInfoData = await response.json();
           setForm({
@@ -252,7 +254,9 @@ function ManagePets({ sessionId, readOnly }: { sessionId: string | null; readOnl
     const fetchPets = async () => {
       try {
         setLoading(true);
-        const response = await fetch("/api/portal/pets");
+        const response = await fetch("/api/portal/pets", {
+          headers: { "X-Impersonation-Session-Id": sessionId },
+        });
         if (response.ok) {
           const data = await response.json();
           setPets(Array.isArray(data) ? data : []);

apps/web/src/portal/sections/Appointments.tsx

@@ -118,7 +118,7 @@ export const AppointmentsSection: React.FC<AppointmentsSectionProps> = ({ sessio
 
       try {
         const response = await fetch('/api/portal/appointments', {
-          headers: { Authorization: `Bearer ${sessionId}` },
+          headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
         });
 
         if (response.ok) {
@@ -379,7 +379,7 @@ export function ConfirmationSection({
     try {
       const headers: Record<string, string> = {};
       if (sessionId) {
-        headers['Authorization'] = `Bearer ${sessionId}`;
+        headers['X-Impersonation-Session-Id'] = sessionId;
       }
       const res = await fetch(`/api/portal/appointments/${appt.id}/confirm`, {
         method: 'POST',
@@ -455,7 +455,7 @@ function CancelAppointmentButton({
     try {
       const headers: Record<string, string> = {};
       if (sessionId) {
-        headers['Authorization'] = `Bearer ${sessionId}`;
+        headers['X-Impersonation-Session-Id'] = sessionId;
       }
       const res = await fetch(`/api/portal/appointments/${appt.id}/cancel`, {
         method: 'POST',
@@ -507,7 +507,7 @@ export function CustomerNotesSection({
     try {
       const headers: Record<string, string> = { 'Content-Type': 'application/json' };
       if (sessionId) {
-        headers['Authorization'] = `Bearer ${sessionId}`;
+        headers['X-Impersonation-Session-Id'] = sessionId;
       }
       const res = await fetch(`/api/portal/appointments/${appt.id}/notes`, {
         method: 'PATCH',
@@ -600,7 +600,7 @@ export function RescheduleFlow({
     setError(null);
     try {
       const headers: Record<string, string> = { 'Content-Type': 'application/json' };
-      if (sessionId) headers['Authorization'] = `Bearer ${sessionId}`;
+      if (sessionId) headers['X-Impersonation-Session-Id'] = sessionId;
       const res = await fetch(`/api/portal/appointments/${appt.id}/reschedule`, {
         method: 'POST',
         headers,
@@ -744,10 +744,10 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
       try {
         const [petsRes, servicesRes] = await Promise.all([
           fetch('/api/portal/pets', {
-            headers: { Authorization: `Bearer ${sessionId}` },
+            headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
           }),
           fetch('/api/portal/services', {
-            headers: { Authorization: `Bearer ${sessionId}` },
+            headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
           }),
         ]);
 
@@ -784,7 +784,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          Authorization: `Bearer ${sessionId}`,
+          "X-Impersonation-Session-Id": sessionId ?? "",
         },
         body: JSON.stringify({
           petId: selectedPet.id,

apps/web/src/portal/sections/ReportCards.tsx

@@ -24,17 +24,28 @@ interface Appointment {
   reportCardId?: string;
 }
 
-export function ReportCards() {
+interface ReportCardsProps {
+  sessionId: string | null;
+}
+
+export function ReportCards({ sessionId }: ReportCardsProps) {
   const [appointments, setAppointments] = useState<Appointment[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [selectedCard, setSelectedCard] = useState<Appointment | null>(null);
 
   const loadReportCards = async () => {
+    if (!sessionId) {
+      setAppointments([]);
+      setIsLoading(false);
+      return;
+    }
     try {
       setError(null);
       setIsLoading(true);
-      const response = await fetch("/api/portal/appointments");
+      const response = await fetch("/api/portal/appointments", {
+        headers: { "X-Impersonation-Session-Id": sessionId },
+      });
 
       if (response.ok) {
         const data = await response.json();
@@ -55,7 +66,7 @@ export function ReportCards() {
 
   useEffect(() => {
     loadReportCards();
-  }, []);
+  }, [sessionId]);
 
   if (isLoading) {
     return (