From 1a2a9af33556c8e005ba13df74f8ae401acf748f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 26 Jan 2026 22:01:13 +0000
Subject: [PATCH] Complete Candidate Portal with all pages and routes

- Add CandidateInterviews.tsx with interview list, filtering by status,
  meeting type badges, and join meeting buttons
- Add CandidateOffers.tsx with offer management, accept/decline dialogs,
  expiry warnings, and salary formatting
- Add routes to App.tsx for /candidate, /candidate/profile,
  /candidate/interviews, /candidate/offers
---
 client/App.tsx                                |  38 ++
 .../pages/candidate/CandidateInterviews.tsx   | 402 ++++++++++++
 client/pages/candidate/CandidateOffers.tsx    | 591 ++++++++++++++++++
 3 files changed, 1031 insertions(+)
 create mode 100644 client/pages/candidate/CandidateInterviews.tsx
 create mode 100644 client/pages/candidate/CandidateOffers.tsx

diff --git a/client/App.tsx b/client/App.tsx
index 4ec9b1f9..7f84f2f2 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -161,6 +161,10 @@ import StaffProjectTracking from "./pages/staff/StaffProjectTracking";
 import StaffTeamHandbook from "./pages/staff/StaffTeamHandbook";
 import StaffOnboarding from "./pages/staff/StaffOnboarding";
 import StaffOnboardingChecklist from "./pages/staff/StaffOnboardingChecklist";
+import CandidatePortal from "./pages/candidate/CandidatePortal";
+import CandidateProfile from "./pages/candidate/CandidateProfile";
+import CandidateInterviews from "./pages/candidate/CandidateInterviews";
+import CandidateOffers from "./pages/candidate/CandidateOffers";
 
 const queryClient = new QueryClient();
 
@@ -542,6 +546,40 @@ const App = () => (
                           }
                         />
 
+                        {/* Candidate Portal Routes */}
+                        <Route
+                          path="/candidate"
+                          element={
+                            <RequireAccess>
+                              <CandidatePortal />
+                            </RequireAccess>
+                          }
+                        />
+                        <Route
+                          path="/candidate/profile"
+                          element={
+                            <RequireAccess>
+                              <CandidateProfile />
+                            </RequireAccess>
+                          }
+                        />
+                        <Route
+                          path="/candidate/interviews"
+                          element={
+                            <RequireAccess>
+                              <CandidateInterviews />
+                            </RequireAccess>
+                          }
+                        />
+                        <Route
+                          path="/candidate/offers"
+                          element={
+                            <RequireAccess>
+                              <CandidateOffers />
+                            </RequireAccess>
+                          }
+                        />
+
                         {/* Dev-Link routes - now redirect to Nexus Opportunities with ecosystem filter */}
                         <Route path="/dev-link" element={<Navigate to="/opportunities?ecosystem=roblox" replace />} />
                         <Route
diff --git a/client/pages/candidate/CandidateInterviews.tsx b/client/pages/candidate/CandidateInterviews.tsx
new file mode 100644
index 00000000..f7fe98d3
--- /dev/null
+++ b/client/pages/candidate/CandidateInterviews.tsx
@@ -0,0 +1,402 @@
+import { useState, useEffect } from "react";
+import { Link } from "wouter";
+import Layout from "@/components/Layout";
+import SEO from "@/components/SEO";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Calendar,
+  Video,
+  Phone,
+  MapPin,
+  ArrowLeft,
+  Clock,
+  Loader2,
+  MessageSquare,
+  CheckCircle2,
+  XCircle,
+  AlertCircle,
+} from "lucide-react";
+import { useAuth } from "@/hooks/useAuth";
+import { aethexToast } from "@/components/ui/aethex-toast";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+interface Interview {
+  id: string;
+  scheduled_at: string;
+  duration_minutes: number;
+  meeting_link: string | null;
+  meeting_type: string;
+  status: string;
+  notes: string | null;
+  candidate_feedback: string | null;
+  employer: {
+    full_name: string;
+    avatar_url: string | null;
+    email: string;
+  } | null;
+}
+
+interface GroupedInterviews {
+  upcoming: Interview[];
+  past: Interview[];
+  cancelled: Interview[];
+}
+
+export default function CandidateInterviews() {
+  const { session } = useAuth();
+  const [loading, setLoading] = useState(true);
+  const [interviews, setInterviews] = useState<Interview[]>([]);
+  const [grouped, setGrouped] = useState<GroupedInterviews>({
+    upcoming: [],
+    past: [],
+    cancelled: [],
+  });
+  const [filter, setFilter] = useState("all");
+
+  useEffect(() => {
+    if (session?.access_token) {
+      fetchInterviews();
+    }
+  }, [session?.access_token]);
+
+  const fetchInterviews = async () => {
+    try {
+      const response = await fetch("/api/candidate/interviews", {
+        headers: { Authorization: `Bearer ${session?.access_token}` },
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setInterviews(data.interviews || []);
+        setGrouped(data.grouped || { upcoming: [], past: [], cancelled: [] });
+      }
+    } catch (error) {
+      console.error("Error fetching interviews:", error);
+      aethexToast.error("Failed to load interviews");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatDate = (date: string) => {
+    return new Date(date).toLocaleDateString("en-US", {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+    });
+  };
+
+  const formatTime = (date: string) => {
+    return new Date(date).toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const getInitials = (name: string) => {
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase();
+  };
+
+  const getMeetingIcon = (type: string) => {
+    switch (type) {
+      case "video":
+        return <Video className="h-4 w-4" />;
+      case "phone":
+        return <Phone className="h-4 w-4" />;
+      case "in_person":
+        return <MapPin className="h-4 w-4" />;
+      default:
+        return <Video className="h-4 w-4" />;
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "scheduled":
+        return (
+          <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+            Scheduled
+          </Badge>
+        );
+      case "completed":
+        return (
+          <Badge className="bg-green-500/20 text-green-300 border-green-500/30">
+            Completed
+          </Badge>
+        );
+      case "cancelled":
+        return (
+          <Badge className="bg-red-500/20 text-red-300 border-red-500/30">
+            Cancelled
+          </Badge>
+        );
+      case "rescheduled":
+        return (
+          <Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30">
+            Rescheduled
+          </Badge>
+        );
+      case "no_show":
+        return (
+          <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30">
+            No Show
+          </Badge>
+        );
+      default:
+        return <Badge>{status}</Badge>;
+    }
+  };
+
+  const getFilteredInterviews = () => {
+    switch (filter) {
+      case "upcoming":
+        return grouped.upcoming;
+      case "past":
+        return grouped.past;
+      case "cancelled":
+        return grouped.cancelled;
+      default:
+        return interviews;
+    }
+  };
+
+  if (loading) {
+    return (
+      <Layout>
+        <SEO title="Interviews" description="Manage your interview schedule" />
+        <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin text-violet-400" />
+        </div>
+      </Layout>
+    );
+  }
+
+  const filteredInterviews = getFilteredInterviews();
+
+  return (
+    <Layout>
+      <SEO title="Interviews" description="Manage your interview schedule" />
+
+      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
+        {/* Background effects */}
+        <div className="absolute inset-0 opacity-30">
+          <div className="absolute top-20 left-10 w-96 h-96 bg-violet-600 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
+          <div className="absolute bottom-20 right-10 w-96 h-96 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
+        </div>
+
+        <div className="relative z-10">
+          <div className="container mx-auto max-w-4xl px-4 py-16">
+            {/* Header */}
+            <div className="mb-8">
+              <Link href="/candidate">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-violet-300 hover:text-violet-200 hover:bg-violet-500/10 mb-4"
+                >
+                  <ArrowLeft className="h-4 w-4 mr-2" />
+                  Back to Dashboard
+                </Button>
+              </Link>
+
+              <div className="flex items-center gap-3 mb-6">
+                <div className="p-3 rounded-lg bg-blue-500/20 border border-blue-500/30">
+                  <Calendar className="h-6 w-6 text-blue-400" />
+                </div>
+                <div>
+                  <h1 className="text-3xl font-bold text-violet-100">
+                    Interviews
+                  </h1>
+                  <p className="text-violet-200/70">
+                    Manage your interview schedule
+                  </p>
+                </div>
+              </div>
+
+              {/* Stats */}
+              <div className="grid grid-cols-3 gap-4 mb-6">
+                <Card className="bg-slate-800/50 border-slate-700/50">
+                  <CardContent className="pt-6 text-center">
+                    <p className="text-2xl font-bold text-blue-400">
+                      {grouped.upcoming.length}
+                    </p>
+                    <p className="text-sm text-slate-400">Upcoming</p>
+                  </CardContent>
+                </Card>
+                <Card className="bg-slate-800/50 border-slate-700/50">
+                  <CardContent className="pt-6 text-center">
+                    <p className="text-2xl font-bold text-green-400">
+                      {grouped.past.length}
+                    </p>
+                    <p className="text-sm text-slate-400">Completed</p>
+                  </CardContent>
+                </Card>
+                <Card className="bg-slate-800/50 border-slate-700/50">
+                  <CardContent className="pt-6 text-center">
+                    <p className="text-2xl font-bold text-slate-400">
+                      {interviews.length}
+                    </p>
+                    <p className="text-sm text-slate-400">Total</p>
+                  </CardContent>
+                </Card>
+              </div>
+
+              {/* Filter */}
+              <Select value={filter} onValueChange={setFilter}>
+                <SelectTrigger className="w-48 bg-slate-800/50 border-slate-700 text-slate-100">
+                  <SelectValue placeholder="Filter interviews" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Interviews</SelectItem>
+                  <SelectItem value="upcoming">Upcoming</SelectItem>
+                  <SelectItem value="past">Past</SelectItem>
+                  <SelectItem value="cancelled">Cancelled</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Interviews List */}
+            <div className="space-y-4">
+              {filteredInterviews.length === 0 ? (
+                <Card className="bg-slate-800/50 border-slate-700/50">
+                  <CardContent className="pt-12 pb-12 text-center">
+                    <Calendar className="h-12 w-12 text-slate-600 mx-auto mb-4" />
+                    <p className="text-slate-400 text-lg mb-2">
+                      No interviews found
+                    </p>
+                    <p className="text-slate-500 text-sm">
+                      {filter === "all"
+                        ? "You don't have any scheduled interviews yet"
+                        : `No ${filter} interviews`}
+                    </p>
+                  </CardContent>
+                </Card>
+              ) : (
+                filteredInterviews.map((interview) => (
+                  <Card
+                    key={interview.id}
+                    className="bg-slate-800/50 border-slate-700/50 hover:border-violet-500/30 transition-all"
+                  >
+                    <CardContent className="pt-6">
+                      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+                        <div className="flex items-start gap-4">
+                          <Avatar className="h-12 w-12">
+                            <AvatarImage
+                              src={interview.employer?.avatar_url || ""}
+                            />
+                            <AvatarFallback className="bg-violet-500/20 text-violet-300">
+                              {interview.employer?.full_name
+                                ? getInitials(interview.employer.full_name)
+                                : "E"}
+                            </AvatarFallback>
+                          </Avatar>
+                          <div>
+                            <p className="font-medium text-violet-100">
+                              Interview with{" "}
+                              {interview.employer?.full_name || "Employer"}
+                            </p>
+                            <div className="flex items-center gap-4 text-sm text-slate-400 mt-1">
+                              <span className="flex items-center gap-1">
+                                <Calendar className="h-4 w-4" />
+                                {formatDate(interview.scheduled_at)}
+                              </span>
+                              <span className="flex items-center gap-1">
+                                <Clock className="h-4 w-4" />
+                                {formatTime(interview.scheduled_at)}
+                              </span>
+                              <span className="flex items-center gap-1">
+                                {getMeetingIcon(interview.meeting_type)}
+                                {interview.duration_minutes} min
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                          {getStatusBadge(interview.status)}
+                          {interview.meeting_link &&
+                            interview.status === "scheduled" && (
+                              <a
+                                href={interview.meeting_link}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                              >
+                                <Button
+                                  size="sm"
+                                  className="bg-blue-600 hover:bg-blue-700"
+                                >
+                                  <Video className="h-4 w-4 mr-2" />
+                                  Join Meeting
+                                </Button>
+                              </a>
+                            )}
+                        </div>
+                      </div>
+
+                      {interview.notes && (
+                        <div className="mt-4 p-3 rounded-lg bg-slate-700/30 border border-slate-600/30">
+                          <p className="text-sm text-slate-400">
+                            <span className="font-medium text-slate-300">
+                              Notes:
+                            </span>{" "}
+                            {interview.notes}
+                          </p>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                ))
+              )}
+            </div>
+
+            {/* Tips */}
+            <Card className="mt-8 bg-slate-800/30 border-slate-700/30">
+              <CardContent className="pt-6">
+                <h3 className="font-medium text-violet-100 mb-3">
+                  Interview Tips
+                </h3>
+                <ul className="space-y-2 text-sm text-slate-400">
+                  <li className="flex items-start gap-2">
+                    <CheckCircle2 className="h-4 w-4 text-green-400 mt-0.5" />
+                    Test your camera and microphone before video calls
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <CheckCircle2 className="h-4 w-4 text-green-400 mt-0.5" />
+                    Join 5 minutes early to ensure everything works
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <CheckCircle2 className="h-4 w-4 text-green-400 mt-0.5" />
+                    Have your resume and portfolio ready to share
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <CheckCircle2 className="h-4 w-4 text-green-400 mt-0.5" />
+                    Prepare questions to ask the interviewer
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/client/pages/candidate/CandidateOffers.tsx b/client/pages/candidate/CandidateOffers.tsx
new file mode 100644
index 00000000..cfce1f35
--- /dev/null
+++ b/client/pages/candidate/CandidateOffers.tsx
@@ -0,0 +1,591 @@
+import { useState, useEffect } from "react";
+import { Link } from "wouter";
+import Layout from "@/components/Layout";
+import SEO from "@/components/SEO";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Gift,
+  ArrowLeft,
+  DollarSign,
+  Calendar,
+  Building,
+  Loader2,
+  CheckCircle2,
+  XCircle,
+  Clock,
+  AlertTriangle,
+  ExternalLink,
+} from "lucide-react";
+import { useAuth } from "@/hooks/useAuth";
+import { aethexToast } from "@/components/ui/aethex-toast";
+
+interface Offer {
+  id: string;
+  position_title: string;
+  company_name: string;
+  salary_amount: number | null;
+  salary_type: string | null;
+  start_date: string | null;
+  offer_expiry: string | null;
+  benefits: any[];
+  offer_letter_url: string | null;
+  status: string;
+  notes: string | null;
+  created_at: string;
+  employer: {
+    full_name: string;
+    avatar_url: string | null;
+    email: string;
+  } | null;
+}
+
+interface GroupedOffers {
+  pending: Offer[];
+  accepted: Offer[];
+  declined: Offer[];
+  expired: Offer[];
+  withdrawn: Offer[];
+}
+
+export default function CandidateOffers() {
+  const { session } = useAuth();
+  const [loading, setLoading] = useState(true);
+  const [offers, setOffers] = useState<Offer[]>([]);
+  const [grouped, setGrouped] = useState<GroupedOffers>({
+    pending: [],
+    accepted: [],
+    declined: [],
+    expired: [],
+    withdrawn: [],
+  });
+  const [filter, setFilter] = useState("all");
+  const [respondingTo, setRespondingTo] = useState<Offer | null>(null);
+  const [responseAction, setResponseAction] = useState<"accept" | "decline" | null>(null);
+  const [responseNotes, setResponseNotes] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (session?.access_token) {
+      fetchOffers();
+    }
+  }, [session?.access_token]);
+
+  const fetchOffers = async () => {
+    try {
+      const response = await fetch("/api/candidate/offers", {
+        headers: { Authorization: `Bearer ${session?.access_token}` },
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setOffers(data.offers || []);
+        setGrouped(
+          data.grouped || {
+            pending: [],
+            accepted: [],
+            declined: [],
+            expired: [],
+            withdrawn: [],
+          },
+        );
+      }
+    } catch (error) {
+      console.error("Error fetching offers:", error);
+      aethexToast.error("Failed to load offers");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const respondToOffer = async () => {
+    if (!respondingTo || !responseAction || !session?.access_token) return;
+    setSubmitting(true);
+
+    try {
+      const response = await fetch("/api/candidate/offers", {
+        method: "PATCH",
+        headers: {
+          Authorization: `Bearer ${session.access_token}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          id: respondingTo.id,
+          status: responseAction === "accept" ? "accepted" : "declined",
+          notes: responseNotes,
+        }),
+      });
+
+      if (!response.ok) throw new Error("Failed to respond to offer");
+
+      aethexToast.success(
+        responseAction === "accept"
+          ? "Congratulations! You've accepted the offer."
+          : "Offer declined",
+      );
+
+      // Refresh offers
+      await fetchOffers();
+
+      // Close dialog
+      setRespondingTo(null);
+      setResponseAction(null);
+      setResponseNotes("");
+    } catch (error) {
+      console.error("Error responding to offer:", error);
+      aethexToast.error("Failed to respond to offer");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const formatDate = (date: string) => {
+    return new Date(date).toLocaleDateString("en-US", {
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+    });
+  };
+
+  const formatSalary = (amount: number | null, type: string | null) => {
+    if (!amount) return "Not specified";
+    const formatted = new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0,
+    }).format(amount);
+    const suffix =
+      type === "hourly" ? "/hr" : type === "monthly" ? "/mo" : "/yr";
+    return formatted + suffix;
+  };
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "pending":
+        return (
+          <Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30">
+            <Clock className="h-3 w-3 mr-1" />
+            Pending
+          </Badge>
+        );
+      case "accepted":
+        return (
+          <Badge className="bg-green-500/20 text-green-300 border-green-500/30">
+            <CheckCircle2 className="h-3 w-3 mr-1" />
+            Accepted
+          </Badge>
+        );
+      case "declined":
+        return (
+          <Badge className="bg-red-500/20 text-red-300 border-red-500/30">
+            <XCircle className="h-3 w-3 mr-1" />
+            Declined
+          </Badge>
+        );
+      case "expired":
+        return (
+          <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30">
+            Expired
+          </Badge>
+        );
+      case "withdrawn":
+        return (
+          <Badge className="bg-slate-500/20 text-slate-300 border-slate-500/30">
+            Withdrawn
+          </Badge>
+        );
+      default:
+        return <Badge>{status}</Badge>;
+    }
+  };
+
+  const getDaysUntilExpiry = (expiry: string | null) => {
+    if (!expiry) return null;
+    const diff = new Date(expiry).getTime() - new Date().getTime();
+    const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
+    return days;
+  };
+
+  const getFilteredOffers = () => {
+    switch (filter) {
+      case "pending":
+        return grouped.pending;
+      case "accepted":
+        return grouped.accepted;
+      case "declined":
+        return grouped.declined;
+      case "expired":
+        return grouped.expired;
+      default:
+        return offers;
+    }
+  };
+
+  if (loading) {
+    return (
+      <Layout>
+        <SEO title="Job Offers" description="Review and respond to job offers" />
+        <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin text-violet-400" />
+        </div>
+      </Layout>
+    );
+  }
+
+  const filteredOffers = getFilteredOffers();
+
+  return (
+    <Layout>
+      <SEO title="Job Offers" description="Review and respond to job offers" />
+
+      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
+        {/* Background effects */}
+        <div className="absolute inset-0 opacity-30">
+          <div className="absolute top-20 left-10 w-96 h-96 bg-violet-600 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
+          <div className="absolute bottom-20 right-10 w-96 h-96 bg-green-600 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
+        </div>
+
+        <div className="relative z-10">
+          <div className="container mx-auto max-w-4xl px-4 py-16">
+            {/* Header */}
+            <div className="mb-8">
+              <Link href="/candidate">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-violet-300 hover:text-violet-200 hover:bg-violet-500/10 mb-4"
+                >
+                  <ArrowLeft className="h-4 w-4 mr-2" />
+                  Back to Dashboard
+                </Button>
+              </Link>
+
+              <div className="flex items-center gap-3 mb-6">
+                <div className="p-3 rounded-lg bg-green-500/20 border border-green-500/30">
+                  <Gift className="h-6 w-6 text-green-400" />
+                </div>
+                <div>
+                  <h1 className="text-3xl font-bold text-violet-100">
+                    Job Offers
+                  </h1>
+                  <p className="text-violet-200/70">
+                    Review and respond to offers
+                  </p>
+                </div>
+              </div>
+
+              {/* Stats */}
+              <div className="grid grid-cols-4 gap-4 mb-6">
+                <Card className="bg-slate-800/50 border-slate-700/50">
+                  <CardContent className="pt-6 text-center">
+                    <p className="text-2xl font-bold text-yellow-400">
+                      {grouped.pending.length}
+                    </p>
+                    <p className="text-sm text-slate-400">Pending</p>
+                  </CardContent>
+                </Card>
+                <Card className="bg-slate-800/50 border-slate-700/50">
+                  <CardContent className="pt-6 text-center">
+                    <p className="text-2xl font-bold text-green-400">
+                      {grouped.accepted.length}
+                    </p>
+                    <p className="text-sm text-slate-400">Accepted</p>
+                  </CardContent>
+                </Card>
+                <Card className="bg-slate-800/50 border-slate-700/50">
+                  <CardContent className="pt-6 text-center">
+                    <p className="text-2xl font-bold text-red-400">
+                      {grouped.declined.length}
+                    </p>
+                    <p className="text-sm text-slate-400">Declined</p>
+                  </CardContent>
+                </Card>
+                <Card className="bg-slate-800/50 border-slate-700/50">
+                  <CardContent className="pt-6 text-center">
+                    <p className="text-2xl font-bold text-slate-400">
+                      {offers.length}
+                    </p>
+                    <p className="text-sm text-slate-400">Total</p>
+                  </CardContent>
+                </Card>
+              </div>
+
+              {/* Filter */}
+              <Select value={filter} onValueChange={setFilter}>
+                <SelectTrigger className="w-48 bg-slate-800/50 border-slate-700 text-slate-100">
+                  <SelectValue placeholder="Filter offers" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Offers</SelectItem>
+                  <SelectItem value="pending">Pending</SelectItem>
+                  <SelectItem value="accepted">Accepted</SelectItem>
+                  <SelectItem value="declined">Declined</SelectItem>
+                  <SelectItem value="expired">Expired</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Offers List */}
+            <div className="space-y-4">
+              {filteredOffers.length === 0 ? (
+                <Card className="bg-slate-800/50 border-slate-700/50">
+                  <CardContent className="pt-12 pb-12 text-center">
+                    <Gift className="h-12 w-12 text-slate-600 mx-auto mb-4" />
+                    <p className="text-slate-400 text-lg mb-2">
+                      No offers found
+                    </p>
+                    <p className="text-slate-500 text-sm">
+                      {filter === "all"
+                        ? "You don't have any job offers yet"
+                        : `No ${filter} offers`}
+                    </p>
+                  </CardContent>
+                </Card>
+              ) : (
+                filteredOffers.map((offer) => {
+                  const daysUntilExpiry = getDaysUntilExpiry(offer.offer_expiry);
+                  const isExpiringSoon =
+                    daysUntilExpiry !== null &&
+                    daysUntilExpiry > 0 &&
+                    daysUntilExpiry <= 3;
+
+                  return (
+                    <Card
+                      key={offer.id}
+                      className={`bg-slate-800/50 border-slate-700/50 hover:border-violet-500/30 transition-all ${
+                        offer.status === "pending" && isExpiringSoon
+                          ? "border-yellow-500/50"
+                          : ""
+                      }`}
+                    >
+                      <CardContent className="pt-6">
+                        <div className="flex flex-col gap-4">
+                          <div className="flex items-start justify-between">
+                            <div>
+                              <h3 className="text-lg font-semibold text-violet-100">
+                                {offer.position_title}
+                              </h3>
+                              <div className="flex items-center gap-2 text-slate-400 mt-1">
+                                <Building className="h-4 w-4" />
+                                {offer.company_name}
+                              </div>
+                            </div>
+                            {getStatusBadge(offer.status)}
+                          </div>
+
+                          {/* Expiry Warning */}
+                          {offer.status === "pending" && isExpiringSoon && (
+                            <div className="flex items-center gap-2 p-2 rounded bg-yellow-500/10 border border-yellow-500/20 text-yellow-300">
+                              <AlertTriangle className="h-4 w-4" />
+                              <span className="text-sm">
+                                Expires in {daysUntilExpiry} day
+                                {daysUntilExpiry !== 1 ? "s" : ""}
+                              </span>
+                            </div>
+                          )}
+
+                          {/* Details */}
+                          <div className="grid md:grid-cols-3 gap-4">
+                            <div className="flex items-center gap-2 text-slate-300">
+                              <DollarSign className="h-4 w-4 text-green-400" />
+                              <span>
+                                {formatSalary(
+                                  offer.salary_amount,
+                                  offer.salary_type,
+                                )}
+                              </span>
+                            </div>
+                            {offer.start_date && (
+                              <div className="flex items-center gap-2 text-slate-300">
+                                <Calendar className="h-4 w-4 text-blue-400" />
+                                <span>Start: {formatDate(offer.start_date)}</span>
+                              </div>
+                            )}
+                            {offer.offer_expiry && (
+                              <div className="flex items-center gap-2 text-slate-300">
+                                <Clock className="h-4 w-4 text-yellow-400" />
+                                <span>
+                                  Expires: {formatDate(offer.offer_expiry)}
+                                </span>
+                              </div>
+                            )}
+                          </div>
+
+                          {/* Benefits */}
+                          {offer.benefits && offer.benefits.length > 0 && (
+                            <div className="flex flex-wrap gap-2">
+                              {offer.benefits.map((benefit: string, i: number) => (
+                                <Badge
+                                  key={i}
+                                  variant="outline"
+                                  className="text-slate-300 border-slate-600"
+                                >
+                                  {benefit}
+                                </Badge>
+                              ))}
+                            </div>
+                          )}
+
+                          {/* Actions */}
+                          <div className="flex items-center gap-3 pt-2 border-t border-slate-700/50">
+                            {offer.status === "pending" && (
+                              <>
+                                <Button
+                                  onClick={() => {
+                                    setRespondingTo(offer);
+                                    setResponseAction("accept");
+                                  }}
+                                  className="bg-green-600 hover:bg-green-700"
+                                >
+                                  <CheckCircle2 className="h-4 w-4 mr-2" />
+                                  Accept Offer
+                                </Button>
+                                <Button
+                                  onClick={() => {
+                                    setRespondingTo(offer);
+                                    setResponseAction("decline");
+                                  }}
+                                  variant="outline"
+                                  className="border-red-500/30 text-red-400 hover:bg-red-500/10"
+                                >
+                                  <XCircle className="h-4 w-4 mr-2" />
+                                  Decline
+                                </Button>
+                              </>
+                            )}
+                            {offer.offer_letter_url && (
+                              <a
+                                href={offer.offer_letter_url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                              >
+                                <Button
+                                  variant="outline"
+                                  className="border-violet-500/30 text-violet-300"
+                                >
+                                  <ExternalLink className="h-4 w-4 mr-2" />
+                                  View Offer Letter
+                                </Button>
+                              </a>
+                            )}
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Response Dialog */}
+      <Dialog
+        open={!!respondingTo}
+        onOpenChange={() => {
+          setRespondingTo(null);
+          setResponseAction(null);
+          setResponseNotes("");
+        }}
+      >
+        <DialogContent className="bg-slate-800 border-slate-700">
+          <DialogHeader>
+            <DialogTitle className="text-violet-100">
+              {responseAction === "accept" ? "Accept Offer" : "Decline Offer"}
+            </DialogTitle>
+            <DialogDescription className="text-slate-400">
+              {responseAction === "accept"
+                ? "Congratulations! Please confirm you want to accept this offer."
+                : "Are you sure you want to decline this offer? This action cannot be undone."}
+            </DialogDescription>
+          </DialogHeader>
+          {respondingTo && (
+            <div className="py-4">
+              <div className="p-4 rounded-lg bg-slate-700/30 border border-slate-600/30 mb-4">
+                <p className="font-medium text-violet-100">
+                  {respondingTo.position_title}
+                </p>
+                <p className="text-slate-400">{respondingTo.company_name}</p>
+                <p className="text-green-400 mt-2">
+                  {formatSalary(
+                    respondingTo.salary_amount,
+                    respondingTo.salary_type,
+                  )}
+                </p>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm text-violet-200">
+                  Notes (optional)
+                </label>
+                <Textarea
+                  value={responseNotes}
+                  onChange={(e) => setResponseNotes(e.target.value)}
+                  placeholder={
+                    responseAction === "accept"
+                      ? "Thank you for this opportunity..."
+                      : "Reason for declining (optional)..."
+                  }
+                  className="bg-slate-700/50 border-slate-600 text-slate-100"
+                />
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setRespondingTo(null);
+                setResponseAction(null);
+                setResponseNotes("");
+              }}
+              className="border-slate-600 text-slate-300"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={respondToOffer}
+              disabled={submitting}
+              className={
+                responseAction === "accept"
+                  ? "bg-green-600 hover:bg-green-700"
+                  : "bg-red-600 hover:bg-red-700"
+              }
+            >
+              {submitting ? (
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              ) : responseAction === "accept" ? (
+                <CheckCircle2 className="h-4 w-4 mr-2" />
+              ) : (
+                <XCircle className="h-4 w-4 mr-2" />
+              )}
+              {responseAction === "accept" ? "Accept Offer" : "Decline Offer"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Layout>
+  );
+}