Feature/college tpo directory states

backend/routes/tpo.js

@@ -618,7 +618,10 @@ router.get("/college-directory", requireRole("student"), async (req, res) => {
   try {
     const education = req.userDoc.education || {};
     if (!education.emailVerified) {
-      return res.status(403).json({ error: "Verify your college email to view your college TPO directory." });
+      return res.status(403).json({
+        error: "Verify your college email to view your college TPO directory.",
+        code: "COLLEGE_EMAIL_UNVERIFIED",
+      });
     }
 
     let college = null;

src/pages/CollegeTpoDirectoryPage.jsx

@@ -1,28 +1,54 @@
 import { useEffect, useState } from "react";
-import { Mail, ShieldCheck, Users } from "lucide-react";
+import { ArrowRight, Mail, Share2, ShieldCheck, Users } from "lucide-react";
 import DashboardLayout from "../layouts/DashboardLayout";
 import { apiFetch } from "../services/api";
+import { share } from "../utils/share";
 
 export default function CollegeTpoDirectoryPage() {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [verificationRequired, setVerificationRequired] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
     apiFetch("/api/tpo/college-directory")
       .then((result) => {
-        if (!cancelled) setData(result);
+        if (!cancelled) {
+          setData(result);
+          setVerificationRequired(false);
+        }
       })
       .catch((err) => {
-        if (!cancelled) setError(err.message || "Failed to load your college TPOs.");
+        if (!cancelled) {
+          const isCollegeEmailUnverified =
+            err?.status === 403 && err?.body?.code === "COLLEGE_EMAIL_UNVERIFIED";
+          setVerificationRequired(isCollegeEmailUnverified);
+          if (!isCollegeEmailUnverified) {
+            setError(err.message || "Failed to load your college TPOs.");
+          }
+        }
       })
       .finally(() => {
         if (!cancelled) setLoading(false);
       });
     return () => { cancelled = true; };
   }, []);
 
+  const handleInviteFaculty = async () => {
+    if (!data?.college?.name) return;
+
+    try {
+      await share({
+        title: "Join Code Club as a TPO",
+        text: `Join Code Club as a Training & Placement Officer for ${data.college.name} and help your students prepare for placements.`,
+        url: `${window.location.origin}/tpo/signup`,
+      });
+    } catch {
+      // Share/clipboard failures should not turn the directory into an error state.
+    }
+  };
+
   return (
     <DashboardLayout>
       <div className="max-w-5xl mx-auto space-y-8">
@@ -38,6 +64,30 @@ export default function CollegeTpoDirectoryPage() {
           <div className="flex justify-center py-16">
             <div className="w-7 h-7 border-2 border-[var(--theme-primary,#2dd4bf)] border-t-transparent rounded-full animate-spin" />
           </div>
+        ) : verificationRequired ? (
+          <div className="rounded-2xl border border-[var(--border)] bg-[var(--surface)] p-8 sm:p-10">
+            <div className="max-w-2xl">
+              <div className="w-12 h-12 rounded-2xl bg-[var(--surface-elevated)] flex items-center justify-center">
+                <ShieldCheck size={22} aria-hidden="true" />
+              </div>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--foreground)] mt-5">
+                Verify your college email
+              </h2>
+              <p className="text-[var(--muted-foreground)] mt-3 leading-6">
+                If you are a college student, verify your college email from your Profile page.
+              </p>
+              <p className="text-[var(--muted-foreground)] mt-2 leading-6">
+                Once your college email is verified, all verified TPOs from your college will be displayed here.
+              </p>
+              <a
+                href="/profile"
+                className="mt-6 inline-flex items-center gap-2 rounded-xl bg-[var(--foreground)] px-4 py-2.5 text-sm font-semibold text-[var(--background)] hover:opacity-90 transition"
+              >
+                Go to Profile
+                <ArrowRight size={16} aria-hidden="true" />
+              </a>
+            </div>
+          </div>
         ) : error ? (
           <div className="rounded-2xl border border-[var(--border)] bg-[var(--surface)] p-6">
             <p className="font-semibold text-[var(--foreground)]">TPO directory unavailable</p>
@@ -64,6 +114,17 @@ export default function CollegeTpoDirectoryPage() {
                 <p className="text-sm text-[var(--muted-foreground)] mt-1">
                   Your institution does not currently have a verified TPO on Code Club.
                 </p>
+                <p className="text-sm text-[var(--muted-foreground)] mt-3 leading-6 max-w-xl mx-auto">
+                  Connect with your college placement authority and invite a faculty member to join Code Club as a Training & Placement Officer on behalf of your college.
+                </p>
+                <button
+                  type="button"
+                  onClick={handleInviteFaculty}
+                  className="mt-5 inline-flex items-center gap-2 rounded-xl bg-[var(--foreground)] px-4 py-2.5 text-sm font-semibold text-[var(--background)] hover:opacity-90 transition"
+                >
+                  <Share2 size={16} aria-hidden="true" />
+                  Invite your college faculty
+                </button>
               </div>
             ) : (
               <div className="grid gap-4 md:grid-cols-2">