From fb5ab1d695aa3603dcd041efc16f543103c2e987 Mon Sep 17 00:00:00 2001
From: itzzavdhesh <itzzavdhesh@gmail.com>
Date: Sun, 14 Jun 2026 14:02:08 +0530
Subject: [PATCH 1/8] feat: implement hiring management platform and fix unused
 imports/type issues

---
 src/Component/ui/Url.tsx                      |   4 +-
 .../v1/Component/Administrative_MetaData.tsx  |   1 -
 .../v1/Component/MemberShip_Status.tsx        |   1 -
 .../v1/Sections/ProfessionalDetails.tsx       |   6 -
 src/features/Hiring/v1/Hooks/useHiring.ts     | 314 +++++++
 .../Hiring/v1/Pages/ApplicantDetailsPage.tsx  | 419 +++++++++
 .../Hiring/v1/Pages/ApplicantsPage.tsx        | 401 ++++++++
 .../Hiring/v1/Pages/CompanyProfilePage.tsx    | 301 ++++++
 .../Hiring/v1/Pages/CreateJobPage.tsx         | 853 ++++++++++++++++++
 src/features/Hiring/v1/Pages/EditJobPage.tsx  | 413 +++++++++
 .../Hiring/v1/Pages/JobDetailsPage.tsx        | 495 ++++++++++
 .../Hiring/v1/Pages/JobsDashboardPage.tsx     | 471 ++++++++++
 .../Hiring/v1/Pages/MediaManagementPage.tsx   | 188 ++++
 .../Hiring/v1/Pages/ModerationPage.tsx        | 133 +++
 .../v1/Pages/PublicCompanyProfilePage.tsx     | 201 +++++
 .../Hiring/v1/Pages/PublicJobDetailsPage.tsx  | 303 +++++++
 src/features/Hiring/v1/Pages/SendMailPage.tsx | 243 +++++
 src/features/Hiring/v1/Store/hiringStore.ts   | 769 ++++++++++++++++
 src/features/Hiring/v1/Types/Hiring.types.ts  | 130 +++
 src/features/SideBar/v1/Section/SideBar.tsx   |  16 +-
 src/layouts/MemberLayout/MemberLayout.tsx     |   1 -
 src/routes/MemberRoutes.tsx                   |   7 +
 src/routes/OrgRoute.tsx                       |  29 +
 23 files changed, 5687 insertions(+), 12 deletions(-)
 create mode 100644 src/features/Hiring/v1/Hooks/useHiring.ts
 create mode 100644 src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx
 create mode 100644 src/features/Hiring/v1/Pages/ApplicantsPage.tsx
 create mode 100644 src/features/Hiring/v1/Pages/CompanyProfilePage.tsx
 create mode 100644 src/features/Hiring/v1/Pages/CreateJobPage.tsx
 create mode 100644 src/features/Hiring/v1/Pages/EditJobPage.tsx
 create mode 100644 src/features/Hiring/v1/Pages/JobDetailsPage.tsx
 create mode 100644 src/features/Hiring/v1/Pages/JobsDashboardPage.tsx
 create mode 100644 src/features/Hiring/v1/Pages/MediaManagementPage.tsx
 create mode 100644 src/features/Hiring/v1/Pages/ModerationPage.tsx
 create mode 100644 src/features/Hiring/v1/Pages/PublicCompanyProfilePage.tsx
 create mode 100644 src/features/Hiring/v1/Pages/PublicJobDetailsPage.tsx
 create mode 100644 src/features/Hiring/v1/Pages/SendMailPage.tsx
 create mode 100644 src/features/Hiring/v1/Store/hiringStore.ts
 create mode 100644 src/features/Hiring/v1/Types/Hiring.types.ts

diff --git a/src/Component/ui/Url.tsx b/src/Component/ui/Url.tsx
index e120bd8..1b8719e 100644
--- a/src/Component/ui/Url.tsx
+++ b/src/Component/ui/Url.tsx
@@ -22,8 +22,8 @@ const Url: React.FC<UrlProps> = ({
   style,
   ariaLabel = "URL display",
 }) => {
-  const valid = isValidDomain(domain);
-  const [Domain, setDomain] = React.useState(domain);
+  const valid = isValidDomain(domain || "");
+  const [Domain, setDomain] = React.useState(domain || "");
 
   return (
     <div className={className} style={style} aria-label={ariaLabel} role="presentation">
diff --git a/src/features/AddMember/v1/Component/Administrative_MetaData.tsx b/src/features/AddMember/v1/Component/Administrative_MetaData.tsx
index 36ccf86..a11e8df 100644
--- a/src/features/AddMember/v1/Component/Administrative_MetaData.tsx
+++ b/src/features/AddMember/v1/Component/Administrative_MetaData.tsx
@@ -1,5 +1,4 @@
 import MemberShip_Status from "./MemberShip_Status";
-import AccessLevel from "./AccessLevel";
 
 const Administrative_MetaData = () => {
   return (
diff --git a/src/features/AddMember/v1/Component/MemberShip_Status.tsx b/src/features/AddMember/v1/Component/MemberShip_Status.tsx
index 54e6d1d..7c2e4d1 100644
--- a/src/features/AddMember/v1/Component/MemberShip_Status.tsx
+++ b/src/features/AddMember/v1/Component/MemberShip_Status.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 
 import { useFormContext } from "react-hook-form";
 import type { MemberFormValues } from "../Validator/AddMember.Validator";
diff --git a/src/features/AddMember/v1/Sections/ProfessionalDetails.tsx b/src/features/AddMember/v1/Sections/ProfessionalDetails.tsx
index 39cd02a..2fd2ebc 100644
--- a/src/features/AddMember/v1/Sections/ProfessionalDetails.tsx
+++ b/src/features/AddMember/v1/Sections/ProfessionalDetails.tsx
@@ -3,7 +3,6 @@ import { IoBag } from "react-icons/io5";
 import { Input } from "../../../../Component/ui/Input";
 import DropDown from "../../../../Component/ui/DropDown";
 import { Roles } from "../Constant/Role.constant";
-import { SkillColor } from "../Constant/Skill.constant";
 import { useFormContext } from "react-hook-form";
 import type { MemberFormValues } from "../Validator/AddMember.Validator";
 import { theme } from "@/theme";
@@ -27,11 +26,6 @@ const ProfessionalDetails = () => {
     }
   };
 
-  const getSkillColor = (skill: string) => {
-    const index = skills.indexOf(skill);
-    return SkillColor[index % SkillColor.length];
-  };
-
   return (
     <div
       className="w-full flex flex-col rounded-xl self-center mt-5 p-7"
diff --git a/src/features/Hiring/v1/Hooks/useHiring.ts b/src/features/Hiring/v1/Hooks/useHiring.ts
new file mode 100644
index 0000000..1d86ada
--- /dev/null
+++ b/src/features/Hiring/v1/Hooks/useHiring.ts
@@ -0,0 +1,314 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useHiringStore } from "../Store/hiringStore";
+import { ApplicantStatus } from "../Types/Hiring.types";
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+// ==========================================
+// COMPANY PROFILE HOOKS
+// ==========================================
+
+export function useCompanyProfile() {
+  const profile = useHiringStore((state) => state.companyProfile);
+  return useQuery({
+    queryKey: ["hiring-company-profile"],
+    queryFn: async () => {
+      await delay(300);
+      return profile;
+    },
+  });
+}
+
+export function useUpdateCompanyProfile() {
+  const queryClient = useQueryClient();
+  const updateProfile = useHiringStore((state) => state.updateCompanyProfile);
+
+  return useMutation({
+    mutationFn: async (patch: Parameters<typeof updateProfile>[0]) => {
+      await delay(500);
+      updateProfile(patch);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["hiring-company-profile"] });
+    },
+  });
+}
+
+// ==========================================
+// JOBS HOOKS
+// ==========================================
+
+export function useJobs(filters?: { search?: string; department?: string; status?: string }) {
+  const jobs = useHiringStore((state) => state.jobs);
+
+  return useQuery({
+    queryKey: ["hiring-jobs", filters],
+    queryFn: async () => {
+      await delay(400);
+
+      return jobs.filter((job) => {
+        if (filters?.search) {
+          const q = filters.search.toLowerCase();
+          const matchTitle = job.title.toLowerCase().includes(q);
+          const matchDept = job.department.toLowerCase().includes(q);
+          const matchManager = job.hiringManager.toLowerCase().includes(q);
+          const matchId = job.id.toLowerCase().includes(q);
+          if (!matchTitle && !matchDept && !matchManager && !matchId) return false;
+        }
+
+        if (filters?.department && filters.department !== "all") {
+          if (job.department.toLowerCase() !== filters.department.toLowerCase()) return false;
+        }
+
+        if (filters?.status && filters.status !== "all") {
+          if (job.status.toLowerCase() !== filters.status.toLowerCase()) return false;
+        }
+
+        return true;
+      });
+    },
+  });
+}
+
+export function useJobDetail(id: string | undefined) {
+  const jobs = useHiringStore((state) => state.jobs);
+
+  return useQuery({
+    queryKey: ["hiring-job", id],
+    queryFn: async () => {
+      await delay(300);
+      const job = jobs.find((j) => j.id === id);
+      if (!job) throw new Error("Job not found");
+      return job;
+    },
+    enabled: !!id,
+  });
+}
+
+export function useCreateJob() {
+  const queryClient = useQueryClient();
+  const addJob = useHiringStore((state) => state.addJob);
+
+  return useMutation({
+    mutationFn: async (payload: Parameters<typeof addJob>[0]) => {
+      await delay(500);
+      return addJob(payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["hiring-jobs"] });
+    },
+  });
+}
+
+export function useUpdateJob() {
+  const queryClient = useQueryClient();
+  const updateJob = useHiringStore((state) => state.updateJob);
+
+  return useMutation({
+    mutationFn: async ({ id, patch }: { id: string; patch: Parameters<typeof updateJob>[1] }) => {
+      await delay(400);
+      updateJob(id, patch);
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["hiring-jobs"] });
+      queryClient.invalidateQueries({ queryKey: ["hiring-job", variables.id] });
+    },
+  });
+}
+
+export function useDeleteJob() {
+  const queryClient = useQueryClient();
+  const deleteJob = useHiringStore((state) => state.deleteJob);
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await delay(400);
+      deleteJob(id);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["hiring-jobs"] });
+    },
+  });
+}
+
+// ==========================================
+// APPLICANTS HOOKS
+// ==========================================
+
+export function useApplicants(jobId: string | undefined, search?: string, status?: string) {
+  const applicants = useHiringStore((state) => state.applicants);
+
+  return useQuery({
+    queryKey: ["hiring-applicants", jobId, search, status],
+    queryFn: async () => {
+      await delay(400);
+      let list = applicants.filter((a) => a.jobId === jobId);
+
+      if (search) {
+        const q = search.toLowerCase();
+        list = list.filter(
+          (a) =>
+            a.name.toLowerCase().includes(q) ||
+            a.email.toLowerCase().includes(q) ||
+            a.skills.some((s) => s.toLowerCase().includes(q))
+        );
+      }
+
+      if (status && status !== "all") {
+        if (status === "strong") {
+          list = list.filter((a) => a.matchScore >= 85);
+        } else {
+          list = list.filter((a) => a.status === status);
+        }
+      }
+
+      return list;
+    },
+    enabled: !!jobId,
+  });
+}
+
+export function useApplicantDetail(id: string | undefined) {
+  const applicants = useHiringStore((state) => state.applicants);
+
+  return useQuery({
+    queryKey: ["hiring-applicant", id],
+    queryFn: async () => {
+      await delay(300);
+      const app = applicants.find((a) => a.id === id);
+      if (!app) throw new Error("Applicant not found");
+      return app;
+    },
+    enabled: !!id,
+  });
+}
+
+export function useApplyToJob() {
+  const queryClient = useQueryClient();
+  const applyToJob = useHiringStore((state) => state.applyToJob);
+
+  return useMutation({
+    mutationFn: async ({ jobId, payload }: { jobId: string; payload: Parameters<typeof applyToJob>[1] }) => {
+      await delay(600);
+      return applyToJob(jobId, payload);
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["hiring-applicants", variables.jobId] });
+      queryClient.invalidateQueries({ queryKey: ["hiring-jobs"] });
+    },
+  });
+}
+
+export function useUpdateApplicantStatus() {
+  const queryClient = useQueryClient();
+  const updateStatus = useHiringStore((state) => state.updateApplicantStatus);
+
+  return useMutation({
+    mutationFn: async ({ id, status, user }: { id: string; status: ApplicantStatus; user: string }) => {
+      await delay(400);
+      updateStatus(id, status, user);
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["hiring-applicant", variables.id] });
+      queryClient.invalidateQueries({ queryKey: ["hiring-applicants"] });
+    },
+  });
+}
+
+export function useAddRecruiterNote() {
+  const queryClient = useQueryClient();
+  const addNote = useHiringStore((state) => state.addRecruiterNote);
+
+  return useMutation({
+    mutationFn: async ({ applicantId, note }: { applicantId: string; note: Parameters<typeof addNote>[1] }) => {
+      await delay(300);
+      addNote(applicantId, note);
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["hiring-applicant", variables.applicantId] });
+    },
+  });
+}
+
+// ==========================================
+// MAIL HOOKS
+// ==========================================
+
+export function useMailLogs(applicantId: string | undefined) {
+  const mailLogs = useHiringStore((state) => state.mailLogs);
+
+  return useQuery({
+    queryKey: ["hiring-mail-logs", applicantId],
+    queryFn: async () => {
+      await delay(300);
+      return mailLogs.filter((m) => m.applicantId === applicantId);
+    },
+    enabled: !!applicantId,
+  });
+}
+
+export function useSendMail() {
+  const queryClient = useQueryClient();
+  const sendMail = useHiringStore((state) => state.sendMail);
+
+  return useMutation({
+    mutationFn: async ({ applicantId, mail }: { applicantId: string; mail: Parameters<typeof sendMail>[1] }) => {
+      await delay(500);
+      sendMail(applicantId, mail);
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["hiring-mail-logs", variables.applicantId] });
+      queryClient.invalidateQueries({ queryKey: ["hiring-applicant", variables.applicantId] });
+    },
+  });
+}
+
+// ==========================================
+// AUDIT LOGS HOOKS
+// ==========================================
+
+export function useAuditLogs(jobId: string | undefined) {
+  const auditLogs = useHiringStore((state) => state.auditLogs);
+
+  return useQuery({
+    queryKey: ["hiring-audit-logs", jobId],
+    queryFn: async () => {
+      await delay(300);
+      return auditLogs.filter((a) => a.jobId === jobId);
+    },
+    enabled: !!jobId,
+  });
+}
+
+// ==========================================
+// MODERATION HOOKS
+// ==========================================
+
+export function useModerationJobs() {
+  const jobs = useHiringStore((state) => state.jobs);
+
+  return useQuery({
+    queryKey: ["hiring-moderation-jobs"],
+    queryFn: async () => {
+      await delay(400);
+      // Moderation queue has pending status jobs (e.g. draft, paused, or we can seed a specific pending job, or just filter jobs with 'draft' or 'paused')
+      return jobs;
+    },
+  });
+}
+
+export function useModerateJob() {
+  const queryClient = useQueryClient();
+  const moderateJob = useHiringStore((state) => state.moderateJob);
+
+  return useMutation({
+    mutationFn: async ({ jobId, action, user }: { jobId: string; action: "approve" | "reject"; user: string }) => {
+      await delay(500);
+      moderateJob(jobId, action, user);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["hiring-jobs"] });
+      queryClient.invalidateQueries({ queryKey: ["hiring-moderation-jobs"] });
+    },
+  });
+}
diff --git a/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx b/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx
new file mode 100644
index 0000000..f2898ce
--- /dev/null
+++ b/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx
@@ -0,0 +1,419 @@
+import React, { useState } from "react";
+import { useTheme } from "@/theme";
+import { useNavigate, useParams } from "react-router-dom";
+import { useApplicantDetail, useUpdateApplicantStatus, useAddRecruiterNote } from "../Hooks/useHiring";
+import { ApplicantStatus } from "../Types/Hiring.types";
+import Button from "@/Component/ui/Button";
+import { FiCalendar, FiMail, FiArrowLeft, FiPlus, FiChevronRight } from "react-icons/fi";
+import { MdCheckCircle } from "react-icons/md";
+
+const ApplicantDetailsPage = () => {
+  const { theme } = useTheme();
+  const navigate = useNavigate();
+  const { id: jobId, applicantId } = useParams<{ id: string; applicantId: string }>();
+
+  // Fetch applicant
+  const { data: applicant, isLoading } = useApplicantDetail(applicantId);
+  const updateStatusMutation = useUpdateApplicantStatus();
+  const addNoteMutation = useAddRecruiterNote();
+
+  // Note composition state
+  const [noteContent, setNoteContent] = useState("");
+  const [noteRec, setNoteRec] = useState<"strong_hire" | "hire" | "neutral" | "no_hire">("hire");
+  const [showNoteForm, setShowNoteForm] = useState(false);
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center p-8">
+        <div className="text-sm font-medium animate-pulse" style={{ color: theme.text.secondary }}>
+          Loading candidate profile file...
+        </div>
+      </div>
+    );
+  }
+
+  if (!applicant) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center p-8 gap-4">
+        <span className="text-sm font-semibold" style={{ color: theme.text.primary }}>Candidate file not found.</span>
+        <Button text="Back to Applicants" onClick={() => navigate(`/org/jobs/${jobId}/applicants`)} />
+      </div>
+    );
+  }
+
+  const handleMoveStage = (status: ApplicantStatus) => {
+    updateStatusMutation.mutate({ id: applicant.id, status, user: "Sarah Jenkins" });
+  };
+
+  const handleAddNote = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!noteContent.trim()) return;
+
+    addNoteMutation.mutate(
+      {
+        applicantId: applicant.id,
+        note: {
+          author: "Sarah Jenkins",
+          content: noteContent,
+          recommendation: noteRec,
+          avatar: "/avatars/sarah.jpg",
+        },
+      },
+      {
+        onSuccess: () => {
+          setNoteContent("");
+          setShowNoteForm(false);
+        },
+      }
+    );
+  };
+
+  const getNextStage = (status: ApplicantStatus): ApplicantStatus => {
+    const sequence: ApplicantStatus[] = ["applied", "screening", "technical", "interview", "hr", "offer", "hired"];
+    const idx = sequence.indexOf(status);
+    if (idx !== -1 && idx < sequence.length - 1) return sequence[idx + 1];
+    return status;
+  };
+
+  const nextStage = getNextStage(applicant.status);
+
+  return (
+    <div className="flex-1 overflow-y-auto p-6 lg:p-10" style={{ backgroundColor: theme.bg.page }}>
+      <div className="max-w-7xl mx-auto flex flex-col gap-6">
+        {/* Top bar */}
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => navigate(`/org/jobs/${jobId}/applicants`)}
+              className="p-1.5 rounded-lg border hover:bg-zinc-50 dark:hover:bg-zinc-800"
+              style={{ borderColor: theme.border.default, color: theme.text.primary }}
+            >
+              <FiArrowLeft className="w-4 h-4" />
+            </button>
+            <div className="flex flex-col">
+              <div className="flex items-center gap-2.5">
+                <h1 className="text-xl font-bold tracking-tight" style={{ color: theme.text.primary }}>
+                  {applicant.name}
+                </h1>
+                <span className="px-2 py-0.5 rounded text-[10px] font-bold text-green-600 bg-green-500/10">
+                  {applicant.matchScore}% MATCH
+                </span>
+              </div>
+              <span className="text-xs" style={{ color: theme.text.muted }}>
+                Applied for Senior Product Designer &bull; Applied {applicant.appliedDate}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2.5">
+            <Button
+              text="Schedule Interview"
+              variant="secondary"
+              icon={<FiCalendar className="mr-1.5" />}
+              onClick={() => alert("Redirecting to calendar integrations...")}
+            />
+            <Button
+              text="Compose Mail"
+              variant="secondary"
+              icon={<FiMail className="mr-1.5" />}
+              onClick={() => navigate(`/org/jobs/${jobId}/applicants/${applicant.id}/mail`)}
+            />
+            <Button
+              text="Advance Candidate"
+              icon={<FiChevronRight className="ml-1.5" />}
+              onClick={() => handleMoveStage(nextStage)}
+              disabled={applicant.status === "hired" || applicant.status === "rejected"}
+            />
+          </div>
+        </div>
+
+        {/* Layout Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* LEFT: CANDIDATE INFO & METRIC */}
+          <div className="flex flex-col gap-6">
+            {/* Profile Summary Card */}
+            <div
+              className="border rounded-xl p-5 shadow-sm flex flex-col items-center text-center gap-4 bg-white dark:bg-zinc-900"
+              style={{ borderColor: theme.border.default }}
+            >
+              <div className="w-16 h-16 rounded-full bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center font-bold text-xl text-blue-500">
+                {applicant.name[0]}
+              </div>
+              <div className="flex flex-col gap-0.5">
+                <h3 className="font-bold text-sm" style={{ color: theme.text.primary }}>{applicant.name}</h3>
+                <span className="text-xs" style={{ color: theme.text.muted }}>San Francisco, CA</span>
+              </div>
+
+              <div className="w-full grid grid-cols-2 gap-4 border-t pt-4 text-xs" style={{ borderColor: theme.border.default }}>
+                <div className="flex flex-col items-center">
+                  <span className="text-[10px] uppercase tracking-wider text-zinc-400">Experience</span>
+                  <span className="font-bold mt-0.5" style={{ color: theme.text.primary }}>{applicant.experience}</span>
+                </div>
+                <div className="flex flex-col items-center">
+                  <span className="text-[10px] uppercase tracking-wider text-zinc-400">Education</span>
+                  <span className="font-bold mt-0.5 text-center" style={{ color: theme.text.primary }}>RISD BFA</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Evaluation Score Card */}
+            <div
+              className="border rounded-xl p-5 shadow-sm flex items-center justify-between bg-white dark:bg-zinc-900"
+              style={{ borderColor: theme.border.default }}
+            >
+              <div className="flex flex-col gap-3 flex-1">
+                <h4 className="text-[11px] font-bold uppercase tracking-wider text-zinc-400">Evaluation Matrix</h4>
+                <div className="flex flex-col gap-2.5 text-xs font-semibold">
+                  <div className="flex justify-between items-center">
+                    <span style={{ color: theme.text.secondary }}>Technical Fit</span>
+                    <span style={{ color: theme.text.primary }}>{applicant.rating.technical || "Pending"}/10</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span style={{ color: theme.text.secondary }}>Culture Fit</span>
+                    <span style={{ color: theme.text.primary }}>{applicant.rating.culture || "Pending"}/10</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span style={{ color: theme.text.secondary }}>Communication</span>
+                    <span style={{ color: theme.text.primary }}>{applicant.rating.communication || "Pending"}/10</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col items-center justify-center pl-6 border-l w-24 h-full" style={{ borderColor: theme.border.default }}>
+                <span className="text-[9px] font-bold uppercase tracking-wider text-zinc-400 mb-1">Rating</span>
+                <span className="text-3xl font-black text-blue-600 leading-none">{applicant.rating.rating}</span>
+              </div>
+            </div>
+
+            {/* Skills & tags */}
+            <div
+              className="border rounded-xl p-5 shadow-sm flex flex-col gap-3 bg-white dark:bg-zinc-900"
+              style={{ borderColor: theme.border.default }}
+            >
+              <h4 className="text-[11px] font-bold uppercase tracking-wider text-zinc-400">Skills Tags</h4>
+              <div className="flex flex-wrap gap-1.5">
+                {applicant.skills.map((skill) => (
+                  <span
+                    key={skill}
+                    className="px-2.5 py-1 rounded bg-zinc-100 dark:bg-zinc-800 text-[10px] font-bold text-zinc-600 dark:text-zinc-300"
+                  >
+                    {skill}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* MIDDLE: TIMELINES & NOTES */}
+          <div className="flex flex-col gap-6">
+            {/* Reviewer Feedback Panel */}
+            <div
+              className="border rounded-xl p-6 shadow-sm flex flex-col gap-5 bg-white dark:bg-zinc-900"
+              style={{ borderColor: theme.border.default }}
+            >
+              <div className="flex justify-between items-center border-b pb-3" style={{ borderColor: theme.border.default }}>
+                <h4 className="text-xs font-bold uppercase tracking-wider" style={{ color: theme.text.primary }}>
+                  Internal Reviewer Feedback
+                </h4>
+                <button
+                  onClick={() => setShowNoteForm(!showNoteForm)}
+                  className="text-xs font-bold text-blue-500 hover:underline flex items-center gap-1"
+                >
+                  <FiPlus /> Add Note
+                </button>
+              </div>
+
+              {/* Note Submission Form */}
+              {showNoteForm && (
+                <form onSubmit={handleAddNote} className="p-4 border rounded-xl flex flex-col gap-3 bg-zinc-50 dark:bg-zinc-900/30" style={{ borderColor: theme.border.default }}>
+                  <textarea
+                    value={noteContent}
+                    onChange={(e) => setNoteContent(e.target.value)}
+                    placeholder="Write recruiter feedback, notes on technical rounds..."
+                    className="w-full h-20 p-2 border rounded-lg text-xs outline-none bg-white dark:bg-zinc-900"
+                    style={{ borderColor: theme.border.default, color: theme.text.primary }}
+                    required
+                  />
+                  <div className="flex justify-between items-center">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[10px] font-bold uppercase tracking-wider" style={{ color: theme.text.muted }}>Recommendation:</span>
+                      <select
+                        value={noteRec}
+                        onChange={(e) => setNoteRec(e.target.value as any)}
+                        className="p-1 border rounded text-[10px] outline-none bg-white dark:bg-zinc-900"
+                        style={{ borderColor: theme.border.default, color: theme.text.primary }}
+                      >
+                        <option value="strong_hire">Strong Hire</option>
+                        <option value="hire">Hire</option>
+                        <option value="neutral">Neutral</option>
+                        <option value="no_hire">No Hire</option>
+                      </select>
+                    </div>
+
+                    <div className="flex gap-2">
+                      <button
+                        type="button"
+                        onClick={() => setShowNoteForm(false)}
+                        className="px-2.5 py-1 text-[10px] font-bold border rounded bg-zinc-100 text-zinc-600 hover:bg-zinc-200"
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        type="submit"
+                        className="px-3 py-1 text-[10px] font-bold rounded text-white bg-blue-600 hover:bg-blue-700"
+                      >
+                        Submit
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              )}
+
+              {/* Notes List */}
+              {applicant.notes.length === 0 ? (
+                <p className="text-xs text-center py-6" style={{ color: theme.text.muted }}>
+                  No internal feedback logged yet.
+                </p>
+              ) : (
+                <div className="flex flex-col gap-5">
+                  {applicant.notes.map((note) => (
+                    <div key={note.id} className="flex flex-col gap-2 p-4 border rounded-xl" style={{ borderColor: theme.border.default, backgroundColor: theme.bg.surfaceSecondary }}>
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          <div className="w-6 h-6 rounded-full bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center text-[10px] font-bold">
+                            {note.author[0]}
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="text-xs font-bold" style={{ color: theme.text.primary }}>{note.author}</span>
+                            <span className="text-[9px]" style={{ color: theme.text.muted }}>{note.date}</span>
+                          </div>
+                        </div>
+
+                        <span
+                          className={`px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider ${
+                            note.recommendation === "strong_hire"
+                              ? "bg-green-500/10 text-green-500"
+                              : note.recommendation === "hire"
+                                ? "bg-blue-500/10 text-blue-500"
+                                : note.recommendation === "neutral"
+                                  ? "bg-zinc-200 text-zinc-600"
+                                  : "bg-red-500/10 text-red-500"
+                          }`}
+                        >
+                          {note.recommendation.replace("_", " ")}
+                        </span>
+                      </div>
+                      <p className="text-xs leading-relaxed" style={{ color: theme.text.secondary }}>
+                        "{note.content}"
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* Candidate Experience timeline */}
+            <div
+              className="border rounded-xl p-6 shadow-sm flex flex-col gap-5 bg-white dark:bg-zinc-900"
+              style={{ borderColor: theme.border.default }}
+            >
+              <h4 className="text-xs font-bold uppercase tracking-wider" style={{ color: theme.text.primary }}>
+                Recent Professional Experience
+              </h4>
+
+              <div className="relative border-l pl-4 flex flex-col gap-5" style={{ borderColor: theme.border.default }}>
+                <div className="relative text-xs flex flex-col gap-0.5">
+                  <div className="absolute -left-[21px] top-1 w-2.5 h-2.5 rounded-full bg-blue-600 border border-white" />
+                  <span className="font-bold" style={{ color: theme.text.primary }}>Senior Product Designer</span>
+                  <span className="text-[10px]" style={{ color: theme.text.muted }}>Meta &bull; Jan 2021 &mdash; Present</span>
+                  <p className="mt-1 leading-relaxed" style={{ color: theme.text.secondary }}>
+                    Led the design of the Ads Manager dashboard, increasing user efficiency by 22% across enterprise platforms.
+                  </p>
+                </div>
+
+                <div className="relative text-xs flex flex-col gap-0.5">
+                  <div className="absolute -left-[21px] top-1 w-2.5 h-2.5 rounded-full bg-zinc-300 border border-white" />
+                  <span className="font-bold" style={{ color: theme.text.primary }}>Product Designer</span>
+                  <span className="text-[10px]" style={{ color: theme.text.muted }}>Stripe &bull; May 2018 &mdash; Dec 2020</span>
+                  <p className="mt-1 leading-relaxed" style={{ color: theme.text.secondary }}>
+                    Redesigned checkout flows, reducing drop-off rates by 15%. Integrated crypto payment visualizations.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* RIGHT: PIPELINE PROGRESS & CONTROLS */}
+          <div className="flex flex-col gap-6">
+            {/* Pipeline Stage board */}
+            <div
+              className="border rounded-xl p-6 shadow-sm flex flex-col gap-5 bg-white dark:bg-zinc-900"
+              style={{ borderColor: theme.border.default }}
+            >
+              <h4 className="text-xs font-bold uppercase tracking-wider border-b pb-2" style={{ color: theme.text.primary, borderColor: theme.border.default }}>
+                Pipeline Progress
+              </h4>
+
+              {/* Stages List */}
+              <div className="flex flex-col gap-4">
+                {(["applied", "screening", "technical", "interview", "hr", "offer", "hired"] as ApplicantStatus[]).map((stage, idx) => {
+                  const sequence = ["applied", "screening", "technical", "interview", "hr", "offer", "hired"];
+                  const currentIdx = sequence.indexOf(applicant.status);
+                  const isCompleted = currentIdx >= idx;
+                  const isCurrent = applicant.status === stage;
+
+                  return (
+                    <div
+                      key={stage}
+                      onClick={() => handleMoveStage(stage)}
+                      className={`flex items-center gap-3 text-xs font-semibold cursor-pointer p-1.5 rounded hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors ${
+                        isCurrent ? "text-blue-600 bg-blue-500/5 font-bold" : ""
+                      }`}
+                    >
+                      {isCompleted ? (
+                        <MdCheckCircle className="w-5 h-5 text-green-500 shrink-0" />
+                      ) : (
+                        <div className="w-5 h-5 rounded-full border border-zinc-300 flex items-center justify-center shrink-0 text-[10px]">
+                          {idx + 1}
+                        </div>
+                      )}
+                      <span className="capitalize" style={{ color: isCurrent ? theme.primary.default : theme.text.primary }}>
+                        {stage === "hr" ? "HR Round" : stage}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Action center */}
+            <div
+              className="border rounded-xl p-5 shadow-sm flex flex-col gap-4 bg-white dark:bg-zinc-900"
+              style={{ borderColor: theme.border.default }}
+            >
+              <h4 className="text-xs font-bold uppercase tracking-wider" style={{ color: theme.text.primary }}>
+                Action Center
+              </h4>
+              <div className="flex flex-col gap-2">
+                <button
+                  onClick={() => handleMoveStage(nextStage)}
+                  className="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-xs font-bold transition-colors"
+                >
+                  Accept for Next Stage
+                </button>
+                <button
+                  onClick={() => handleMoveStage("rejected")}
+                  className="w-full py-2 border border-red-500/30 text-red-500 hover:bg-red-500/5 rounded-lg text-xs font-bold transition-colors"
+                >
+                  Reject Applicant
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ApplicantDetailsPage;
diff --git a/src/features/Hiring/v1/Pages/ApplicantsPage.tsx b/src/features/Hiring/v1/Pages/ApplicantsPage.tsx
new file mode 100644
index 0000000..5060a27
--- /dev/null
+++ b/src/features/Hiring/v1/Pages/ApplicantsPage.tsx
@@ -0,0 +1,401 @@
+import { useState } from "react";
+import { useTheme } from "@/theme";
+import { useNavigate, useParams } from "react-router-dom";
+import { useApplicants, useJobDetail, useUpdateApplicantStatus } from "../Hooks/useHiring";
+import { ApplicantStatus } from "../Types/Hiring.types";
+import { FiSearch, FiDownload, FiArrowLeft } from "react-icons/fi";
+import { MdOutlineThumbDown, MdTrendingUp } from "react-icons/md";
+
+const ApplicantsPage = () => {
+  const { theme } = useTheme();
+  const navigate = useNavigate();
+  const { id: jobId } = useParams<{ id: string }>();
+
+  // Search & filters state
+  const [search, setSearch] = useState("");
+  const [activeTab, setActiveTab] = useState<"all" | "strong" | "applied" | "screening" | "interview" | "offer" | "rejected">("all");
+  const [selectedApplicants, setSelectedApplicants] = useState<string[]>([]);
+  const [bulkStatus, setBulkStatus] = useState("");
+
+  // Fetch job & applicants
+  const { data: job } = useJobDetail(jobId);
+  const { data: applicants = [], isLoading } = useApplicants(jobId, search, activeTab === "all" ? undefined : activeTab);
+  const updateStatusMutation = useUpdateApplicantStatus();
+
+  // Metrics (dynamically computed from all applicants for this job)
+  const allJobApplicants = useApplicants(jobId).data || [];
+  const totalCount = allJobApplicants.length;
+  const screeningCount = allJobApplicants.filter((a) => a.status === "screening").length;
+  const interviewCount = allJobApplicants.filter((a) => ["technical", "interview", "hr"].includes(a.status)).length;
+  const offerCount = allJobApplicants.filter((a) => ["offer", "hired"].includes(a.status)).length;
+  const rejectedCount = allJobApplicants.filter((a) => a.status === "rejected").length;
+
+  const handleSelectApplicant = (id: string) => {
+    setSelectedApplicants((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+
+  const handleSelectAll = () => {
+    if (selectedApplicants.length === applicants.length) {
+      setSelectedApplicants([]);
+    } else {
+      setSelectedApplicants(applicants.map((a) => a.id));
+    }
+  };
+
+  const handleBulkStatusChange = (status: ApplicantStatus) => {
+    if (selectedApplicants.length === 0) return;
+    if (confirm(`Change status of ${selectedApplicants.length} applicants to '${status}'?`)) {
+      selectedApplicants.forEach((appId) => {
+        updateStatusMutation.mutate({ id: appId, status, user: "Hiring Manager" });
+      });
+      setSelectedApplicants([]);
+      setBulkStatus("");
+    }
+  };
+
+  const handleExportCSV = () => {
+    const headers = "Name,Email,Match Score,Status,Experience,Applied Date\n";
+    const rows = applicants
+      .map((a) => `"${a.name}","${a.email}",${a.matchScore},"${a.status}","${a.experience}","${a.appliedDate}"`)
+      .join("\n");
+    const blob = new Blob([headers + rows], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", `applicants_export_${jobId}.csv`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const getStatusStyle = (status: ApplicantStatus) => {
+    switch (status) {
+      case "applied":
+        return { bg: "bg-blue-500/10", text: "text-blue-500", label: "Applied" };
+      case "screening":
+        return { bg: "bg-cyan-500/10", text: "text-cyan-500", label: "Screening" };
+      case "technical":
+      case "interview":
+      case "hr":
+        return { bg: "bg-purple-500/10", text: "text-purple-500", label: "Interviewing" };
+      case "offer":
+        return { bg: "bg-indigo-500/10", text: "text-indigo-500", label: "Offer Out" };
+      case "hired":
+        return { bg: "bg-green-500/10", text: "text-green-500", label: "Hired" };
+      case "rejected":
+        return { bg: "bg-red-500/10", text: "text-red-500", label: "Rejected" };
+      default:
+        return { bg: "bg-zinc-100", text: "text-zinc-500", label: status };
+    }
+  };
+
+  return (
+    <div className="flex-1 flex flex-col min-h-screen overflow-x-hidden animate-fade-in" style={{ backgroundColor: theme.bg.page }}>
+      {/* Top Header */}
+      <div
+        className="px-6 py-4 border-b flex items-center justify-between"
+        style={{ borderColor: theme.border.default, backgroundColor: theme.bg.surface }}
+      >
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => navigate(`/org/jobs/${jobId}`)}
+            className="p-1.5 rounded-lg border hover:bg-zinc-50 dark:hover:bg-zinc-800"
+            style={{ borderColor: theme.border.default, color: theme.text.primary }}
+          >
+            <FiArrowLeft className="w-4 h-4" />
+          </button>
+          <div className="flex flex-col gap-0.5">
+            <h1 className="text-lg font-bold tracking-tight" style={{ color: theme.text.primary }}>
+              {job?.title} Applicants
+            </h1>
+            <span className="text-xs" style={{ color: theme.text.muted }}>
+              ATS Pipeline Manager
+            </span>
+          </div>
+        </div>
+
+        <button
+          onClick={handleExportCSV}
+          className="px-4 py-2 border rounded-lg text-xs font-bold flex items-center gap-1.5 hover:bg-zinc-50 dark:hover:bg-zinc-800"
+          style={{ borderColor: theme.border.default, color: theme.text.primary }}
+        >
+          <FiDownload /> Export CSV
+        </button>
+      </div>
+
+      {/* Metrics Banner */}
+      <div className="grid grid-cols-2 md:grid-cols-5 gap-4 p-6">
+        {/* Metric 1 */}
+        <div
+          className="border rounded-xl p-4 flex flex-col gap-1.5 shadow-sm bg-white dark:bg-zinc-900"
+          style={{ borderColor: theme.border.default }}
+        >
+          <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-400">Total</span>
+          <div className="flex items-baseline gap-1.5 mt-0.5">
+            <span className="text-xl font-bold" style={{ color: theme.text.primary }}>
+              {totalCount}
+            </span>
+            <span className="text-[9px] font-bold text-blue-500 bg-blue-500/10 px-1 py-0.25 rounded flex items-center">
+              +12% <MdTrendingUp className="ml-0.5" />
+            </span>
+          </div>
+        </div>
+
+        {/* Metric 2 */}
+        <div
+          className="border rounded-xl p-4 flex flex-col gap-1.5 shadow-sm bg-white dark:bg-zinc-900"
+          style={{ borderColor: theme.border.default }}
+        >
+          <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-400">Screening</span>
+          <span className="text-xl font-bold" style={{ color: theme.text.primary }}>
+            {screeningCount}
+          </span>
+          <div className="w-full h-1 bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden mt-1">
+            <div className="h-full bg-cyan-500 rounded-full" style={{ width: `${totalCount ? (screeningCount / totalCount) * 100 : 0}%` }} />
+          </div>
+        </div>
+
+        {/* Metric 3 */}
+        <div
+          className="border rounded-xl p-4 flex flex-col gap-1.5 shadow-sm bg-white dark:bg-zinc-900"
+          style={{ borderColor: theme.border.default }}
+        >
+          <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-400">Interview</span>
+          <span className="text-xl font-bold" style={{ color: theme.text.primary }}>
+            {interviewCount}
+          </span>
+          <div className="w-full h-1 bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden mt-1">
+            <div className="h-full bg-purple-500 rounded-full" style={{ width: `${totalCount ? (interviewCount / totalCount) * 100 : 0}%` }} />
+          </div>
+        </div>
+
+        {/* Metric 4 */}
+        <div
+          className="border rounded-xl p-4 flex flex-col gap-1.5 shadow-sm bg-white dark:bg-zinc-900"
+          style={{ borderColor: theme.border.default }}
+        >
+          <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-400">Offer</span>
+          <span className="text-xl font-bold" style={{ color: theme.text.primary }}>
+            {offerCount}
+          </span>
+          <div className="w-full h-1 bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden mt-1">
+            <div className="h-full bg-green-500 rounded-full" style={{ width: `${totalCount ? (offerCount / totalCount) * 100 : 0}%` }} />
+          </div>
+        </div>
+
+        {/* Metric 5 */}
+        <div
+          className="border rounded-xl p-4 flex flex-col gap-1.5 shadow-sm bg-white dark:bg-zinc-900"
+          style={{ borderColor: theme.border.default }}
+        >
+          <div className="flex justify-between items-center text-[10px] font-bold uppercase tracking-wider text-zinc-400">
+            <span>Rejected</span>
+            <MdOutlineThumbDown className="w-3.5 h-3.5 text-red-500" />
+          </div>
+          <span className="text-xl font-bold" style={{ color: theme.text.primary }}>
+            {rejectedCount}
+          </span>
+        </div>
+      </div>
+
+      {/* Action Filters Row */}
+      <div className="px-6 pb-4 flex flex-col md:flex-row items-center justify-between gap-4">
+        {/* Category Tabs */}
+        <div className="flex items-center gap-1.5 p-1 rounded-lg border w-full md:w-auto" style={{ borderColor: theme.border.default, backgroundColor: theme.bg.surfaceSecondary }}>
+          <button
+            onClick={() => setActiveTab("all")}
+            className={`px-3 py-1.5 rounded-md text-xs font-bold transition-all ${
+              activeTab === "all"
+                ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
+                : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400"
+            }`}
+          >
+            All Applicants
+          </button>
+          <button
+            onClick={() => setActiveTab("strong")}
+            className={`px-3 py-1.5 rounded-md text-xs font-bold transition-all ${
+              activeTab === "strong"
+                ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
+                : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400"
+            }`}
+          >
+            Strong Matches
+          </button>
+          <button
+            onClick={() => setActiveTab("screening")}
+            className={`px-3 py-1.5 rounded-md text-xs font-bold transition-all ${
+              activeTab === "screening"
+                ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
+                : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400"
+            }`}
+          >
+            Screening
+          </button>
+        </div>
+
+        {/* Search */}
+        <div className="flex items-center gap-3 w-full md:w-auto flex-1 justify-end">
+          <div className="relative w-full max-w-xs">
+            <FiSearch className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400" />
+            <input
+              type="text"
+              placeholder="Search applicants, skills..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full pl-9 pr-4 py-1.5 border rounded-lg text-xs outline-none"
+              style={{
+                backgroundColor: theme.bg.surface,
+                borderColor: theme.border.default,
+                color: theme.text.primary,
+              }}
+            />
+          </div>
+
+          {selectedApplicants.length > 0 && (
+            <div className="flex items-center gap-2">
+              <select
+                value={bulkStatus}
+                onChange={(e) => handleBulkStatusChange(e.target.value as ApplicantStatus)}
+                className="p-1.5 border rounded-lg text-xs outline-none bg-white dark:bg-zinc-800"
+                style={{ borderColor: theme.border.default, color: theme.text.primary }}
+              >
+                <option value="">Bulk Status Actions</option>
+                <option value="screening">Move to Screening</option>
+                <option value="technical">Move to Technical</option>
+                <option value="interview">Move to Interview</option>
+                <option value="offer">Move to Offer</option>
+                <option value="rejected">Reject Candidates</option>
+              </select>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Table grid */}
+      <div className="flex-1 px-6 pb-6">
+        <div className="border rounded-xl overflow-hidden shadow-sm" style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}>
+          <div className="overflow-x-auto">
+            <table className="w-full border-collapse text-left">
+              <thead>
+                <tr className="border-b text-[10px] font-bold uppercase tracking-wider" style={{ borderColor: theme.border.default, color: theme.text.muted, backgroundColor: theme.bg.surfaceSecondary }}>
+                  <th className="p-4 w-12 text-center">
+                    <input
+                      type="checkbox"
+                      checked={selectedApplicants.length === applicants.length && applicants.length > 0}
+                      onChange={handleSelectAll}
+                      className="rounded border-gray-300"
+                    />
+                  </th>
+                  <th className="p-4">Applicant Name</th>
+                  <th className="p-4 text-center">Match Score</th>
+                  <th className="p-4">Status</th>
+                  <th className="p-4">Experience</th>
+                  <th className="p-4">Applied Date</th>
+                  <th className="p-4 text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y text-xs font-medium" style={{ borderColor: theme.border.default }}>
+                {isLoading ? (
+                  <tr>
+                    <td colSpan={7} className="p-8 text-center animate-pulse" style={{ color: theme.text.muted }}>
+                      Loading candidates...
+                    </td>
+                  </tr>
+                ) : applicants.length === 0 ? (
+                  <tr>
+                    <td colSpan={7} className="p-12 text-center" style={{ color: theme.text.muted }}>
+                      No candidates found matching the active filter.
+                    </td>
+                  </tr>
+                ) : (
+                  applicants.map((app) => {
+                    const status = getStatusStyle(app.status);
+                    const isSelected = selectedApplicants.includes(app.id);
+                    return (
+                      <tr
+                        key={app.id}
+                        className={`hover:bg-zinc-50/50 dark:hover:bg-zinc-800/30 transition-colors ${
+                          isSelected ? "bg-blue-500/5" : ""
+                        }`}
+                      >
+                        <td className="p-4 text-center">
+                          <input
+                            type="checkbox"
+                            checked={isSelected}
+                            onChange={() => handleSelectApplicant(app.id)}
+                            className="rounded border-gray-300"
+                          />
+                        </td>
+                        <td className="p-4">
+                          <div className="flex items-center gap-3">
+                            <div
+                              className="w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs bg-zinc-100 dark:bg-zinc-800"
+                              style={{ color: theme.primary.default }}
+                            >
+                              {app.name[0]}
+                            </div>
+                            <div className="flex flex-col gap-0.5">
+                              <span
+                                className="font-semibold cursor-pointer hover:underline"
+                                style={{ color: theme.text.primary }}
+                                onClick={() => navigate(`/org/jobs/${jobId}/applicants/${app.id}`)}
+                              >
+                                {app.name}
+                              </span>
+                              <span className="text-[10px]" style={{ color: theme.text.muted }}>
+                                {app.email}
+                              </span>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="p-4 text-center">
+                          <span
+                            className={`px-1.5 py-0.5 rounded text-[10px] font-bold ${
+                              app.matchScore >= 85
+                                ? "text-green-600 bg-green-500/10"
+                                : app.matchScore >= 70
+                                  ? "text-blue-600 bg-blue-500/10"
+                                  : "text-zinc-500 bg-zinc-100"
+                            }`}
+                          >
+                            {app.matchScore}%
+                          </span>
+                        </td>
+                        <td className="p-4">
+                          <span
+                            className={`px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wide inline-block ${status.bg} ${status.text}`}
+                          >
+                            {status.label}
+                          </span>
+                        </td>
+                        <td className="p-4" style={{ color: theme.text.secondary }}>
+                          {app.experience}
+                        </td>
+                        <td className="p-4" style={{ color: theme.text.secondary }}>
+                          {app.appliedDate}
+                        </td>
+                        <td className="p-4 text-right">
+                          <button
+                            onClick={() => navigate(`/org/jobs/${jobId}/applicants/${app.id}`)}
+                            className="text-xs font-bold text-blue-500 hover:underline"
+                          >
+                            Review Profile &rarr;
+                          </button>
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ApplicantsPage;
diff --git a/src/features/Hiring/v1/Pages/CompanyProfilePage.tsx b/src/features/Hiring/v1/Pages/CompanyProfilePage.tsx
new file mode 100644
index 0000000..dd3d04b
--- /dev/null
+++ b/src/features/Hiring/v1/Pages/CompanyProfilePage.tsx
@@ -0,0 +1,301 @@
+import React, { useState, useEffect } from "react";
+import { useTheme } from "@/theme";
+import { useCompanyProfile, useUpdateCompanyProfile } from "../Hooks/useHiring";
+import Input from "@/Component/ui/Input";
+import Button from "@/Component/ui/Button";
+
+const CompanyProfilePage = () => {
+  const { theme } = useTheme();
+  const { data: profile, isLoading } = useCompanyProfile();
+  const updateProfileMutation = useUpdateCompanyProfile();
+
+  const [name, setName] = useState("");
+  const [about, setAbout] = useState("");
+  const [teamSize, setTeamSize] = useState("");
+  const [industry, setIndustry] = useState("");
+  const [logoUrl, setLogoUrl] = useState("");
+  const [bannerUrl, setBannerUrl] = useState("");
+  const [github, setGithub] = useState("");
+  const [discord, setDiscord] = useState("");
+  const [twitter, setTwitter] = useState("");
+  const [linkedin, setLinkedin] = useState("");
+  const [seoTitle, setSeoTitle] = useState("");
+  const [seoDescription, setSeoDescription] = useState("");
+  const [successMsg, setSuccessMsg] = useState("");
+
+  useEffect(() => {
+    if (profile) {
+      setName(profile.name || "");
+      setAbout(profile.about || "");
+      setTeamSize(profile.teamSize || "");
+      setIndustry(profile.industry || "");
+      setLogoUrl(profile.logoUrl || "");
+      setBannerUrl(profile.bannerUrl || "");
+      setGithub(profile.socialLinks?.github || "");
+      setDiscord(profile.socialLinks?.discord || "");
+      setTwitter(profile.socialLinks?.twitter || "");
+      setLinkedin(profile.socialLinks?.linkedin || "");
+      setSeoTitle(profile.seoTitle || "");
+      setSeoDescription(profile.seoDescription || "");
+    }
+  }, [profile]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSuccessMsg("");
+
+    updateProfileMutation.mutate(
+      {
+        name,
+        about,
+        teamSize,
+        industry,
+        logoUrl,
+        bannerUrl,
+        socialLinks: { github, discord, twitter, linkedin },
+        seoTitle,
+        seoDescription,
+      },
+      {
+        onSuccess: () => {
+          setSuccessMsg("Company profile updated successfully!");
+          setTimeout(() => setSuccessMsg(""), 3000);
+        },
+      }
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center p-8">
+        <div className="text-sm font-medium animate-pulse" style={{ color: theme.text.secondary }}>
+          Loading profile settings...
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto p-6 lg:p-10" style={{ backgroundColor: theme.bg.page }}>
+      <div className="max-w-4xl mx-auto">
+        <div className="flex flex-col gap-1 mb-8">
+          <h1 className="text-2xl font-bold tracking-tight" style={{ color: theme.text.primary }}>
+            Company Profile Management
+          </h1>
+          <p className="text-sm" style={{ color: theme.text.secondary }}>
+            Configure your organization branding, career portal styling, and social media integration.
+          </p>
+        </div>
+
+        {successMsg && (
+          <div
+            className="mb-6 p-4 rounded-lg text-sm font-medium border"
+            style={{
+              backgroundColor: theme.success.subtle,
+              borderColor: theme.success.default,
+              color: theme.success.default,
+            }}
+          >
+            {successMsg}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="flex flex-col gap-8">
+          {/* Branding Card */}
+          <div
+            className="rounded-xl border p-6 flex flex-col gap-6"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            <h2 className="text-lg font-semibold" style={{ color: theme.text.primary }}>
+              Branding Assets
+            </h2>
+
+            {/* Banner Preview */}
+            <div className="relative h-40 rounded-lg overflow-hidden border bg-zinc-900" style={{ borderColor: theme.border.default }}>
+              <img src={bannerUrl || "/defaultBanner.jpg"} alt="Banner Preview" className="w-full h-full object-cover opacity-80" />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
+              {/* Logo Preview */}
+              <div className="absolute bottom-4 left-4 flex items-center gap-3">
+                <div
+                  className="w-16 h-16 rounded-xl border-2 overflow-hidden bg-white shadow-md flex items-center justify-center p-2"
+                  style={{ borderColor: theme.border.default }}
+                >
+                  <img src={logoUrl || "/logoWithoutText.png"} alt="Logo" className="w-full h-full object-contain" />
+                </div>
+                <div>
+                  <h3 className="text-white font-bold text-lg leading-tight shadow-sm">{name || "Company Name"}</h3>
+                  <span className="text-white/80 text-xs font-semibold uppercase tracking-wider">{industry || "Industry"}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Input
+                label="Company Name"
+                name="name"
+                value={name}
+                onChange={(_, val) => setName(val)}
+                required
+              />
+              <Input
+                label="Industry Type"
+                name="industry"
+                value={industry}
+                onChange={(_, val) => setIndustry(val)}
+                placeholder="e.g. Design & Tech"
+                required
+              />
+              <Input
+                label="Logo Image URL"
+                name="logoUrl"
+                value={logoUrl}
+                onChange={(_, val) => setLogoUrl(val)}
+                placeholder="/logoWithoutText.png"
+              />
+              <Input
+                label="Banner Image URL"
+                name="bannerUrl"
+                value={bannerUrl}
+                onChange={(_, val) => setBannerUrl(val)}
+                placeholder="e.g. Unsplash URL"
+              />
+            </div>
+          </div>
+
+          {/* About Company */}
+          <div
+            className="rounded-xl border p-6 flex flex-col gap-6"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            <h2 className="text-lg font-semibold" style={{ color: theme.text.primary }}>
+              Company Details
+            </h2>
+
+            <div className="flex flex-col gap-2">
+              <label
+                className="text-xs font-semibold uppercase tracking-wider"
+                style={{ color: theme.text.secondary }}
+              >
+                About Company
+              </label>
+              <textarea
+                value={about}
+                onChange={(e) => setAbout(e.target.value)}
+                className="w-full h-32 rounded-lg p-3 border outline-none text-sm resize-none focus:ring-2"
+                style={{
+                  backgroundColor: theme.bg.surface,
+                  borderColor: theme.border.default,
+                  color: theme.text.primary,
+                }}
+                placeholder="Write a brief overview of your organization..."
+                required
+              />
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Input
+                label="Company Size"
+                name="teamSize"
+                value={teamSize}
+                onChange={(_, val) => setTeamSize(val)}
+                placeholder="e.g. 50-150 employees"
+              />
+            </div>
+          </div>
+
+          {/* Social Links */}
+          <div
+            className="rounded-xl border p-6 flex flex-col gap-6"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            <h2 className="text-lg font-semibold" style={{ color: theme.text.primary }}>
+              Social Integrations
+            </h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Input
+                label="GitHub URL"
+                name="github"
+                value={github}
+                onChange={(_, val) => setGithub(val)}
+                placeholder="https://github.com/org"
+              />
+              <Input
+                label="LinkedIn Profile"
+                name="linkedin"
+                value={linkedin}
+                onChange={(_, val) => setLinkedin(val)}
+                placeholder="https://linkedin.com/company/org"
+              />
+              <Input
+                label="Twitter / X handle"
+                name="twitter"
+                value={twitter}
+                onChange={(_, val) => setTwitter(val)}
+                placeholder="https://twitter.com/org"
+              />
+              <Input
+                label="Discord Server"
+                name="discord"
+                value={discord}
+                onChange={(_, val) => setDiscord(val)}
+                placeholder="https://discord.gg/invite"
+              />
+            </div>
+          </div>
+
+          {/* SEO & Meta Config */}
+          <div
+            className="rounded-xl border p-6 flex flex-col gap-6"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            <h2 className="text-lg font-semibold" style={{ color: theme.text.primary }}>
+              SEO & Accessibility Settings
+            </h2>
+
+            <div className="grid grid-cols-1 gap-4">
+              <Input
+                label="Meta Title Tag"
+                name="seoTitle"
+                value={seoTitle}
+                onChange={(_, val) => setSeoTitle(val)}
+                placeholder="Title that shows in browser tab"
+              />
+              <div className="flex flex-col gap-2">
+                <label
+                  className="text-xs font-semibold uppercase tracking-wider"
+                  style={{ color: theme.text.secondary }}
+                >
+                  Meta Description
+                </label>
+                <textarea
+                  value={seoDescription}
+                  onChange={(e) => setSeoDescription(e.target.value)}
+                  className="w-full h-20 rounded-lg p-3 border outline-none text-sm resize-none"
+                  style={{
+                    backgroundColor: theme.bg.surface,
+                    borderColor: theme.border.default,
+                    color: theme.text.primary,
+                  }}
+                  placeholder="Summary for search engines..."
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Action Button */}
+          <div className="flex justify-end gap-3 items-center">
+            <Button
+              text={updateProfileMutation.isPending ? "Saving changes..." : "Save Configuration"}
+              onClick={() => {}}
+              type="submit"
+              disabled={updateProfileMutation.isPending}
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default CompanyProfilePage;
diff --git a/src/features/Hiring/v1/Pages/CreateJobPage.tsx b/src/features/Hiring/v1/Pages/CreateJobPage.tsx
new file mode 100644
index 0000000..b93df7a
--- /dev/null
+++ b/src/features/Hiring/v1/Pages/CreateJobPage.tsx
@@ -0,0 +1,853 @@
+import React, { useState, useEffect } from "react";
+import { useTheme } from "@/theme";
+import { useNavigate } from "react-router-dom";
+import { useCreateJob } from "../Hooks/useHiring";
+import { JobStatus, EmploymentType, WorkplaceType, JobVisibility } from "../Types/Hiring.types";
+import Input from "@/Component/ui/Input";
+import { FiChevronRight, FiChevronLeft, FiPlus, FiTrash, FiSave } from "react-icons/fi";
+
+const CreateJobPage = () => {
+  const { theme } = useTheme();
+  const navigate = useNavigate();
+  const createJobMutation = useCreateJob();
+
+  // Active step
+  const [step, setStep] = useState(1);
+
+  // Form Fields
+  const [title, setTitle] = useState("");
+  const [department, setDepartment] = useState("");
+  const [hiringManager, setHiringManager] = useState("");
+  const [community, setCommunity] = useState("");
+  const [slug, setSlug] = useState("");
+
+  const [description, setDescription] = useState("");
+  const [responsibilities, setResponsibilities] = useState<string[]>([""]);
+  const [requirements, setRequirements] = useState<string[]>([""]);
+  const [benefits, setBenefits] = useState<string[]>([""]);
+  const [skills, setSkills] = useState("");
+  const [tags, setTags] = useState("");
+
+  const [employmentType, setEmploymentType] = useState<EmploymentType>("full-time");
+  const [workplaceType, setWorkplaceType] = useState<WorkplaceType>("remote");
+  const [salaryRange, setSalaryRange] = useState("");
+  const [openings, setOpenings] = useState(1);
+  const [timeline, setTimeline] = useState("Immediate");
+  const [expirationDate, setExpirationDate] = useState("");
+
+  const [visibility, setVisibility] = useState<JobVisibility>("public");
+  const [isFeatured, setIsFeatured] = useState(false);
+  const [isSponsored, setIsSponsored] = useState(false);
+  const [jobStatus, setJobStatus] = useState<JobStatus>("active");
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [autosaveMsg, setAutosaveMsg] = useState("");
+
+  // Load draft from localStorage on mount
+  useEffect(() => {
+    const savedDraft = localStorage.getItem("commdesk-create-job-draft");
+    if (savedDraft) {
+      try {
+        const draft = JSON.parse(savedDraft);
+        setTitle(draft.title || "");
+        setDepartment(draft.department || "");
+        setHiringManager(draft.hiringManager || "");
+        setCommunity(draft.community || "");
+        setSlug(draft.slug || "");
+        setDescription(draft.description || "");
+        setResponsibilities(draft.responsibilities || [""]);
+        setRequirements(draft.requirements || [""]);
+        setBenefits(draft.benefits || [""]);
+        setSkills(draft.skills || "");
+        setTags(draft.tags || "");
+        setEmploymentType(draft.employmentType || "full-time");
+        setWorkplaceType(draft.workplaceType || "remote");
+        setSalaryRange(draft.salaryRange || "");
+        setOpenings(draft.openings || 1);
+        setTimeline(draft.timeline || "Immediate");
+        setExpirationDate(draft.expirationDate || "");
+        setVisibility(draft.visibility || "public");
+        setIsFeatured(draft.isFeatured || false);
+        setIsSponsored(draft.isSponsored || false);
+        setJobStatus(draft.jobStatus || "active");
+        setStep(draft.step || 1);
+      } catch (err) {
+        console.error("Failed to load draft:", err);
+      }
+    }
+  }, []);
+
+  // Auto-save draft on values change
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const draft = {
+        title,
+        department,
+        hiringManager,
+        community,
+        slug,
+        description,
+        responsibilities,
+        requirements,
+        benefits,
+        skills,
+        tags,
+        employmentType,
+        workplaceType,
+        salaryRange,
+        openings,
+        timeline,
+        expirationDate,
+        visibility,
+        isFeatured,
+        isSponsored,
+        jobStatus,
+        step,
+      };
+      localStorage.setItem("commdesk-create-job-draft", JSON.stringify(draft));
+      setAutosaveMsg("Draft autosaved");
+      setTimeout(() => setAutosaveMsg(""), 2500);
+    }, 1500);
+
+    return () => clearTimeout(timer);
+  }, [
+    title,
+    department,
+    hiringManager,
+    community,
+    slug,
+    description,
+    responsibilities,
+    requirements,
+    benefits,
+    skills,
+    tags,
+    employmentType,
+    workplaceType,
+    salaryRange,
+    openings,
+    timeline,
+    expirationDate,
+    visibility,
+    isFeatured,
+    isSponsored,
+    jobStatus,
+    step,
+  ]);
+
+  // Generate slug automatically from title
+  useEffect(() => {
+    if (title && step === 1) {
+      setSlug(
+        title
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, "-")
+          .replace(/(^-|-$)/g, "")
+      );
+    }
+  }, [title, step]);
+
+  const validateStep = (currentStep: number): boolean => {
+    const nextErrors: Record<string, string> = {};
+    if (currentStep === 1) {
+      if (!title) nextErrors.title = "Job Title is required.";
+      if (!department) nextErrors.department = "Department is required.";
+      if (!hiringManager) nextErrors.hiringManager = "Hiring Manager is required.";
+      if (!community) nextErrors.community = "Community selection is required.";
+      if (!slug) nextErrors.slug = "URL Slug is required.";
+    } else if (currentStep === 2) {
+      if (!description) nextErrors.description = "Job Description is required.";
+      if (responsibilities.filter((r) => r.trim()).length === 0) {
+        nextErrors.responsibilities = "At least one responsibility is required.";
+      }
+      if (requirements.filter((r) => r.trim()).length === 0) {
+        nextErrors.requirements = "At least one requirement is required.";
+      }
+    } else if (currentStep === 3) {
+      if (!salaryRange) nextErrors.salaryRange = "Salary Range is required.";
+      if (!expirationDate) nextErrors.expirationDate = "Expiration Date is required.";
+    }
+
+    setErrors(nextErrors);
+    return Object.keys(nextErrors).length === 0;
+  };
+
+  const handleNext = () => {
+    if (validateStep(step)) {
+      setStep((prev) => prev + 1);
+    }
+  };
+
+  const handleBack = () => {
+    setStep((prev) => Math.max(prev - 1, 1));
+  };
+
+  const handleSaveDraft = () => {
+    // Explicit save draft status
+    setJobStatus("draft");
+    alert("Role status changed to Draft. The wizard state is autosaved locally.");
+  };
+
+  const handlePublish = () => {
+    if (!validateStep(step)) return;
+
+    const parsedSkills = skills
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    const parsedTags = tags
+      .split(",")
+      .map((t) => t.trim())
+      .filter(Boolean);
+
+    const payload = {
+      title,
+      department,
+      hiringManager,
+      community,
+      slug,
+      description,
+      responsibilities: responsibilities.filter((r) => r.trim()),
+      requirements: requirements.filter((r) => r.trim()),
+      benefits: benefits.filter((b) => b.trim()),
+      skills: parsedSkills,
+      tags: parsedTags,
+      employmentType,
+      workplaceType,
+      salaryRange,
+      openings,
+      timeline,
+      expirationDate,
+      visibility,
+      isFeatured,
+      isSponsored,
+      status: jobStatus,
+    };
+
+    createJobMutation.mutate(payload, {
+      onSuccess: (newJob) => {
+        // Clear draft
+        localStorage.removeItem("commdesk-create-job-draft");
+        alert(`Job role '${newJob.title}' successfully added!`);
+        navigate("/org/jobs");
+      },
+      onError: (err) => {
+        console.error("Failed to create job:", err);
+        alert("Failed to submit job opening. Check form values and retry.");
+      },
+    });
+  };
+
+  const handleArrayChange = (
+    index: number,
+    value: string,
+    stateSetter: React.Dispatch<React.SetStateAction<string[]>>
+  ) => {
+    stateSetter((prev) => {
+      const next = [...prev];
+      next[index] = value;
+      return next;
+    });
+  };
+
+  const handleAddArrayItem = (stateSetter: React.Dispatch<React.SetStateAction<string[]>>) => {
+    stateSetter((prev) => [...prev, ""]);
+  };
+
+  const handleRemoveArrayItem = (
+    index: number,
+    stateSetter: React.Dispatch<React.SetStateAction<string[]>>
+  ) => {
+    stateSetter((prev) => {
+      if (prev.length === 1) return [""];
+      return prev.filter((_, idx) => idx !== index);
+    });
+  };
+
+  return (
+    <div className="flex-1 flex flex-col min-h-screen pb-20 relative" style={{ backgroundColor: theme.bg.page }}>
+      {/* Header */}
+      <div
+        className="px-6 py-4 border-b flex items-center justify-between sticky top-0 z-10"
+        style={{ borderColor: theme.border.default, backgroundColor: theme.bg.surface }}
+      >
+        <div className="flex flex-col gap-0.5">
+          <h1 className="text-lg font-bold tracking-tight" style={{ color: theme.text.primary }}>
+            Create New Job Role
+          </h1>
+          <p className="text-xs" style={{ color: theme.text.muted }}>
+            Post a career listing for your hiring pipelines.
+          </p>
+        </div>
+
+        {autosaveMsg && (
+          <span className="text-[10px] font-bold text-zinc-400 bg-zinc-200/50 dark:bg-zinc-800 px-2 py-1 rounded">
+            {autosaveMsg}
+          </span>
+        )}
+      </div>
+
+      {/* Stepper visual */}
+      <div className="px-6 py-6 max-w-3xl mx-auto w-full">
+        <div className="flex items-center justify-between mb-8">
+          {[1, 2, 3, 4].map((s) => (
+            <div key={s} className="flex-1 flex items-center">
+              <div
+                className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-colors"
+                style={{
+                  backgroundColor: step >= s ? theme.primary.default : theme.bg.surfaceSecondary,
+                  color: step >= s ? theme.text.inverse : theme.text.muted,
+                  border: step === s ? `2px solid ${theme.primary.text}` : "none",
+                }}
+              >
+                {s}
+              </div>
+              <span
+                className="ml-2 text-xs font-bold hidden md:inline"
+                style={{ color: step >= s ? theme.text.primary : theme.text.muted }}
+              >
+                {s === 1
+                  ? "Basic Info"
+                  : s === 2
+                    ? "Job Description"
+                    : s === 3
+                      ? "Configuration"
+                      : "Publishing"}
+              </span>
+              {s < 4 && (
+                <div
+                  className="flex-1 h-0.5 mx-4 hidden md:block"
+                  style={{ backgroundColor: step > s ? theme.primary.default : theme.border.default }}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Step Content */}
+        <div
+          className="border rounded-xl p-6 shadow-sm"
+          style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+        >
+          {/* STEP 1: BASIC INFO */}
+          {step === 1 && (
+            <div className="flex flex-col gap-5">
+              <h3 className="text-base font-bold" style={{ color: theme.text.primary }}>
+                Step 1 &mdash; Job Metadata & Department
+              </h3>
+              <Input
+                label="Job Title"
+                name="title"
+                value={title}
+                onChange={(_, val) => setTitle(val)}
+                placeholder="e.g. Senior Frontend Engineer"
+                error={errors.title}
+                required
+              />
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                    Department *
+                  </label>
+                  <select
+                    value={department}
+                    onChange={(e) => setDepartment(e.target.value)}
+                    className="p-2.5 border rounded-lg text-sm outline-none"
+                    style={{
+                      backgroundColor: theme.bg.surface,
+                      borderColor: errors.department ? theme.danger.default : theme.border.default,
+                      color: theme.text.primary,
+                    }}
+                  >
+                    <option value="">Select Department</option>
+                    <option value="Product">Product</option>
+                    <option value="Engineering">Engineering</option>
+                    <option value="Sales">Sales</option>
+                    <option value="Marketing">Marketing</option>
+                    <option value="HR">HR</option>
+                  </select>
+                  {errors.department && (
+                    <span className="text-xs" style={{ color: theme.danger.default }}>
+                      {errors.department}
+                    </span>
+                  )}
+                </div>
+
+                <Input
+                  label="Hiring Manager"
+                  name="hiringManager"
+                  value={hiringManager}
+                  onChange={(_, val) => setHiringManager(val)}
+                  placeholder="e.g. David Chen"
+                  error={errors.hiringManager}
+                  required
+                />
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                    Community Selection *
+                  </label>
+                  <select
+                    value={community}
+                    onChange={(e) => setCommunity(e.target.value)}
+                    className="p-2.5 border rounded-lg text-sm outline-none"
+                    style={{
+                      backgroundColor: theme.bg.surface,
+                      borderColor: errors.community ? theme.danger.default : theme.border.default,
+                      color: theme.text.primary,
+                    }}
+                  >
+                    <option value="">Select Community</option>
+                    <option value="Global Design Excellence">Global Design Excellence</option>
+                    <option value="Developer Communities">Developer Communities</option>
+                    <option value="Tech Partnerships Group">Tech Partnerships Group</option>
+                  </select>
+                  {errors.community && (
+                    <span className="text-xs" style={{ color: theme.danger.default }}>
+                      {errors.community}
+                    </span>
+                  )}
+                </div>
+
+                <Input
+                  label="URL Slug"
+                  name="slug"
+                  value={slug}
+                  onChange={(_, val) => setSlug(val)}
+                  placeholder="senior-frontend-engineer"
+                  error={errors.slug}
+                  required
+                />
+              </div>
+            </div>
+          )}
+
+          {/* STEP 2: DESCRIPTION & LISTS */}
+          {step === 2 && (
+            <div className="flex flex-col gap-6">
+              <h3 className="text-base font-bold" style={{ color: theme.text.primary }}>
+                Step 2 &mdash; Job Description & Requirements
+              </h3>
+
+              <div className="flex flex-col gap-1.5">
+                <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                  Job Description *
+                </label>
+                <textarea
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  className="w-full h-36 border rounded-lg p-3 outline-none text-sm resize-none"
+                  style={{
+                    backgroundColor: theme.bg.surface,
+                    borderColor: errors.description ? theme.danger.default : theme.border.default,
+                    color: theme.text.primary,
+                  }}
+                  placeholder="Outline the responsibilities and scope of the role..."
+                />
+                {errors.description && (
+                  <span className="text-xs" style={{ color: theme.danger.default }}>
+                    {errors.description}
+                  </span>
+                )}
+              </div>
+
+              {/* Responsibilities list */}
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                  <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                    Key Responsibilities
+                  </label>
+                  <button
+                    type="button"
+                    onClick={() => handleAddArrayItem(setResponsibilities)}
+                    className="text-xs font-bold text-blue-500 flex items-center gap-1 hover:underline"
+                  >
+                    <FiPlus /> Add Item
+                  </button>
+                </div>
+                {errors.responsibilities && (
+                  <span className="text-xs" style={{ color: theme.danger.default }}>
+                    {errors.responsibilities}
+                  </span>
+                )}
+                <div className="flex flex-col gap-2">
+                  {responsibilities.map((item, idx) => (
+                    <div key={idx} className="flex items-center gap-2">
+                      <input
+                        type="text"
+                        value={item}
+                        onChange={(e) => handleArrayChange(idx, e.target.value, setResponsibilities)}
+                        placeholder="e.g. Design complex layout workflows"
+                        className="flex-1 p-2 border rounded-lg text-xs outline-none"
+                        style={{
+                          backgroundColor: theme.bg.surface,
+                          borderColor: theme.border.default,
+                          color: theme.text.primary,
+                        }}
+                      />
+                      <button
+                        type="button"
+                        onClick={() => handleRemoveArrayItem(idx, setResponsibilities)}
+                        className="p-2 hover:bg-red-500/10 text-red-500 rounded-lg"
+                      >
+                        <FiTrash className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Requirements list */}
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                  <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                    Job Requirements
+                  </label>
+                  <button
+                    type="button"
+                    onClick={() => handleAddArrayItem(setRequirements)}
+                    className="text-xs font-bold text-blue-500 flex items-center gap-1 hover:underline"
+                  >
+                    <FiPlus /> Add Item
+                  </button>
+                </div>
+                {errors.requirements && (
+                  <span className="text-xs" style={{ color: theme.danger.default }}>
+                    {errors.requirements}
+                  </span>
+                )}
+                <div className="flex flex-col gap-2">
+                  {requirements.map((item, idx) => (
+                    <div key={idx} className="flex items-center gap-2">
+                      <input
+                        type="text"
+                        value={item}
+                        onChange={(e) => handleArrayChange(idx, e.target.value, setRequirements)}
+                        placeholder="e.g. 5+ years experience in Figma systems"
+                        className="flex-1 p-2 border rounded-lg text-xs outline-none"
+                        style={{
+                          backgroundColor: theme.bg.surface,
+                          borderColor: theme.border.default,
+                          color: theme.text.primary,
+                        }}
+                      />
+                      <button
+                        type="button"
+                        onClick={() => handleRemoveArrayItem(idx, setRequirements)}
+                        className="p-2 hover:bg-red-500/10 text-red-500 rounded-lg"
+                      >
+                        <FiTrash className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Benefits list */}
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                  <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                    Role Benefits / Perks
+                  </label>
+                  <button
+                    type="button"
+                    onClick={() => handleAddArrayItem(setBenefits)}
+                    className="text-xs font-bold text-blue-500 flex items-center gap-1 hover:underline"
+                  >
+                    <FiPlus /> Add Item
+                  </button>
+                </div>
+                <div className="flex flex-col gap-2">
+                  {benefits.map((item, idx) => (
+                    <div key={idx} className="flex items-center gap-2">
+                      <input
+                        type="text"
+                        value={item}
+                        onChange={(e) => handleArrayChange(idx, e.target.value, setBenefits)}
+                        placeholder="e.g. 100% remote options"
+                        className="flex-1 p-2 border rounded-lg text-xs outline-none"
+                        style={{
+                          backgroundColor: theme.bg.surface,
+                          borderColor: theme.border.default,
+                          color: theme.text.primary,
+                        }}
+                      />
+                      <button
+                        type="button"
+                        onClick={() => handleRemoveArrayItem(idx, setBenefits)}
+                        className="p-2 hover:bg-red-500/10 text-red-500 rounded-lg"
+                      >
+                        <FiTrash className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Tagging */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <Input
+                  label="Required Skills (comma separated)"
+                  name="skills"
+                  value={skills}
+                  onChange={(_, val) => setSkills(val)}
+                  placeholder="React, Figma, Go, CSS"
+                />
+                <Input
+                  label="Search Tags (comma separated)"
+                  name="tags"
+                  value={tags}
+                  onChange={(_, val) => setTags(val)}
+                  placeholder="Remote, Senior, Product"
+                />
+              </div>
+            </div>
+          )}
+
+          {/* STEP 3: CONFIGURATION */}
+          {step === 3 && (
+            <div className="flex flex-col gap-6">
+              <h3 className="text-base font-bold" style={{ color: theme.text.primary }}>
+                Step 3 &mdash; Work Settings & Expirations
+              </h3>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                    Employment Type
+                  </label>
+                  <select
+                    value={employmentType}
+                    onChange={(e) => setEmploymentType(e.target.value as EmploymentType)}
+                    className="p-2.5 border rounded-lg text-sm outline-none"
+                    style={{
+                      backgroundColor: theme.bg.surface,
+                      borderColor: theme.border.default,
+                      color: theme.text.primary,
+                    }}
+                  >
+                    <option value="full-time">Full-Time</option>
+                    <option value="part-time">Part-Time</option>
+                    <option value="contract">Contract</option>
+                    <option value="internship">Internship</option>
+                  </select>
+                </div>
+
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                    Workplace Type
+                  </label>
+                  <select
+                    value={workplaceType}
+                    onChange={(e) => setWorkplaceType(e.target.value as WorkplaceType)}
+                    className="p-2.5 border rounded-lg text-sm outline-none"
+                    style={{
+                      backgroundColor: theme.bg.surface,
+                      borderColor: theme.border.default,
+                      color: theme.text.primary,
+                    }}
+                  >
+                    <option value="remote">Remote</option>
+                    <option value="hybrid">Hybrid</option>
+                    <option value="on-site">On-Site</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <Input
+                  label="Annual Salary Range ($)"
+                  name="salaryRange"
+                  value={salaryRange}
+                  onChange={(_, val) => setSalaryRange(val)}
+                  placeholder="e.g. $140,000 - $180,000"
+                  error={errors.salaryRange}
+                  required
+                />
+                <Input
+                  label="Number of Openings"
+                  name="openings"
+                  type="number"
+                  value={openings}
+                  onChange={(_, val) => setOpenings(Number(val))}
+                  placeholder="1"
+                />
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <Input
+                  label="Hiring Timeline"
+                  name="timeline"
+                  value={timeline}
+                  onChange={(_, val) => setTimeline(val)}
+                  placeholder="e.g. Immediate, 2-4 Weeks"
+                />
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                    Role Expiration Date *
+                  </label>
+                  <input
+                    type="date"
+                    value={expirationDate}
+                    onChange={(e) => setExpirationDate(e.target.value)}
+                    className="p-2 border rounded-lg text-xs outline-none"
+                    style={{
+                      backgroundColor: theme.bg.surface,
+                      borderColor: errors.expirationDate ? theme.danger.default : theme.border.default,
+                      color: theme.text.primary,
+                    }}
+                  />
+                  {errors.expirationDate && (
+                    <span className="text-xs" style={{ color: theme.danger.default }}>
+                      {errors.expirationDate}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* STEP 4: PUBLISHING */}
+          {step === 4 && (
+            <div className="flex flex-col gap-6">
+              <h3 className="text-base font-bold" style={{ color: theme.text.primary }}>
+                Step 4 &mdash; Visibility & Promotion Controls
+              </h3>
+
+              <div className="flex flex-col gap-4">
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                    Portal Visibility
+                  </label>
+                  <select
+                    value={visibility}
+                    onChange={(e) => setVisibility(e.target.value as JobVisibility)}
+                    className="p-2.5 border rounded-lg text-sm outline-none"
+                    style={{
+                      backgroundColor: theme.bg.surface,
+                      borderColor: theme.border.default,
+                      color: theme.text.primary,
+                    }}
+                  >
+                    <option value="public">Public (Career Portal & Listings)</option>
+                    <option value="private">Private (Link-Only Access)</option>
+                    <option value="community-only">Community-Only (Verified members only)</option>
+                  </select>
+                </div>
+
+                <div className="flex flex-col gap-3 p-4 rounded-xl border mt-2" style={{ backgroundColor: theme.bg.surfaceSecondary, borderColor: theme.border.default }}>
+                  <span className="text-xs font-bold uppercase tracking-wider" style={{ color: theme.text.secondary }}>Promotional Add-ons</span>
+
+                  <label className="flex items-center gap-3 mt-1.5 cursor-pointer text-xs font-semibold">
+                    <input
+                      type="checkbox"
+                      checked={isFeatured}
+                      onChange={(e) => setIsFeatured(e.target.checked)}
+                      className="rounded border-gray-300 w-4 h-4"
+                    />
+                    <div className="flex flex-col">
+                      <span style={{ color: theme.text.primary }}>Pin as Featured Job</span>
+                      <span className="text-[10px]" style={{ color: theme.text.muted }}>Featured roles stay at the top of the careers page grid.</span>
+                    </div>
+                  </label>
+
+                  <label className="flex items-center gap-3 mt-3 cursor-pointer text-xs font-semibold">
+                    <input
+                      type="checkbox"
+                      checked={isSponsored}
+                      onChange={(e) => setIsSponsored(e.target.checked)}
+                      className="rounded border-gray-300 w-4 h-4"
+                    />
+                    <div className="flex flex-col">
+                      <span style={{ color: theme.text.primary }}>Sponsored Distribution</span>
+                      <span className="text-[10px]" style={{ color: theme.text.muted }}>Automatically syndicate to external partner boards (LinkedIn, Dribbble).</span>
+                    </div>
+                  </label>
+                </div>
+
+                <div className="flex flex-col gap-1.5 mt-2">
+                  <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                    Publishing Target State
+                  </label>
+                  <select
+                    value={jobStatus}
+                    onChange={(e) => setJobStatus(e.target.value as JobStatus)}
+                    className="p-2.5 border rounded-lg text-sm outline-none"
+                    style={{
+                      backgroundColor: theme.bg.surface,
+                      borderColor: theme.border.default,
+                      color: theme.text.primary,
+                    }}
+                  >
+                    <option value="active">Publish immediately (Active)</option>
+                    <option value="draft">Save as Draft role</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Sticky Action Footer */}
+      <div
+        className="fixed bottom-0 left-0 right-0 py-3 px-6 border-t flex justify-between items-center shadow-lg"
+        style={{
+          borderColor: theme.border.default,
+          backgroundColor: theme.bg.surface,
+        }}
+      >
+        <div className="flex items-center gap-2">
+          {step > 1 ? (
+            <button
+              onClick={handleBack}
+              className="px-4 py-2 text-xs font-bold rounded-lg border flex items-center gap-1.5 hover:bg-zinc-50 dark:hover:bg-zinc-800"
+              style={{ borderColor: theme.border.default, color: theme.text.primary }}
+            >
+              <FiChevronLeft /> Back
+            </button>
+          ) : (
+            <button
+              onClick={() => navigate("/org/jobs")}
+              className="px-4 py-2 text-xs font-bold rounded-lg border hover:bg-zinc-50 dark:hover:bg-zinc-800"
+              style={{ borderColor: theme.border.default, color: theme.text.primary }}
+            >
+              Cancel
+            </button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3">
+          <button
+            onClick={handleSaveDraft}
+            className="px-4 py-2 text-xs font-bold rounded-lg border flex items-center gap-1.5 hover:bg-zinc-50 dark:hover:bg-zinc-800"
+            style={{ borderColor: theme.border.default, color: theme.text.primary }}
+          >
+            <FiSave /> Save Draft
+          </button>
+
+          {step < 4 ? (
+            <button
+              onClick={handleNext}
+              className="px-5 py-2 text-xs font-bold rounded-lg text-white bg-blue-600 hover:bg-blue-700 flex items-center gap-1.5"
+            >
+              Next <FiChevronRight />
+            </button>
+          ) : (
+            <button
+              onClick={handlePublish}
+              disabled={createJobMutation.isPending}
+              className="px-5 py-2 text-xs font-bold rounded-lg text-white bg-green-600 hover:bg-green-700 disabled:bg-zinc-300 disabled:cursor-not-allowed"
+            >
+              {createJobMutation.isPending ? "Submitting..." : "Publish Job Role"}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateJobPage;
diff --git a/src/features/Hiring/v1/Pages/EditJobPage.tsx b/src/features/Hiring/v1/Pages/EditJobPage.tsx
new file mode 100644
index 0000000..babcc74
--- /dev/null
+++ b/src/features/Hiring/v1/Pages/EditJobPage.tsx
@@ -0,0 +1,413 @@
+import React, { useState, useEffect } from "react";
+import { useTheme } from "@/theme";
+import { useNavigate, useParams } from "react-router-dom";
+import { useJobDetail, useUpdateJob, useAuditLogs } from "../Hooks/useHiring";
+import { JobStatus, EmploymentType, WorkplaceType, JobVisibility } from "../Types/Hiring.types";
+import Input from "@/Component/ui/Input";
+import Button from "@/Component/ui/Button";
+import { FiSave, FiClock, FiCheck, FiArrowLeft } from "react-icons/fi";
+
+const EditJobPage = () => {
+  const { theme } = useTheme();
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+
+  // Fetch job & audits
+  const { data: job, isLoading } = useJobDetail(id);
+  const { data: audits = [] } = useAuditLogs(id);
+  const updateJobMutation = useUpdateJob();
+
+  // Form Fields
+  const [title, setTitle] = useState("");
+  const [department, setDepartment] = useState("");
+  const [hiringManager, setHiringManager] = useState("");
+  const [community, setCommunity] = useState("");
+  const [slug, setSlug] = useState("");
+  const [description, setDescription] = useState("");
+  const [responsibilities, setResponsibilities] = useState<string[]>([]);
+  const [requirements, setRequirements] = useState<string[]>([]);
+  const [benefits, setBenefits] = useState<string[]>([]);
+  const [skills, setSkills] = useState("");
+  const [tags, setTags] = useState("");
+  const [employmentType, setEmploymentType] = useState<EmploymentType>("full-time");
+  const [workplaceType, setWorkplaceType] = useState<WorkplaceType>("remote");
+  const [salaryRange, setSalaryRange] = useState("");
+  const [openings, setOpenings] = useState(1);
+  const [timeline, setTimeline] = useState("Immediate");
+  const [expirationDate, setExpirationDate] = useState("");
+  const [visibility, setVisibility] = useState<JobVisibility>("public");
+  const [isFeatured, setIsFeatured] = useState(false);
+  const [isSponsored, setIsSponsored] = useState(false);
+  const [jobStatus, setJobStatus] = useState<JobStatus>("active");
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [successMsg, setSuccessMsg] = useState("");
+
+  useEffect(() => {
+    if (job) {
+      setTitle(job.title || "");
+      setDepartment(job.department || "");
+      setHiringManager(job.hiringManager || "");
+      setCommunity(job.community || "");
+      setSlug(job.slug || "");
+      setDescription(job.description || "");
+      setResponsibilities(job.responsibilities || []);
+      setRequirements(job.requirements || []);
+      setBenefits(job.benefits || []);
+      setSkills(job.skills?.join(", ") || "");
+      setTags(job.tags?.join(", ") || "");
+      setEmploymentType(job.employmentType || "full-time");
+      setWorkplaceType(job.workplaceType || "remote");
+      setSalaryRange(job.salaryRange || "");
+      setOpenings(job.openings || 1);
+      setTimeline(job.timeline || "Immediate");
+      setExpirationDate(job.expirationDate || "");
+      setVisibility(job.visibility || "public");
+      setIsFeatured(job.isFeatured || false);
+      setIsSponsored(job.isSponsored || false);
+      setJobStatus(job.status || "active");
+    }
+  }, [job]);
+
+  const validate = (): boolean => {
+    const nextErrors: Record<string, string> = {};
+    if (!title) nextErrors.title = "Job Title is required.";
+    if (!department) nextErrors.department = "Department is required.";
+    if (!hiringManager) nextErrors.hiringManager = "Hiring Manager is required.";
+    if (!slug) nextErrors.slug = "URL Slug is required.";
+    if (!description) nextErrors.description = "Description is required.";
+    if (!salaryRange) nextErrors.salaryRange = "Salary Range is required.";
+    if (!expirationDate) nextErrors.expirationDate = "Expiration Date is required.";
+
+    setErrors(nextErrors);
+    return Object.keys(nextErrors).length === 0;
+  };
+
+  const handleSave = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!validate() || !id) return;
+
+    const parsedSkills = skills
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    const parsedTags = tags
+      .split(",")
+      .map((t) => t.trim())
+      .filter(Boolean);
+
+    const patch = {
+      title,
+      department,
+      hiringManager,
+      community,
+      slug,
+      description,
+      responsibilities: responsibilities.filter((r) => r.trim()),
+      requirements: requirements.filter((r) => r.trim()),
+      benefits: benefits.filter((b) => b.trim()),
+      skills: parsedSkills,
+      tags: parsedTags,
+      employmentType,
+      workplaceType,
+      salaryRange,
+      openings,
+      timeline,
+      expirationDate,
+      visibility,
+      isFeatured,
+      isSponsored,
+      status: jobStatus,
+    };
+
+    updateJobMutation.mutate(
+      { id, patch },
+      {
+        onSuccess: () => {
+          setSuccessMsg("Role configuration updated successfully!");
+          setTimeout(() => {
+            setSuccessMsg("");
+            navigate("/org/jobs");
+          }, 1500);
+        },
+        onError: (err) => {
+          console.error("Update failed:", err);
+          alert("Failed to save updates. Please try again.");
+        },
+      }
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center p-8">
+        <div className="text-sm font-medium animate-pulse" style={{ color: theme.text.secondary }}>
+          Loading job configuration...
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto p-6 lg:p-10" style={{ backgroundColor: theme.bg.page }}>
+      <div className="max-w-6xl mx-auto flex flex-col lg:flex-row gap-8">
+        {/* Main Editor Form */}
+        <form onSubmit={handleSave} className="flex-1 flex flex-col gap-6">
+          <div className="flex items-center gap-3 mb-2">
+            <button
+              type="button"
+              onClick={() => navigate("/org/jobs")}
+              className="p-1.5 rounded-lg border hover:bg-zinc-100 dark:hover:bg-zinc-800"
+              style={{ borderColor: theme.border.default, color: theme.text.primary }}
+            >
+              <FiArrowLeft className="w-4 h-4" />
+            </button>
+            <div className="flex flex-col gap-0.5">
+              <h1 className="text-xl font-bold tracking-tight" style={{ color: theme.text.primary }}>
+                Edit Opening Detail
+              </h1>
+              <span className="text-xs" style={{ color: theme.text.muted }}>
+                {id} &mdash; Revision Manager
+              </span>
+            </div>
+          </div>
+
+          {successMsg && (
+            <div
+              className="p-4 rounded-lg text-xs font-bold border flex items-center gap-2"
+              style={{
+                backgroundColor: theme.success.subtle,
+                borderColor: theme.success.default,
+                color: theme.success.default,
+              }}
+            >
+              <FiCheck /> {successMsg}
+            </div>
+          )}
+
+          {/* Form Content */}
+          <div
+            className="border rounded-xl p-6 flex flex-col gap-5"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            <h3 className="text-sm font-bold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+              Basic Info
+            </h3>
+            <Input
+              label="Job Title"
+              name="title"
+              value={title}
+              onChange={(_, val) => setTitle(val)}
+              error={errors.title}
+              required
+            />
+            <div className="grid grid-cols-2 gap-4">
+              <Input
+                label="Department"
+                name="department"
+                value={department}
+                onChange={(_, val) => setDepartment(val)}
+                error={errors.department}
+                required
+              />
+              <Input
+                label="Hiring Manager"
+                name="hiringManager"
+                value={hiringManager}
+                onChange={(_, val) => setHiringManager(val)}
+                error={errors.hiringManager}
+                required
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <Input
+                label="URL Slug"
+                name="slug"
+                value={slug}
+                onChange={(_, val) => setSlug(val)}
+                error={errors.slug}
+                required
+              />
+              <div className="flex flex-col gap-1.5">
+                <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                  Community Partner
+                </label>
+                <input
+                  type="text"
+                  value={community}
+                  disabled
+                  className="p-2.5 border rounded-lg text-sm bg-zinc-100 dark:bg-zinc-800 cursor-not-allowed"
+                  style={{ borderColor: theme.border.default, color: theme.text.muted }}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div
+            className="border rounded-xl p-6 flex flex-col gap-5"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            <h3 className="text-sm font-bold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+              Settings & Publishing Status
+            </h3>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-1.5">
+                <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                  Employment
+                </label>
+                <select
+                  value={employmentType}
+                  onChange={(e) => setEmploymentType(e.target.value as EmploymentType)}
+                  className="p-2.5 border rounded-lg text-sm outline-none"
+                  style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default, color: theme.text.primary }}
+                >
+                  <option value="full-time">Full-Time</option>
+                  <option value="part-time">Part-Time</option>
+                  <option value="contract">Contract</option>
+                  <option value="internship">Internship</option>
+                </select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                  Workspace Type
+                </label>
+                <select
+                  value={workplaceType}
+                  onChange={(e) => setWorkplaceType(e.target.value as WorkplaceType)}
+                  className="p-2.5 border rounded-lg text-sm outline-none"
+                  style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default, color: theme.text.primary }}
+                >
+                  <option value="remote">Remote</option>
+                  <option value="hybrid">Hybrid</option>
+                  <option value="on-site">On-Site</option>
+                </select>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <Input
+                label="Salary range"
+                name="salaryRange"
+                value={salaryRange}
+                onChange={(_, val) => setSalaryRange(val)}
+                error={errors.salaryRange}
+                required
+              />
+              <div className="flex flex-col gap-1.5">
+                <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                  Recruiting Status
+                </label>
+                <select
+                  value={jobStatus}
+                  onChange={(e) => setJobStatus(e.target.value as JobStatus)}
+                  className="p-2.5 border rounded-lg text-sm outline-none"
+                  style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default, color: theme.text.primary }}
+                >
+                  <option value="active">Active (Published)</option>
+                  <option value="draft">Draft (Private)</option>
+                  <option value="paused">Paused</option>
+                  <option value="closed">Closed</option>
+                  <option value="archived">Archived</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-1.5">
+                <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                  Expiration Date *
+                </label>
+                <input
+                  type="date"
+                  value={expirationDate}
+                  onChange={(e) => setExpirationDate(e.target.value)}
+                  className="p-2 border rounded-lg text-xs outline-none"
+                  style={{
+                    backgroundColor: theme.bg.surface,
+                    borderColor: errors.expirationDate ? theme.danger.default : theme.border.default,
+                    color: theme.text.primary,
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div
+            className="border rounded-xl p-6 flex flex-col gap-5"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            <h3 className="text-sm font-bold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+              Job Description Context
+            </h3>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="w-full h-40 border rounded-lg p-3 outline-none text-sm resize-none"
+              style={{
+                backgroundColor: theme.bg.surface,
+                borderColor: errors.description ? theme.danger.default : theme.border.default,
+                color: theme.text.primary,
+              }}
+              required
+            />
+          </div>
+
+          <div className="flex justify-end gap-3 items-center">
+            <Button
+              text="Cancel"
+              variant="secondary"
+              onClick={() => navigate("/org/jobs")}
+            />
+            <Button
+              text={updateJobMutation.isPending ? "Saving changes..." : "Save Configuration"}
+              onClick={() => {}}
+              type="submit"
+              disabled={updateJobMutation.isPending}
+              icon={<FiSave className="mr-1.5" />}
+            />
+          </div>
+        </form>
+
+        {/* Sidebar Audit Logs & Timeline */}
+        <div className="w-full lg:w-80 flex flex-col gap-6">
+          <div
+            className="border rounded-xl p-5 shadow-sm"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            <h3 className="text-sm font-bold uppercase tracking-wider mb-4 flex items-center gap-2" style={{ color: theme.text.primary }}>
+              <FiClock className="text-zinc-500" /> Audit Log Timeline
+            </h3>
+
+            {audits.length === 0 ? (
+              <p className="text-xs" style={{ color: theme.text.muted }}>
+                No audit transactions logged for this role yet.
+              </p>
+            ) : (
+              <div className="relative border-l pl-4 flex flex-col gap-5" style={{ borderColor: theme.border.default }}>
+                {audits.map((log) => (
+                  <div key={log.id} className="relative text-xs flex flex-col gap-0.5">
+                    {/* Circle timeline indicator */}
+                    <div
+                      className="absolute -left-[21px] top-1 w-2.5 h-2.5 rounded-full border bg-white dark:bg-zinc-800"
+                      style={{ borderColor: theme.primary.default }}
+                    />
+                    <span className="font-bold" style={{ color: theme.text.primary }}>
+                      {log.action}
+                    </span>
+                    <span className="text-[10px]" style={{ color: theme.text.muted }}>
+                      {new Date(log.timestamp).toLocaleString()} &bull; {log.user}
+                    </span>
+                    <p className="mt-1 leading-relaxed" style={{ color: theme.text.secondary }}>
+                      {log.details}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EditJobPage;
diff --git a/src/features/Hiring/v1/Pages/JobDetailsPage.tsx b/src/features/Hiring/v1/Pages/JobDetailsPage.tsx
new file mode 100644
index 0000000..2496443
--- /dev/null
+++ b/src/features/Hiring/v1/Pages/JobDetailsPage.tsx
@@ -0,0 +1,495 @@
+import { useState } from "react";
+import { useTheme } from "@/theme";
+import { useNavigate, useParams } from "react-router-dom";
+import { useJobDetail, useApplicants, useUpdateJob, useAuditLogs } from "../Hooks/useHiring";
+import { JobStatus } from "../Types/Hiring.types";
+import Button from "@/Component/ui/Button";
+import { FiShare2, FiSlash, FiEdit2, FiEye, FiArrowLeft, FiAlertTriangle } from "react-icons/fi";
+import { MdTrendingUp, MdTrendingDown } from "react-icons/md";
+
+const JobDetailsPage = () => {
+  const { theme } = useTheme();
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+
+  // Fetch data
+  const { data: job, isLoading, isError } = useJobDetail(id);
+  const { data: applicants = [] } = useApplicants(id);
+  const { data: audits = [] } = useAuditLogs(id);
+  const updateJobMutation = useUpdateJob();
+
+  const [activeSubTab, setActiveSubTab] = useState<"overview" | "applicants" | "audits">("overview");
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center p-8">
+        <div className="text-sm font-medium animate-pulse" style={{ color: theme.text.secondary }}>
+          Loading role analytics details...
+        </div>
+      </div>
+    );
+  }
+
+  if (isError || !job) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center p-8 gap-4">
+        <FiAlertTriangle className="w-12 h-12 text-amber-500" />
+        <div className="text-sm font-bold" style={{ color: theme.text.primary }}>
+          Hiring opening not found
+        </div>
+        <Button text="Back to Jobs" onClick={() => navigate("/org/jobs")} />
+      </div>
+    );
+  }
+
+  const handleToggleStatus = () => {
+    const nextStatus: JobStatus = job.status === "active" ? "paused" : "active";
+    updateJobMutation.mutate({ id: job.id, patch: { status: nextStatus } });
+  };
+
+  // Top matching applicants (Match Score >= 85%)
+  const topApplicants = [...applicants]
+    .sort((a, b) => b.matchScore - a.matchScore)
+    .slice(0, 3);
+
+  // Status colors
+  const statusIsActive = job.status === "active";
+
+  return (
+    <div className="flex-1 flex flex-col min-h-screen overflow-x-hidden" style={{ backgroundColor: theme.bg.page }}>
+      {/* Detail header */}
+      <div
+        className="px-6 py-4 border-b flex flex-col md:flex-row md:items-center justify-between gap-4 sticky top-0 z-10"
+        style={{ borderColor: theme.border.default, backgroundColor: theme.bg.surface }}
+      >
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => navigate("/org/jobs")}
+            className="p-1.5 rounded-lg border hover:bg-zinc-50 dark:hover:bg-zinc-800"
+            style={{ borderColor: theme.border.default, color: theme.text.primary }}
+          >
+            <FiArrowLeft className="w-4 h-4" />
+          </button>
+          <div className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-2">
+              <h1 className="text-lg font-bold tracking-tight" style={{ color: theme.text.primary }}>
+                {job.title}
+              </h1>
+              <span
+                className={`px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wide`}
+                style={{
+                  backgroundColor: statusIsActive ? theme.success.subtle : theme.warning.subtle,
+                  color: statusIsActive ? theme.success.default : theme.warning.default,
+                }}
+              >
+                {job.status}
+              </span>
+            </div>
+            <span className="text-xs" style={{ color: theme.text.muted }}>
+              Hiring Page &bull; {job.id}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2.5">
+          <Button
+            text="Share"
+            variant="secondary"
+            icon={<FiShare2 className="mr-1.5" />}
+            onClick={() => alert(`Job opening URL copied to clipboard: ${window.location.origin}/company/nexgen-studios/jobs/${job.id}`)}
+          />
+          <Button
+            text={job.status === "active" ? "Pause Job" : "Resume Job"}
+            variant="secondary"
+            icon={<FiSlash className="mr-1.5" />}
+            onClick={handleToggleStatus}
+          />
+          <Button
+            text="Edit Details"
+            icon={<FiEdit2 className="mr-1.5" />}
+            onClick={() => navigate(`/org/jobs/${job.id}/edit`)}
+          />
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="px-6 border-b flex gap-6" style={{ borderColor: theme.border.default, backgroundColor: theme.bg.surface }}>
+        <button
+          onClick={() => setActiveSubTab("overview")}
+          className={`py-3 text-xs font-bold border-b-2 transition-all ${
+            activeSubTab === "overview"
+              ? "border-blue-600 text-blue-600"
+              : "border-transparent text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-300"
+          }`}
+        >
+          Overview
+        </button>
+        <button
+          onClick={() => setActiveSubTab("applicants")}
+          className={`py-3 text-xs font-bold border-b-2 transition-all flex items-center gap-1.5 ${
+            activeSubTab === "applicants"
+              ? "border-blue-600 text-blue-600"
+              : "border-transparent text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-300"
+          }`}
+        >
+          Applicants
+          <span className="px-1.5 py-0.5 rounded-full text-[9px] bg-zinc-200/50 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 font-bold">
+            {applicants.length}
+          </span>
+        </button>
+        <button
+          onClick={() => setActiveSubTab("audits")}
+          className={`py-3 text-xs font-bold border-b-2 transition-all ${
+            activeSubTab === "audits"
+              ? "border-blue-600 text-blue-600"
+              : "border-transparent text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-300"
+          }`}
+        >
+          Activity Log
+        </button>
+      </div>
+
+      {/* Main Content Areas */}
+      <div className="flex-1 p-6 max-w-7xl mx-auto w-full flex flex-col lg:flex-row gap-6">
+        {/* Left Columns - Tab Contents */}
+        <div className="flex-1 flex flex-col gap-6">
+          {/* TAB 1: OVERVIEW */}
+          {activeSubTab === "overview" && (
+            <>
+              {/* Analytics summary row */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div
+                  className="border rounded-xl p-5 shadow-sm flex flex-col gap-2 bg-white dark:bg-zinc-900"
+                  style={{ borderColor: theme.border.default }}
+                >
+                  <div className="flex items-center justify-between text-xs font-bold uppercase tracking-wider text-zinc-400">
+                    <span>Views</span>
+                    <FiEye className="w-4 h-4 text-blue-500" />
+                  </div>
+                  <div className="flex items-baseline gap-2 mt-1">
+                    <span className="text-2xl font-bold" style={{ color: theme.text.primary }}>
+                      {job.views.toLocaleString()}
+                    </span>
+                    <span className="text-[10px] font-bold text-green-500 flex items-center gap-0.5">
+                      <MdTrendingUp /> 12%
+                    </span>
+                  </div>
+                </div>
+
+                <div
+                  className="border rounded-xl p-5 shadow-sm flex flex-col gap-2 bg-white dark:bg-zinc-900"
+                  style={{ borderColor: theme.border.default }}
+                >
+                  <div className="flex items-center justify-between text-xs font-bold uppercase tracking-wider text-zinc-400">
+                    <span>Unique Visitors</span>
+                    <span className="w-2.5 h-2.5 rounded-full bg-purple-500" />
+                  </div>
+                  <div className="flex items-baseline gap-2 mt-1">
+                    <span className="text-2xl font-bold" style={{ color: theme.text.primary }}>
+                      {Math.round(job.views * 0.72).toLocaleString()}
+                    </span>
+                    <span className="text-[10px] font-bold text-green-500 flex items-center gap-0.5">
+                      <MdTrendingUp /> 5%
+                    </span>
+                  </div>
+                </div>
+
+                <div
+                  className="border rounded-xl p-5 shadow-sm flex flex-col gap-2 bg-white dark:bg-zinc-900"
+                  style={{ borderColor: theme.border.default }}
+                >
+                  <div className="flex items-center justify-between text-xs font-bold uppercase tracking-wider text-zinc-400">
+                    <span>Avg. Time on Page</span>
+                    <span className="w-2.5 h-2.5 rounded-full bg-cyan-500" />
+                  </div>
+                  <div className="flex items-baseline gap-2 mt-1">
+                    <span className="text-2xl font-bold" style={{ color: theme.text.primary }}>
+                      03:42
+                    </span>
+                    <span className="text-[10px] font-bold text-red-500 flex items-center gap-0.5">
+                      <MdTrendingDown /> 2%
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Conversion Funnel */}
+              <div
+                className="border rounded-xl p-6 shadow-sm"
+                style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+              >
+                <div className="flex items-center justify-between mb-6">
+                  <h3 className="text-sm font-bold uppercase tracking-wider" style={{ color: theme.text.primary }}>
+                    Candidate Funnel Analytics
+                  </h3>
+                  <span className="text-[10px] font-semibold text-zinc-500 bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5 rounded">
+                    Last 30 Days
+                  </span>
+                </div>
+
+                <div className="flex flex-col gap-6">
+                  {/* Funnel Level 1 */}
+                  <div className="flex flex-col gap-1.5">
+                    <div className="flex justify-between text-xs font-semibold">
+                      <span style={{ color: theme.text.secondary }}>Profile Views</span>
+                      <span style={{ color: theme.text.primary }} className="font-bold">{job.views.toLocaleString()}</span>
+                    </div>
+                    <div className="h-2 w-full rounded-full bg-zinc-100 dark:bg-zinc-800 overflow-hidden">
+                      <div className="h-full bg-blue-600 rounded-full" style={{ width: "100%" }} />
+                    </div>
+                  </div>
+
+                  {/* Funnel Level 2 */}
+                  <div className="flex flex-col gap-1.5">
+                    <div className="flex justify-between text-xs font-semibold">
+                      <div className="flex items-center gap-1.5">
+                        <span style={{ color: theme.text.secondary }}>Applications Started</span>
+                        <span className="text-[9px] font-bold text-blue-500 bg-blue-500/10 px-1 py-0.25 rounded">85% CR</span>
+                      </div>
+                      <span style={{ color: theme.text.primary }} className="font-bold">{Math.round(job.views * 0.85).toLocaleString()}</span>
+                    </div>
+                    <div className="h-2 w-full rounded-full bg-zinc-100 dark:bg-zinc-800 overflow-hidden">
+                      <div className="h-full bg-blue-500 rounded-full" style={{ width: "85%" }} />
+                    </div>
+                  </div>
+
+                  {/* Funnel Level 3 */}
+                  <div className="flex flex-col gap-1.5">
+                    <div className="flex justify-between text-xs font-semibold">
+                      <div className="flex items-center gap-1.5">
+                        <span style={{ color: theme.text.secondary }}>Completed Applications</span>
+                        <span className="text-[9px] font-bold text-purple-500 bg-purple-500/10 px-1 py-0.25 rounded">1.1% CR</span>
+                      </div>
+                      <span style={{ color: theme.text.primary }} className="font-bold">{job.applicantsCount}</span>
+                    </div>
+                    <div className="h-2 w-full rounded-full bg-zinc-100 dark:bg-zinc-800 overflow-hidden">
+                      <div className="h-full bg-purple-500 rounded-full" style={{ width: `${(job.applicantsCount / job.views) * 100}%`, minWidth: "2%" }} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Top matching applicants */}
+              <div
+                className="border rounded-xl p-6 shadow-sm"
+                style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+              >
+                <div className="flex items-center justify-between mb-4">
+                  <h3 className="text-sm font-bold uppercase tracking-wider" style={{ color: theme.text.primary }}>
+                    Top Matching Applicants
+                  </h3>
+                  <button
+                    onClick={() => setActiveSubTab("applicants")}
+                    className="text-xs font-bold text-blue-500 hover:underline"
+                  >
+                    View All
+                  </button>
+                </div>
+
+                {topApplicants.length === 0 ? (
+                  <p className="text-xs" style={{ color: theme.text.muted }}>
+                    No candidates have applied to this role yet.
+                  </p>
+                ) : (
+                  <div className="flex flex-col gap-3">
+                    {topApplicants.map((app) => (
+                      <div
+                        key={app.id}
+                        onClick={() => navigate(`/org/jobs/${job.id}/applicants/${app.id}`)}
+                        className="flex items-center justify-between p-3 rounded-lg border hover:bg-zinc-50 dark:hover:bg-zinc-800/50 cursor-pointer transition-colors"
+                        style={{ borderColor: theme.border.default }}
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="w-8 h-8 rounded-full bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center text-xs font-bold" style={{ color: theme.primary.default }}>
+                            {app.name[0]}
+                          </div>
+                          <div className="flex flex-col gap-0.5">
+                            <span className="text-xs font-bold" style={{ color: theme.text.primary }}>{app.name}</span>
+                            <span className="text-[10px]" style={{ color: theme.text.muted }}>{app.experience}</span>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                          <span className="px-1.5 py-0.5 rounded text-[10px] font-bold text-green-600 bg-green-500/10">
+                            MATCH: {app.matchScore}%
+                          </span>
+                          <span className="text-[10px] font-bold uppercase text-zinc-400">{app.status}</span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+
+          {/* TAB 2: APPLICANTS IN DETAIL */}
+          {activeSubTab === "applicants" && (
+            <div
+              className="border rounded-xl p-6 shadow-sm flex flex-col gap-4"
+              style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+            >
+              <div className="flex justify-between items-center">
+                <h3 className="text-sm font-bold uppercase tracking-wider" style={{ color: theme.text.primary }}>
+                  Pipeline Candidates
+                </h3>
+                <Button
+                  text="Go to ATS Board"
+                  onClick={() => navigate(`/org/jobs/${job.id}/applicants`)}
+                />
+              </div>
+
+              {applicants.length === 0 ? (
+                <p className="text-xs py-8 text-center" style={{ color: theme.text.muted }}>
+                  No candidates listed for this opening.
+                </p>
+              ) : (
+                <div className="overflow-x-auto">
+                  <table className="w-full border-collapse text-left text-xs">
+                    <thead>
+                      <tr className="border-b" style={{ borderColor: theme.border.default, color: theme.text.muted }}>
+                        <th className="py-2.5 font-bold uppercase tracking-wider">Name</th>
+                        <th className="py-2.5 font-bold uppercase tracking-wider">Match Score</th>
+                        <th className="py-2.5 font-bold uppercase tracking-wider">Pipeline Stage</th>
+                        <th className="py-2.5 font-bold uppercase tracking-wider">Experience</th>
+                        <th className="py-2.5 font-bold uppercase tracking-wider text-right">Profile</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y" style={{ borderColor: theme.border.default }}>
+                      {applicants.map((app) => (
+                        <tr key={app.id} className="hover:bg-zinc-50 dark:hover:bg-zinc-800/30">
+                          <td className="py-3 font-semibold" style={{ color: theme.text.primary }}>{app.name}</td>
+                          <td className="py-3">
+                            <span className={`px-1.5 py-0.5 rounded font-bold text-[10px] ${app.matchScore >= 80 ? "text-green-600 bg-green-500/10" : "text-amber-600 bg-amber-500/10"}`}>
+                              {app.matchScore}%
+                            </span>
+                          </td>
+                          <td className="py-3 uppercase font-bold text-[10px]" style={{ color: theme.text.secondary }}>{app.status}</td>
+                          <td className="py-3" style={{ color: theme.text.muted }}>{app.experience}</td>
+                          <td className="py-3 text-right">
+                            <button
+                              onClick={() => navigate(`/org/jobs/${job.id}/applicants/${app.id}`)}
+                              className="text-xs font-bold text-blue-500 hover:underline"
+                            >
+                              Open &rarr;
+                            </button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* TAB 3: ACTIVITY LOGS */}
+          {activeSubTab === "audits" && (
+            <div
+              className="border rounded-xl p-6 shadow-sm flex flex-col gap-4"
+              style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+            >
+              <h3 className="text-sm font-bold uppercase tracking-wider" style={{ color: theme.text.primary }}>
+                Role Revision Logs
+              </h3>
+
+              {audits.length === 0 ? (
+                <p className="text-xs" style={{ color: theme.text.muted }}>
+                  No activities recorded yet.
+                </p>
+              ) : (
+                <div className="relative border-l pl-4 flex flex-col gap-6" style={{ borderColor: theme.border.default }}>
+                  {audits.map((log) => (
+                    <div key={log.id} className="relative text-xs flex flex-col gap-1">
+                      <div
+                        className="absolute -left-[21px] top-1 w-2.5 h-2.5 rounded-full border bg-white dark:bg-zinc-800"
+                        style={{ borderColor: theme.primary.default }}
+                      />
+                      <span className="font-bold" style={{ color: theme.text.primary }}>
+                        {log.action}
+                      </span>
+                      <span className="text-[10px]" style={{ color: theme.text.muted }}>
+                        {new Date(log.timestamp).toLocaleString()} &bull; {log.user}
+                      </span>
+                      <p className="leading-relaxed mt-0.5" style={{ color: theme.text.secondary }}>
+                        {log.details}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Right Column - Metadata panel */}
+        <div className="w-full lg:w-80 flex flex-col gap-6">
+          <div
+            className="border rounded-xl p-5 shadow-sm flex flex-col gap-5"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            <h3 className="text-sm font-bold uppercase tracking-wider" style={{ color: theme.text.primary }}>
+              Job Metadata
+            </h3>
+
+            <div className="flex flex-col gap-4 text-xs font-semibold">
+              <div className="flex flex-col gap-1">
+                <span className="text-[10px] uppercase tracking-wider text-zinc-400">Hiring Manager</span>
+                <span style={{ color: theme.text.primary }}>{job.hiringManager}</span>
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <span className="text-[10px] uppercase tracking-wider text-zinc-400">Community Partner</span>
+                <span style={{ color: theme.text.primary }}>{job.community}</span>
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <span className="text-[10px] uppercase tracking-wider text-zinc-400">Posted Date</span>
+                <span style={{ color: theme.text.primary }}>{job.postedDate}</span>
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <span className="text-[10px] uppercase tracking-wider text-zinc-400">Expiration Date</span>
+                <span style={{ color: theme.text.primary }}>{job.expirationDate}</span>
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <span className="text-[10px] uppercase tracking-wider text-zinc-400">Work Model</span>
+                <span className="px-2 py-0.5 rounded bg-blue-500/10 text-blue-500 w-fit text-[10px] font-bold uppercase mt-1">
+                  {job.workplaceType} Friendly
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Distribution card */}
+          <div
+            className="border rounded-xl p-5 shadow-sm flex flex-col gap-4"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            <div className="flex items-center justify-between text-xs font-bold uppercase tracking-wider" style={{ color: theme.text.primary }}>
+              <span>Distribution Channels</span>
+              <span className="text-zinc-400 hover:text-zinc-600 cursor-pointer">+</span>
+            </div>
+
+            <div className="flex flex-col gap-3.5 text-xs font-semibold">
+              <div className="flex items-center justify-between">
+                <span style={{ color: theme.text.secondary }}>Internal Career Site</span>
+                <span className="w-2 h-2 rounded-full bg-green-500" />
+              </div>
+              <div className="flex items-center justify-between">
+                <span style={{ color: theme.text.secondary }}>LinkedIn Recruiter</span>
+                <span className="w-2 h-2 rounded-full bg-green-500" />
+              </div>
+              <div className="flex items-center justify-between">
+                <span style={{ color: theme.text.secondary }}>Dribbble Jobs</span>
+                <span className="w-2 h-2 rounded-full bg-green-500" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default JobDetailsPage;
diff --git a/src/features/Hiring/v1/Pages/JobsDashboardPage.tsx b/src/features/Hiring/v1/Pages/JobsDashboardPage.tsx
new file mode 100644
index 0000000..c863f31
--- /dev/null
+++ b/src/features/Hiring/v1/Pages/JobsDashboardPage.tsx
@@ -0,0 +1,471 @@
+import { useState } from "react";
+import { useTheme } from "@/theme";
+import { useNavigate } from "react-router-dom";
+import { useJobs, useCreateJob, useDeleteJob, useUpdateJob } from "../Hooks/useHiring";
+import { JobRole, JobStatus } from "../Types/Hiring.types";
+import Button from "@/Component/ui/Button";
+import { FiSearch, FiSliders, FiPlus, FiEye, FiEdit2, FiCopy, FiSlash, FiDownload, FiTrash2 } from "react-icons/fi";
+import { MdWorkOutline, MdPeopleOutline, MdCheckCircleOutline } from "react-icons/md";
+
+const JobsDashboardPage = () => {
+  const { theme } = useTheme();
+  const navigate = useNavigate();
+
+  const [search, setSearch] = useState("");
+  const [activeTab, setActiveTab] = useState<"all" | "draft" | "archived">("all");
+  const [selectedDept, setSelectedDept] = useState("all");
+  const [showFilters, setShowFilters] = useState(false);
+  const [selectedJobs, setSelectedJobs] = useState<string[]>([]);
+
+  // Fetch jobs
+  const { data: jobs = [], isLoading } = useJobs({
+    search,
+    status: activeTab === "all" ? undefined : activeTab,
+  });
+
+  const createJobMutation = useCreateJob();
+  const updateJobMutation = useUpdateJob();
+  const deleteJobMutation = useDeleteJob();
+
+  // Metrics
+  const activeOpenings = jobs.filter((j) => j.status === "active").length;
+  const totalApplicants = jobs.reduce((sum, j) => sum + j.applicantsCount, 0);
+
+  // Departments list for filtering
+  const departments = ["all", "Product", "Engineering", "Sales", "HR"];
+
+  const handleSelectJob = (id: string) => {
+    setSelectedJobs((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+
+  const handleSelectAll = () => {
+    if (selectedJobs.length === jobs.length) {
+      setSelectedJobs([]);
+    } else {
+      setSelectedJobs(jobs.map((j) => j.id));
+    }
+  };
+
+  const handleBulkDelete = () => {
+    if (confirm(`Are you sure you want to delete the ${selectedJobs.length} selected job openings?`)) {
+      selectedJobs.forEach((id) => deleteJobMutation.mutate(id));
+      setSelectedJobs([]);
+    }
+  };
+
+  const handleDuplicate = (job: JobRole) => {
+    const duplicatedPayload = {
+      title: `${job.title} (Copy)`,
+      department: job.department,
+      hiringManager: job.hiringManager,
+      community: job.community,
+      slug: `${job.slug}-copy`,
+      description: job.description,
+      responsibilities: job.responsibilities,
+      requirements: job.requirements,
+      benefits: job.benefits,
+      skills: job.skills,
+      tags: job.tags,
+      employmentType: job.employmentType,
+      workplaceType: job.workplaceType,
+      salaryRange: job.salaryRange,
+      openings: job.openings,
+      timeline: job.timeline,
+      expirationDate: job.expirationDate,
+      visibility: job.visibility,
+      isFeatured: job.isFeatured,
+      isSponsored: job.isSponsored,
+      status: "draft" as JobStatus,
+    };
+
+    createJobMutation.mutate(duplicatedPayload, {
+      onSuccess: () => {
+        alert("Job opening duplicated successfully in Draft status!");
+      },
+    });
+  };
+
+  const handleExportCSV = () => {
+    const headers = "Job ID,Title,Department,Status,Applicants,Views,Posted Date\n";
+    const rows = jobs
+      .map((j) => `"${j.id}","${j.title}","${j.department}","${j.status}",${j.applicantsCount},${j.views},"${j.postedDate}"`)
+      .join("\n");
+    const blob = new Blob([headers + rows], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", `jobs_export_${new Date().toISOString().split("T")[0]}.csv`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const getStatusColor = (status: JobStatus) => {
+    switch (status) {
+      case "active":
+        return { bg: theme.success.subtle, text: theme.success.default, label: "Active" };
+      case "draft":
+        return { bg: theme.bg.surfaceSecondary, text: theme.text.secondary, label: "Draft" };
+      case "paused":
+        return { bg: theme.warning.subtle, text: theme.warning.default, label: "Paused" };
+      case "closed":
+      case "archived":
+        return { bg: theme.danger.subtle, text: theme.danger.default, label: status === "closed" ? "Closed" : "Archived" };
+      default:
+        return { bg: theme.bg.surfaceSecondary, text: theme.text.muted, label: status };
+    }
+  };
+
+  return (
+    <div className="flex-1 flex flex-col min-h-screen overflow-x-hidden" style={{ backgroundColor: theme.bg.page }}>
+      {/* Top Header */}
+      <div
+        className="px-6 py-4 border-b flex items-center justify-between"
+        style={{ borderColor: theme.border.default, backgroundColor: theme.bg.surface }}
+      >
+        <div className="flex flex-col gap-0.5">
+          <h1 className="text-xl font-bold tracking-tight" style={{ color: theme.text.primary }}>
+            Active Openings
+          </h1>
+          <div className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.muted }}>
+            <span>Hiring Dashboard</span>
+          </div>
+        </div>
+
+        <Button
+          text="Create New Job"
+          icon={<FiPlus className="mr-1.5" />}
+          onClick={() => navigate("/org/jobs/create")}
+        />
+      </div>
+
+      {/* Metrics Banner */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
+        <div
+          className="border rounded-xl p-5 flex items-center gap-4 shadow-sm"
+          style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+        >
+          <div className="p-3 rounded-lg bg-blue-500/10 text-blue-500">
+            <MdWorkOutline className="w-6 h-6" />
+          </div>
+          <div className="flex flex-col">
+            <span className="text-xs font-bold uppercase tracking-wider" style={{ color: theme.text.muted }}>
+              Active Openings
+            </span>
+            <div className="flex items-baseline gap-2 mt-1">
+              <span className="text-2xl font-bold" style={{ color: theme.text.primary }}>
+                {activeOpenings}
+              </span>
+              <span className="text-[10px] font-bold text-green-500 bg-green-500/10 px-1.5 py-0.5 rounded">
+                +12% vs last month
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="border rounded-xl p-5 flex items-center gap-4 shadow-sm"
+          style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+        >
+          <div className="p-3 rounded-lg bg-purple-500/10 text-purple-500">
+            <MdPeopleOutline className="w-6 h-6" />
+          </div>
+          <div className="flex flex-col">
+            <span className="text-xs font-bold uppercase tracking-wider" style={{ color: theme.text.muted }}>
+              Total Applicants
+            </span>
+            <div className="flex items-baseline gap-2 mt-1">
+              <span className="text-2xl font-bold" style={{ color: theme.text.primary }}>
+                {totalApplicants}
+              </span>
+              <span className="text-[10px] font-bold text-green-500 bg-green-500/10 px-1.5 py-0.5 rounded">
+                +8.4% high-intent
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="border rounded-xl p-5 flex items-center gap-4 shadow-sm"
+          style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+        >
+          <div className="p-3 rounded-lg bg-green-500/10 text-green-500">
+            <MdCheckCircleOutline className="w-6 h-6" />
+          </div>
+          <div className="flex flex-col">
+            <span className="text-xs font-bold uppercase tracking-wider" style={{ color: theme.text.muted }}>
+              Hiring Success Rate
+            </span>
+            <div className="flex items-baseline gap-2 mt-1">
+              <span className="text-2xl font-bold" style={{ color: theme.text.primary }}>
+                94.2%
+              </span>
+              <span className="text-[10px] font-semibold text-blue-500 bg-blue-500/10 px-1.5 py-0.5 rounded">
+                Benchmark: Optimal
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Filters Bar */}
+      <div className="px-6 pb-4 flex flex-col md:flex-row items-center justify-between gap-4">
+        {/* Status Tabs */}
+        <div className="flex items-center gap-1.5 p-1 rounded-lg border w-full md:w-auto" style={{ borderColor: theme.border.default, backgroundColor: theme.bg.surfaceSecondary }}>
+          <button
+            onClick={() => setActiveTab("all")}
+            className={`px-3 py-1.5 rounded-md text-xs font-bold transition-all ${
+              activeTab === "all"
+                ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
+                : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400"
+            }`}
+          >
+            All Jobs
+          </button>
+          <button
+            onClick={() => setActiveTab("draft")}
+            className={`px-3 py-1.5 rounded-md text-xs font-bold transition-all ${
+              activeTab === "draft"
+                ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
+                : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400"
+            }`}
+          >
+            Drafts
+          </button>
+          <button
+            onClick={() => setActiveTab("archived")}
+            className={`px-3 py-1.5 rounded-md text-xs font-bold transition-all ${
+              activeTab === "archived"
+                ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
+                : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400"
+            }`}
+          >
+            Archived
+          </button>
+        </div>
+
+        {/* Inputs */}
+        <div className="flex items-center gap-3 w-full md:w-auto flex-1 justify-end">
+          <div className="relative w-full max-w-xs">
+            <FiSearch className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400" />
+            <input
+              type="text"
+              placeholder="Search jobs, departments..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full pl-9 pr-4 py-1.5 border rounded-lg text-xs outline-none focus:ring-2 focus:border-transparent"
+              style={{
+                backgroundColor: theme.bg.surface,
+                borderColor: theme.border.default,
+                color: theme.text.primary,
+              }}
+            />
+          </div>
+
+          <button
+            onClick={() => setShowFilters(!showFilters)}
+            className="p-2 border rounded-lg flex items-center justify-center hover:bg-zinc-100 dark:hover:bg-zinc-800"
+            style={{ borderColor: theme.border.default }}
+            title="Toggle Filters"
+          >
+            <FiSliders className="w-4 h-4 text-zinc-500" />
+          </button>
+
+          {selectedJobs.length > 0 ? (
+            <button
+              onClick={handleBulkDelete}
+              className="p-2 border rounded-lg flex items-center justify-center bg-red-500/10 hover:bg-red-500/20 text-red-500 border-red-500/30"
+              title="Delete Selected"
+            >
+              <FiTrash2 className="w-4 h-4" />
+            </button>
+          ) : (
+            <button
+              onClick={handleExportCSV}
+              className="p-2 border rounded-lg flex items-center justify-center hover:bg-zinc-100 dark:hover:bg-zinc-800"
+              style={{ borderColor: theme.border.default }}
+              title="Export CSV"
+            >
+              <FiDownload className="w-4 h-4 text-zinc-500" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Advanced Filters Expand */}
+      {showFilters && (
+        <div className="mx-6 mb-4 p-4 border rounded-xl grid grid-cols-1 md:grid-cols-3 gap-4" style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}>
+          <div className="flex flex-col gap-1.5">
+            <label className="text-[10px] font-bold uppercase tracking-wider" style={{ color: theme.text.muted }}>Department</label>
+            <select
+              value={selectedDept}
+              onChange={(e) => setSelectedDept(e.target.value)}
+              className="p-2 border rounded-lg text-xs outline-none"
+              style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default, color: theme.text.primary }}
+            >
+              {departments.map((d) => (
+                <option key={d} value={d}>
+                  {d === "all" ? "All Departments" : d}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      )}
+
+      {/* Table Container */}
+      <div className="flex-1 px-6 pb-6">
+        <div className="border rounded-xl overflow-hidden shadow-sm" style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}>
+          <div className="overflow-x-auto">
+            <table className="w-full border-collapse text-left">
+              <thead>
+                <tr className="border-b text-[10px] font-bold uppercase tracking-wider" style={{ borderColor: theme.border.default, color: theme.text.muted, backgroundColor: theme.bg.surfaceSecondary }}>
+                  <th className="p-4 w-12 text-center">
+                    <input
+                      type="checkbox"
+                      checked={selectedJobs.length === jobs.length && jobs.length > 0}
+                      onChange={handleSelectAll}
+                      className="rounded border-gray-300"
+                    />
+                  </th>
+                  <th className="p-4">Job Title & ID</th>
+                  <th className="p-4">Department</th>
+                  <th className="p-4">Status</th>
+                  <th className="p-4 text-center">Applicants</th>
+                  <th className="p-4 text-center">Views</th>
+                  <th className="p-4">Posted Date</th>
+                  <th className="p-4 text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y text-xs font-medium" style={{ borderColor: theme.border.default }}>
+                {isLoading ? (
+                  <tr>
+                    <td colSpan={8} className="p-8 text-center" style={{ color: theme.text.muted }}>
+                      Loading openings...
+                    </td>
+                  </tr>
+                ) : jobs.length === 0 ? (
+                  <tr>
+                    <td colSpan={8} className="p-12 text-center" style={{ color: theme.text.muted }}>
+                      No job openings found matching your search.
+                    </td>
+                  </tr>
+                ) : (
+                  jobs
+                    .filter((job) => selectedDept === "all" || job.department.toLowerCase() === selectedDept.toLowerCase())
+                    .map((job) => {
+                      const status = getStatusColor(job.status);
+                      const isSelected = selectedJobs.includes(job.id);
+                      return (
+                        <tr
+                          key={job.id}
+                          className={`hover:bg-zinc-50/50 dark:hover:bg-zinc-800/30 transition-colors ${
+                            isSelected ? "bg-blue-500/5" : ""
+                          }`}
+                        >
+                          <td className="p-4 text-center">
+                            <input
+                              type="checkbox"
+                              checked={isSelected}
+                              onChange={() => handleSelectJob(job.id)}
+                              className="rounded border-gray-300"
+                            />
+                          </td>
+                          <td className="p-4">
+                            <div className="flex flex-col gap-0.5">
+                              <span
+                                className="font-semibold cursor-pointer hover:underline"
+                                style={{ color: theme.text.primary }}
+                                onClick={() => navigate(`/org/jobs/${job.id}`)}
+                              >
+                                {job.title}
+                              </span>
+                              <span className="text-[10px] font-semibold" style={{ color: theme.text.muted }}>
+                                {job.id}
+                              </span>
+                            </div>
+                          </td>
+                          <td className="p-4" style={{ color: theme.text.secondary }}>
+                            {job.department}
+                          </td>
+                          <td className="p-4">
+                            <span
+                              className="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide inline-block"
+                              style={{ backgroundColor: status.bg, color: status.text }}
+                            >
+                              {status.label}
+                            </span>
+                          </td>
+                          <td className="p-4 text-center font-bold" style={{ color: theme.text.primary }}>
+                            {job.status === "draft" ? "—" : job.applicantsCount}
+                          </td>
+                          <td className="p-4 text-center" style={{ color: theme.text.secondary }}>
+                            {job.status === "draft" ? "—" : job.views.toLocaleString()}
+                          </td>
+                          <td className="p-4" style={{ color: theme.text.secondary }}>
+                            {job.postedDate}
+                          </td>
+                          <td className="p-4 text-right">
+                            <div className="flex items-center justify-end gap-1.5">
+                              <button
+                                onClick={() => navigate(`/org/jobs/${job.id}`)}
+                                className="p-1.5 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-500"
+                                title="View details"
+                              >
+                                <FiEye className="w-3.5 h-3.5" />
+                              </button>
+                              <button
+                                onClick={() => navigate(`/org/jobs/${job.id}/edit`)}
+                                className="p-1.5 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-500"
+                                title="Edit opening"
+                              >
+                                <FiEdit2 className="w-3.5 h-3.5" />
+                              </button>
+                              <button
+                                onClick={() => handleDuplicate(job)}
+                                className="p-1.5 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-500"
+                                title="Duplicate role"
+                              >
+                                <FiCopy className="w-3.5 h-3.5" />
+                              </button>
+                              <button
+                                onClick={() => {
+                                  const nextStatus = job.status === "active" ? "paused" : "active";
+                                  updateJobMutation.mutate({ id: job.id, patch: { status: nextStatus } });
+                                }}
+                                className="p-1.5 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-500"
+                                title={job.status === "active" ? "Pause recruiting" : "Activate recruiting"}
+                              >
+                                <FiSlash className="w-3.5 h-3.5" />
+                              </button>
+                            </div>
+                          </td>
+                        </tr>
+                      );
+                    })
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer velocities */}
+      <div className="mx-6 mb-8 p-5 border rounded-xl flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-zinc-50 dark:bg-zinc-900/30" style={{ borderColor: theme.border.default }}>
+        <div className="flex flex-col gap-0.5 max-w-xl">
+          <h4 className="text-xs font-bold" style={{ color: theme.text.primary }}>Hiring Velocity Insight</h4>
+          <p className="text-[11px]" style={{ color: theme.text.secondary }}>
+            Your Engineering department is hiring 15% faster than last quarter. Consider increasing referral bonuses for Product Design to match this efficiency.
+          </p>
+        </div>
+        <div className="text-xs font-bold text-blue-500 px-3 py-1.5 border rounded-lg border-blue-500/20 bg-blue-500/5 cursor-pointer hover:bg-blue-500/10">
+          Analyze Funnels &rarr;
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default JobsDashboardPage;
diff --git a/src/features/Hiring/v1/Pages/MediaManagementPage.tsx b/src/features/Hiring/v1/Pages/MediaManagementPage.tsx
new file mode 100644
index 0000000..a353173
--- /dev/null
+++ b/src/features/Hiring/v1/Pages/MediaManagementPage.tsx
@@ -0,0 +1,188 @@
+import { useState } from "react";
+import { useTheme } from "@/theme";
+import { useCompanyProfile, useUpdateCompanyProfile } from "../Hooks/useHiring";
+import { FiUploadCloud, FiTrash2, FiMaximize2 } from "react-icons/fi";
+
+const MediaManagementPage = () => {
+  const { theme } = useTheme();
+  const { data: profile, isLoading } = useCompanyProfile();
+  const updateProfileMutation = useUpdateCompanyProfile();
+
+  const [dragActive, setDragActive] = useState(false);
+  const [fullscreenImage, setFullscreenImage] = useState<string | null>(null);
+
+  const mediaList = profile?.media || [];
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      // Create a mock local object URL for the dropped file to simulate upload
+      const file = e.dataTransfer.files[0];
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        if (event.target?.result && typeof event.target.result === "string") {
+          const newUrl = event.target.result;
+          const updatedMedia = [...mediaList, newUrl];
+          updateProfileMutation.mutate({ media: updatedMedia });
+        }
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        if (event.target?.result && typeof event.target.result === "string") {
+          const newUrl = event.target.result;
+          const updatedMedia = [...mediaList, newUrl];
+          updateProfileMutation.mutate({ media: updatedMedia });
+        }
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleDelete = (indexToDelete: number) => {
+    const updatedMedia = mediaList.filter((_, idx) => idx !== indexToDelete);
+    updateProfileMutation.mutate({ media: updatedMedia });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center p-8">
+        <div className="text-sm font-medium animate-pulse" style={{ color: theme.text.secondary }}>
+          Loading media assets...
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto p-6 lg:p-10" style={{ backgroundColor: theme.bg.page }}>
+      <div className="max-w-4xl mx-auto">
+        <div className="flex flex-col gap-1 mb-8">
+          <h1 className="text-2xl font-bold tracking-tight" style={{ color: theme.text.primary }}>
+            Gallery & Media Assets
+          </h1>
+          <p className="text-sm" style={{ color: theme.text.secondary }}>
+            Upload, remove, and manage photos of your workspace, culture events, and community office days.
+          </p>
+        </div>
+
+        {/* Upload Box */}
+        <div
+          onDragEnter={handleDrag}
+          onDragOver={handleDrag}
+          onDragLeave={handleDrag}
+          onDrop={handleDrop}
+          className="relative border-2 border-dashed rounded-xl p-8 mb-8 flex flex-col items-center justify-center cursor-pointer transition-all duration-150"
+          style={{
+            borderColor: dragActive ? theme.primary.default : theme.border.default,
+            backgroundColor: dragActive ? theme.bg.surfaceSecondary : theme.bg.surface,
+          }}
+        >
+          <input
+            type="file"
+            id="media-file-input"
+            accept="image/*"
+            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+            onChange={handleFileInput}
+          />
+          <FiUploadCloud className="w-10 h-10 mb-3" style={{ color: theme.text.muted }} />
+          <p className="text-sm font-semibold mb-1" style={{ color: theme.text.primary }}>
+            Drag and drop images here, or click to browse files
+          </p>
+          <p className="text-xs" style={{ color: theme.text.muted }}>
+            Supports PNG, JPEG, WEBP up to 5MB. Images will be optimized dynamically.
+          </p>
+        </div>
+
+        {/* Gallery Grid */}
+        <h2 className="text-sm font-semibold uppercase tracking-wider mb-4" style={{ color: theme.text.secondary }}>
+          Uploaded Assets ({mediaList.length})
+        </h2>
+
+        {mediaList.length === 0 ? (
+          <div
+            className="text-center py-16 rounded-xl border"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            <p className="text-sm" style={{ color: theme.text.muted }}>
+              No gallery images uploaded yet. Upload workspace shots to show company culture!
+            </p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+            {mediaList.map((url, idx) => (
+              <div
+                key={idx}
+                className="group relative h-48 rounded-xl overflow-hidden border shadow-sm transition-all duration-200 hover:shadow-md"
+                style={{ borderColor: theme.border.default, backgroundColor: theme.bg.surfaceSecondary }}
+              >
+                <img src={url} alt={`Culture shot ${idx + 1}`} className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" />
+
+                {/* Overlays / Control bar */}
+                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-150 flex items-center justify-center gap-3">
+                  <button
+                    onClick={() => setFullscreenImage(url)}
+                    className="p-2.5 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-colors duration-100"
+                    title="Fullscreen Preview"
+                  >
+                    <FiMaximize2 className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(idx)}
+                    className="p-2.5 rounded-lg bg-red-500/80 hover:bg-red-500 text-white transition-colors duration-100"
+                    title="Delete Image"
+                  >
+                    <FiTrash2 className="w-4 h-4" />
+                  </button>
+                </div>
+
+                <div className="absolute bottom-2 left-2 px-2 py-0.5 rounded text-[10px] font-bold tracking-wider bg-black/50 text-white backdrop-blur-sm">
+                  Culture Shot {idx + 1}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Lightbox / Fullscreen Modal */}
+      {fullscreenImage && (
+        <div
+          className="fixed inset-0 z-50 bg-black/90 backdrop-blur-sm flex items-center justify-center p-4"
+          onClick={() => setFullscreenImage(null)}
+        >
+          <div className="relative max-w-4xl max-h-[85vh] overflow-hidden rounded-xl">
+            <img src={fullscreenImage} alt="Fullscreen View" className="max-w-full max-h-[85vh] object-contain" />
+            <button
+              onClick={() => setFullscreenImage(null)}
+              className="absolute top-4 right-4 bg-white/10 hover:bg-white/20 text-white px-3 py-1.5 rounded-lg text-xs font-semibold backdrop-blur"
+            >
+              Close Preview
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MediaManagementPage;
diff --git a/src/features/Hiring/v1/Pages/ModerationPage.tsx b/src/features/Hiring/v1/Pages/ModerationPage.tsx
new file mode 100644
index 0000000..2ab8737
--- /dev/null
+++ b/src/features/Hiring/v1/Pages/ModerationPage.tsx
@@ -0,0 +1,133 @@
+import { useTheme } from "@/theme";
+import { useModerationJobs, useModerateJob } from "../Hooks/useHiring";
+import { FiCheck, FiX, FiAlertOctagon, FiAlertCircle } from "react-icons/fi";
+
+const ModerationPage = () => {
+  const { theme } = useTheme();
+
+  // Fetch pending jobs for moderation
+  const { data: jobs = [], isLoading } = useModerationJobs();
+  const moderateMutation = useModerateJob();
+
+  // Filter jobs requiring moderation (e.g. draft, paused, or we can moderate any job)
+  const moderationQueue = jobs.filter((j) => j.status === "draft" || j.status === "paused");
+
+  const handleModeration = (jobId: string, action: "approve" | "reject") => {
+    if (confirm(`Are you sure you want to ${action} this job posting?`)) {
+      moderateMutation.mutate({ jobId, action, user: "Community Moderator" });
+    }
+  };
+
+  return (
+    <div className="flex-1 overflow-y-auto p-6 lg:p-10" style={{ backgroundColor: theme.bg.page }}>
+      <div className="max-w-5xl mx-auto">
+        <div className="flex flex-col gap-1 mb-8">
+          <h1 className="text-2xl font-bold tracking-tight" style={{ color: theme.text.primary }}>
+            Community Job Moderation
+          </h1>
+          <p className="text-sm" style={{ color: theme.text.secondary }}>
+            Approve or reject job submissions, detect spam, and verify organization hiring policies.
+          </p>
+        </div>
+
+        {/* Spam warning info bar */}
+        <div
+          className="mb-8 p-4 rounded-xl border flex items-start gap-3 text-xs leading-relaxed"
+          style={{
+            backgroundColor: theme.bg.surfaceSecondary,
+            borderColor: theme.border.default,
+          }}
+        >
+          <FiAlertOctagon className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+          <div className="flex flex-col gap-0.5" style={{ color: theme.text.secondary }}>
+            <span className="font-bold text-amber-500">Automated Scam Detection Active</span>
+            <span>
+              CommDesk uses heuristic scanners to analyze description content, wage structures, and company profiles for phishing signs. Verify all contact links match official domains before approval.
+            </span>
+          </div>
+        </div>
+
+        {/* Moderation table list */}
+        <h2 className="text-sm font-semibold uppercase tracking-wider mb-4" style={{ color: theme.text.secondary }}>
+          Pending Queue ({moderationQueue.length})
+        </h2>
+
+        {isLoading ? (
+          <div className="text-center py-12 text-sm font-medium animate-pulse" style={{ color: theme.text.muted }}>
+            Loading moderation queue...
+          </div>
+        ) : moderationQueue.length === 0 ? (
+          <div
+            className="text-center py-16 border rounded-xl"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            <p className="text-sm" style={{ color: theme.text.muted }}>
+              All job submissions have been moderated. The pending queue is empty!
+            </p>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-5">
+            {moderationQueue.map((job) => {
+              // Mock a fraud/scam score
+              const scamRisk = job.salaryRange.includes("commission") ? 35 : 5;
+              const isHighRisk = scamRisk > 30;
+
+              return (
+                <div
+                  key={job.id}
+                  className="border rounded-xl p-5 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-white dark:bg-zinc-900 shadow-sm"
+                  style={{ borderColor: theme.border.default }}
+                >
+                  <div className="flex-1 flex flex-col gap-1">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-bold text-sm" style={{ color: theme.text.primary }}>
+                        {job.title}
+                      </h3>
+                      <span className="text-[10px] font-bold text-zinc-400">
+                        {job.id} &bull; {job.department}
+                      </span>
+                    </div>
+                    <span className="text-xs" style={{ color: theme.text.muted }}>
+                      Submitted by: {job.hiringManager} &bull; Community: {job.community}
+                    </span>
+                    <p className="text-xs leading-relaxed mt-2 max-w-2xl text-zinc-500">
+                      {job.description.slice(0, 160)}...
+                    </p>
+                  </div>
+
+                  {/* Fraud score and Actions */}
+                  <div className="flex flex-row md:flex-col items-start md:items-end gap-4 shrink-0">
+                    <div className="flex items-center gap-1.5 text-xs font-semibold">
+                      <FiAlertCircle className={isHighRisk ? "text-red-500" : "text-green-500"} />
+                      <span style={{ color: theme.text.secondary }}>Automated Risk:</span>
+                      <span className={isHighRisk ? "text-red-500 font-bold" : "text-green-500 font-bold"}>
+                        {scamRisk}%
+                      </span>
+                    </div>
+
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => handleModeration(job.id, "reject")}
+                        className="px-3 py-1.5 rounded-lg border border-red-500/20 text-red-500 bg-red-500/5 hover:bg-red-500/10 text-xs font-bold flex items-center gap-1"
+                      >
+                        <FiX /> Reject
+                      </button>
+                      <button
+                        onClick={() => handleModeration(job.id, "approve")}
+                        className="px-3 py-1.5 rounded-lg border border-green-500/20 text-green-500 bg-green-500/5 hover:bg-green-500/10 text-xs font-bold flex items-center gap-1"
+                      >
+                        <FiCheck /> Approve
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ModerationPage;
diff --git a/src/features/Hiring/v1/Pages/PublicCompanyProfilePage.tsx b/src/features/Hiring/v1/Pages/PublicCompanyProfilePage.tsx
new file mode 100644
index 0000000..1240ab9
--- /dev/null
+++ b/src/features/Hiring/v1/Pages/PublicCompanyProfilePage.tsx
@@ -0,0 +1,201 @@
+import { useTheme } from "@/theme";
+import { useNavigate, useParams } from "react-router-dom";
+import { useCompanyProfile, useJobs } from "../Hooks/useHiring";
+import { FiBriefcase, FiArrowRight } from "react-icons/fi";
+import { FaGithub, FaDiscord, FaTwitter, FaLinkedin } from "react-icons/fa";
+
+const PublicCompanyProfilePage = () => {
+  const { theme } = useTheme();
+  const navigate = useNavigate();
+  const { slug } = useParams<{ slug: string }>();
+
+  // Fetch data
+  const { data: profile, isLoading: profileLoading } = useCompanyProfile();
+  const { data: jobs = [], isLoading: jobsLoading } = useJobs({ status: "active" });
+
+  if (profileLoading || jobsLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center p-8 bg-zinc-50 dark:bg-zinc-950">
+        <div className="text-sm font-semibold animate-pulse" style={{ color: theme.text.secondary }}>
+          Loading NexGen Careers...
+        </div>
+      </div>
+    );
+  }
+
+  if (!profile || profile.slug !== slug) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center p-8 gap-4 bg-zinc-50 dark:bg-zinc-950">
+        <span className="text-sm font-bold" style={{ color: theme.text.primary }}>Company Profile Not Found</span>
+        <button
+          onClick={() => navigate("/")}
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg text-xs font-bold"
+        >
+          Return to Portal
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col w-full" style={{ backgroundColor: theme.bg.page }}>
+      {/* Public Guest Header */}
+      <header
+        className="px-6 py-4 border-b flex items-center justify-between"
+        style={{ borderColor: theme.border.default, backgroundColor: theme.bg.surface }}
+      >
+        <div className="flex items-center gap-2 cursor-pointer" onClick={() => navigate("/")}>
+          <img src="/logoWithoutText.png" alt="CommDesk Logo" className="w-7 h-7" />
+          <span className="font-bold text-sm" style={{ color: theme.text.primary }}>CommDesk Careers</span>
+        </div>
+        <span className="text-xs font-bold text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200 cursor-pointer" onClick={() => navigate("/")}>
+          Hiring Portal &rarr;
+        </span>
+      </header>
+
+      {/* Hero Banner Banner */}
+      <div className="w-full relative h-64 md:h-80 overflow-hidden bg-zinc-950">
+        <img
+          src={profile.bannerUrl}
+          alt="Company Banner"
+          className="w-full h-full object-cover opacity-75"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" />
+        <div className="absolute bottom-6 left-6 right-6 max-w-6xl mx-auto flex flex-col md:flex-row md:items-end justify-between gap-4">
+          <div className="flex items-center gap-4">
+            <div className="w-20 h-20 rounded-2xl bg-white border p-3 flex items-center justify-center shadow-lg">
+              <img src={profile.logoUrl} alt="Logo" className="w-full h-full object-contain" />
+            </div>
+            <div className="flex flex-col">
+              <h1 className="text-2xl md:text-3xl font-black text-white leading-tight shadow-sm">
+                {profile.name}
+              </h1>
+              <span className="text-white/80 text-xs font-bold uppercase tracking-wider mt-0.5">
+                {profile.industry} &bull; {profile.teamSize}
+              </span>
+            </div>
+          </div>
+
+          {/* Socials */}
+          <div className="flex items-center gap-3 text-white/90">
+            {profile.socialLinks?.github && (
+              <a href={profile.socialLinks.github} target="_blank" rel="noreferrer" className="hover:text-white transition-colors">
+                <FaGithub className="w-5 h-5" />
+              </a>
+            )}
+            {profile.socialLinks?.discord && (
+              <a href={profile.socialLinks.discord} target="_blank" rel="noreferrer" className="hover:text-white transition-colors">
+                <FaDiscord className="w-5 h-5" />
+              </a>
+            )}
+            {profile.socialLinks?.twitter && (
+              <a href={profile.socialLinks.twitter} target="_blank" rel="noreferrer" className="hover:text-white transition-colors">
+                <FaTwitter className="w-5 h-5" />
+              </a>
+            )}
+            {profile.socialLinks?.linkedin && (
+              <a href={profile.socialLinks.linkedin} target="_blank" rel="noreferrer" className="hover:text-white transition-colors">
+                <FaLinkedin className="w-5 h-5" />
+              </a>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Main Grid Content */}
+      <main className="flex-1 p-6 md:p-10 max-w-6xl mx-auto w-full flex flex-col lg:flex-row gap-10">
+        {/* Left Side: About & Perks & Media */}
+        <div className="flex-1 flex flex-col gap-8">
+          <div className="flex flex-col gap-3">
+            <h2 className="text-lg font-black tracking-tight" style={{ color: theme.text.primary }}>
+              About {profile.name}
+            </h2>
+            <p className="text-sm leading-relaxed" style={{ color: theme.text.secondary }}>
+              {profile.about}
+            </p>
+          </div>
+
+          {/* Perks */}
+          <div className="flex flex-col gap-4">
+            <h3 className="text-base font-black tracking-tight" style={{ color: theme.text.primary }}>
+              Benefits & Perks
+            </h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              {profile.benefits.map((perk, idx) => (
+                <div
+                  key={idx}
+                  className="p-3 border rounded-xl flex items-center gap-2.5 text-xs font-semibold"
+                  style={{ borderColor: theme.border.default, backgroundColor: theme.bg.surfaceSecondary }}
+                >
+                  <span className="w-1.5 h-1.5 rounded-full bg-blue-600 shrink-0" />
+                  <span style={{ color: theme.text.primary }}>{perk}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Media gallery */}
+          <div className="flex flex-col gap-4">
+            <h3 className="text-base font-black tracking-tight" style={{ color: theme.text.primary }}>
+              Culture & Office Life
+            </h3>
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+              {profile.media.map((url, idx) => (
+                <div
+                  key={idx}
+                  className="h-36 rounded-xl overflow-hidden border bg-zinc-100 dark:bg-zinc-800"
+                  style={{ borderColor: theme.border.default }}
+                >
+                  <img src={url} alt={`Culture gallery ${idx + 1}`} className="w-full h-full object-cover hover:scale-105 transition-transform duration-300" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Right Side: Open Jobs */}
+        <div className="w-full lg:w-96 flex flex-col gap-6">
+          <div
+            className="border rounded-xl p-6 shadow-sm flex flex-col gap-5 bg-white dark:bg-zinc-900"
+            style={{ borderColor: theme.border.default }}
+          >
+            <h3 className="text-base font-black tracking-tight flex items-center gap-2" style={{ color: theme.text.primary }}>
+              <FiBriefcase className="text-blue-500" /> Open Positions ({jobs.length})
+            </h3>
+
+            {jobs.length === 0 ? (
+              <p className="text-xs text-center py-6" style={{ color: theme.text.muted }}>
+                We are not actively recruiting right now. Check back soon!
+              </p>
+            ) : (
+              <div className="flex flex-col gap-4">
+                {jobs.map((job) => (
+                  <div
+                    key={job.id}
+                    onClick={() => navigate(`/company/${slug}/jobs/${job.id}`)}
+                    className="p-4 border rounded-xl hover:bg-zinc-50 dark:hover:bg-zinc-800/50 cursor-pointer transition-all flex justify-between items-center group"
+                    style={{ borderColor: theme.border.default }}
+                  >
+                    <div className="flex flex-col gap-1 min-w-0 pr-3">
+                      <span className="text-xs font-bold truncate group-hover:text-blue-500 transition-colors" style={{ color: theme.text.primary }}>
+                        {job.title}
+                      </span>
+                      <div className="flex items-center gap-1.5 text-[10px] text-zinc-400 font-semibold">
+                        <span>{job.department}</span>
+                        <span>&bull;</span>
+                        <span className="capitalize">{job.workplaceType}</span>
+                      </div>
+                    </div>
+                    <FiArrowRight className="w-4 h-4 text-zinc-400 group-hover:text-blue-500 group-hover:translate-x-0.5 transition-all shrink-0" />
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default PublicCompanyProfilePage;
diff --git a/src/features/Hiring/v1/Pages/PublicJobDetailsPage.tsx b/src/features/Hiring/v1/Pages/PublicJobDetailsPage.tsx
new file mode 100644
index 0000000..31953de
--- /dev/null
+++ b/src/features/Hiring/v1/Pages/PublicJobDetailsPage.tsx
@@ -0,0 +1,303 @@
+import React, { useState } from "react";
+import { useTheme } from "@/theme";
+import { useNavigate, useParams } from "react-router-dom";
+import { useJobDetail, useApplyToJob, useCompanyProfile } from "../Hooks/useHiring";
+import Input from "@/Component/ui/Input";
+import { FiArrowLeft, FiMapPin, FiDollarSign, FiClock } from "react-icons/fi";
+
+const PublicJobDetailsPage = () => {
+  const { theme } = useTheme();
+  const navigate = useNavigate();
+  const { slug, jobId } = useParams<{ slug: string; jobId: string }>();
+
+  // Fetch data
+  const { data: job, isLoading: jobLoading } = useJobDetail(jobId);
+  const { data: profile } = useCompanyProfile();
+  const applyMutation = useApplyToJob();
+
+  // Apply Form State
+  const [showApplyModal, setShowApplyModal] = useState(false);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [experience, setExperience] = useState("");
+  const [skills, setSkills] = useState("");
+  const [resumeUrl, setResumeUrl] = useState("");
+  const [appliedSuccess, setAppliedSuccess] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  if (jobLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center p-8 bg-zinc-50 dark:bg-zinc-950">
+        <div className="text-sm font-semibold animate-pulse" style={{ color: theme.text.secondary }}>
+          Loading role requirements...
+        </div>
+      </div>
+    );
+  }
+
+  if (!job || !profile) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center p-8 gap-4 bg-zinc-50 dark:bg-zinc-950">
+        <span className="text-sm font-bold" style={{ color: theme.text.primary }}>Career Opening Not Found</span>
+        <button
+          onClick={() => navigate(`/company/${slug}`)}
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg text-xs font-bold"
+        >
+          Return to Career Portal
+        </button>
+      </div>
+    );
+  }
+
+  const validate = () => {
+    const nextErrors: Record<string, string> = {};
+    if (!name) nextErrors.name = "Full Name is required.";
+    if (!email) nextErrors.email = "Email is required.";
+    if (!experience) nextErrors.experience = "Professional experience details are required.";
+
+    setErrors(nextErrors);
+    return Object.keys(nextErrors).length === 0;
+  };
+
+  const handleApplySubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!validate() || !jobId) return;
+
+    const parsedSkills = skills
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+
+    applyMutation.mutate(
+      {
+        jobId,
+        payload: {
+          name,
+          email,
+          experience,
+          skills: parsedSkills,
+          resumeUrl: resumeUrl || "/resumes/submitted_resume.pdf",
+        },
+      },
+      {
+        onSuccess: () => {
+          setAppliedSuccess(true);
+          setName("");
+          setEmail("");
+          setExperience("");
+          setSkills("");
+          setResumeUrl("");
+        },
+      }
+    );
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col w-full" style={{ backgroundColor: theme.bg.page }}>
+      {/* Header */}
+      <header
+        className="px-6 py-4 border-b flex items-center justify-between sticky top-0 z-20"
+        style={{ borderColor: theme.border.default, backgroundColor: theme.bg.surface }}
+      >
+        <div className="flex items-center gap-2 cursor-pointer" onClick={() => navigate(`/company/${slug}`)}>
+          <img src="/logoWithoutText.png" alt="Logo" className="w-7 h-7" />
+          <span className="font-bold text-sm" style={{ color: theme.text.primary }}>{profile.name} Careers</span>
+        </div>
+
+        <button
+          onClick={() => navigate(`/company/${slug}`)}
+          className="px-3.5 py-1.5 border rounded-lg text-xs font-bold flex items-center gap-1.5 hover:bg-zinc-50 dark:hover:bg-zinc-800"
+          style={{ borderColor: theme.border.default, color: theme.text.primary }}
+        >
+          <FiArrowLeft /> Back to Openings
+        </button>
+      </header>
+
+      {/* Main Container */}
+      <main className="flex-1 p-6 md:p-10 max-w-4xl mx-auto w-full flex flex-col gap-8">
+        {/* Job Header Card */}
+        <div
+          className="border rounded-xl p-6 md:p-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 bg-white dark:bg-zinc-900 shadow-sm"
+          style={{ borderColor: theme.border.default }}
+        >
+          <div className="flex flex-col gap-2">
+            <h1 className="text-2xl md:text-3xl font-black tracking-tight" style={{ color: theme.text.primary }}>
+              {job.title}
+            </h1>
+            <div className="flex flex-wrap items-center gap-3.5 text-xs text-zinc-500 font-semibold mt-1">
+              <span className="flex items-center gap-1"><FiMapPin /> {job.workplaceType}</span>
+              <span>&bull;</span>
+              <span className="flex items-center gap-1"><FiClock /> {job.employmentType}</span>
+              <span>&bull;</span>
+              <span className="flex items-center gap-1"><FiDollarSign /> {job.salaryRange}</span>
+            </div>
+          </div>
+
+          <button
+            onClick={() => setShowApplyModal(true)}
+            className="px-6 py-3 rounded-xl text-white bg-blue-600 hover:bg-blue-700 text-xs font-bold shrink-0 shadow-md"
+          >
+            Apply to Position
+          </button>
+        </div>
+
+        {/* Job Details Content */}
+        <div
+          className="border rounded-xl p-6 md:p-8 flex flex-col gap-6 bg-white dark:bg-zinc-900 shadow-sm"
+          style={{ borderColor: theme.border.default }}
+        >
+          <div className="flex flex-col gap-2.5">
+            <h3 className="text-base font-black tracking-tight" style={{ color: theme.text.primary }}>Role Context</h3>
+            <p className="text-sm leading-relaxed" style={{ color: theme.text.secondary }}>{job.description}</p>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <h3 className="text-base font-black tracking-tight" style={{ color: theme.text.primary }}>Core Responsibilities</h3>
+            <ul className="list-disc pl-5 flex flex-col gap-2 text-sm" style={{ color: theme.text.secondary }}>
+              {job.responsibilities.map((r, idx) => (
+                <li key={idx}>{r}</li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <h3 className="text-base font-black tracking-tight" style={{ color: theme.text.primary }}>Requirements & Qualifications</h3>
+            <ul className="list-disc pl-5 flex flex-col gap-2 text-sm" style={{ color: theme.text.secondary }}>
+              {job.requirements.map((req, idx) => (
+                <li key={idx}>{req}</li>
+              ))}
+            </ul>
+          </div>
+
+          {job.benefits && job.benefits.length > 0 && (
+            <div className="flex flex-col gap-3">
+              <h3 className="text-base font-black tracking-tight" style={{ color: theme.text.primary }}>Offer & Benefits</h3>
+              <ul className="list-disc pl-5 flex flex-col gap-2 text-sm" style={{ color: theme.text.secondary }}>
+                {job.benefits.map((ben, idx) => (
+                  <li key={idx}>{ben}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      </main>
+
+      {/* Application Form Modal Dialog */}
+      {showApplyModal && (
+        <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+          <div
+            className="w-full max-w-xl border rounded-xl overflow-hidden shadow-2xl flex flex-col max-h-[90vh]"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            {/* Modal Header */}
+            <div className="px-6 py-4 border-b flex justify-between items-center" style={{ borderColor: theme.border.default }}>
+              <h3 className="text-base font-bold" style={{ color: theme.text.primary }}>Apply: {job.title}</h3>
+              <button
+                onClick={() => {
+                  setShowApplyModal(false);
+                  setAppliedSuccess(false);
+                }}
+                className="text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-300 font-bold"
+              >
+                &times;
+              </button>
+            </div>
+
+            {/* Modal Body */}
+            <div className="p-6 overflow-y-auto flex-1 flex flex-col gap-4">
+              {appliedSuccess ? (
+                <div className="flex flex-col items-center justify-center py-10 gap-3 text-center">
+                  <div className="w-12 h-12 rounded-full bg-green-500/10 text-green-500 flex items-center justify-center text-xl font-bold">
+                    ✓
+                  </div>
+                  <h4 className="font-bold text-sm" style={{ color: theme.text.primary }}>Application Submitted!</h4>
+                  <p className="text-xs max-w-sm" style={{ color: theme.text.secondary }}>
+                    Thank you for applying. Our recruiting team will review your application details shortly.
+                  </p>
+                  <button
+                    onClick={() => {
+                      setShowApplyModal(false);
+                      setAppliedSuccess(false);
+                    }}
+                    className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-xs font-bold"
+                  >
+                    Close Dialog
+                  </button>
+                </div>
+              ) : (
+                <form onSubmit={handleApplySubmit} className="flex flex-col gap-4">
+                  <Input
+                    label="Full Name *"
+                    name="name"
+                    value={name}
+                    onChange={(_, val) => setName(val)}
+                    placeholder="e.g. John Doe"
+                    error={errors.name}
+                    required
+                  />
+
+                  <Input
+                    label="Email Address *"
+                    name="email"
+                    type="email"
+                    value={email}
+                    onChange={(_, val) => setEmail(val)}
+                    placeholder="e.g. john.doe@domain.com"
+                    error={errors.email}
+                    required
+                  />
+
+                  <Input
+                    label="Current Role & Years of Experience *"
+                    name="experience"
+                    value={experience}
+                    onChange={(_, val) => setExperience(val)}
+                    placeholder="e.g. Senior Designer, 6 Years"
+                    error={errors.experience}
+                    required
+                  />
+
+                  <Input
+                    label="Relevant Skills (comma separated)"
+                    name="skills"
+                    value={skills}
+                    onChange={(_, val) => setSkills(val)}
+                    placeholder="e.g. Figma, Design Systems, HTML"
+                  />
+
+                  <Input
+                    label="Resume PDF URL (simulated)"
+                    name="resumeUrl"
+                    value={resumeUrl}
+                    onChange={(_, val) => setResumeUrl(val)}
+                    placeholder="e.g. /resumes/johndoe_resume.pdf"
+                  />
+
+                  <div className="flex justify-end gap-2.5 mt-4 border-t pt-4" style={{ borderColor: theme.border.default }}>
+                    <button
+                      type="button"
+                      onClick={() => setShowApplyModal(false)}
+                      className="px-4 py-2 border rounded-lg text-xs font-bold hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                      style={{ borderColor: theme.border.default, color: theme.text.primary }}
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      type="submit"
+                      disabled={applyMutation.isPending}
+                      className="px-5 py-2 rounded-lg text-white bg-blue-600 hover:bg-blue-700 text-xs font-bold"
+                    >
+                      {applyMutation.isPending ? "Submitting..." : "Submit Application"}
+                    </button>
+                  </div>
+                </form>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PublicJobDetailsPage;
diff --git a/src/features/Hiring/v1/Pages/SendMailPage.tsx b/src/features/Hiring/v1/Pages/SendMailPage.tsx
new file mode 100644
index 0000000..f0e03df
--- /dev/null
+++ b/src/features/Hiring/v1/Pages/SendMailPage.tsx
@@ -0,0 +1,243 @@
+import React, { useState } from "react";
+import { useTheme } from "@/theme";
+import { useNavigate, useParams } from "react-router-dom";
+import { useApplicantDetail, useSendMail, useMailLogs } from "../Hooks/useHiring";
+import Button from "@/Component/ui/Button";
+import Input from "@/Component/ui/Input";
+import { FiArrowLeft, FiMail, FiSend, FiClock, FiFileText } from "react-icons/fi";
+
+const templates = [
+  {
+    name: "Interview Invite",
+    subject: "Interview Schedule: [Position] at NexGen Studios",
+    body: "Hi [CandidateName],\n\nWe would love to schedule a technical screening with you to discuss your experience and walk through some of your design architectures. Let us know your availability over the next few days.\n\nBest,\nSarah Jenkins\nLead Technical Recruiter\nNexGen Studios",
+  },
+  {
+    name: "Offer Letter",
+    subject: "Official Job Offer: [Position] at NexGen Studios",
+    body: "Hi [CandidateName],\n\nWe are absolutely thrilled to offer you the position of [Position] at NexGen Studios! We were incredibly impressed by your systems thinking during our technical and design evaluations. Details regarding salary, equity, and benefits are attached in your official offer packet.\n\nBest,\nDavid Chen\nVP of Product\nNexGen Studios",
+  },
+  {
+    name: "Rejection Mail",
+    subject: "Hiring Update: [Position] at NexGen Studios",
+    body: "Hi [CandidateName],\n\nThank you so much for taking the time to discuss the [Position] opening with us. While your experience is impressive, we have decided to proceed with other candidates whose profiles align more closely with our current requirements.\n\nWe wish you all the best in your search and hope to stay in touch.\n\nBest,\nSarah Jenkins\nLead Technical Recruiter\nNexGen Studios",
+  },
+  {
+    name: "Follow-up Mail",
+    subject: "Checking In: [Position] Application Update",
+    body: "Hi [CandidateName],\n\nI wanted to check in and let you know that our team is still evaluating profiles for the [Position] role. We expect to have a decision on the next steps soon. Thank you for your patience!\n\nBest,\nSarah Jenkins\nNexGen Studios",
+  },
+];
+
+const SendMailPage = () => {
+  const { theme } = useTheme();
+  const navigate = useNavigate();
+  const { id: jobId, applicantId } = useParams<{ id: string; applicantId: string }>();
+
+  // Fetch candidate & logs
+  const { data: applicant } = useApplicantDetail(applicantId);
+  const { data: mailLogs = [] } = useMailLogs(applicantId);
+  const sendMailMutation = useSendMail();
+
+  // Composer fields
+  const [subject, setSubject] = useState("");
+  const [body, setBody] = useState("");
+  const [scheduled, setScheduled] = useState(false);
+  const [scheduledDate, setScheduledDate] = useState("");
+
+  const handleSelectTemplate = (temp: typeof templates[0]) => {
+    if (!applicant) return;
+    const resolvedSubject = temp.subject
+      .replace("[Position]", "Senior Product Designer")
+      .replace("[CandidateName]", applicant.name);
+    const resolvedBody = temp.body
+      .replace("[Position]", "Senior Product Designer")
+      .replace("[CandidateName]", applicant.name);
+
+    setSubject(resolvedSubject);
+    setBody(resolvedBody);
+  };
+
+  const handleSend = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!subject.trim() || !body.trim() || !applicantId) return;
+
+    sendMailMutation.mutate(
+      {
+        applicantId,
+        mail: {
+          subject,
+          body,
+          sender: "Sarah Jenkins",
+          status: scheduled ? "scheduled" : "sent",
+          scheduledFor: scheduled ? scheduledDate : undefined,
+        },
+      },
+      {
+        onSuccess: () => {
+          alert(scheduled ? "Email scheduled successfully!" : "Email sent successfully!");
+          navigate(`/org/jobs/${jobId}/applicants/${applicantId}`);
+        },
+      }
+    );
+  };
+
+  return (
+    <div className="flex-1 overflow-y-auto p-6 lg:p-10" style={{ backgroundColor: theme.bg.page }}>
+      <div className="max-w-6xl mx-auto flex flex-col lg:flex-row gap-8">
+        {/* Email Composer Form */}
+        <form onSubmit={handleSend} className="flex-1 flex flex-col gap-6">
+          <div className="flex items-center gap-3 mb-2">
+            <button
+              type="button"
+              onClick={() => navigate(`/org/jobs/${jobId}/applicants/${applicantId}`)}
+              className="p-1.5 rounded-lg border hover:bg-zinc-100 dark:hover:bg-zinc-800"
+              style={{ borderColor: theme.border.default, color: theme.text.primary }}
+            >
+              <FiArrowLeft className="w-4 h-4" />
+            </button>
+            <div className="flex flex-col gap-0.5">
+              <h1 className="text-xl font-bold tracking-tight" style={{ color: theme.text.primary }}>
+                Compose Email
+              </h1>
+              <span className="text-xs" style={{ color: theme.text.muted }}>
+                To: {applicant?.name} &bull; {applicant?.email}
+              </span>
+            </div>
+          </div>
+
+          <div
+            className="border rounded-xl p-6 flex flex-col gap-5 shadow-sm"
+            style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default }}
+          >
+            <Input
+              label="Subject Line"
+              name="subject"
+              value={subject}
+              onChange={(_, val) => setSubject(val)}
+              placeholder="e.g. Interview Schedule details..."
+              required
+            />
+
+            <div className="flex flex-col gap-2">
+              <label className="text-xs font-semibold uppercase tracking-wider" style={{ color: theme.text.secondary }}>
+                Email Body Text
+              </label>
+              <textarea
+                value={body}
+                onChange={(e) => setBody(e.target.value)}
+                className="w-full h-64 border rounded-lg p-3 outline-none text-sm resize-none"
+                style={{
+                  backgroundColor: theme.bg.surface,
+                  borderColor: theme.border.default,
+                  color: theme.text.primary,
+                }}
+                placeholder="Write your email contents..."
+                required
+              />
+            </div>
+
+            {/* Scheduled widget */}
+            <div className="border-t pt-4 flex flex-col md:flex-row md:items-center justify-between gap-4" style={{ borderColor: theme.border.default }}>
+              <label className="flex items-center gap-3 text-xs font-semibold cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={scheduled}
+                  onChange={(e) => setScheduled(e.target.checked)}
+                  className="rounded border-gray-300 w-4 h-4"
+                />
+                <div className="flex flex-col">
+                  <span style={{ color: theme.text.primary }}>Schedule Send Later</span>
+                  <span className="text-[10px]" style={{ color: theme.text.muted }}>Specify a future date to release the message automatically.</span>
+                </div>
+              </label>
+
+              {scheduled && (
+                <div className="flex items-center gap-2">
+                  <input
+                    type="datetime-local"
+                    value={scheduledDate}
+                    onChange={(e) => setScheduledDate(e.target.value)}
+                    className="p-1.5 border rounded-lg text-xs outline-none"
+                    style={{ backgroundColor: theme.bg.surface, borderColor: theme.border.default, color: theme.text.primary }}
+                    required
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-3 items-center">
+            <Button
+              text="Cancel"
+              variant="secondary"
+              onClick={() => navigate(`/org/jobs/${jobId}/applicants/${applicantId}`)}
+            />
+            <Button
+              text={sendMailMutation.isPending ? "Sending..." : scheduled ? "Schedule Message" : "Send Email"}
+              onClick={() => {}}
+              type="submit"
+              disabled={sendMailMutation.isPending}
+              icon={scheduled ? <FiClock className="mr-1.5" /> : <FiSend className="mr-1.5" />}
+            />
+          </div>
+        </form>
+
+        {/* Sidebar Templates & Sent History */}
+        <div className="w-full lg:w-80 flex flex-col gap-6">
+          {/* Templates Selector */}
+          <div
+            className="border rounded-xl p-5 shadow-sm flex flex-col gap-4 bg-white dark:bg-zinc-900"
+            style={{ borderColor: theme.border.default }}
+          >
+            <h3 className="text-xs font-bold uppercase tracking-wider flex items-center gap-2" style={{ color: theme.text.primary }}>
+              <FiFileText className="text-zinc-400" /> Templates
+            </h3>
+
+            <div className="flex flex-col gap-2">
+              {templates.map((temp) => (
+                <button
+                  key={temp.name}
+                  type="button"
+                  onClick={() => handleSelectTemplate(temp)}
+                  className="w-full p-2.5 rounded-lg border text-left text-xs font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors"
+                  style={{ borderColor: theme.border.default, color: theme.text.primary }}
+                >
+                  {temp.name}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Mail Log History */}
+          <div
+            className="border rounded-xl p-5 shadow-sm flex flex-col gap-4 bg-white dark:bg-zinc-900"
+            style={{ borderColor: theme.border.default }}
+          >
+            <h3 className="text-xs font-bold uppercase tracking-wider flex items-center gap-2" style={{ color: theme.text.primary }}>
+              <FiMail className="text-zinc-400" /> Email History
+            </h3>
+
+            {mailLogs.length === 0 ? (
+              <p className="text-[10px]" style={{ color: theme.text.muted }}>No emails sent to this applicant yet.</p>
+            ) : (
+              <div className="flex flex-col gap-3">
+                {mailLogs.map((log) => (
+                  <div key={log.id} className="p-3 border rounded-lg flex flex-col gap-1 text-[11px]" style={{ borderColor: theme.border.default, backgroundColor: theme.bg.surfaceSecondary }}>
+                    <div className="flex justify-between items-center font-bold">
+                      <span className="truncate max-w-[150px]" style={{ color: theme.text.primary }}>{log.subject}</span>
+                      <span className="text-[9px] uppercase tracking-wide text-zinc-400">{log.status}</span>
+                    </div>
+                    <span className="text-[9px]" style={{ color: theme.text.muted }}>{new Date(log.sentAt).toLocaleString()} &bull; {log.sender}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SendMailPage;
diff --git a/src/features/Hiring/v1/Store/hiringStore.ts b/src/features/Hiring/v1/Store/hiringStore.ts
new file mode 100644
index 0000000..9578597
--- /dev/null
+++ b/src/features/Hiring/v1/Store/hiringStore.ts
@@ -0,0 +1,769 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import {
+  CompanyProfile,
+  JobRole,
+  Applicant,
+  MailLog,
+  AuditLog,
+  ApplicantStatus,
+  JobStatus,
+  RecruiterNote,
+} from "../Types/Hiring.types";
+
+// ==========================================
+// SEED DATA
+// ==========================================
+
+const initialCompanyProfile: CompanyProfile = {
+  id: "comp-1",
+  name: "NexGen Studios",
+  slug: "nexgen-studios",
+  logoUrl: "/logoWithoutText.png",
+  bannerUrl: "https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1200&h=400&q=80",
+  about: "NexGen Studios is a product design and development collective crafting the future of web applications, developer interfaces, and enterprise tools. We value visual craft, systems thinking, and technical execution.",
+  teamSize: "50-150 employees",
+  industry: "Design & Technology",
+  socialLinks: {
+    github: "https://github.com/nexgen",
+    discord: "https://discord.gg/nexgen",
+    twitter: "https://twitter.com/nexgen",
+    linkedin: "https://linkedin.com/company/nexgen",
+  },
+  benefits: [
+    "Full health, dental, and vision insurance",
+    "401(k) matching (4% fully vested)",
+    "Remote-first culture with co-working stipends",
+    "Annual learning & development allowance ($2,000)",
+    "State-of-the-art hardware setup (M3 MacBook Pro, 4K monitors)",
+    "30 days paid time off + national holidays",
+  ],
+  partnerships: ["React Foundation", "Design Leaders Coalition", "Vercel Enterprise"],
+  media: [
+    "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=600&h=400&q=80",
+    "https://images.unsplash.com/photo-1542744094-3a31f103e35f?auto=format&fit=crop&w=600&h=400&q=80",
+    "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=600&h=400&q=80",
+  ],
+  hiringStatus: "active",
+  seoTitle: "NexGen Studios | Careers & Open Positions",
+  seoDescription: "Join NexGen Studios and design/develop the future of developer tooling and enterprise software systems.",
+};
+
+const initialJobs: JobRole[] = [
+  {
+    id: "JD-1029",
+    title: "Senior Product Designer",
+    department: "Product",
+    hiringManager: "David Chen",
+    community: "Global Design Excellence",
+    slug: "senior-product-designer",
+    description: "We are looking for a Senior Product Designer to lead the design of our enterprise-grade developer platforms and visual workspace tools. You will own the design lifecycle from initial research and system definitions through execution.",
+    responsibilities: [
+      "Design complex user flows, layout systems, and visual telemetry dashboards.",
+      "Work closely with engineering to build reusable component design tokens.",
+      "Gather user feedback and translate usage metrics into visual improvements.",
+      "Drive alignment across engineering, product, and leadership groups."
+    ],
+    requirements: [
+      "5+ years of experience in product design for enterprise or dev tools.",
+      "Expert level in Figma design system organization.",
+      "Strong portfolio demonstrating systems design and layout craft.",
+      "Basic understanding of frontend engineering (React, Tailwind, HTML/CSS) is a big plus."
+    ],
+    benefits: [
+      "Top-tier salary + equity package",
+      "Flexible remote working options",
+      "Comprehensive medical plan"
+    ],
+    skills: ["Figma", "Design Systems", "UI Design", "UX Research", "React", "Data Visualization"],
+    tags: ["Product", "Design System", "Remote", "Senior"],
+    employmentType: "full-time",
+    workplaceType: "remote",
+    salaryRange: "$140,000 - $185,000",
+    openings: 1,
+    timeline: "Immediate",
+    expirationDate: "2026-08-30",
+    visibility: "public",
+    isFeatured: true,
+    isSponsored: false,
+    status: "active",
+    postedDate: "2023-10-12",
+    views: 1204,
+    applicantsCount: 142,
+  },
+  {
+    id: "JD-1104",
+    title: "Lead Backend Engineer",
+    department: "Engineering",
+    hiringManager: "Sarah Jenkins",
+    community: "Developer Communities",
+    slug: "lead-backend-engineer",
+    description: "Looking for a seasoned backend engineer to lead our database architecture, distributed queues, and server orchestration layers. You will scale our microservices to handle millions of real-time transactions.",
+    responsibilities: [
+      "Architect and build robust web socket connections and streaming pipelines.",
+      "Develop low-latency APIs and integrate with third-party service gateways.",
+      "Oversee Postgres indexing and Redis query caching architectures."
+    ],
+    requirements: [
+      "8+ years experience in Node.js, Go, or Rust backend development.",
+      "Expertise in PostgreSQL and database performance optimization.",
+      "Experience deploying workloads on AWS or GCP using Kubernetes."
+    ],
+    benefits: [
+      "Full premium health insurance",
+      "Remote work stipend",
+      "Equity shares"
+    ],
+    skills: ["Node.js", "TypeScript", "PostgreSQL", "Redis", "Docker", "Go"],
+    tags: ["Engineering", "Backend", "Lead", "Go"],
+    employmentType: "full-time",
+    workplaceType: "hybrid",
+    salaryRange: "$180,000 - $220,000",
+    openings: 1,
+    timeline: "2-4 Weeks",
+    expirationDate: "2026-09-15",
+    visibility: "public",
+    isFeatured: false,
+    isSponsored: false,
+    status: "draft",
+    postedDate: "Pending",
+    views: 0,
+    applicantsCount: 0,
+  },
+  {
+    id: "JD-1085",
+    title: "Account Executive",
+    department: "Sales",
+    hiringManager: "Alex Rivera",
+    community: "Tech Partnerships Group",
+    slug: "account-executive",
+    description: "Join us to scale our developer platform sales. You will work with enterprise accounts, developer tool startups, and engineering groups to introduce NexGen workflow solutions.",
+    responsibilities: [
+      "Manage end-to-end sales cycle from prospecting to closing.",
+      "Run technical platform demos for engineering managers and CTOs.",
+      "Negotiate enterprise contracts and service SLA structures."
+    ],
+    requirements: [
+      "3+ years experience selling SaaS or developer products to enterprise.",
+      "Track record of hitting and exceeding quota targets.",
+      "Excellent communication and presentation capabilities."
+    ],
+    benefits: [
+      "Competitive base + uncapped commission structure",
+      "Health & wellness allowance",
+      "Annual team retreats"
+    ],
+    skills: ["SaaS Sales", "Lead Generation", "Contract Negotiation", "Enterprise Demos"],
+    tags: ["Sales", "Business", "On-site"],
+    employmentType: "full-time",
+    workplaceType: "on-site",
+    salaryRange: "$90,000 base + commission",
+    openings: 2,
+    timeline: "Immediate",
+    expirationDate: "2026-07-20",
+    visibility: "public",
+    isFeatured: false,
+    isSponsored: false,
+    status: "paused",
+    postedDate: "2023-11-02",
+    views: 450,
+    applicantsCount: 31,
+  },
+  {
+    id: "JD-1122",
+    title: "Data Scientist",
+    department: "Engineering",
+    hiringManager: "Sarah Jenkins",
+    community: "Data Infrastructure Circle",
+    slug: "data-scientist",
+    description: "Seeking a Data Scientist to build predictive analytics models, hiring recommendation scores, and search indices for the CommDesk platform.",
+    responsibilities: [
+      "Design machine learning engines to score resumes against job requirement listings.",
+      "Conduct behavior analysis on applicant pipelines to optimize recruitment velocity.",
+      "Deploy recommendation systems for community hiring partnerships."
+    ],
+    requirements: [
+      "MS or PhD in computer science, mathematics, statistics, or related field.",
+      "3+ years experience writing production-ready Python or R pipelines.",
+      "Proficient in SQL, Pandas, Scikit-Learn, PyTorch, or TensorFlow."
+    ],
+    benefits: [
+      "Stock option grants",
+      "Flexible working hours",
+      "L&D budget"
+    ],
+    skills: ["Python", "Machine Learning", "PyTorch", "SQL", "Pandas", "NLP"],
+    tags: ["Engineering", "Data Science", "Python"],
+    employmentType: "full-time",
+    workplaceType: "remote",
+    salaryRange: "$130,000 - $170,000",
+    openings: 1,
+    timeline: "Immediate",
+    expirationDate: "2026-10-10",
+    visibility: "public",
+    isFeatured: true,
+    isSponsored: true,
+    status: "active",
+    postedDate: "2023-12-15",
+    views: 2109,
+    applicantsCount: 89,
+  },
+  {
+    id: "JD-1001",
+    title: "Senior UX Architect",
+    department: "Product",
+    hiringManager: "David Chen",
+    community: "Global Design Excellence",
+    slug: "senior-ux-architect",
+    description: "Lead user research, structural workflows, information architecture frameworks, and accessibility compliance specifications across all platform features.",
+    responsibilities: [
+      "Draft comprehensive user journey blueprints, navigation maps, and taxonomy grids.",
+      "Conduct usability tests with developer community profiles.",
+      "Create high-fidelity wireframes and structural prototypes."
+    ],
+    requirements: [
+      "6+ years experience in UX architecture, interaction design, or related.",
+      "Deep understanding of WCAG accessibility standards.",
+      "Strong skills in wireframing tools (Figma, Miro, Axure)."
+    ],
+    benefits: [
+      "Competitive salary",
+      "Home office setup stipend",
+      "Unlimited PTO"
+    ],
+    skills: ["Information Architecture", "User Research", "Wireframing", "WCAG Accessibility", "Figma"],
+    tags: ["Product", "UX", "Architecture", "Senior"],
+    employmentType: "full-time",
+    workplaceType: "remote",
+    salaryRange: "$150,000 - $190,000",
+    openings: 1,
+    timeline: "Immediate",
+    expirationDate: "2026-11-30",
+    visibility: "public",
+    isFeatured: true,
+    isSponsored: true,
+    status: "active",
+    postedDate: "2023-10-10",
+    views: 8402,
+    applicantsCount: 1248,
+  },
+];
+
+const initialApplicants: Applicant[] = [
+  // Senior Product Designer applicants
+  {
+    id: "app-1",
+    jobId: "JD-1029",
+    name: "Marcus Holloway",
+    email: "marcus.holloway@stripe-redesign.com",
+    experience: "12 Years • Lead Designer",
+    skills: ["React", "TypeScript", "Figma", "WebGL", "Strategy", "Systems"],
+    resumeUrl: "/resumes/marcus_holloway.pdf",
+    matchScore: 94,
+    reviewer: "Sarah Jenkins",
+    status: "technical",
+    appliedDate: "2023-10-08",
+    rating: {
+      technical: 9,
+      culture: 8,
+      communication: 10,
+      rating: "A+",
+    },
+    notes: [
+      {
+        id: "note-1",
+        author: "Sarah Jenkins",
+        avatar: "/avatars/sarah.jpg",
+        content: "Extremely strong system design skills. His portfolio work on the Stripe redesign shows a deep understanding of complex data visualization. Might need some onboarding with WebGL, but very capable.",
+        date: "2023-10-10",
+        recommendation: "strong_hire",
+      },
+      {
+        id: "note-2",
+        author: "Alex Chen",
+        avatar: "/avatars/alex.jpg",
+        content: "Technical screening was solid. Answered React architectural questions with ease. Just concerned about his salary expectations being slightly above our current band for this role.",
+        date: "2023-10-11",
+        recommendation: "neutral",
+      },
+    ],
+    history: [
+      {
+        id: "hist-1",
+        action: "Applied",
+        user: "Marcus Holloway",
+        timestamp: "2023-10-08T09:30:00Z",
+        details: "Candidate submitted application via Careers Page.",
+      },
+      {
+        id: "hist-2",
+        action: "Screening Passed",
+        user: "Sarah Jenkins",
+        timestamp: "2023-10-10T14:15:00Z",
+        details: "Resume reviewed. Moved from Applied to Screening stage.",
+      },
+      {
+        id: "hist-3",
+        action: "Moved to Technical Round",
+        user: "Sarah Jenkins",
+        timestamp: "2023-10-11T16:00:00Z",
+        details: "Scheduled initial technical interview for Oct 14.",
+      },
+    ],
+  },
+  // Senior UX Architect applicants
+  {
+    id: "app-2",
+    jobId: "JD-1001",
+    name: "Marcus Chen",
+    email: "marcus.c@design.co",
+    experience: "8 Years • Senior Designer",
+    skills: ["Information Architecture", "Figma", "User Research", "Wireframing"],
+    resumeUrl: "/resumes/marcus_chen.pdf",
+    matchScore: 94,
+    reviewer: "David Chen",
+    status: "interview",
+    appliedDate: "2023-10-12",
+    rating: {
+      technical: 9,
+      culture: 9,
+      communication: 9,
+      rating: "A",
+    },
+    notes: [
+      {
+        id: "note-3",
+        author: "David Chen",
+        avatar: "/avatars/david.jpg",
+        content: "Excellent UX thinker. Understood our navigation structure issues instantly. Very strong candidate.",
+        date: "2023-10-13",
+        recommendation: "strong_hire",
+      },
+    ],
+    history: [
+      {
+        id: "hist-4",
+        action: "Applied",
+        user: "Marcus Chen",
+        timestamp: "2023-10-12T10:00:00Z",
+        details: "Candidate submitted application.",
+      },
+    ],
+  },
+  {
+    id: "app-3",
+    jobId: "JD-1001",
+    name: "Elena Rodriguez",
+    email: "e.rod@techcorp.io",
+    experience: "5 Years • Mid-Senior",
+    skills: ["Figma", "Interaction Design", "Usability Testing"],
+    resumeUrl: "/resumes/elena_rodriguez.pdf",
+    matchScore: 88,
+    reviewer: "David Chen",
+    status: "screening",
+    appliedDate: "2023-10-13",
+    rating: {
+      technical: 8,
+      culture: 8,
+      communication: 8,
+      rating: "B+",
+    },
+    notes: [],
+    history: [],
+  },
+  {
+    id: "app-4",
+    jobId: "JD-1001",
+    name: "James Wilson",
+    email: "j.wilson@portfolio.me",
+    experience: "10+ Years • Staff Designer",
+    skills: ["Design Systems", "Figma", "Product Strategy", "Management"],
+    resumeUrl: "/resumes/james_wilson.pdf",
+    matchScore: 62,
+    reviewer: "Alex Rivera",
+    status: "applied",
+    appliedDate: "2023-10-14",
+    rating: {
+      technical: 7,
+      culture: 6,
+      communication: 7,
+      rating: "B-",
+    },
+    notes: [],
+    history: [],
+  },
+  {
+    id: "app-5",
+    jobId: "JD-1001",
+    name: "Sarah Jenkins",
+    email: "sarah.j@consulting.com",
+    experience: "3 Years • Junior Designer",
+    skills: ["Figma", "Wireframing", "UI Design"],
+    resumeUrl: "/resumes/sarah_jenkins.pdf",
+    matchScore: 79,
+    reviewer: "Alex Rivera",
+    status: "rejected",
+    appliedDate: "2023-10-15",
+    rating: {
+      technical: 6,
+      culture: 8,
+      communication: 8,
+      rating: "C",
+    },
+    notes: [
+      {
+        id: "note-4",
+        author: "Alex Rivera",
+        avatar: "/avatars/alexr.jpg",
+        content: "A bit too junior for what we are looking for right now. Very bright, would recommend for a junior associate role in the future.",
+        date: "2023-10-16",
+        recommendation: "no_hire",
+      },
+    ],
+    history: [],
+  },
+];
+
+const initialMails: MailLog[] = [
+  {
+    id: "mail-1",
+    applicantId: "app-1",
+    subject: "Interview Schedule: Senior Product Designer at NexGen Studios",
+    body: "Hi Marcus,\n\nWe would love to schedule a technical screening with you to discuss your experience and walk through some of your design architectures. Let us know your availability over the next few days.\n\nBest,\nSarah Jenkins\nLead Technical Recruiter",
+    sender: "Sarah Jenkins",
+    sentAt: "2023-10-10T15:00:00Z",
+    status: "sent",
+  },
+];
+
+const initialAudits: AuditLog[] = [
+  {
+    id: "audit-1",
+    jobId: "JD-1029",
+    action: "Job Created",
+    user: "David Chen",
+    timestamp: "2023-10-12T09:00:00Z",
+    details: "Job 'Senior Product Designer' initialized in Draft mode.",
+  },
+  {
+    id: "audit-2",
+    jobId: "JD-1029",
+    action: "Job Published",
+    user: "David Chen",
+    timestamp: "2023-10-12T09:15:00Z",
+    details: "Job status updated from Draft to Active. Visibility set to Public.",
+  },
+];
+
+// ==========================================
+// STORE INTERFACE
+// ==========================================
+
+export interface HiringState {
+  companyProfile: CompanyProfile;
+  jobs: JobRole[];
+  applicants: Applicant[];
+  mailLogs: MailLog[];
+  auditLogs: AuditLog[];
+
+  // Actions
+  updateCompanyProfile: (profile: Partial<CompanyProfile>) => void;
+  addJob: (job: Omit<JobRole, "id" | "postedDate" | "views" | "applicantsCount">) => JobRole;
+  updateJob: (id: string, patch: Partial<JobRole>) => void;
+  deleteJob: (id: string) => void;
+  applyToJob: (
+    jobId: string,
+    payload: {
+      name: string;
+      email: string;
+      experience: string;
+      skills: string[];
+      resumeUrl: string;
+    }
+  ) => Applicant;
+  updateApplicantStatus: (id: string, status: ApplicantStatus, user: string) => void;
+  addRecruiterNote: (applicantId: string, note: Omit<RecruiterNote, "id" | "date">) => void;
+  sendMail: (applicantId: string, mail: Omit<MailLog, "id" | "sentAt" | "status" | "applicantId"> & { status?: "sent" | "scheduled" | "draft"; scheduledFor?: string }) => void;
+  moderateJob: (jobId: string, action: "approve" | "reject", user: string) => void;
+  resetStore: () => void;
+}
+
+export const useHiringStore = create<HiringState>()(
+  persist(
+    (set) => ({
+      companyProfile: initialCompanyProfile,
+      jobs: initialJobs,
+      applicants: initialApplicants,
+      mailLogs: initialMails,
+      auditLogs: initialAudits,
+
+      updateCompanyProfile: (profile) =>
+        set((state) => ({
+          companyProfile: { ...state.companyProfile, ...profile },
+        })),
+
+      addJob: (jobPayload) => {
+        const id = `JD-${Math.floor(1000 + Math.random() * 9000)}`;
+        const postedDate = jobPayload.status === "active" ? new Date().toISOString().split("T")[0] : "Pending";
+        const newJob: JobRole = {
+          ...jobPayload,
+          id,
+          postedDate,
+          views: 0,
+          applicantsCount: 0,
+        };
+
+        set((state) => {
+          // Log audit
+          const newAudit: AuditLog = {
+            id: `audit-${Date.now()}`,
+            jobId: id,
+            action: "Job Created",
+            user: jobPayload.hiringManager || "Hiring Admin",
+            timestamp: new Date().toISOString(),
+            details: `Job role '${newJob.title}' created in status '${newJob.status}'.`,
+          };
+          return {
+            jobs: [newJob, ...state.jobs],
+            auditLogs: [newAudit, ...state.auditLogs],
+          };
+        });
+
+        return newJob;
+      },
+
+      updateJob: (id, patch) =>
+        set((state) => {
+          const oldJob = state.jobs.find((j) => j.id === id);
+          const updatedJobs = state.jobs.map((j) => (j.id === id ? { ...j, ...patch } : j));
+
+          // Log audit
+          const changes: string[] = [];
+          if (patch.status && oldJob && oldJob.status !== patch.status) {
+            changes.push(`status updated from '${oldJob.status}' to '${patch.status}'`);
+          }
+          if (patch.title && oldJob && oldJob.title !== patch.title) {
+            changes.push(`title updated from '${oldJob.title}' to '${patch.title}'`);
+          }
+
+          let updatedAudits = state.auditLogs;
+          if (changes.length > 0) {
+            const newAudit: AuditLog = {
+              id: `audit-${Date.now()}`,
+              jobId: id,
+              action: "Job Updated",
+              user: oldJob?.hiringManager || "Hiring Admin",
+              timestamp: new Date().toISOString(),
+              details: `Updates applied: ${changes.join(", ")}.`,
+            };
+            updatedAudits = [newAudit, ...state.auditLogs];
+          }
+
+          return {
+            jobs: updatedJobs,
+            auditLogs: updatedAudits,
+          };
+        }),
+
+      deleteJob: (id) =>
+        set((state) => ({
+          jobs: state.jobs.filter((j) => j.id !== id),
+          applicants: state.applicants.filter((a) => a.jobId !== id),
+          auditLogs: state.auditLogs.filter((a) => a.jobId !== id),
+        })),
+
+      applyToJob: (jobId, payload) => {
+        const id = `app-${Date.now()}`;
+        const newApplicant: Applicant = {
+          id,
+          jobId,
+          name: payload.name,
+          email: payload.email,
+          experience: payload.experience,
+          skills: payload.skills,
+          resumeUrl: payload.resumeUrl || "/resumes/generic.pdf",
+          matchScore: Math.floor(65 + Math.random() * 30), // Random simulated score between 65 and 95
+          reviewer: "Unassigned",
+          status: "applied",
+          appliedDate: new Date().toISOString().split("T")[0],
+          notes: [],
+          rating: {
+            technical: 0,
+            culture: 0,
+            communication: 0,
+            rating: "Pending",
+          },
+          history: [
+            {
+              id: `hist-${Date.now()}`,
+              action: "Applied",
+              user: payload.name,
+              timestamp: new Date().toISOString(),
+              details: "Candidate submitted application via Career Portal.",
+            },
+          ],
+        };
+
+        set((state) => {
+          // Update applicant count for job
+          const updatedJobs = state.jobs.map((j) =>
+            j.id === jobId ? { ...j, applicantsCount: j.applicantsCount + 1 } : j
+          );
+          return {
+            applicants: [newApplicant, ...state.applicants],
+            jobs: updatedJobs,
+          };
+        });
+
+        return newApplicant;
+      },
+
+      updateApplicantStatus: (id, status, user) =>
+        set((state) => {
+          const applicant = state.applicants.find((a) => a.id === id);
+          if (!applicant) return {};
+
+          const updatedApplicants = state.applicants.map((a) => {
+            if (a.id === id) {
+              const newHistoryItem = {
+                id: `hist-${Date.now()}`,
+                action: `Moved to ${status}`,
+                user,
+                timestamp: new Date().toISOString(),
+                details: `Applicant status updated from '${a.status}' to '${status}'.`,
+              };
+              return {
+                ...a,
+                status,
+                history: [newHistoryItem, ...a.history],
+              };
+            }
+            return a;
+          });
+
+          return { applicants: updatedApplicants };
+        }),
+
+      addRecruiterNote: (applicantId, note) =>
+        set((state) => {
+          const noteId = `note-${Date.now()}`;
+          const newNote: RecruiterNote = {
+            id: noteId,
+            author: note.author,
+            avatar: note.avatar || "/defaultProfile.png",
+            content: note.content,
+            date: new Date().toISOString().split("T")[0],
+            recommendation: note.recommendation,
+          };
+
+          const updatedApplicants = state.applicants.map((a) => {
+            if (a.id === applicantId) {
+              // Recalculate evaluation rating based on recommendation
+              const ratingMap: Record<string, string> = {
+                strong_hire: "A+",
+                hire: "A",
+                neutral: "B",
+                no_hire: "D",
+              };
+              const newRating = {
+                technical: note.recommendation === "strong_hire" ? 9 : note.recommendation === "hire" ? 8 : 6,
+                culture: note.recommendation === "strong_hire" ? 9 : note.recommendation === "hire" ? 8 : 6,
+                communication: note.recommendation === "strong_hire" ? 10 : note.recommendation === "hire" ? 8 : 7,
+                rating: ratingMap[note.recommendation] || "Pending",
+              };
+
+              const newHistoryItem = {
+                id: `hist-${Date.now()}`,
+                action: "Note Added",
+                user: note.author,
+                timestamp: new Date().toISOString(),
+                details: `Added reviewer feedback recommendation: '${note.recommendation}'.`,
+              };
+
+              return {
+                ...a,
+                notes: [...a.notes, newNote],
+                rating: newRating,
+                history: [newHistoryItem, ...a.history],
+              };
+            }
+            return a;
+          });
+
+          return { applicants: updatedApplicants };
+        }),
+
+      sendMail: (applicantId, mail) =>
+        set((state) => {
+          const id = `mail-${Date.now()}`;
+          const newMail: MailLog = {
+            id,
+            applicantId,
+            subject: mail.subject,
+            body: mail.body,
+            sender: mail.sender,
+            sentAt: new Date().toISOString(),
+            status: mail.status || "sent",
+            scheduledFor: mail.scheduledFor,
+          };
+
+          const updatedApplicants = state.applicants.map((a) => {
+            if (a.id === applicantId) {
+              const newHistoryItem = {
+                id: `hist-${Date.now()}`,
+                action: mail.status === "scheduled" ? "Email Scheduled" : "Email Sent",
+                user: mail.sender,
+                timestamp: new Date().toISOString(),
+                details: `Sent email with subject: '${mail.subject}'.`,
+              };
+              return {
+                ...a,
+                history: [newHistoryItem, ...a.history],
+              };
+            }
+            return a;
+          });
+
+          return {
+            mailLogs: [newMail, ...state.mailLogs],
+            applicants: updatedApplicants,
+          };
+        }),
+
+      moderateJob: (jobId, action, user) =>
+        set((state) => {
+          const targetStatus: JobStatus = action === "approve" ? "active" : "archived";
+          const updatedJobs = state.jobs.map((j) =>
+            j.id === jobId ? { ...j, status: targetStatus, postedDate: targetStatus === "active" ? new Date().toISOString().split("T")[0] : "Pending" } : j
+          );
+
+          // Log audit
+          const newAudit: AuditLog = {
+            id: `audit-${Date.now()}`,
+            jobId,
+            action: `Moderation ${action === "approve" ? "Approved" : "Rejected"}`,
+            user,
+            timestamp: new Date().toISOString(),
+            details: `Community moderator marked job as ${targetStatus === "active" ? "Approved (Active)" : "Rejected (Archived)"}.`,
+          };
+
+          return {
+            jobs: updatedJobs,
+            auditLogs: [newAudit, ...state.auditLogs],
+          };
+        }),
+
+      resetStore: () =>
+        set({
+          companyProfile: initialCompanyProfile,
+          jobs: initialJobs,
+          applicants: initialApplicants,
+          mailLogs: initialMails,
+          auditLogs: initialAudits,
+        }),
+    }),
+    {
+      name: "commdesk-hiring-storage",
+    }
+  )
+);
diff --git a/src/features/Hiring/v1/Types/Hiring.types.ts b/src/features/Hiring/v1/Types/Hiring.types.ts
new file mode 100644
index 0000000..c54e247
--- /dev/null
+++ b/src/features/Hiring/v1/Types/Hiring.types.ts
@@ -0,0 +1,130 @@
+export interface SocialLinks {
+  github?: string;
+  discord?: string;
+  twitter?: string;
+  linkedin?: string;
+  youtube?: string;
+  instagram?: string;
+}
+
+export interface CompanyProfile {
+  id: string;
+  name: string;
+  logoUrl: string;
+  bannerUrl: string;
+  about: string;
+  socialLinks: SocialLinks;
+  teamSize: string;
+  industry: string;
+  benefits: string[];
+  partnerships: string[];
+  media: string[];
+  hiringStatus: "active" | "paused" | "closed";
+  slug: string;
+  seoTitle?: string;
+  seoDescription?: string;
+}
+
+export type JobStatus = "active" | "draft" | "paused" | "closed" | "archived";
+export type WorkplaceType = "remote" | "hybrid" | "on-site";
+export type EmploymentType = "full-time" | "part-time" | "contract" | "internship";
+export type JobVisibility = "public" | "private" | "community-only";
+
+export interface JobRole {
+  id: string;
+  title: string;
+  department: string;
+  hiringManager: string;
+  community: string;
+  slug: string;
+  description: string;
+  responsibilities: string[];
+  requirements: string[];
+  benefits: string[];
+  skills: string[];
+  tags: string[];
+  employmentType: EmploymentType;
+  workplaceType: WorkplaceType;
+  salaryRange: string;
+  openings: number;
+  timeline: string;
+  expirationDate: string;
+  visibility: JobVisibility;
+  isFeatured: boolean;
+  isSponsored: boolean;
+  status: JobStatus;
+  postedDate: string;
+  views: number;
+  applicantsCount: number;
+}
+
+export type ApplicantStatus =
+  | "applied"
+  | "screening"
+  | "technical"
+  | "interview"
+  | "hr"
+  | "offer"
+  | "hired"
+  | "rejected";
+
+export interface RecruiterNote {
+  id: string;
+  author: string;
+  avatar: string;
+  content: string;
+  date: string;
+  recommendation: "strong_hire" | "hire" | "neutral" | "no_hire";
+}
+
+export interface EvaluationMatrix {
+  technical: number;
+  culture: number;
+  communication: number;
+  rating: string; // "A+", "A", "B", etc.
+}
+
+export interface ActivityLog {
+  id: string;
+  action: string;
+  user: string;
+  timestamp: string;
+  details: string;
+}
+
+export interface Applicant {
+  id: string;
+  jobId: string;
+  name: string;
+  email: string;
+  experience: string;
+  skills: string[];
+  resumeUrl: string;
+  matchScore: number;
+  reviewer: string;
+  status: ApplicantStatus;
+  appliedDate: string;
+  notes: RecruiterNote[];
+  rating: EvaluationMatrix;
+  history: ActivityLog[];
+}
+
+export interface MailLog {
+  id: string;
+  applicantId: string;
+  subject: string;
+  body: string;
+  sender: string;
+  sentAt: string;
+  status: "sent" | "scheduled" | "draft";
+  scheduledFor?: string;
+}
+
+export interface AuditLog {
+  id: string;
+  jobId: string;
+  action: string;
+  user: string;
+  timestamp: string;
+  details: string;
+}
diff --git a/src/features/SideBar/v1/Section/SideBar.tsx b/src/features/SideBar/v1/Section/SideBar.tsx
index 81357c5..bca1418 100644
--- a/src/features/SideBar/v1/Section/SideBar.tsx
+++ b/src/features/SideBar/v1/Section/SideBar.tsx
@@ -9,6 +9,9 @@ import {
   MdWork,
   MdWebhook,
   MdPayments,
+  MdGavel,
+  MdBusiness,
+  MdAnalytics,
 } from "react-icons/md";
 import { useTheme } from "@/theme";
 import { ThemeToggle } from "@/Component/ui/ThemeToggle";
@@ -73,7 +76,7 @@ const SideBar = () => {
       </div>
 
       {/* Nav */}
-      <div className="flex flex-col gap-1 p-4 flex-1 w-full">
+      <div className="flex flex-col gap-1 p-4 flex-1 w-full overflow-y-auto">
         <p
           className="text-xs font-semibold uppercase tracking-widest px-4 py-2"
           style={{ color: theme.text.muted }}
@@ -94,6 +97,17 @@ const SideBar = () => {
         <SideBarLink icon={<MdPayments />} text="Payments" link="/org/billing" />
         <SideBarLink icon={<RiContactsBookFill />} text="Contact Submissions" link="/org/contact" />
 
+        <p
+          className="text-xs font-semibold uppercase tracking-widest px-4 py-2 mt-4"
+          style={{ color: theme.text.muted }}
+        >
+          Hiring Operations
+        </p>
+        <SideBarLink icon={<MdAnalytics />} text="Hiring" link="/org/jobs" />
+        <SideBarLink icon={<MdGavel />} text="Moderation" link="/community/jobs/moderation" />
+        <SideBarLink icon={<MdBusiness />} text="Organization Profile" link="/org/company/profile" />
+        <SideBarLink icon={<MdWork />} text="Media Assets" link="/org/company/media" />
+
         {/* Footer */}
         <div
           className="mt-auto w-full border-t flex flex-col py-5"
diff --git a/src/layouts/MemberLayout/MemberLayout.tsx b/src/layouts/MemberLayout/MemberLayout.tsx
index 3ed46ba..2f54266 100644
--- a/src/layouts/MemberLayout/MemberLayout.tsx
+++ b/src/layouts/MemberLayout/MemberLayout.tsx
@@ -1,7 +1,6 @@
 import { Outlet } from "react-router-dom";
 
 import Sidebar from "./Components/Sidebar";
-import Header from "./Components/Header";
 import MobileSidebar from "./Components/MobileSidebar";
 import { SidebarProvider } from "@/context/SidebarContext";
 
diff --git a/src/routes/MemberRoutes.tsx b/src/routes/MemberRoutes.tsx
index 69e1a89..7c3a6d5 100644
--- a/src/routes/MemberRoutes.tsx
+++ b/src/routes/MemberRoutes.tsx
@@ -16,6 +16,9 @@ import BillingPage from "@/features/Member/v1/Pages/Billing";
 import MessagesPage from "@/features/Member/v1/Pages/Messages";
 import MemberPage from "@/features/Member/v1/Pages/MemberPage";
 
+import PublicCompanyProfilePage from "@/features/Hiring/v1/Pages/PublicCompanyProfilePage";
+import PublicJobDetailsPage from "@/features/Hiring/v1/Pages/PublicJobDetailsPage";
+
 const MemberRoutes = () => {
   return (
     <Routes>
@@ -24,6 +27,10 @@ const MemberRoutes = () => {
 
       <Route path="/signup" element={<SignUpPage />} />
 
+      {/* Public Career Portals */}
+      <Route path="/company/:slug" element={<PublicCompanyProfilePage />} />
+      <Route path="/company/:slug/jobs/:jobId" element={<PublicJobDetailsPage />} />
+
       {/* Member Routes */}
 
       <Route path="/member" element={<MemberLayout />}>
diff --git a/src/routes/OrgRoute.tsx b/src/routes/OrgRoute.tsx
index c8e80b4..531c498 100644
--- a/src/routes/OrgRoute.tsx
+++ b/src/routes/OrgRoute.tsx
@@ -15,6 +15,18 @@ import TaskManagementPage from "@/features/Tasks/v1/pages/TaskManagementPage";
 
 import ProtectedRoute from "./ProtectedRoute";
 
+// Hiring Platform Pages
+import JobsDashboardPage from "@/features/Hiring/v1/Pages/JobsDashboardPage";
+import CreateJobPage from "@/features/Hiring/v1/Pages/CreateJobPage";
+import JobDetailsPage from "@/features/Hiring/v1/Pages/JobDetailsPage";
+import EditJobPage from "@/features/Hiring/v1/Pages/EditJobPage";
+import ApplicantsPage from "@/features/Hiring/v1/Pages/ApplicantsPage";
+import ApplicantDetailsPage from "@/features/Hiring/v1/Pages/ApplicantDetailsPage";
+import SendMailPage from "@/features/Hiring/v1/Pages/SendMailPage";
+import CompanyProfilePage from "@/features/Hiring/v1/Pages/CompanyProfilePage";
+import MediaManagementPage from "@/features/Hiring/v1/Pages/MediaManagementPage";
+import ModerationPage from "@/features/Hiring/v1/Pages/ModerationPage";
+
 // Lazy-loaded Webhook pages
 const WebhookListPage = lazy(() => import("@/features/Webhooks/v1/pages/WebhookListPage"));
 const CreateWebhookPage = lazy(() => import("@/features/Webhooks/v1/pages/CreateWebhookPage"));
@@ -54,6 +66,17 @@ const OrgRoute = () => {
           <Route path="tasks/:taskId" element={<TaskDetailPage />} />
           <Route path="tasks/:taskId/edit" element={<EditTaskPage />} />
 
+          {/* Hiring Platform */}
+          <Route path="jobs" element={<JobsDashboardPage />} />
+          <Route path="jobs/create" element={<CreateJobPage />} />
+          <Route path="jobs/:id" element={<JobDetailsPage />} />
+          <Route path="jobs/:id/edit" element={<EditJobPage />} />
+          <Route path="jobs/:id/applicants" element={<ApplicantsPage />} />
+          <Route path="jobs/:id/applicants/:applicantId" element={<ApplicantDetailsPage />} />
+          <Route path="jobs/:id/applicants/:applicantId/mail" element={<SendMailPage />} />
+          <Route path="company/profile" element={<CompanyProfilePage />} />
+          <Route path="company/media" element={<MediaManagementPage />} />
+
           {/* Webhooks */}
           <Route
             path="dashboard/webhooks/*"
@@ -86,6 +109,12 @@ const OrgRoute = () => {
           {/* Add Member */}
           <Route path="add-member" element={<AddMemberPage />} />
         </Route>
+
+        {/* Community Moderation */}
+        <Route path="/community" element={<Organisation_Template />}>
+          <Route path="jobs/moderation" element={<ModerationPage />} />
+        </Route>
+
         {/* Fallback route to suppress "No routes matched location" warning on non-org paths */}
         <Route path="*" element={null} />
       </Routes>

From e4fcd574a1e91e9e2fba3a3943ff2614e9e30259 Mon Sep 17 00:00:00 2001
From: itzzavdhesh <itzzavdhesh@gmail.com>
Date: Sun, 14 Jun 2026 14:44:15 +0530
Subject: [PATCH 2/8]  updates

---
 src/Component/ui/Url.tsx                      |  6 +--
 src/features/Hiring/v1/Hooks/useHiring.ts     | 26 ++--------
 .../Hiring/v1/Pages/ApplicantsPage.tsx        | 30 ++++++++++--
 .../Hiring/v1/Pages/CreateJobPage.tsx         | 47 +++++++++++++++++--
 .../Hiring/v1/Pages/JobsDashboardPage.tsx     | 39 +++++++++++----
 .../Hiring/v1/Pages/MediaManagementPage.tsx   |  9 +++-
 .../Hiring/v1/Pages/ModerationPage.tsx        |  2 +-
 src/features/Hiring/v1/Pages/SendMailPage.tsx | 13 ++---
 8 files changed, 122 insertions(+), 50 deletions(-)

diff --git a/src/Component/ui/Url.tsx b/src/Component/ui/Url.tsx
index 1b8719e..9c3c134 100644
--- a/src/Component/ui/Url.tsx
+++ b/src/Component/ui/Url.tsx
@@ -23,7 +23,7 @@ const Url: React.FC<UrlProps> = ({
   ariaLabel = "URL display",
 }) => {
   const valid = isValidDomain(domain || "");
-  const [Domain, setDomain] = React.useState(domain || "");
+  const [domainState, setDomainState] = React.useState(domain || "");
 
   return (
     <div className={className} style={style} aria-label={ariaLabel} role="presentation">
@@ -39,8 +39,8 @@ const Url: React.FC<UrlProps> = ({
       </div>
       <input
         type="text"
-        value={Domain}
-        onChange={(e) => setDomain(e.target.value)}
+        value={domainState}
+        onChange={(e) => setDomainState(e.target.value)}
         className="Domain p-2 rounded-r-lg border w-[80%]"
         style={{
           color: "var(--cd-text)",
diff --git a/src/features/Hiring/v1/Hooks/useHiring.ts b/src/features/Hiring/v1/Hooks/useHiring.ts
index 1d86ada..f818c13 100644
--- a/src/features/Hiring/v1/Hooks/useHiring.ts
+++ b/src/features/Hiring/v1/Hooks/useHiring.ts
@@ -135,34 +135,14 @@ export function useDeleteJob() {
 // APPLICANTS HOOKS
 // ==========================================
 
-export function useApplicants(jobId: string | undefined, search?: string, status?: string) {
+export function useApplicants(jobId: string | undefined) {
   const applicants = useHiringStore((state) => state.applicants);
 
   return useQuery({
-    queryKey: ["hiring-applicants", jobId, search, status],
+    queryKey: ["hiring-applicants", jobId],
     queryFn: async () => {
       await delay(400);
-      let list = applicants.filter((a) => a.jobId === jobId);
-
-      if (search) {
-        const q = search.toLowerCase();
-        list = list.filter(
-          (a) =>
-            a.name.toLowerCase().includes(q) ||
-            a.email.toLowerCase().includes(q) ||
-            a.skills.some((s) => s.toLowerCase().includes(q))
-        );
-      }
-
-      if (status && status !== "all") {
-        if (status === "strong") {
-          list = list.filter((a) => a.matchScore >= 85);
-        } else {
-          list = list.filter((a) => a.status === status);
-        }
-      }
-
-      return list;
+      return applicants.filter((a) => a.jobId === jobId);
     },
     enabled: !!jobId,
   });
diff --git a/src/features/Hiring/v1/Pages/ApplicantsPage.tsx b/src/features/Hiring/v1/Pages/ApplicantsPage.tsx
index 5060a27..7852d41 100644
--- a/src/features/Hiring/v1/Pages/ApplicantsPage.tsx
+++ b/src/features/Hiring/v1/Pages/ApplicantsPage.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { useTheme } from "@/theme";
 import { useNavigate, useParams } from "react-router-dom";
 import { useApplicants, useJobDetail, useUpdateApplicantStatus } from "../Hooks/useHiring";
@@ -19,17 +19,41 @@ const ApplicantsPage = () => {
 
   // Fetch job & applicants
   const { data: job } = useJobDetail(jobId);
-  const { data: applicants = [], isLoading } = useApplicants(jobId, search, activeTab === "all" ? undefined : activeTab);
+  const { data: allJobApplicants = [], isLoading } = useApplicants(jobId);
   const updateStatusMutation = useUpdateApplicantStatus();
 
   // Metrics (dynamically computed from all applicants for this job)
-  const allJobApplicants = useApplicants(jobId).data || [];
   const totalCount = allJobApplicants.length;
   const screeningCount = allJobApplicants.filter((a) => a.status === "screening").length;
   const interviewCount = allJobApplicants.filter((a) => ["technical", "interview", "hr"].includes(a.status)).length;
   const offerCount = allJobApplicants.filter((a) => ["offer", "hired"].includes(a.status)).length;
   const rejectedCount = allJobApplicants.filter((a) => a.status === "rejected").length;
 
+  // Filter in memory
+  const applicants = useMemo(() => {
+    let list = [...allJobApplicants];
+
+    if (search) {
+      const q = search.toLowerCase();
+      list = list.filter(
+        (a) =>
+          a.name.toLowerCase().includes(q) ||
+          a.email.toLowerCase().includes(q) ||
+          a.skills.some((s) => s.toLowerCase().includes(q))
+      );
+    }
+
+    if (activeTab && activeTab !== "all") {
+      if (activeTab === "strong") {
+        list = list.filter((a) => a.matchScore >= 85);
+      } else {
+        list = list.filter((a) => a.status === activeTab);
+      }
+    }
+
+    return list;
+  }, [allJobApplicants, search, activeTab]);
+
   const handleSelectApplicant = (id: string) => {
     setSelectedApplicants((prev) =>
       prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
diff --git a/src/features/Hiring/v1/Pages/CreateJobPage.tsx b/src/features/Hiring/v1/Pages/CreateJobPage.tsx
index b93df7a..0323057 100644
--- a/src/features/Hiring/v1/Pages/CreateJobPage.tsx
+++ b/src/features/Hiring/v1/Pages/CreateJobPage.tsx
@@ -183,9 +183,50 @@ const CreateJobPage = () => {
   };
 
   const handleSaveDraft = () => {
-    // Explicit save draft status
-    setJobStatus("draft");
-    alert("Role status changed to Draft. The wizard state is autosaved locally.");
+    const parsedSkills = skills
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    const parsedTags = tags
+      .split(",")
+      .map((t) => t.trim())
+      .filter(Boolean);
+
+    const payload = {
+      title: title || "Untitled Job Opening",
+      department: department || "Engineering",
+      hiringManager: hiringManager || "Sarah Jenkins",
+      community: community || "Developer Communities",
+      slug: slug || `untitled-job-${Date.now()}`,
+      description: description || "No description provided yet.",
+      responsibilities: responsibilities.filter((r) => r.trim()),
+      requirements: requirements.filter((r) => r.trim()),
+      benefits: benefits.filter((b) => b.trim()),
+      skills: parsedSkills,
+      tags: parsedTags,
+      employmentType,
+      workplaceType,
+      salaryRange: salaryRange || "Not specified",
+      openings,
+      timeline,
+      expirationDate: expirationDate || new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0],
+      visibility,
+      isFeatured,
+      isSponsored,
+      status: "draft" as JobStatus,
+    };
+
+    createJobMutation.mutate(payload, {
+      onSuccess: (newJob) => {
+        localStorage.removeItem("commdesk-create-job-draft");
+        alert(`Draft job opening '${newJob.title}' successfully saved to database!`);
+        navigate("/org/jobs");
+      },
+      onError: (err) => {
+        console.error("Failed to create draft job:", err);
+        alert("Failed to save draft. Check details and retry.");
+      },
+    });
   };
 
   const handlePublish = () => {
diff --git a/src/features/Hiring/v1/Pages/JobsDashboardPage.tsx b/src/features/Hiring/v1/Pages/JobsDashboardPage.tsx
index c863f31..f049d5a 100644
--- a/src/features/Hiring/v1/Pages/JobsDashboardPage.tsx
+++ b/src/features/Hiring/v1/Pages/JobsDashboardPage.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { useTheme } from "@/theme";
 import { useNavigate } from "react-router-dom";
 import { useJobs, useCreateJob, useDeleteJob, useUpdateJob } from "../Hooks/useHiring";
@@ -18,18 +18,39 @@ const JobsDashboardPage = () => {
   const [selectedJobs, setSelectedJobs] = useState<string[]>([]);
 
   // Fetch jobs
-  const { data: jobs = [], isLoading } = useJobs({
-    search,
-    status: activeTab === "all" ? undefined : activeTab,
-  });
+  const { data: allJobs = [], isLoading } = useJobs();
 
   const createJobMutation = useCreateJob();
   const updateJobMutation = useUpdateJob();
   const deleteJobMutation = useDeleteJob();
 
+  // Filter in memory
+  const jobs = useMemo(() => {
+    return allJobs.filter((job) => {
+      if (search) {
+        const q = search.toLowerCase();
+        const matchTitle = job.title.toLowerCase().includes(q);
+        const matchDept = job.department.toLowerCase().includes(q);
+        const matchManager = job.hiringManager.toLowerCase().includes(q);
+        const matchId = job.id.toLowerCase().includes(q);
+        if (!matchTitle && !matchDept && !matchManager && !matchId) return false;
+      }
+
+      if (activeTab && activeTab !== "all") {
+        if (job.status.toLowerCase() !== activeTab.toLowerCase()) return false;
+      }
+
+      if (selectedDept && selectedDept !== "all") {
+        if (job.department.toLowerCase() !== selectedDept.toLowerCase()) return false;
+      }
+
+      return true;
+    });
+  }, [allJobs, search, activeTab, selectedDept]);
+
   // Metrics
-  const activeOpenings = jobs.filter((j) => j.status === "active").length;
-  const totalApplicants = jobs.reduce((sum, j) => sum + j.applicantsCount, 0);
+  const activeOpenings = allJobs.filter((j) => j.status === "active").length;
+  const totalApplicants = allJobs.reduce((sum, j) => sum + j.applicantsCount, 0);
 
   // Departments list for filtering
   const departments = ["all", "Product", "Engineering", "Sales", "HR"];
@@ -353,9 +374,7 @@ const JobsDashboardPage = () => {
                     </td>
                   </tr>
                 ) : (
-                  jobs
-                    .filter((job) => selectedDept === "all" || job.department.toLowerCase() === selectedDept.toLowerCase())
-                    .map((job) => {
+                  jobs.map((job) => {
                       const status = getStatusColor(job.status);
                       const isSelected = selectedJobs.includes(job.id);
                       return (
diff --git a/src/features/Hiring/v1/Pages/MediaManagementPage.tsx b/src/features/Hiring/v1/Pages/MediaManagementPage.tsx
index a353173..19e3ad7 100644
--- a/src/features/Hiring/v1/Pages/MediaManagementPage.tsx
+++ b/src/features/Hiring/v1/Pages/MediaManagementPage.tsx
@@ -29,8 +29,11 @@ const MediaManagementPage = () => {
     setDragActive(false);
 
     if (e.dataTransfer.files && e.dataTransfer.files[0]) {
-      // Create a mock local object URL for the dropped file to simulate upload
       const file = e.dataTransfer.files[0];
+      if (file.size > 500 * 1024) {
+        alert("For LocalStorage storage preservation in this simulation, uploaded photos are limited to 500KB. Please upload a smaller image.");
+        return;
+      }
       const reader = new FileReader();
       reader.onload = (event) => {
         if (event.target?.result && typeof event.target.result === "string") {
@@ -46,6 +49,10 @@ const MediaManagementPage = () => {
   const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
       const file = e.target.files[0];
+      if (file.size > 500 * 1024) {
+        alert("For LocalStorage storage preservation in this simulation, uploaded photos are limited to 500KB. Please upload a smaller image.");
+        return;
+      }
       const reader = new FileReader();
       reader.onload = (event) => {
         if (event.target?.result && typeof event.target.result === "string") {
diff --git a/src/features/Hiring/v1/Pages/ModerationPage.tsx b/src/features/Hiring/v1/Pages/ModerationPage.tsx
index 2ab8737..e7f2231 100644
--- a/src/features/Hiring/v1/Pages/ModerationPage.tsx
+++ b/src/features/Hiring/v1/Pages/ModerationPage.tsx
@@ -69,7 +69,7 @@ const ModerationPage = () => {
           <div className="flex flex-col gap-5">
             {moderationQueue.map((job) => {
               // Mock a fraud/scam score
-              const scamRisk = job.salaryRange.includes("commission") ? 35 : 5;
+              const scamRisk = job.salaryRange.toLowerCase().includes("commission") ? 35 : 5;
               const isHighRisk = scamRisk > 30;
 
               return (
diff --git a/src/features/Hiring/v1/Pages/SendMailPage.tsx b/src/features/Hiring/v1/Pages/SendMailPage.tsx
index f0e03df..a1de0c8 100644
--- a/src/features/Hiring/v1/Pages/SendMailPage.tsx
+++ b/src/features/Hiring/v1/Pages/SendMailPage.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useTheme } from "@/theme";
 import { useNavigate, useParams } from "react-router-dom";
-import { useApplicantDetail, useSendMail, useMailLogs } from "../Hooks/useHiring";
+import { useApplicantDetail, useSendMail, useMailLogs, useJobDetail } from "../Hooks/useHiring";
 import Button from "@/Component/ui/Button";
 import Input from "@/Component/ui/Input";
 import { FiArrowLeft, FiMail, FiSend, FiClock, FiFileText } from "react-icons/fi";
@@ -34,8 +34,9 @@ const SendMailPage = () => {
   const navigate = useNavigate();
   const { id: jobId, applicantId } = useParams<{ id: string; applicantId: string }>();
 
-  // Fetch candidate & logs
+  // Fetch candidate, job, & logs
   const { data: applicant } = useApplicantDetail(applicantId);
+  const { data: job } = useJobDetail(jobId);
   const { data: mailLogs = [] } = useMailLogs(applicantId);
   const sendMailMutation = useSendMail();
 
@@ -48,11 +49,11 @@ const SendMailPage = () => {
   const handleSelectTemplate = (temp: typeof templates[0]) => {
     if (!applicant) return;
     const resolvedSubject = temp.subject
-      .replace("[Position]", "Senior Product Designer")
-      .replace("[CandidateName]", applicant.name);
+      .replace(/\[Position\]/g, job?.title || "Position")
+      .replace(/\[CandidateName\]/g, applicant.name);
     const resolvedBody = temp.body
-      .replace("[Position]", "Senior Product Designer")
-      .replace("[CandidateName]", applicant.name);
+      .replace(/\[Position\]/g, job?.title || "Position")
+      .replace(/\[CandidateName\]/g, applicant.name);
 
     setSubject(resolvedSubject);
     setBody(resolvedBody);

From d82a8e70fcd9b43d88a469a1066a1a2966d4daab Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Sun, 14 Jun 2026 14:45:09 +0530
Subject: [PATCH 3/8] Update src/features/Hiring/v1/Pages/SendMailPage.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 src/features/Hiring/v1/Pages/SendMailPage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/Hiring/v1/Pages/SendMailPage.tsx b/src/features/Hiring/v1/Pages/SendMailPage.tsx
index a1de0c8..f2da951 100644
--- a/src/features/Hiring/v1/Pages/SendMailPage.tsx
+++ b/src/features/Hiring/v1/Pages/SendMailPage.tsx
@@ -36,6 +36,7 @@ const SendMailPage = () => {
 
   // Fetch candidate, job, & logs
   const { data: applicant } = useApplicantDetail(applicantId);
+  const { data: applicant } = useApplicantDetail(applicantId);
   const { data: job } = useJobDetail(jobId);
   const { data: mailLogs = [] } = useMailLogs(applicantId);
   const sendMailMutation = useSendMail();

From a42985782e071ec0785416eb745190ed0771771a Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Sun, 14 Jun 2026 14:45:22 +0530
Subject: [PATCH 4/8] Update
 src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx b/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx
index f2898ce..ae7962f 100644
--- a/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx
+++ b/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx
@@ -100,7 +100,7 @@ const ApplicantDetailsPage = () => {
                 </span>
               </div>
               <span className="text-xs" style={{ color: theme.text.muted }}>
-                Applied for Senior Product Designer &bull; Applied {applicant.appliedDate}
+                Applied for {job?.title || "Position"} &bull; Applied {applicant.appliedDate}
               </span>
             </div>
           </div>

From 81059f146d354334390d0e32ef5f650a44aaf9d6 Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Sun, 14 Jun 2026 14:45:55 +0530
Subject: [PATCH 5/8] Update
 src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx b/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx
index ae7962f..7ecf195 100644
--- a/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx
+++ b/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useTheme } from "@/theme";
 import { useNavigate, useParams } from "react-router-dom";
-import { useApplicantDetail, useUpdateApplicantStatus, useAddRecruiterNote } from "../Hooks/useHiring";
+import { useApplicantDetail, useUpdateApplicantStatus, useAddRecruiterNote, useJobDetail } from "../Hooks/useHiring";
 import { ApplicantStatus } from "../Types/Hiring.types";
 import Button from "@/Component/ui/Button";
 import { FiCalendar, FiMail, FiArrowLeft, FiPlus, FiChevronRight } from "react-icons/fi";

From bc127936952581be39dbbae050823646bf0bd6ed Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Sun, 14 Jun 2026 14:46:25 +0530
Subject: [PATCH 6/8] Update src/features/Hiring/v1/Pages/SendMailPage.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 src/features/Hiring/v1/Pages/SendMailPage.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/features/Hiring/v1/Pages/SendMailPage.tsx b/src/features/Hiring/v1/Pages/SendMailPage.tsx
index f2da951..40ce850 100644
--- a/src/features/Hiring/v1/Pages/SendMailPage.tsx
+++ b/src/features/Hiring/v1/Pages/SendMailPage.tsx
@@ -49,12 +49,13 @@ const SendMailPage = () => {
 
   const handleSelectTemplate = (temp: typeof templates[0]) => {
     if (!applicant) return;
+    const positionTitle = job?.title || "Position";
     const resolvedSubject = temp.subject
-      .replace(/\[Position\]/g, job?.title || "Position")
-      .replace(/\[CandidateName\]/g, applicant.name);
+      .replaceAll("[Position]", positionTitle)
+      .replaceAll("[CandidateName]", applicant.name);
     const resolvedBody = temp.body
-      .replace(/\[Position\]/g, job?.title || "Position")
-      .replace(/\[CandidateName\]/g, applicant.name);
+      .replaceAll("[Position]", positionTitle)
+      .replaceAll("[CandidateName]", applicant.name);
 
     setSubject(resolvedSubject);
     setBody(resolvedBody);

From 5e7ebd18a7223e1ae4d74f3a31b5c7ab75c822a7 Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Sun, 14 Jun 2026 14:46:56 +0530
Subject: [PATCH 7/8] Update
 src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx b/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx
index 7ecf195..e42c0cb 100644
--- a/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx
+++ b/src/features/Hiring/v1/Pages/ApplicantDetailsPage.tsx
@@ -14,6 +14,7 @@ const ApplicantDetailsPage = () => {
 
   // Fetch applicant
   const { data: applicant, isLoading } = useApplicantDetail(applicantId);
+  const { data: job } = useJobDetail(jobId);
   const updateStatusMutation = useUpdateApplicantStatus();
   const addNoteMutation = useAddRecruiterNote();
 

From ef81a64b5e92d540fe41816f7b585cd82d4967aa Mon Sep 17 00:00:00 2001
From: AVDHESH KUMAR DADHICH <aavdhesh.dadhich@gmail.com>
Date: Sun, 14 Jun 2026 14:47:36 +0530
Subject: [PATCH 8/8] Update src/features/Hiring/v1/Pages/ModerationPage.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>