Report: extract Loading/Empty/Error states to components/report/

components/ReportView.tsx

@@ -24,6 +24,7 @@ import {
   MEMBERS_ACTUAL_NAME,
   MEMBERS_GOAL_NAME,
 } from "./report/MembershipChart";
+import { LoadingState, EmptyState, ErrorState } from "./report/ReportStates";
 
 interface ReportViewProps {
   config: FormConfig;
@@ -483,39 +484,3 @@ function MobileStem({ show, state }: { show: boolean; state: PathwayState }) {
   );
 }
 
-function LoadingState() {
-  return (
-    <div className="rounded-lg border border-rule bg-paper px-6 py-12 text-center">
-      <div
-        aria-hidden
-        className="mx-auto mb-4 h-7 w-7 animate-spin rounded-full border-[1.5px] border-rule border-t-leaf-700"
-      />
-      <p className="font-display text-base text-ink-soft italic">Loading your activity report…</p>
-    </div>
-  );
-}
-
-function EmptyState() {
-  return (
-    <div className="rounded-lg border border-dashed border-rule bg-paper-2/30 px-6 py-10 text-center">
-      <p className="font-display text-lg text-ink-soft">No entries on file yet.</p>
-      <p className="mt-2 text-sm text-ink-mute">
-        Your co-op&apos;s first survey will appear here once it&apos;s submitted.
-      </p>
-    </div>
-  );
-}
-
-function ErrorState({ message }: { message: string }) {
-  return (
-    <div role="alert" className="rounded-lg border-2 border-clay-200 bg-clay-100/30 px-6 py-7">
-      <h2 className="font-display text-xl font-medium text-clay-700">
-        We couldn&apos;t open your report.
-      </h2>
-      <p className="mt-3 text-sm leading-relaxed text-ink-soft">{message}</p>
-      <p className="mt-4 text-sm text-ink-soft">
-        If this keeps happening, please contact your <a href="mailto:chris@fci.coop">Chris @ FCI</a>.
-      </p>
-    </div>
-  );
-}