feat(#78): add Open in SIS button to student detail page

Author: William-Hill

codebenders-dashboard/app/students/[guid]/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react"
 import { useParams, useRouter } from "next/navigation"
-import { ArrowLeft, ShieldCheck } from "lucide-react"
+import { ArrowLeft, ExternalLink, ShieldCheck } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
@@ -88,6 +88,8 @@ export default function StudentDetailPage() {
   const [student, setStudent] = useState<StudentDetail | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError]     = useState<string | null>(null)
+  const [sisLink, setSisLink] = useState<string | null>(null)
+  const [sisStatus, setSisStatus] = useState<"loading" | "available" | "unavailable" | "hidden">("loading")
 
   useEffect(() => {
     if (!guid) return
@@ -102,6 +104,33 @@ export default function StudentDetailPage() {
       .catch(e => { setError(e.message); setLoading(false) })
   }, [guid])
 
+  useEffect(() => {
+    if (!guid) return
+    fetch(`/api/students/${encodeURIComponent(guid)}/sis-link`)
+      .then(r => {
+        if (r.status === 403) {
+          setSisStatus("hidden")
+          return null
+        }
+        if (r.status === 404) {
+          setSisStatus("unavailable")
+          return null
+        }
+        if (!r.ok) {
+          setSisStatus("hidden")
+          return null
+        }
+        return r.json()
+      })
+      .then(data => {
+        if (data?.url) {
+          setSisLink(data.url)
+          setSisStatus("available")
+        }
+      })
+      .catch(() => setSisStatus("hidden"))
+  }, [guid])
+
   // ─── Loading skeleton ────────────────────────────────────────────────────
 
   if (loading) {
@@ -179,6 +208,29 @@ export default function StudentDetailPage() {
               </div>
             </div>
             <div className="flex items-center gap-2">
+              {sisStatus === "available" && sisLink && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="gap-1.5"
+                  onClick={() => window.open(sisLink, "_blank", "noopener,noreferrer")}
+                >
+                  <ExternalLink className="h-3.5 w-3.5" />
+                  Open in SIS
+                </Button>
+              )}
+              {sisStatus === "unavailable" && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="gap-1.5 opacity-50 cursor-not-allowed"
+                  disabled
+                  title="No SIS record linked for this student"
+                >
+                  <ExternalLink className="h-3.5 w-3.5" />
+                  Open in SIS
+                </Button>
+              )}
               {student.at_risk_alert && (
                 <Badge
                   label={student.at_risk_alert}