add parent pages

src/pages/RoleSelectPage.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { fetchDashboardRoute } from '../api/session'
+import { useAuth } from '../auth/AuthProvider'
+import { spaPathFromCiUrl } from '../lib/ciSpaPaths'
+
+export function RoleSelectPage() {
+  const { user, roles, selectedRole, setSelectedRole } = useAuth()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const [pickedRole, setPickedRole] = useState<string | null>(selectedRole)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const from = (location.state as { from?: string } | null)?.from ?? '/app/home'
+
+  async function continueLogin() {
+    if (!pickedRole) {
+      setError('Please select a role to continue.')
+      return
+    }
+    setBusy(true)
+    setError(null)
+    setSelectedRole(pickedRole)
+
+    let target = from.startsWith('/app') ? from : '/app/home'
+    if (pickedRole.toLowerCase() === 'parent' && target === '/app/home') {
+      target = '/app/parent/home'
+    }
+    try {
+      const dash = await fetchDashboardRoute()
+      const route = dash.data?.dashboard?.route
+      const mapped = spaPathFromCiUrl(route)
+      if (mapped) target = mapped
+    } catch {
+      /* keep fallback target */
+    }
+
+    navigate(target, { replace: true })
+  }
+
+  return (
+    <div className="container py-4">
+      <div className="card border-0 shadow-sm mx-auto" style={{ maxWidth: 640 }}>
+        <div className="card-body p-4">
+          <h2 className="h4 mb-2">Select role</h2>
+          <p className="text-muted mb-3">
+            {user?.name ? `Signed in as ${user.name}.` : 'Signed in successfully.'} Choose a role
+            to continue.
+          </p>
+
+          <div className="list-group mb-3">
+            {roles.map((role) => (
+              <button
+                key={role}
+                type="button"
+                className={`list-group-item list-group-item-action text-start ${
+                  pickedRole === role ? 'active' : ''
+                }`}
+                onClick={() => setPickedRole(role)}
+              >
+                {role}
+              </button>
+            ))}
+          </div>
+
+          {error ? (
+            <div className="alert alert-danger py-2" role="alert">
+              {error}
+            </div>
+          ) : null}
+
+          <div className="d-grid">
+            <button type="button" className="btn btn-success" onClick={continueLogin} disabled={busy}>
+              {busy ? 'Continuing…' : 'Continue'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}