diff --git a/src/App.jsx b/src/App.jsx
index 99d55a675..12c291780 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,20 +2,33 @@ import { createTheme, MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.css";
 import "@mantine/notifications/styles.css";
 import { Route, Routes, Navigate, useLocation } from "react-router-dom";
+import { useSelector } from "react-redux";
 import { Notifications } from "@mantine/notifications";
 import { Layout } from "./components/layout";
-import Dashboard from "./Modules/Dashboard/dashboardNotifications";
+import DashboardNotifications from "./Modules/Dashboard/dashboardNotifications";
+import RoleDashboard from "./Modules/Dashboard/RoleDashboard";
 import Profile from "./Modules/Dashboard/StudentProfile/profilePage";
 import LoginPage from "./pages/login";
 import ForgotPassword from "./pages/forgotPassword";
 import AcademicPage from "./Modules/Academic/index";
 import ValidateAuth from "./helper/validateauth";
 import FacultyProfessionalProfile from "./Modules/facultyProfessionalProfile/facultyProfessionalProfile";
-import InactivityHandler from "./helper/inactivityhandler";
 import Examination from "./Modules/Examination/examination";
 import Database from "./Modules/Database/database";
 import ProgrammeCurriculumRoutes from "./Modules/Program_curriculum/programmCurriculum";
 import NotFoundPage from "./components/NotFoundPage";
+import HR2Module from "./Modules/HRModule/index";
+import HodLeaveApprovals from "./Modules/HRModule/HodLeaveApprovals";
+import HodAppraisalReviews from "./Modules/HRModule/HodAppraisalReviews";
+import DirectorLeaveApprovals from "./Modules/HRModule/DirectorLeaveApprovals";
+import DirectorAppraisalReviews from "./Modules/HRModule/DirectorAppraisalReviews";
+import DirectorCpdaApprovals from "./Modules/HRModule/DirectorCpdaApprovals";
+import RegistrarLeaveApprovals from "./Modules/HRModule/RegistrarLeaveApprovals";
+import HrAdminLtcReview from "./Modules/HRModule/HrAdminLtcReview";
+import HrAdminCpdaReview from "./Modules/HRModule/HrAdminCpdaReview";
+import HrAdminAppraisalAssignments from "./Modules/HRModule/HrAdminAppraisalAssignments";
+import AccountantLtcReview from "./Modules/HRModule/AccountantLtcReview";
+import AccountantCpdaReview from "./Modules/HRModule/AccountantCpdaReview";
 
 const theme = createTheme({
   breakpoints: {
@@ -30,11 +43,28 @@ const theme = createTheme({
 
 export default function App() {
   const location = useLocation();
+  const currentAccessibleModules = useSelector(
+    (state) => state.user.currentAccessibleModules,
+  );
+  const currentRole = useSelector((state) => state.user.role);
+  const isHod = /hod/i.test(currentRole || "");
+  const isDirector = /director/i.test(currentRole || "");
+  const isRegistrar = /registrar/i.test(currentRole || "");
+  const isHrAdmin = /hr/i.test(currentRole || "");
+  const isAccountant = /accountant/i.test(currentRole || "");
+  const canAccessHr =
+    Boolean(currentAccessibleModules?.hr) ||
+    /hod/i.test(currentRole || "") ||
+    /director/i.test(currentRole || "") ||
+    /registrar/i.test(currentRole || "") ||
+    /accountant/i.test(currentRole || "") ||
+    /hr/i.test(currentRole || "") ||
+    Boolean(currentRole);
   return (
     <MantineProvider theme={theme}>
       <Notifications position="top-center" autoClose={2000} limit={1} />
       {location.pathname !== "/accounts/login" && <ValidateAuth />}
-      {location.pathname !== "/accounts/login" && <InactivityHandler />}
+      {/* {location.pathname !== "/accounts/login" && <InactivityHandler />} */}
 
       <Routes>
         <Route path="/" element={<Navigate to="/accounts/login" replace />} />
@@ -42,7 +72,15 @@ export default function App() {
           path="/dashboard"
           element={
             <Layout>
-              <Dashboard />
+              <RoleDashboard />
+            </Layout>
+          }
+        />
+        <Route
+          path="/dashboard/notifications"
+          element={
+            <Layout>
+              <DashboardNotifications />
             </Layout>
           }
         />
@@ -82,6 +120,150 @@ export default function App() {
         <Route path="/reset-password" element={<ForgotPassword />} />
         <Route path="/examination/*" element={<Examination />} />
         <Route path="/database/*" element={<Database />} />
+        <Route
+          path="/hr2/*"
+          element={
+            canAccessHr ? (
+              <Layout>
+                <HR2Module />
+              </Layout>
+            ) : (
+              <Navigate to="/dashboard" replace />
+            )
+          }
+        />
+        <Route
+          path="/hr2/hod/leave-approvals"
+          element={
+            isHod ? (
+              <Layout>
+                <HodLeaveApprovals />
+              </Layout>
+            ) : (
+              <Navigate to="/dashboard" replace />
+            )
+          }
+        />
+        <Route
+          path="/hr2/hod/appraisal-reviews"
+          element={
+            isHod ? (
+              <Layout>
+                <HodAppraisalReviews />
+              </Layout>
+            ) : (
+              <Navigate to="/dashboard" replace />
+            )
+          }
+        />
+        <Route
+          path="/hr2/director/leave-approvals"
+          element={
+            isDirector ? (
+              <Layout>
+                <DirectorLeaveApprovals />
+              </Layout>
+            ) : (
+              <Navigate to="/dashboard" replace />
+            )
+          }
+        />
+        <Route
+          path="/hr2/registrar/leave-approvals"
+          element={
+            isRegistrar ? (
+              <Layout>
+                <RegistrarLeaveApprovals />
+              </Layout>
+            ) : (
+              <Navigate to="/dashboard" replace />
+            )
+          }
+        />
+        <Route
+          path="/hr2/director/appraisal-reviews"
+          element={
+            isDirector ? (
+              <Layout>
+                <DirectorAppraisalReviews />
+              </Layout>
+            ) : (
+              <Navigate to="/dashboard" replace />
+            )
+          }
+        />
+        <Route
+          path="/hr2/director/cpda-approvals"
+          element={
+            isDirector ? (
+              <Layout>
+                <DirectorCpdaApprovals />
+              </Layout>
+            ) : (
+              <Navigate to="/dashboard" replace />
+            )
+          }
+        />
+        <Route
+          path="/hr2/hr-admin/appraisal-assignments"
+          element={
+            isHrAdmin ? (
+              <Layout>
+                <HrAdminAppraisalAssignments />
+              </Layout>
+            ) : (
+              <Navigate to="/dashboard" replace />
+            )
+          }
+        />
+        <Route
+          path="/hr2/hr-admin/ltc-review"
+          element={
+            isHrAdmin ? (
+              <Layout>
+                <HrAdminLtcReview />
+              </Layout>
+            ) : (
+              <Navigate to="/dashboard" replace />
+            )
+          }
+        />
+        <Route
+          path="/hr2/hr-admin/cpda-review"
+          element={
+            isHrAdmin ? (
+              <Layout>
+                <HrAdminCpdaReview />
+              </Layout>
+            ) : (
+              <Navigate to="/dashboard" replace />
+            )
+          }
+        />
+        <Route
+          path="/hr2/accountant/ltc-review"
+          element={
+            isAccountant ? (
+              <Layout>
+                <AccountantLtcReview />
+              </Layout>
+            ) : (
+              <Navigate to="/dashboard" replace />
+            )
+          }
+        />
+        <Route
+          path="/hr2/accountant/cpda-review"
+          element={
+            isAccountant ? (
+              <Layout>
+                <AccountantCpdaReview />
+              </Layout>
+            ) : (
+              <Navigate to="/dashboard" replace />
+            )
+          }
+        />
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </MantineProvider>
diff --git a/src/Modules/Dashboard/RoleDashboard.jsx b/src/Modules/Dashboard/RoleDashboard.jsx
new file mode 100644
index 000000000..4cfa6f67a
--- /dev/null
+++ b/src/Modules/Dashboard/RoleDashboard.jsx
@@ -0,0 +1,325 @@
+import { useMemo } from "react";
+import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+
+const roleMatchers = [
+  { key: "hod", label: "HOD", match: (role) => /hod/i.test(role) },
+  {
+    key: "director",
+    label: "Director",
+    match: (role) => /director/i.test(role),
+  },
+  {
+    key: "registrar",
+    label: "Registrar",
+    match: (role) => /registrar/i.test(role),
+  },
+  {
+    key: "accountant",
+    label: "Accountant",
+    match: (role) => /accountant/i.test(role),
+  },
+  {
+    key: "hr_admin",
+    label: "HR Administration",
+    match: (role) => /hr/i.test(role),
+  },
+];
+
+const employeeActions = [
+  {
+    key: "leave",
+    title: "Apply for Leave",
+    description: "Submit a new leave request and track its status.",
+    cta: "Apply leave",
+    to: "/hr2?tab=leave",
+  },
+  {
+    key: "appraisal",
+    title: "Yearly Appraisal",
+    description: "Submit self-appraisals and view evaluation status.",
+    cta: "Start appraisal",
+    to: "/hr2?tab=appraisal",
+  },
+  {
+    key: "cpda-advance",
+    title: "CPDA Advance",
+    description: "Request advances for approved professional activities.",
+    cta: "Request advance",
+    to: "/hr2?tab=cpda-advance",
+  },
+  {
+    key: "ltc",
+    title: "Apply for LTC",
+    description: "Create a Leave Travel Concession request in minutes.",
+    cta: "Request LTC",
+    to: "/hr2?tab=ltc",
+  },
+  {
+    key: "nominee",
+    title: "Nominee Dashboard",
+    description: "Accept or decline leave handover nominations.",
+    cta: "Review nominations",
+    to: "/hr2?tab=nominee",
+  },
+];
+
+const roleActions = {
+  hod: [
+    {
+      key: "hod-leave-approvals",
+      title: "Approve Leave Requests",
+      description: "Review and approve leave requests from your department.",
+      cta: "Review leave",
+      to: "/hr2/hod/leave-approvals",
+    },
+    {
+      key: "hod-appraisals",
+      title: "Appraisal Reviews",
+      description: "Check pending appraisals and add reviewer feedback.",
+      cta: "Open appraisals",
+      to: "/hr2/hod/appraisal-reviews",
+    },
+  ],
+  director: [
+    {
+      key: "director-leave",
+      title: "Leave Approvals",
+      description: "Review leave requests forwarded by HODs.",
+      cta: "Review leaves",
+      to: "/hr2/director/leave-approvals",
+    },
+    {
+      key: "director-appraisals",
+      title: "Appraisal Reviews",
+      description: "Approve or reject reviewed appraisals.",
+      cta: "Review appraisals",
+      to: "/hr2/director/appraisal-reviews",
+    },
+    {
+      key: "director-cpda",
+      title: "CPDA Approvals",
+      description: "Approve or reject CPDA advance requests.",
+      cta: "Review CPDA",
+      to: "/hr2/director/cpda-approvals",
+    },
+  ],
+  registrar: [
+    {
+      key: "registrar-leave",
+      title: "Leave Approvals",
+      description:
+        "Approve, reject, or forward leave requests from HR Admins and Accountants.",
+      cta: "Review leaves",
+      to: "/hr2/registrar/leave-approvals",
+    },
+    {
+      key: "registrar-queue",
+      title: "Registrar Queue",
+      description: "Track files awaiting registrar-level processing.",
+      cta: "Open queue",
+      disabled: true,
+    },
+    {
+      key: "registrar-compliance",
+      title: "Compliance Review",
+      description: "Verify documentation and service history compliance.",
+      cta: "Review compliance",
+      disabled: true,
+    },
+  ],
+  accountant: [
+    {
+      key: "accountant-ltc",
+      title: "LTC Accountant Review",
+      description: "Finalize LTC requests forwarded by HR.",
+      cta: "Review LTC",
+      to: "/hr2/accountant/ltc-review",
+    },
+    {
+      key: "accountant-cpda",
+      title: "CPDA Accountant Review",
+      description: "Finalize CPDA advances forwarded by HR.",
+      cta: "Review CPDA",
+      to: "/hr2/accountant/cpda-review",
+    },
+  ],
+  hr_admin: [
+    {
+      key: "hr-appraisal-assign",
+      title: "Assign Appraisals",
+      description: "Route submitted appraisals to HODs or the Director.",
+      cta: "Assign forms",
+      to: "/hr2/hr-admin/appraisal-assignments",
+    },
+    {
+      key: "hr-ltc-review",
+      title: "LTC Document Check",
+      description: "Review LTC submissions and forward to accountant.",
+      cta: "Review LTC",
+      to: "/hr2/hr-admin/ltc-review",
+    },
+    {
+      key: "hr-cpda-review",
+      title: "CPDA Document Check",
+      description: "Review CPDA advances and forward to accountant.",
+      cta: "Review CPDA",
+      to: "/hr2/hr-admin/cpda-review",
+    },
+    {
+      key: "hr-records",
+      title: "Employee Records",
+      description: "Maintain employee profiles and service records.",
+      cta: "Manage records",
+      disabled: true,
+    },
+  ],
+};
+
+function RoleDashboard() {
+  const navigate = useNavigate();
+  const username = useSelector((state) => state.user.username);
+  const role = useSelector((state) => state.user.role);
+
+  const resolvedRole = useMemo(() => {
+    const match = roleMatchers.find((matcher) => matcher.match(role || ""));
+    return match || { key: "employee", label: "Employee" };
+  }, [role]);
+
+  const employeeActionsToShow = useMemo(() => {
+    const canSeeAppraisal = [
+      "employee",
+      "hod",
+      "director",
+      "registrar",
+      "accountant",
+      "hr_admin",
+    ].includes(resolvedRole.key);
+    const hideFinanceActions = false;
+    return employeeActions.filter((action) => {
+      if (action.key === "appraisal") return canSeeAppraisal;
+      if (action.key === "nominee") return resolvedRole.key === "employee";
+      if (hideFinanceActions && ["cpda-advance", "ltc"].includes(action.key))
+        return false;
+      return true;
+    });
+  }, [resolvedRole.key]);
+
+  const actionsForRole = roleActions[resolvedRole.key] || [];
+
+  const handleAction = (action) => {
+    if (action.disabled || !action.to) {
+      return;
+    }
+    navigate(action.to);
+  };
+
+  return (
+    <div className="fusion-page">
+      <div className="fusion-card">
+        <div className="fusion-actions">
+          <div>
+            <p className="fusion-subtitle">Role workspace</p>
+            <h1 className="fusion-heading">Welcome, {username}</h1>
+            <p className="fusion-subtitle">
+              Active role: <strong>{resolvedRole.label}</strong>
+            </p>
+          </div>
+          <div className="fusion-grid" style={{ minWidth: "240px" }}>
+            <div className="fusion-stat">
+              <p className="fusion-stat-label">Quick access</p>
+              <p className="fusion-stat-value" style={{ fontSize: "18px" }}>
+                Leave, Appraisal, CPDA, LTC
+              </p>
+            </div>
+            <div className="fusion-stat">
+              <p className="fusion-stat-label">Notifications</p>
+              <button
+                type="button"
+                className="fusion-button-primary"
+                onClick={() => navigate("/dashboard/notifications")}
+              >
+                Open notifications
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="fusion-card">
+        <h2 className="fusion-heading" style={{ fontSize: "20px" }}>
+          Employee dashboard
+        </h2>
+        <p className="fusion-subtitle">
+          All employee actions are available for every role.
+        </p>
+        <div className="fusion-grid" style={{ marginTop: "16px" }}>
+          {employeeActionsToShow.map((action) => (
+            <button
+              key={action.key}
+              type="button"
+              className="fusion-card"
+              onClick={() => handleAction(action)}
+            >
+              <div>
+                <p className="fusion-heading" style={{ fontSize: "16px" }}>
+                  {action.title}
+                </p>
+                <p className="fusion-subtitle">{action.description}</p>
+              </div>
+              <span
+                className="fusion-subtitle"
+                style={{ color: "#2563eb", fontWeight: 600 }}
+              >
+                {action.cta}
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {actionsForRole.length > 0 && (
+        <div className="fusion-card">
+          <h2 className="fusion-heading" style={{ fontSize: "20px" }}>
+            Role dashboard
+          </h2>
+          <p className="fusion-subtitle">
+            Tools specific to {resolvedRole.label.toLowerCase()} duties.
+          </p>
+          <div className="fusion-grid" style={{ marginTop: "16px" }}>
+            {actionsForRole.map((action) => {
+              const isDisabled = Boolean(action.disabled);
+              return (
+                <button
+                  key={action.key}
+                  type="button"
+                  className="fusion-card"
+                  onClick={() => handleAction(action)}
+                  disabled={isDisabled}
+                >
+                  <div>
+                    <p className="fusion-heading" style={{ fontSize: "16px" }}>
+                      {action.title}
+                    </p>
+                    <p className="fusion-subtitle">{action.description}</p>
+                  </div>
+                  <span
+                    className="fusion-subtitle"
+                    style={{
+                      color: isDisabled ? "#94a3b8" : "#2563eb",
+                      fontWeight: 600,
+                    }}
+                  >
+                    {isDisabled ? "Coming soon" : action.cta}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default RoleDashboard;
diff --git a/src/Modules/Dashboard/RoleDashboard.module.css b/src/Modules/Dashboard/RoleDashboard.module.css
new file mode 100644
index 000000000..c33dd7a3c
--- /dev/null
+++ b/src/Modules/Dashboard/RoleDashboard.module.css
@@ -0,0 +1,189 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");
+
+.page {
+  font-family: "Space Grotesk", "Segoe UI", sans-serif;
+  padding: 24px;
+  background: radial-gradient(circle at top left, #f8f6f1, #ffffff 45%, #f0f6ff 100%);
+  min-height: calc(100vh - 120px);
+}
+
+.hero {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 20px;
+  padding: 28px 32px;
+  background: linear-gradient(130deg, #111827 0%, #1f2937 60%, #111827 100%);
+  color: #f9fafb;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
+}
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  font-size: 0.7rem;
+  color: rgba(226, 232, 240, 0.7);
+  margin: 0 0 8px;
+}
+
+.title {
+  font-size: 2.2rem;
+  margin: 0 0 8px;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 1rem;
+  color: rgba(226, 232, 240, 0.85);
+}
+
+.subtitle span {
+  font-weight: 600;
+  color: #fcd34d;
+}
+
+.heroMeta {
+  display: grid;
+  gap: 12px;
+  min-width: 240px;
+}
+
+.metaCard {
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  padding: 14px 16px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.metaLabel {
+  margin: 0 0 6px;
+  font-size: 0.8rem;
+  color: rgba(226, 232, 240, 0.65);
+}
+
+.metaValue {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.linkButton {
+  width: 100%;
+  border: none;
+  border-radius: 10px;
+  padding: 10px 12px;
+  background: #fcd34d;
+  color: #111827;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.linkButton:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 18px rgba(252, 211, 77, 0.3);
+}
+
+.section {
+  margin-top: 28px;
+}
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.sectionTitle {
+  margin: 0 0 4px;
+  font-size: 1.4rem;
+  color: #111827;
+}
+
+.sectionSubtitle {
+  margin: 0;
+  color: #475569;
+  font-size: 0.95rem;
+}
+
+.cardGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
+}
+
+.card {
+  text-align: left;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 18px;
+  background: #ffffff;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 14px;
+  min-height: 140px;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  border-color: #bfdbfe;
+  box-shadow: 0 16px 30px rgba(59, 130, 246, 0.2);
+}
+
+.cardDisabled {
+  text-align: left;
+  border: 1px dashed #cbd5f5;
+  border-radius: 16px;
+  padding: 18px;
+  background: #f8fafc;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 14px;
+  min-height: 140px;
+  color: #94a3b8;
+}
+
+.cardTitle {
+  margin: 0 0 6px;
+  font-size: 1.1rem;
+  color: inherit;
+}
+
+.cardDescription {
+  margin: 0;
+  color: inherit;
+  font-size: 0.9rem;
+}
+
+.cardCta {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #2563eb;
+}
+
+.cardDisabled .cardCta {
+  color: #94a3b8;
+}
+
+@media (max-width: 720px) {
+  .page {
+    padding: 16px;
+  }
+
+  .hero {
+    padding: 20px;
+  }
+
+  .title {
+    font-size: 1.8rem;
+  }
+}
diff --git a/src/Modules/HRModule.zip b/src/Modules/HRModule.zip
new file mode 100644
index 000000000..f7e5d90e5
Binary files /dev/null and b/src/Modules/HRModule.zip differ
diff --git a/src/Modules/HRModule/AccountantCpdaReview.jsx b/src/Modules/HRModule/AccountantCpdaReview.jsx
new file mode 100644
index 000000000..e30dfd92e
--- /dev/null
+++ b/src/Modules/HRModule/AccountantCpdaReview.jsx
@@ -0,0 +1,139 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { getCPDAAdvances, approveRejectCPDAAdvance } from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+
+function AccountantCpdaReview() {
+  const [loading, setLoading] = useState(true);
+  const [advances, setAdvances] = useState([]);
+  const [actionLoading, setActionLoading] = useState(null);
+
+  useEffect(() => {
+    const fetchAdvances = async () => {
+      try {
+        const res = await getCPDAAdvances();
+        setAdvances(res?.data ?? []);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchAdvances();
+  }, []);
+
+  const reviewQueue = useMemo(
+    () =>
+      advances.filter((item) => {
+        const status = (
+          item.approval_status ||
+          item.status ||
+          ""
+        ).toUpperCase();
+        const accountantStatus = (
+          item.accountant_processing_status || ""
+        ).toUpperCase();
+        if (status !== "FORWARDED") {
+          return false;
+        }
+        return ["PENDING"].includes(accountantStatus);
+      }),
+    [advances],
+  );
+
+  const handleDecision = async (cpdaId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(cpdaId);
+      await approveRejectCPDAAdvance(cpdaId, decision, remarks);
+      const res = await getCPDAAdvances();
+      setAdvances(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-bold">Accountant CPDA Review</h1>
+        <p className="text-sm text-slate-500">
+          Finalize CPDA advances forwarded by the director.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Event</th>
+              <th className="px-4 py-3 font-semibold">Start Date</th>
+              <th className="px-4 py-3 font-semibold">Total Amount</th>
+              <th className="px-4 py-3 font-semibold">Status</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {reviewQueue.map((adv) => (
+              <tr key={adv.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {adv.employee_name || adv.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {adv.event_name || adv.purpose || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {adv.start_date || adv.submission_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  ₹{adv.total_amount || adv.amount_required}
+                </td>
+                <td className="px-4 py-3">
+                  <StatusBadge status={adv.approval_status || adv.status} />
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(adv.id, "approve")}
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === adv.id}
+                    >
+                      Approve
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(adv.id, "reject")}
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === adv.id}
+                    >
+                      Reject
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {reviewQueue.length === 0 && (
+              <tr>
+                <td
+                  colSpan="6"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No forwarded CPDA requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default AccountantCpdaReview;
diff --git a/src/Modules/HRModule/AccountantLtcReview.jsx b/src/Modules/HRModule/AccountantLtcReview.jsx
new file mode 100644
index 000000000..2e71df2ac
--- /dev/null
+++ b/src/Modules/HRModule/AccountantLtcReview.jsx
@@ -0,0 +1,132 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { getLTCApplications, approveRejectLTC } from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+
+function AccountantLtcReview() {
+  const [loading, setLoading] = useState(true);
+  const [ltcRequests, setLtcRequests] = useState([]);
+  const [actionLoading, setActionLoading] = useState(null);
+
+  useEffect(() => {
+    const fetchLtc = async () => {
+      try {
+        const res = await getLTCApplications();
+        setLtcRequests(res?.data ?? []);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLtc();
+  }, []);
+
+  const reviewQueue = useMemo(
+    () =>
+      ltcRequests.filter(
+        (item) =>
+          (item.approval_status || item.status || "").toUpperCase() ===
+          "FORWARDED",
+      ),
+    [ltcRequests],
+  );
+
+  const handleDecision = async (ltcId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(ltcId);
+      await approveRejectLTC(ltcId, decision, remarks);
+      const res = await getLTCApplications();
+      setLtcRequests(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-bold">Accountant LTC Review</h1>
+        <p className="text-sm text-slate-500">
+          Finalize LTC requests forwarded by HR.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Block Year</th>
+              <th className="px-4 py-3 font-semibold">Travel Dates</th>
+              <th className="px-4 py-3 font-semibold">Destination</th>
+              <th className="px-4 py-3 font-semibold">Status</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {reviewQueue.map((ltc) => (
+              <tr key={ltc.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {ltc.employee_name || ltc.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {ltc.ltc_block_year || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {`${ltc.travel_start_date || "-"} to ${
+                    ltc.travel_end_date || "-"
+                  }`}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {ltc.destination || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <StatusBadge status={ltc.approval_status || ltc.status} />
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(ltc.id, "approve")}
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === ltc.id}
+                    >
+                      Approve
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(ltc.id, "reject")}
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === ltc.id}
+                    >
+                      Reject
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {reviewQueue.length === 0 && (
+              <tr>
+                <td
+                  colSpan="6"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No forwarded LTC requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default AccountantLtcReview;
diff --git a/src/Modules/HRModule/AppraisalForm.jsx b/src/Modules/HRModule/AppraisalForm.jsx
new file mode 100644
index 000000000..5d0139010
--- /dev/null
+++ b/src/Modules/HRModule/AppraisalForm.jsx
@@ -0,0 +1,454 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import {
+  getAppraisalForms,
+  createAppraisalForm,
+  downloadAppraisalForm,
+} from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+import FormField from "./components/FormField";
+import TextAreaField from "./components/TextAreaField";
+
+function AppraisalForm({ onBack }) {
+  const [appraisals, setAppraisals] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [submitError, setSubmitError] = useState("");
+  const [submitSuccess, setSubmitSuccess] = useState("");
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [formData, setFormData] = useState({
+    employee_id: "",
+    employee_name: "",
+    department: "",
+    designation: "",
+    appraisal_year: "",
+    self_summary: "",
+    key_responsibilities: "",
+    achievements: "",
+    challenges_faced: "",
+    teaching_performance: "",
+    research_work: "",
+    publications: "",
+    projects_handled: "",
+    administrative_contributions: "",
+    trainings_attended: "",
+    certifications: "",
+    workshops: "",
+    goals_achieved: "",
+    future_goals: "",
+    supporting_documents: "",
+  });
+
+  const fetchData = async () => {
+    try {
+      const res = await getAppraisalForms();
+      setAppraisals(res.data);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+    if (fieldErrors[name]) {
+      setFieldErrors((prev) => ({ ...prev, [name]: "" }));
+    }
+  };
+
+  const parseServerErrors = (errors) => {
+    if (!errors || typeof errors !== "object") return {};
+    const next = {};
+    Object.entries(errors).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        next[key] = value.join(" ");
+      } else if (typeof value === "string") {
+        next[key] = value;
+      }
+    });
+    return next;
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitError("");
+    setSubmitSuccess("");
+    setFieldErrors({});
+    try {
+      const required = [
+        { key: "employee_id", label: "Employee ID" },
+        { key: "employee_name", label: "Employee Name" },
+        { key: "department", label: "Department" },
+        { key: "designation", label: "Designation" },
+        { key: "appraisal_year", label: "Appraisal Year" },
+        { key: "self_summary", label: "Self Summary" },
+        { key: "key_responsibilities", label: "Key Responsibilities" },
+        { key: "achievements", label: "Achievements" },
+        { key: "goals_achieved", label: "Goals Achieved" },
+        { key: "future_goals", label: "Future Goals" },
+      ];
+      const missing = required
+        .filter((field) => !String(formData[field.key] || "").trim())
+        .map((field) => field.label);
+      if (missing.length > 0) {
+        const nextErrors = required.reduce((acc, field) => {
+          if (!String(formData[field.key] || "").trim()) {
+            acc[field.key] = "This field is required.";
+          }
+          return acc;
+        }, {});
+        setFieldErrors(nextErrors);
+        setSubmitError(`Please fill required fields: ${missing.join(", ")}`);
+        return;
+      }
+
+      await createAppraisalForm(formData);
+      setSubmitSuccess("Your form is submitted.");
+      setShowForm(false);
+      setFieldErrors({});
+      fetchData();
+    } catch (err) {
+      const serverErrors = err?.response?.data;
+      const parsed = parseServerErrors(serverErrors);
+      const generalError =
+        parsed.error || parsed.detail || parsed.non_field_errors;
+      if (generalError) {
+        setSubmitError(generalError);
+        delete parsed.error;
+        delete parsed.detail;
+        delete parsed.non_field_errors;
+      }
+      if (Object.keys(parsed).length > 0) {
+        setFieldErrors(parsed);
+        if (!generalError) {
+          setSubmitError("Please correct the highlighted fields.");
+        }
+      } else {
+        setSubmitError(
+          "Submission failed. Please check the form fields and try again.",
+        );
+      }
+    }
+  };
+
+  const handleDownload = async (id) => {
+    try {
+      const res = await downloadAppraisalForm(id);
+      const url = window.URL.createObjectURL(new Blob([res.data]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `appraisal-${id}.txt`;
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error(err);
+      window.alert("Unable to download appraisal form.");
+    }
+  };
+
+  if (loading) return <LoadingSpinner />;
+  return (
+    <div className="fusion-page">
+      <div className="fusion-card">
+        <div className="fusion-actions">
+          <div>
+            <button
+              type="button"
+              onClick={onBack}
+              className="fusion-button-ghost"
+            >
+              Back to dashboard
+            </button>
+          </div>
+          <div>
+            <h1 className="fusion-heading">Performance Appraisals</h1>
+            <p className="fusion-subtitle">
+              Review and submit your annual self appraisals.
+            </p>
+          </div>
+          <button
+            onClick={() => setShowForm(true)}
+            className="fusion-button-primary"
+          >
+            New Self-Appraisal
+          </button>
+        </div>
+      </div>
+
+      <div className="fusion-table-wrap">
+        <div className="fusion-filter-bar">
+          <span className="fusion-subtitle">{appraisals.length} records</span>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="fusion-table">
+            <thead>
+              <tr>
+                <th>Appraisal Year</th>
+                <th>Department</th>
+                <th>Reviewer</th>
+                <th>Download</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {appraisals.map((app) => (
+                <tr key={app.id}>
+                  <td>{app.appraisal_year || app.period}</td>
+                  <td>{app.department || "-"}</td>
+                  <td>{app.reviewer_id || "-"}</td>
+                  <td>
+                    <button
+                      type="button"
+                      className="fusion-button-ghost"
+                      onClick={() => handleDownload(app.id)}
+                    >
+                      Download
+                    </button>
+                  </td>
+                  <td>
+                    <StatusBadge status={app.status} />
+                  </td>
+                </tr>
+              ))}
+              {appraisals.length === 0 && (
+                <tr>
+                  <td
+                    colSpan="5"
+                    className="text-center"
+                    style={{ padding: "24px", color: "#94a3b8" }}
+                  >
+                    No appraisals submitted yet.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      {showForm && (
+        <div className="fusion-modal">
+          <div className="fusion-modal-card">
+            <h2 className="fusion-heading" style={{ fontSize: "20px" }}>
+              Self Appraisal Form
+            </h2>
+            <p className="fusion-subtitle" style={{ marginBottom: "16px" }}>
+              Complete the required fields to submit your appraisal.
+            </p>
+            {submitSuccess && (
+              <div className="rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
+                {submitSuccess}
+              </div>
+            )}
+            {submitError && (
+              <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+                {submitError}
+              </div>
+            )}
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="fusion-section">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Basic Details
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Employee ID"
+                    name="employee_id"
+                    value={formData.employee_id}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.employee_id}
+                  />
+                  <FormField
+                    label="Employee Name"
+                    name="employee_name"
+                    value={formData.employee_name}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.employee_name}
+                  />
+                  <FormField
+                    label="Department"
+                    name="department"
+                    value={formData.department}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.department}
+                  />
+                  <FormField
+                    label="Designation"
+                    name="designation"
+                    value={formData.designation}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.designation}
+                  />
+                  <FormField
+                    label="Appraisal Year"
+                    name="appraisal_year"
+                    value={formData.appraisal_year}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.appraisal_year}
+                  />
+                </div>
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Self Assessment
+                </h3>
+                <TextAreaField
+                  label="Self Summary"
+                  name="self_summary"
+                  value={formData.self_summary}
+                  onChange={handleChange}
+                  required
+                  error={fieldErrors.self_summary}
+                />
+                <TextAreaField
+                  label="Key Responsibilities"
+                  name="key_responsibilities"
+                  value={formData.key_responsibilities}
+                  onChange={handleChange}
+                  required
+                  error={fieldErrors.key_responsibilities}
+                />
+                <TextAreaField
+                  label="Achievements"
+                  name="achievements"
+                  value={formData.achievements}
+                  onChange={handleChange}
+                  required
+                  error={fieldErrors.achievements}
+                />
+                <TextAreaField
+                  label="Challenges Faced"
+                  name="challenges_faced"
+                  value={formData.challenges_faced}
+                  onChange={handleChange}
+                />
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Performance Sections
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <TextAreaField
+                    label="Teaching Performance"
+                    name="teaching_performance"
+                    value={formData.teaching_performance}
+                    onChange={handleChange}
+                  />
+                  <TextAreaField
+                    label="Research Work"
+                    name="research_work"
+                    value={formData.research_work}
+                    onChange={handleChange}
+                  />
+                  <TextAreaField
+                    label="Publications"
+                    name="publications"
+                    value={formData.publications}
+                    onChange={handleChange}
+                  />
+                  <TextAreaField
+                    label="Projects Handled"
+                    name="projects_handled"
+                    value={formData.projects_handled}
+                    onChange={handleChange}
+                  />
+                  <TextAreaField
+                    label="Administrative Contributions"
+                    name="administrative_contributions"
+                    value={formData.administrative_contributions}
+                    onChange={handleChange}
+                  />
+                </div>
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Development
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <TextAreaField
+                    label="Trainings Attended"
+                    name="trainings_attended"
+                    value={formData.trainings_attended}
+                    onChange={handleChange}
+                  />
+                  <TextAreaField
+                    label="Certifications"
+                    name="certifications"
+                    value={formData.certifications}
+                    onChange={handleChange}
+                  />
+                  <TextAreaField
+                    label="Workshops"
+                    name="workshops"
+                    value={formData.workshops}
+                    onChange={handleChange}
+                  />
+                </div>
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Goals
+                </h3>
+                <TextAreaField
+                  label="Goals Achieved"
+                  name="goals_achieved"
+                  value={formData.goals_achieved}
+                  onChange={handleChange}
+                  required
+                  error={fieldErrors.goals_achieved}
+                />
+                <TextAreaField
+                  label="Future Goals"
+                  name="future_goals"
+                  value={formData.future_goals}
+                  onChange={handleChange}
+                  required
+                  error={fieldErrors.future_goals}
+                />
+                <FormField
+                  label="Supporting Documents (reference)"
+                  name="supporting_documents"
+                  value={formData.supporting_documents}
+                  onChange={handleChange}
+                />
+              </div>
+
+              <div className="flex justify-end space-x-3 mt-4">
+                <button
+                  type="button"
+                  onClick={() => setShowForm(false)}
+                  className="fusion-button-ghost"
+                >
+                  Cancel
+                </button>
+                <button type="submit" className="fusion-button-primary">
+                  Submit
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+export default AppraisalForm;
+
+AppraisalForm.propTypes = {
+  onBack: PropTypes.func.isRequired,
+};
diff --git a/src/Modules/HRModule/CPDAAdvance.jsx b/src/Modules/HRModule/CPDAAdvance.jsx
new file mode 100644
index 000000000..5019577eb
--- /dev/null
+++ b/src/Modules/HRModule/CPDAAdvance.jsx
@@ -0,0 +1,532 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import {
+  getCPDAAdvances,
+  createCPDAAdvance,
+  downloadCPDAAdvance,
+  withdrawCPDAAdvance,
+} from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+import FormField from "./components/FormField";
+import TextAreaField from "./components/TextAreaField";
+
+function CPDAAdvance({ onBack }) {
+  const [advances, setAdvances] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [submitError, setSubmitError] = useState("");
+  const [submitSuccess, setSubmitSuccess] = useState("");
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [formData, setFormData] = useState({
+    employee_id: "",
+    employee_name: "",
+    department: "",
+    designation: "",
+    event_name: "",
+    event_type: "",
+    organized_by: "",
+    venue: "",
+    start_date: "",
+    end_date: "",
+    registration_fee: "",
+    travel_expense: "",
+    accommodation_expense: "",
+    other_expenses: "",
+    total_amount: "",
+    purpose_of_attending: "",
+    benefits_to_institution: "",
+    invitation_letter: "",
+    receipts: "",
+    certificates: "",
+  });
+
+  const fetchData = async () => {
+    try {
+      const res = await getCPDAAdvances();
+      setAdvances(res.data);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+    if (fieldErrors[name]) {
+      setFieldErrors((prev) => ({ ...prev, [name]: "" }));
+    }
+  };
+
+  const parseServerErrors = (errors) => {
+    if (!errors || typeof errors !== "object") return {};
+    const next = {};
+    Object.entries(errors).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        next[key] = value.join(" ");
+      } else if (typeof value === "string") {
+        next[key] = value;
+      }
+    });
+    return next;
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitError("");
+    setSubmitSuccess("");
+    setFieldErrors({});
+    try {
+      const required = [
+        { key: "employee_id", label: "Employee ID" },
+        { key: "employee_name", label: "Employee Name" },
+        { key: "department", label: "Department" },
+        { key: "designation", label: "Designation" },
+        { key: "event_name", label: "Event Name" },
+        { key: "event_type", label: "Event Type" },
+        { key: "start_date", label: "Start Date" },
+        { key: "end_date", label: "End Date" },
+        { key: "total_amount", label: "Total Amount" },
+        { key: "purpose_of_attending", label: "Purpose of Attending" },
+        { key: "benefits_to_institution", label: "Benefits to Institution" },
+      ];
+      const missing = required
+        .filter((field) => !String(formData[field.key] || "").trim())
+        .map((field) => field.label);
+      if (missing.length > 0) {
+        const nextErrors = required.reduce((acc, field) => {
+          if (!String(formData[field.key] || "").trim()) {
+            acc[field.key] = "This field is required.";
+          }
+          return acc;
+        }, {});
+        setFieldErrors(nextErrors);
+        setSubmitError(`Please fill required fields: ${missing.join(", ")}`);
+        return;
+      }
+
+      if (formData.start_date && formData.end_date) {
+        if (formData.start_date > formData.end_date) {
+          setFieldErrors((prev) => ({
+            ...prev,
+            end_date: "End date must be on or after start date.",
+          }));
+          setSubmitError("End date must be on or after start date.");
+          return;
+        }
+      }
+
+      const numericFields = [
+        "registration_fee",
+        "travel_expense",
+        "accommodation_expense",
+        "other_expenses",
+        "total_amount",
+      ];
+      const hasInvalidAmount = numericFields.some((key) => {
+        if (String(formData[key] || "").trim()) {
+          const value = Number(formData[key]);
+          if (Number.isNaN(value) || value < 0) {
+            setFieldErrors((prev) => ({
+              ...prev,
+              [key]: "Amount must be a non-negative number.",
+            }));
+            setSubmitError("Amounts must be valid non-negative numbers.");
+            return true;
+          }
+        }
+        return false;
+      });
+      if (hasInvalidAmount) return;
+
+      await createCPDAAdvance(formData);
+      setSubmitSuccess("Your form is submitted.");
+      setShowForm(false);
+      setFieldErrors({});
+      fetchData();
+    } catch (err) {
+      const serverErrors = err?.response?.data;
+      const parsed = parseServerErrors(serverErrors);
+      const generalError =
+        parsed.error || parsed.detail || parsed.non_field_errors;
+      if (generalError) {
+        setSubmitError(generalError);
+        delete parsed.error;
+        delete parsed.detail;
+        delete parsed.non_field_errors;
+      }
+      if (Object.keys(parsed).length > 0) {
+        setFieldErrors(parsed);
+        if (!generalError) {
+          setSubmitError("Please correct the highlighted fields.");
+        }
+      } else {
+        setSubmitError(
+          "Submission failed. Please check the form fields and try again.",
+        );
+      }
+    }
+  };
+
+  const handleDownload = async (id) => {
+    try {
+      const res = await downloadCPDAAdvance(id);
+      const url = window.URL.createObjectURL(new Blob([res.data]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `cpda-advance-${id}.txt`;
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error(err);
+      window.alert("Unable to download CPDA advance.");
+    }
+  };
+
+  const handleWithdraw = async (id) => {
+    const confirm = window.confirm("Withdraw this CPDA advance request?");
+    if (!confirm) return;
+    const remarks =
+      window.prompt("Reason for withdrawal (optional):", "") || "";
+    try {
+      await withdrawCPDAAdvance(id, remarks);
+      fetchData();
+    } catch (err) {
+      console.error(err);
+      window.alert("Unable to withdraw CPDA advance.");
+    }
+  };
+
+  if (loading) return <LoadingSpinner />;
+  return (
+    <div className="fusion-page">
+      <div className="fusion-card">
+        <div className="fusion-actions">
+          <div>
+            <button
+              type="button"
+              onClick={onBack}
+              className="fusion-button-ghost"
+            >
+              Back to dashboard
+            </button>
+          </div>
+          <div>
+            <h1 className="fusion-heading">CPDA Advance Requests</h1>
+            <p className="fusion-subtitle">
+              Submit advances for conferences, workshops, and travel.
+            </p>
+          </div>
+          <button
+            onClick={() => setShowForm(true)}
+            className="fusion-button-primary"
+          >
+            New CPDA Advance
+          </button>
+        </div>
+      </div>
+
+      <div className="fusion-table-wrap">
+        <div className="fusion-filter-bar">
+          <span className="fusion-subtitle">{advances.length} records</span>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="fusion-table">
+            <thead>
+              <tr>
+                <th>Event</th>
+                <th>Type</th>
+                <th>Start Date</th>
+                <th>Total Amount</th>
+                <th>Download</th>
+                <th>Withdraw</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {advances.map((adv) => (
+                <tr key={adv.id}>
+                  <td>{adv.event_name || adv.purpose}</td>
+                  <td>{adv.event_type || "-"}</td>
+                  <td>{adv.start_date || adv.submission_date}</td>
+                  <td>₹{adv.total_amount || adv.amount_required}</td>
+                  <td>
+                    <button
+                      type="button"
+                      className="fusion-button-ghost"
+                      onClick={() => handleDownload(adv.id)}
+                    >
+                      Download
+                    </button>
+                  </td>
+                  <td>
+                    {(adv.approval_status || adv.status) === "PENDING" ? (
+                      <button
+                        type="button"
+                        className="fusion-button-ghost"
+                        onClick={() => handleWithdraw(adv.id)}
+                      >
+                        Withdraw
+                      </button>
+                    ) : (
+                      <span className="text-sm text-slate-500">-</span>
+                    )}
+                  </td>
+                  <td>
+                    <StatusBadge status={adv.approval_status || adv.status} />
+                  </td>
+                </tr>
+              ))}
+              {advances.length === 0 && (
+                <tr>
+                  <td
+                    colSpan="7"
+                    className="text-center"
+                    style={{ padding: "24px", color: "#94a3b8" }}
+                  >
+                    No CPDA advances submitted yet.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      {showForm && (
+        <div className="fusion-modal">
+          <div className="fusion-modal-card">
+            <h2 className="fusion-heading" style={{ fontSize: "20px" }}>
+              CPDA Advance Application
+            </h2>
+            <p className="fusion-subtitle" style={{ marginBottom: "16px" }}>
+              Complete the required fields to submit your CPDA request.
+            </p>
+            {submitSuccess && (
+              <div className="rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
+                {submitSuccess}
+              </div>
+            )}
+            {submitError && (
+              <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+                {submitError}
+              </div>
+            )}
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="fusion-section">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Basic Details
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Employee ID"
+                    name="employee_id"
+                    value={formData.employee_id}
+                    onChange={handleChange}
+                    required
+                  />
+                  <FormField
+                    label="Employee Name"
+                    name="employee_name"
+                    value={formData.employee_name}
+                    onChange={handleChange}
+                    required
+                  />
+                  <FormField
+                    label="Department"
+                    name="department"
+                    value={formData.department}
+                    onChange={handleChange}
+                    required
+                  />
+                  <FormField
+                    label="Designation"
+                    name="designation"
+                    value={formData.designation}
+                    onChange={handleChange}
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Event Details
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Event Name"
+                    name="event_name"
+                    value={formData.event_name}
+                    onChange={handleChange}
+                    required
+                  />
+                  <FormField
+                    label="Event Type"
+                    name="event_type"
+                    value={formData.event_type}
+                    onChange={handleChange}
+                    required
+                  />
+                  <FormField
+                    label="Organized By"
+                    name="organized_by"
+                    value={formData.organized_by}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Venue"
+                    name="venue"
+                    value={formData.venue}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Start Date"
+                    name="start_date"
+                    type="date"
+                    value={formData.start_date}
+                    onChange={handleChange}
+                    required
+                  />
+                  <FormField
+                    label="End Date"
+                    name="end_date"
+                    type="date"
+                    value={formData.end_date}
+                    onChange={handleChange}
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Expense Details
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Registration Fee"
+                    name="registration_fee"
+                    type="number"
+                    step="0.01"
+                    value={formData.registration_fee}
+                    onChange={handleChange}
+                    error={fieldErrors.registration_fee}
+                  />
+                  <FormField
+                    label="Travel Expense"
+                    name="travel_expense"
+                    type="number"
+                    step="0.01"
+                    value={formData.travel_expense}
+                    onChange={handleChange}
+                    error={fieldErrors.travel_expense}
+                  />
+                  <FormField
+                    label="Accommodation Expense"
+                    name="accommodation_expense"
+                    type="number"
+                    step="0.01"
+                    value={formData.accommodation_expense}
+                    onChange={handleChange}
+                    error={fieldErrors.accommodation_expense}
+                  />
+                  <FormField
+                    label="Other Expenses"
+                    name="other_expenses"
+                    type="number"
+                    step="0.01"
+                    value={formData.other_expenses}
+                    onChange={handleChange}
+                    error={fieldErrors.other_expenses}
+                  />
+                  <FormField
+                    label="Total Amount"
+                    name="total_amount"
+                    type="number"
+                    step="0.01"
+                    value={formData.total_amount}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.total_amount}
+                  />
+                </div>
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Purpose
+                </h3>
+                <TextAreaField
+                  label="Purpose of Attending"
+                  name="purpose_of_attending"
+                  value={formData.purpose_of_attending}
+                  onChange={handleChange}
+                  required
+                  error={fieldErrors.purpose_of_attending}
+                />
+                <TextAreaField
+                  label="Benefits to Institution"
+                  name="benefits_to_institution"
+                  value={formData.benefits_to_institution}
+                  onChange={handleChange}
+                  required
+                  error={fieldErrors.benefits_to_institution}
+                />
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Documents
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Invitation Letter (reference)"
+                    name="invitation_letter"
+                    value={formData.invitation_letter}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Receipts (reference)"
+                    name="receipts"
+                    value={formData.receipts}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Certificates (reference)"
+                    name="certificates"
+                    value={formData.certificates}
+                    onChange={handleChange}
+                  />
+                </div>
+              </div>
+
+              <div className="flex justify-end space-x-3 mt-4">
+                <button
+                  type="button"
+                  onClick={() => setShowForm(false)}
+                  className="fusion-button-ghost"
+                >
+                  Cancel
+                </button>
+                <button type="submit" className="fusion-button-primary">
+                  Submit
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+export default CPDAAdvance;
+
+CPDAAdvance.propTypes = {
+  onBack: PropTypes.func.isRequired,
+};
diff --git a/src/Modules/HRModule/CPDAReimbursement.jsx b/src/Modules/HRModule/CPDAReimbursement.jsx
new file mode 100644
index 000000000..0b6fb7458
--- /dev/null
+++ b/src/Modules/HRModule/CPDAReimbursement.jsx
@@ -0,0 +1,372 @@
+import React, { useState, useEffect } from "react";
+import { getCPDAReimbursements, createCPDAReimbursement } from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+import FormField from "./components/FormField";
+import TextAreaField from "./components/TextAreaField";
+
+function CPDAReimbursement() {
+  const [reimbursements, setReimbursements] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [submitError, setSubmitError] = useState("");
+  const [formData, setFormData] = useState({
+    employee_id: "",
+    employee_name: "",
+    department: "",
+    designation: "",
+    event_name: "",
+    event_type: "",
+    organized_by: "",
+    venue: "",
+    start_date: "",
+    end_date: "",
+    registration_fee: "",
+    travel_expense: "",
+    accommodation_expense: "",
+    other_expenses: "",
+    total_amount: "",
+    purpose_of_attending: "",
+    benefits_to_institution: "",
+    invitation_letter: "",
+    receipts: "",
+    certificates: "",
+  });
+
+  const fetchData = async () => {
+    try {
+      const res = await getCPDAReimbursements();
+      setReimbursements(res.data);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+  const handleChange = (e) =>
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitError("");
+    try {
+      const required = [
+        { key: "employee_id", label: "Employee ID" },
+        { key: "employee_name", label: "Employee Name" },
+        { key: "department", label: "Department" },
+        { key: "designation", label: "Designation" },
+        { key: "event_name", label: "Event Name" },
+        { key: "event_type", label: "Event Type" },
+        { key: "start_date", label: "Start Date" },
+        { key: "end_date", label: "End Date" },
+        { key: "total_amount", label: "Total Amount" },
+        { key: "purpose_of_attending", label: "Purpose of Attending" },
+        { key: "benefits_to_institution", label: "Benefits to Institution" },
+      ];
+      const missing = required
+        .filter((field) => !String(formData[field.key] || "").trim())
+        .map((field) => field.label);
+      if (missing.length > 0) {
+        setSubmitError(`Please fill required fields: ${missing.join(", ")}`);
+        return;
+      }
+
+      if (formData.start_date && formData.end_date) {
+        if (formData.start_date > formData.end_date) {
+          setSubmitError("End date must be on or after start date.");
+          return;
+        }
+      }
+
+      const numericFields = [
+        "registration_fee",
+        "travel_expense",
+        "accommodation_expense",
+        "other_expenses",
+        "total_amount",
+      ];
+      const hasInvalidAmount = numericFields.some((key) => {
+        if (String(formData[key] || "").trim()) {
+          const value = Number(formData[key]);
+          if (Number.isNaN(value) || value < 0) {
+            setSubmitError("Amounts must be valid non-negative numbers.");
+            return true;
+          }
+        }
+        return false;
+      });
+      if (hasInvalidAmount) return;
+
+      await createCPDAReimbursement(formData);
+      setShowForm(false);
+      fetchData();
+    } catch (error) {
+      console.error(error);
+      setSubmitError("Submission failed. Please check the form fields.");
+    }
+  };
+
+  if (loading) return <LoadingSpinner />;
+  return (
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">CPDA Reimbursement Requests</h1>
+        <button
+          onClick={() => setShowForm(true)}
+          className="bg-blue-600 text-white px-4 py-2 rounded"
+        >
+          New Reimbursement
+        </button>
+      </div>
+      <table className="min-w-full bg-white border">
+        <thead>
+          <tr className="bg-gray-100">
+            <th>Event</th>
+            <th>Type</th>
+            <th>Start Date</th>
+            <th>Total Amount</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {reimbursements.map((reim) => (
+            <tr key={reim.id}>
+              <td className="px-4 py-2 border">
+                {reim.event_name || reim.purpose}
+              </td>
+              <td className="px-4 py-2 border">{reim.event_type || "-"}</td>
+              <td className="px-4 py-2 border">
+                {reim.start_date || reim.submission_date}
+              </td>
+              <td className="px-4 py-2 border">
+                ₹{reim.total_amount || reim.advance_taken}
+              </td>
+              <td className="px-4 py-2 border">
+                <StatusBadge status={reim.approval_status || reim.status} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {showForm && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 overflow-y-auto">
+          <div className="bg-white rounded-lg max-w-2xl w-full p-6">
+            <h2 className="text-xl font-bold mb-1">
+              CPDA Reimbursement Application
+            </h2>
+            <p className="text-sm text-slate-500 mb-4">
+              Complete the required fields to submit your CPDA request.
+            </p>
+            {submitError && (
+              <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+                {submitError}
+              </div>
+            )}
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="rounded-lg border border-slate-200 bg-slate-50 p-4">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Basic Details
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Employee ID"
+                    name="employee_id"
+                    value={formData.employee_id}
+                    onChange={handleChange}
+                    required
+                  />
+                  <FormField
+                    label="Employee Name"
+                    name="employee_name"
+                    value={formData.employee_name}
+                    onChange={handleChange}
+                    required
+                  />
+                  <FormField
+                    label="Department"
+                    name="department"
+                    value={formData.department}
+                    onChange={handleChange}
+                    required
+                  />
+                  <FormField
+                    label="Designation"
+                    name="designation"
+                    value={formData.designation}
+                    onChange={handleChange}
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="rounded-lg border border-slate-200 bg-white p-4">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Event Details
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Event Name"
+                    name="event_name"
+                    value={formData.event_name}
+                    onChange={handleChange}
+                    required
+                  />
+                  <FormField
+                    label="Event Type"
+                    name="event_type"
+                    value={formData.event_type}
+                    onChange={handleChange}
+                    required
+                  />
+                  <FormField
+                    label="Organized By"
+                    name="organized_by"
+                    value={formData.organized_by}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Venue"
+                    name="venue"
+                    value={formData.venue}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Start Date"
+                    name="start_date"
+                    type="date"
+                    value={formData.start_date}
+                    onChange={handleChange}
+                    required
+                  />
+                  <FormField
+                    label="End Date"
+                    name="end_date"
+                    type="date"
+                    value={formData.end_date}
+                    onChange={handleChange}
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="rounded-lg border border-slate-200 bg-white p-4">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Expense Details
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Registration Fee"
+                    name="registration_fee"
+                    type="number"
+                    step="0.01"
+                    value={formData.registration_fee}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Travel Expense"
+                    name="travel_expense"
+                    type="number"
+                    step="0.01"
+                    value={formData.travel_expense}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Accommodation Expense"
+                    name="accommodation_expense"
+                    type="number"
+                    step="0.01"
+                    value={formData.accommodation_expense}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Other Expenses"
+                    name="other_expenses"
+                    type="number"
+                    step="0.01"
+                    value={formData.other_expenses}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Total Amount"
+                    name="total_amount"
+                    type="number"
+                    step="0.01"
+                    value={formData.total_amount}
+                    onChange={handleChange}
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="rounded-lg border border-slate-200 bg-white p-4">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Purpose
+                </h3>
+                <TextAreaField
+                  label="Purpose of Attending"
+                  name="purpose_of_attending"
+                  value={formData.purpose_of_attending}
+                  onChange={handleChange}
+                  required
+                />
+                <TextAreaField
+                  label="Benefits to Institution"
+                  name="benefits_to_institution"
+                  value={formData.benefits_to_institution}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+
+              <div className="rounded-lg border border-slate-200 bg-white p-4">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Documents
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Invitation Letter (reference)"
+                    name="invitation_letter"
+                    value={formData.invitation_letter}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Receipts (reference)"
+                    name="receipts"
+                    value={formData.receipts}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Certificates (reference)"
+                    name="certificates"
+                    value={formData.certificates}
+                    onChange={handleChange}
+                  />
+                </div>
+              </div>
+
+              <div className="flex justify-end space-x-3 mt-4">
+                <button
+                  type="button"
+                  onClick={() => setShowForm(false)}
+                  className="px-4 py-2 border rounded"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-blue-600 text-white rounded"
+                >
+                  Submit
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+export default CPDAReimbursement;
diff --git a/src/Modules/HRModule/DirectorAppraisalReviews.jsx b/src/Modules/HRModule/DirectorAppraisalReviews.jsx
new file mode 100644
index 000000000..ebbd5c2f4
--- /dev/null
+++ b/src/Modules/HRModule/DirectorAppraisalReviews.jsx
@@ -0,0 +1,125 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { getAppraisalForms, reviewAppraisalForm } from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+
+function DirectorAppraisalReviews() {
+  const [loading, setLoading] = useState(true);
+  const [appraisals, setAppraisals] = useState([]);
+  const [actionLoading, setActionLoading] = useState(null);
+
+  useEffect(() => {
+    const fetchAppraisals = async () => {
+      try {
+        const res = await getAppraisalForms();
+        setAppraisals(res?.data ?? []);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchAppraisals();
+  }, []);
+
+  const reviewQueue = useMemo(
+    () =>
+      appraisals.filter((item) =>
+        ["PENDING", "REVIEWED"].includes((item.status || "").toUpperCase()),
+      ),
+    [appraisals],
+  );
+
+  const handleDecision = async (appraisalId, action) => {
+    const remarks = window.prompt("Add director remarks (optional):", "") || "";
+    const rating = window.prompt("Rating (optional):", "") || "";
+    try {
+      setActionLoading(appraisalId);
+      await reviewAppraisalForm(appraisalId, { action, remarks, rating });
+      const res = await getAppraisalForms();
+      setAppraisals(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-bold">Director Appraisal Reviews</h1>
+        <p className="text-sm text-slate-500">
+          Review appraisals assigned by HR or forwarded by HODs.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Department</th>
+              <th className="px-4 py-3 font-semibold">Appraisal Year</th>
+              <th className="px-4 py-3 font-semibold">Status</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {reviewQueue.map((appraisal) => (
+              <tr key={appraisal.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {appraisal.employee_name || appraisal.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {appraisal.department || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {appraisal.appraisal_year || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <StatusBadge status={appraisal.status} />
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(appraisal.id, "approve")}
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === appraisal.id}
+                    >
+                      Approve
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(appraisal.id, "reject")}
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === appraisal.id}
+                    >
+                      Reject
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {reviewQueue.length === 0 && (
+              <tr>
+                <td
+                  colSpan="5"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No reviewed appraisals right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default DirectorAppraisalReviews;
diff --git a/src/Modules/HRModule/DirectorCpdaApprovals.jsx b/src/Modules/HRModule/DirectorCpdaApprovals.jsx
new file mode 100644
index 000000000..398293029
--- /dev/null
+++ b/src/Modules/HRModule/DirectorCpdaApprovals.jsx
@@ -0,0 +1,122 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { getCPDAAdvances, approveRejectCPDAAdvance } from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+
+function DirectorCpdaApprovals() {
+  const [loading, setLoading] = useState(true);
+  const [advances, setAdvances] = useState([]);
+  const [actionLoading, setActionLoading] = useState(null);
+
+  useEffect(() => {
+    const fetchAdvances = async () => {
+      try {
+        const res = await getCPDAAdvances();
+        setAdvances(res?.data ?? []);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchAdvances();
+  }, []);
+
+  const pendingAdvances = useMemo(() => advances, [advances]);
+
+  const handleDecision = async (cpdaId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(cpdaId);
+      await approveRejectCPDAAdvance(cpdaId, decision, remarks);
+      const res = await getCPDAAdvances();
+      setAdvances(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-bold">Director CPDA Approvals</h1>
+        <p className="text-sm text-slate-500">
+          Review CPDA requests forwarded by HR admin.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Event</th>
+              <th className="px-4 py-3 font-semibold">Start Date</th>
+              <th className="px-4 py-3 font-semibold">Total Amount</th>
+              <th className="px-4 py-3 font-semibold">Status</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pendingAdvances.map((adv) => (
+              <tr key={adv.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {adv.employee_name || adv.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {adv.event_name || adv.purpose || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {adv.start_date || adv.submission_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  ₹{adv.total_amount || adv.amount_required}
+                </td>
+                <td className="px-4 py-3">
+                  <StatusBadge status={adv.approval_status || adv.status} />
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(adv.id, "approve")}
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === adv.id}
+                    >
+                      Send to accountant
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(adv.id, "reject")}
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === adv.id}
+                    >
+                      Reject
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {pendingAdvances.length === 0 && (
+              <tr>
+                <td
+                  colSpan="6"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No pending CPDA requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default DirectorCpdaApprovals;
diff --git a/src/Modules/HRModule/DirectorLeaveApprovals.jsx b/src/Modules/HRModule/DirectorLeaveApprovals.jsx
new file mode 100644
index 000000000..89c30f6bb
--- /dev/null
+++ b/src/Modules/HRModule/DirectorLeaveApprovals.jsx
@@ -0,0 +1,365 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  getLeaveApplications,
+  approveRejectLeave,
+  decideLeaveCancellation,
+  decideLeaveExtension,
+} from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+
+function DirectorLeaveApprovals() {
+  const [loading, setLoading] = useState(true);
+  const [leaves, setLeaves] = useState([]);
+  const [actionLoading, setActionLoading] = useState(null);
+
+  useEffect(() => {
+    const fetchLeaves = async () => {
+      try {
+        const res = await getLeaveApplications();
+        setLeaves(res?.data ?? []);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLeaves();
+  }, []);
+
+  const pendingLeaves = useMemo(
+    () =>
+      leaves.filter(
+        (item) =>
+          (item.approval_status || item.status || "").toUpperCase() ===
+          "FORWARDED",
+      ),
+    [leaves],
+  );
+
+  const cancelRequests = useMemo(
+    () =>
+      leaves.filter(
+        (item) =>
+          (item.cancel_status || "").toUpperCase() === "REQUESTED" &&
+          (item.cancel_current_approver_role || "").toUpperCase() ===
+            "DIRECTOR",
+      ),
+    [leaves],
+  );
+
+  const extensionRequests = useMemo(
+    () =>
+      leaves.filter(
+        (item) =>
+          (item.extension_status || "").toUpperCase() === "REQUESTED" &&
+          (item.extension_current_approver_role || "").toUpperCase() ===
+            "DIRECTOR",
+      ),
+    [leaves],
+  );
+
+  const handleDecision = async (leaveId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(leaveId);
+      await approveRejectLeave(leaveId, decision, remarks);
+      const res = await getLeaveApplications();
+      setLeaves(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleCancelDecision = async (leaveId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(leaveId);
+      await decideLeaveCancellation(leaveId, decision, remarks);
+      const res = await getLeaveApplications();
+      setLeaves(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleExtensionDecision = async (leaveId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(leaveId);
+      await decideLeaveExtension(leaveId, decision, remarks);
+      const res = await getLeaveApplications();
+      setLeaves(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-bold">Director Leave Approvals</h1>
+        <p className="text-sm text-slate-500">
+          Review leave requests forwarded by HODs.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Department</th>
+              <th className="px-4 py-3 font-semibold">Leave Type</th>
+              <th className="px-4 py-3 font-semibold">From</th>
+              <th className="px-4 py-3 font-semibold">To</th>
+              <th className="px-4 py-3 font-semibold">Status</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pendingLeaves.map((leave) => (
+              <tr key={leave.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {leave.employee_name || leave.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.department || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.leave_type || leave.leave_type_name || "Leave request"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.start_date || leave.from_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.end_date || leave.to_date || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <StatusBadge status={leave.approval_status || leave.status} />
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(leave.id, "approve")}
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Approve
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(leave.id, "reject")}
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Reject
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {pendingLeaves.length === 0 && (
+              <tr>
+                <td
+                  colSpan="7"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No forwarded leave requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <h2 className="text-lg font-semibold">Cancellation requests</h2>
+        <p className="text-sm text-slate-500">
+          Review approved leave cancellations routed to you.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Department</th>
+              <th className="px-4 py-3 font-semibold">Leave Type</th>
+              <th className="px-4 py-3 font-semibold">From</th>
+              <th className="px-4 py-3 font-semibold">To</th>
+              <th className="px-4 py-3 font-semibold">Requested by</th>
+              <th className="px-4 py-3 font-semibold">Reason</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {cancelRequests.map((leave) => (
+              <tr key={leave.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {leave.employee_name || leave.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.department || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.leave_type || leave.leave_type_name || "Leave request"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.start_date || leave.from_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.end_date || leave.to_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.cancel_requested_by_role || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.cancel_reason || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleCancelDecision(leave.id, "approve")}
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Approve cancel
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleCancelDecision(leave.id, "reject")}
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Reject cancel
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {cancelRequests.length === 0 && (
+              <tr>
+                <td
+                  colSpan="8"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No cancellation requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <h2 className="text-lg font-semibold">Extension requests</h2>
+        <p className="text-sm text-slate-500">
+          Review approved leave extensions routed to you.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Department</th>
+              <th className="px-4 py-3 font-semibold">Leave Type</th>
+              <th className="px-4 py-3 font-semibold">From</th>
+              <th className="px-4 py-3 font-semibold">To</th>
+              <th className="px-4 py-3 font-semibold">New end</th>
+              <th className="px-4 py-3 font-semibold">New days</th>
+              <th className="px-4 py-3 font-semibold">Requested by</th>
+              <th className="px-4 py-3 font-semibold">Reason</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {extensionRequests.map((leave) => (
+              <tr key={leave.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {leave.employee_name || leave.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.department || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.leave_type || leave.leave_type_name || "Leave request"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.start_date || leave.from_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.end_date || leave.to_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.extension_new_end_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.extension_new_total_days || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.extension_requested_by_role || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.extension_reason || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() =>
+                        handleExtensionDecision(leave.id, "approve")
+                      }
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Approve extension
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        handleExtensionDecision(leave.id, "reject")
+                      }
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Reject extension
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {extensionRequests.length === 0 && (
+              <tr>
+                <td
+                  colSpan="10"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No extension requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default DirectorLeaveApprovals;
diff --git a/src/Modules/HRModule/EmployeeDashboard.jsx b/src/Modules/HRModule/EmployeeDashboard.jsx
new file mode 100644
index 000000000..a08f02618
--- /dev/null
+++ b/src/Modules/HRModule/EmployeeDashboard.jsx
@@ -0,0 +1,222 @@
+import React, { useEffect, useMemo, useState } from "react";
+import PropTypes from "prop-types";
+import { ClockCounterClockwise } from "@phosphor-icons/react";
+import {
+  getLeaveApplications,
+  getLeaveBalance,
+  getAppraisalForms,
+  getLTCApplications,
+  getCPDAAdvances,
+} from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+
+function EmployeeDashboard({ onOpenTab }) {
+  const [loading, setLoading] = useState(true);
+  const [leaveApplications, setLeaveApplications] = useState([]);
+  const [appraisals, setAppraisals] = useState([]);
+  const [ltcApplications, setLtcApplications] = useState([]);
+  const [cpdaAdvances, setCpdaAdvances] = useState([]);
+  const [leaveBalance, setLeaveBalance] = useState([]);
+
+  useEffect(() => {
+    const fetchAll = async () => {
+      try {
+        const [leaveRes, balanceRes, appraisalRes, ltcRes, cpdaAdvanceRes] =
+          await Promise.all([
+            getLeaveApplications(),
+            getLeaveBalance(),
+            getAppraisalForms(),
+            getLTCApplications(),
+            getCPDAAdvances(),
+          ]);
+        setLeaveApplications(leaveRes.data || []);
+        setLeaveBalance(balanceRes.data || []);
+        setAppraisals(appraisalRes.data || []);
+        setLtcApplications(ltcRes.data || []);
+        setCpdaAdvances(cpdaAdvanceRes.data || []);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchAll();
+  }, []);
+
+  const quickActions = [];
+
+  const historyItems = useMemo(() => {
+    const toDateValue = (value) => {
+      if (!value) return 0;
+      const parsed = Date.parse(value);
+      return Number.isNaN(parsed) ? 0 : parsed;
+    };
+
+    const leaveHistory = leaveApplications.map((item) => ({
+      id: `leave-${item.id}`,
+      type: "Leave",
+      title: item.leave_type || item.leave_type_name || "Leave request",
+      dateLabel: item.start_date || item.from_date || "",
+      dateValue: toDateValue(item.start_date || item.from_date),
+      status: item.approval_status || item.status,
+    }));
+
+    const appraisalHistory = appraisals.map((item) => ({
+      id: `appraisal-${item.id}`,
+      type: "Appraisal",
+      title: item.appraisal_year
+        ? `Appraisal ${item.appraisal_year}`
+        : "Self appraisal",
+      dateLabel: item.applied_date || item.submission_date || "",
+      dateValue: toDateValue(item.applied_date || item.submission_date),
+      status: item.status,
+    }));
+
+    const ltcHistory = ltcApplications.map((item) => ({
+      id: `ltc-${item.id}`,
+      type: "LTC",
+      title: item.ltc_block_year
+        ? `Block year ${item.ltc_block_year}`
+        : "LTC request",
+      dateLabel: item.travel_start_date || item.leave_start_date || "",
+      dateValue: toDateValue(item.travel_start_date || item.leave_start_date),
+      status: item.approval_status || item.status,
+    }));
+
+    const cpdaAdvanceHistory = cpdaAdvances.map((item) => ({
+      id: `cpda-advance-${item.id}`,
+      type: "CPDA Advance",
+      title: item.event_name || "CPDA request",
+      dateLabel: item.applied_date || item.submission_date || "",
+      dateValue: toDateValue(item.applied_date || item.submission_date),
+      status: item.approval_status || item.status,
+    }));
+
+    return [
+      ...leaveHistory,
+      ...appraisalHistory,
+      ...ltcHistory,
+      ...cpdaAdvanceHistory,
+    ]
+      .sort((a, b) => b.dateValue - a.dateValue)
+      .slice(0, 8);
+  }, [leaveApplications, appraisals, ltcApplications, cpdaAdvances]);
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="fusion-page">
+      <div className="fusion-card">
+        <h1 className="fusion-heading">Employee Dashboard</h1>
+      </div>
+
+      {leaveBalance.length > 0 && (
+        <div className="fusion-card">
+          <h2 className="fusion-heading" style={{ fontSize: "18px" }}>
+            Leave balance
+          </h2>
+          <p className="fusion-subtitle">Live balance by leave type</p>
+          <div className="fusion-balance-grid">
+            {leaveBalance.map((item) => (
+              <div key={item.leave_type} className="fusion-balance-card">
+                <p className="fusion-balance-label">{item.leave_type_name}</p>
+                <p className="fusion-balance-value">{item.current_balance}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {quickActions.length > 0 && (
+        <div className="fusion-grid">
+          {quickActions.map((action) => (
+            <button
+              key={action.value}
+              type="button"
+              onClick={() => onOpenTab(action.value)}
+              className="fusion-card"
+            >
+              <div className="flex items-center gap-3 text-slate-900">
+                <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-50 text-blue-600">
+                  {action.icon}
+                </span>
+                <div>
+                  <p className="text-lg font-semibold">{action.title}</p>
+                  <p className="text-sm text-slate-600">{action.description}</p>
+                </div>
+              </div>
+              <p className="mt-4 text-sm font-semibold text-blue-600">
+                {action.cta}
+              </p>
+              <span
+                className={
+                  action.submitted
+                    ? "mt-2 inline-flex w-fit rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700"
+                    : "mt-2 inline-flex w-fit rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700"
+                }
+              >
+                {action.submitted ? "Submitted" : "Not submitted"}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="fusion-table-wrap">
+        <div className="fusion-filter-bar">
+          <div className="flex items-center gap-2 text-slate-900">
+            <ClockCounterClockwise size={20} className="text-blue-600" />
+            <h2 className="fusion-heading" style={{ fontSize: "18px" }}>
+              Recent request history
+            </h2>
+          </div>
+          <p className="fusion-subtitle">
+            Latest updates across leave, appraisal, LTC, and CPDA workflows.
+          </p>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="fusion-table">
+            <thead>
+              <tr>
+                <th>Type</th>
+                <th>Details</th>
+                <th>Date</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {historyItems.map((item) => (
+                <tr key={item.id}>
+                  <td>{item.type}</td>
+                  <td>{item.title}</td>
+                  <td>{item.dateLabel || "-"}</td>
+                  <td>
+                    <StatusBadge status={item.status} />
+                  </td>
+                </tr>
+              ))}
+              {historyItems.length === 0 && (
+                <tr>
+                  <td
+                    colSpan="4"
+                    className="text-center"
+                    style={{ padding: "24px", color: "#94a3b8" }}
+                  >
+                    No recent requests yet.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default EmployeeDashboard;
+
+EmployeeDashboard.propTypes = {
+  onOpenTab: PropTypes.func.isRequired,
+};
diff --git a/src/Modules/HRModule/HodAppraisalReviews.jsx b/src/Modules/HRModule/HodAppraisalReviews.jsx
new file mode 100644
index 000000000..b1b9707db
--- /dev/null
+++ b/src/Modules/HRModule/HodAppraisalReviews.jsx
@@ -0,0 +1,137 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { getAppraisalForms, reviewAppraisalForm } from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+
+function HodAppraisalReviews() {
+  const [loading, setLoading] = useState(true);
+  const [appraisals, setAppraisals] = useState([]);
+  const [actionLoading, setActionLoading] = useState(null);
+
+  useEffect(() => {
+    const fetchAppraisals = async () => {
+      try {
+        const res = await getAppraisalForms();
+        setAppraisals(res?.data ?? []);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchAppraisals();
+  }, []);
+
+  const handleDecision = async (appraisalId, action) => {
+    const remarks = window.prompt("Add reviewer remarks (optional):", "") || "";
+    const rating = window.prompt("Rating (optional):", "") || "";
+    if ((action === "forward" || action === "approve") && !remarks.trim()) {
+      window.alert("Reviewer remarks are required for this action.");
+      return;
+    }
+    try {
+      setActionLoading(appraisalId);
+      await reviewAppraisalForm(appraisalId, { action, remarks, rating });
+      const res = await getAppraisalForms();
+      setAppraisals(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const pendingAppraisals = useMemo(
+    () =>
+      appraisals.filter(
+        (item) => (item.status || "").toUpperCase() === "PENDING",
+      ),
+    [appraisals],
+  );
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-bold">HOD Appraisal Reviews</h1>
+        <p className="text-sm text-slate-500">
+          Review pending self-appraisals and add reviewer feedback.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Department</th>
+              <th className="px-4 py-3 font-semibold">Appraisal Year</th>
+              <th className="px-4 py-3 font-semibold">Status</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pendingAppraisals.map((appraisal) => (
+              <tr key={appraisal.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {appraisal.employee_name || appraisal.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {appraisal.department || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {appraisal.appraisal_year || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <StatusBadge status={appraisal.status} />
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(appraisal.id, "review")}
+                      className="rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === appraisal.id}
+                    >
+                      Mark reviewed
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(appraisal.id, "forward")}
+                      className="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === appraisal.id}
+                    >
+                      Send to director
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(appraisal.id, "approve")}
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === appraisal.id}
+                    >
+                      Approve
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {pendingAppraisals.length === 0 && (
+              <tr>
+                <td
+                  colSpan="4"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No pending appraisals right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default HodAppraisalReviews;
diff --git a/src/Modules/HRModule/HodLeaveApprovals.jsx b/src/Modules/HRModule/HodLeaveApprovals.jsx
new file mode 100644
index 000000000..38335023a
--- /dev/null
+++ b/src/Modules/HRModule/HodLeaveApprovals.jsx
@@ -0,0 +1,563 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  getLeaveApplications,
+  approveRejectLeave,
+  requestLeaveDocument,
+  decideLeaveCancellation,
+  decideLeaveExtension,
+  decideLeaveResumption,
+} from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+
+function HodLeaveApprovals() {
+  const [loading, setLoading] = useState(true);
+  const [leaves, setLeaves] = useState([]);
+  const [actionLoading, setActionLoading] = useState(null);
+
+  useEffect(() => {
+    const fetchLeaves = async () => {
+      try {
+        const res = await getLeaveApplications();
+        setLeaves(res?.data ?? []);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLeaves();
+  }, []);
+
+  const handleDecision = async (leaveId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(leaveId);
+      await approveRejectLeave(leaveId, decision, remarks);
+      const res = await getLeaveApplications();
+      setLeaves(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleDocumentRequest = async (leaveId) => {
+    const message = (window.prompt("Which document do you need?") || "").trim();
+    if (!message) {
+      return;
+    }
+    try {
+      setActionLoading(leaveId);
+      await requestLeaveDocument(leaveId, message);
+      const res = await getLeaveApplications();
+      setLeaves(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      const errorMessage =
+        error?.response?.data?.error ||
+        "Unable to request document. Please try again.";
+      window.alert(errorMessage);
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleCancelDecision = async (leaveId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(leaveId);
+      await decideLeaveCancellation(leaveId, decision, remarks);
+      const res = await getLeaveApplications();
+      setLeaves(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleExtensionDecision = async (leaveId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(leaveId);
+      await decideLeaveExtension(leaveId, decision, remarks);
+      const res = await getLeaveApplications();
+      setLeaves(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleResumptionDecision = async (leaveId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(leaveId);
+      await decideLeaveResumption(leaveId, decision, remarks);
+      const res = await getLeaveApplications();
+      setLeaves(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const pendingLeaves = useMemo(
+    () =>
+      leaves.filter(
+        (item) =>
+          (item.approval_status || item.status || "").toUpperCase() ===
+          "PENDING",
+      ),
+    [leaves],
+  );
+
+  const cancelRequests = useMemo(
+    () =>
+      leaves.filter(
+        (item) =>
+          (item.cancel_status || "").toUpperCase() === "REQUESTED" &&
+          (item.cancel_current_approver_role || "").toUpperCase() === "HOD",
+      ),
+    [leaves],
+  );
+
+  const extensionRequests = useMemo(
+    () =>
+      leaves.filter(
+        (item) =>
+          (item.extension_status || "").toUpperCase() === "REQUESTED" &&
+          (item.extension_current_approver_role || "").toUpperCase() === "HOD",
+      ),
+    [leaves],
+  );
+
+  const resumptionRequests = useMemo(
+    () =>
+      leaves.filter(
+        (item) =>
+          (item.resumption_status || "").toUpperCase() === "SUBMITTED" &&
+          (item.resumption_current_approver_role || "").toUpperCase() === "HOD",
+      ),
+    [leaves],
+  );
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-bold">HOD Leave Approvals</h1>
+        <p className="text-sm text-slate-500">
+          Review pending leave requests submitted under your department.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Department</th>
+              <th className="px-4 py-3 font-semibold">Leave Type</th>
+              <th className="px-4 py-3 font-semibold">From</th>
+              <th className="px-4 py-3 font-semibold">To</th>
+              <th className="px-4 py-3 font-semibold">Nominee</th>
+              <th className="px-4 py-3 font-semibold">Nominee decision</th>
+              <th className="px-4 py-3 font-semibold">Document request</th>
+              <th className="px-4 py-3 font-semibold">Document submitted</th>
+              <th className="px-4 py-3 font-semibold">Status</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pendingLeaves.map((leave) => {
+              const isClRhLeave = ["Casual", "Restricted"].includes(
+                leave.leave_type || leave.leave_type_name || "",
+              );
+              return (
+                <tr key={leave.id} className="border-t border-slate-100">
+                  <td className="px-4 py-3 text-slate-900">
+                    {leave.employee_name || leave.employee || "Employee"}
+                  </td>
+                  <td className="px-4 py-3 text-slate-700">
+                    {leave.department || "-"}
+                  </td>
+                  <td className="px-4 py-3 text-slate-700">
+                    {leave.leave_type ||
+                      leave.leave_type_name ||
+                      "Leave request"}
+                  </td>
+                  <td className="px-4 py-3 text-slate-700">
+                    {leave.start_date || leave.from_date || "-"}
+                  </td>
+                  <td className="px-4 py-3 text-slate-700">
+                    {leave.end_date || leave.to_date || "-"}
+                  </td>
+                  <td className="px-4 py-3 text-slate-700">
+                    {leave.handover_to
+                      ? `${leave.handover_to}${leave.nominee_employee_name ? ` (${leave.nominee_employee_name})` : ""}`
+                      : "-"}
+                  </td>
+                  <td className="px-4 py-3 text-slate-700">
+                    {leave.handover_to
+                      ? leave.nominee_status === "ACCEPTED"
+                        ? "Accepted by nominee"
+                        : leave.nominee_status === "DECLINED"
+                          ? "Not accepted by nominee"
+                          : "Pending nominee response"
+                      : "Not required"}
+                  </td>
+                  <td className="px-4 py-3 text-slate-700">
+                    {leave.document_request_status === "REQUESTED"
+                      ? `Requested: ${leave.document_request_message}`
+                      : leave.document_request_status === "SUBMITTED"
+                        ? "Submitted"
+                        : "Not requested"}
+                  </td>
+                  <td className="px-4 py-3 text-slate-700">
+                    {leave.document_request_status === "SUBMITTED"
+                      ? leave.document_submission || "Submitted"
+                      : "-"}
+                  </td>
+                  <td className="px-4 py-3">
+                    <StatusBadge
+                      status={leave.approval_status || leave.status}
+                    />
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex flex-wrap gap-2">
+                      {leave.document_request_status !== "REQUESTED" && (
+                        <>
+                          {isClRhLeave && (
+                            <button
+                              type="button"
+                              onClick={() =>
+                                handleDecision(leave.id, "approve")
+                              }
+                              className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                              disabled={actionLoading === leave.id}
+                            >
+                              Approve
+                            </button>
+                          )}
+                          {!isClRhLeave && (
+                            <button
+                              type="button"
+                              onClick={() =>
+                                handleDecision(leave.id, "forward")
+                              }
+                              className="rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white"
+                              disabled={actionLoading === leave.id}
+                            >
+                              Send to director
+                            </button>
+                          )}
+                          <button
+                            type="button"
+                            onClick={() => handleDecision(leave.id, "reject")}
+                            className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                            disabled={actionLoading === leave.id}
+                          >
+                            Reject
+                          </button>
+                        </>
+                      )}
+                      <button
+                        type="button"
+                        onClick={() => handleDocumentRequest(leave.id)}
+                        className="rounded-lg bg-amber-600 px-3 py-1.5 text-xs font-semibold text-white"
+                        disabled={actionLoading === leave.id}
+                      >
+                        Request document
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+            {pendingLeaves.length === 0 && (
+              <tr>
+                <td
+                  colSpan="11"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No pending leave requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <h2 className="text-lg font-semibold">Cancellation requests</h2>
+        <p className="text-sm text-slate-500">
+          Review approved leave cancellations routed to you.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Department</th>
+              <th className="px-4 py-3 font-semibold">Leave Type</th>
+              <th className="px-4 py-3 font-semibold">From</th>
+              <th className="px-4 py-3 font-semibold">To</th>
+              <th className="px-4 py-3 font-semibold">Requested by</th>
+              <th className="px-4 py-3 font-semibold">Reason</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {cancelRequests.map((leave) => (
+              <tr key={leave.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {leave.employee_name || leave.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.department || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.leave_type || leave.leave_type_name || "Leave request"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.start_date || leave.from_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.end_date || leave.to_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.cancel_requested_by_role || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.cancel_reason || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleCancelDecision(leave.id, "approve")}
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Approve cancel
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleCancelDecision(leave.id, "reject")}
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Reject cancel
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {cancelRequests.length === 0 && (
+              <tr>
+                <td
+                  colSpan="8"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No cancellation requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <h2 className="text-lg font-semibold">Resumption requests</h2>
+        <p className="text-sm text-slate-500">
+          Review leave resumption forms awaiting your approval.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Department</th>
+              <th className="px-4 py-3 font-semibold">Leave Type</th>
+              <th className="px-4 py-3 font-semibold">From</th>
+              <th className="px-4 py-3 font-semibold">To</th>
+              <th className="px-4 py-3 font-semibold">Resumption date</th>
+              <th className="px-4 py-3 font-semibold">Reason</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {resumptionRequests.map((leave) => (
+              <tr key={leave.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {leave.employee_name || leave.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.department || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.leave_type || leave.leave_type_name || "Leave request"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.start_date || leave.from_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.end_date || leave.to_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.resumption_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.resumption_reason || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() =>
+                        handleResumptionDecision(leave.id, "approve")
+                      }
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Approve
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        handleResumptionDecision(leave.id, "reject")
+                      }
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Reject
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {resumptionRequests.length === 0 && (
+              <tr>
+                <td
+                  colSpan="8"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No resumption requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <h2 className="text-lg font-semibold">Extension requests</h2>
+        <p className="text-sm text-slate-500">
+          Review approved leave extensions routed to you.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Department</th>
+              <th className="px-4 py-3 font-semibold">Leave Type</th>
+              <th className="px-4 py-3 font-semibold">From</th>
+              <th className="px-4 py-3 font-semibold">To</th>
+              <th className="px-4 py-3 font-semibold">New end</th>
+              <th className="px-4 py-3 font-semibold">New days</th>
+              <th className="px-4 py-3 font-semibold">Requested by</th>
+              <th className="px-4 py-3 font-semibold">Reason</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {extensionRequests.map((leave) => (
+              <tr key={leave.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {leave.employee_name || leave.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.department || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.leave_type || leave.leave_type_name || "Leave request"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.start_date || leave.from_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.end_date || leave.to_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.extension_new_end_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.extension_new_total_days || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.extension_requested_by_role || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.extension_reason || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() =>
+                        handleExtensionDecision(leave.id, "approve")
+                      }
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Approve extension
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        handleExtensionDecision(leave.id, "reject")
+                      }
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Reject extension
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {extensionRequests.length === 0 && (
+              <tr>
+                <td
+                  colSpan="10"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No extension requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default HodLeaveApprovals;
diff --git a/src/Modules/HRModule/HrAdminAppraisalAssignments.jsx b/src/Modules/HRModule/HrAdminAppraisalAssignments.jsx
new file mode 100644
index 000000000..615a63cda
--- /dev/null
+++ b/src/Modules/HRModule/HrAdminAppraisalAssignments.jsx
@@ -0,0 +1,125 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { assignAppraisalForm, getAppraisalForms } from "./api";
+import LoadingSpinner from "./components/LoadingSpinner";
+import StatusBadge from "./components/StatusBadge";
+
+const ASSIGNMENT_OPTIONS = [
+  { value: "HOD", label: "Assign to HOD" },
+  { value: "DIRECTOR", label: "Assign to Director" },
+];
+
+function HrAdminAppraisalAssignments() {
+  const [loading, setLoading] = useState(true);
+  const [appraisals, setAppraisals] = useState([]);
+  const [actionLoading, setActionLoading] = useState(null);
+
+  const fetchAppraisals = async () => {
+    try {
+      const res = await getAppraisalForms();
+      setAppraisals(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchAppraisals();
+  }, []);
+
+  const pendingUnassigned = useMemo(
+    () =>
+      appraisals.filter(
+        (item) =>
+          (item.status || "").toUpperCase() === "PENDING" &&
+          !String(item.assigned_reviewer_role || "").trim(),
+      ),
+    [appraisals],
+  );
+
+  const handleAssign = async (appraisalId, role) => {
+    try {
+      setActionLoading(appraisalId);
+      await assignAppraisalForm(appraisalId, { role });
+      await fetchAppraisals();
+    } catch (error) {
+      console.error(error);
+      window.alert("Assignment failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-bold">Appraisal Assignment</h1>
+        <p className="text-sm text-slate-500">
+          Assign pending appraisals to HODs or the Director.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Department</th>
+              <th className="px-4 py-3 font-semibold">Appraisal Year</th>
+              <th className="px-4 py-3 font-semibold">Status</th>
+              <th className="px-4 py-3 font-semibold">Assign</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pendingUnassigned.map((appraisal) => (
+              <tr key={appraisal.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {appraisal.employee_name || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {appraisal.department || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {appraisal.appraisal_year || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <StatusBadge status={appraisal.status} />
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    {ASSIGNMENT_OPTIONS.map((option) => (
+                      <button
+                        key={option.value}
+                        type="button"
+                        className="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white"
+                        onClick={() => handleAssign(appraisal.id, option.value)}
+                        disabled={actionLoading === appraisal.id}
+                      >
+                        {option.label}
+                      </button>
+                    ))}
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {pendingUnassigned.length === 0 && (
+              <tr>
+                <td
+                  colSpan="5"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No pending appraisals waiting for assignment.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default HrAdminAppraisalAssignments;
diff --git a/src/Modules/HRModule/HrAdminCpdaReview.jsx b/src/Modules/HRModule/HrAdminCpdaReview.jsx
new file mode 100644
index 000000000..1f0d3bbc1
--- /dev/null
+++ b/src/Modules/HRModule/HrAdminCpdaReview.jsx
@@ -0,0 +1,130 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { getCPDAAdvances, approveRejectCPDAAdvance } from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+
+function HrAdminCpdaReview() {
+  const [loading, setLoading] = useState(true);
+  const [advances, setAdvances] = useState([]);
+  const [actionLoading, setActionLoading] = useState(null);
+
+  useEffect(() => {
+    const fetchAdvances = async () => {
+      try {
+        const res = await getCPDAAdvances();
+        setAdvances(res?.data ?? []);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchAdvances();
+  }, []);
+
+  const pendingAdvances = useMemo(
+    () =>
+      advances.filter(
+        (item) =>
+          (item.approval_status || item.status || "").toUpperCase() ===
+          "PENDING",
+      ),
+    [advances],
+  );
+
+  const handleDecision = async (cpdaId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(cpdaId);
+      await approveRejectCPDAAdvance(cpdaId, decision, remarks);
+      const res = await getCPDAAdvances();
+      setAdvances(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-bold">HR Admin CPDA Review</h1>
+        <p className="text-sm text-slate-500">
+          Verify CPDA advance requests and forward to director.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Event</th>
+              <th className="px-4 py-3 font-semibold">Start Date</th>
+              <th className="px-4 py-3 font-semibold">Total Amount</th>
+              <th className="px-4 py-3 font-semibold">Status</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pendingAdvances.map((adv) => (
+              <tr key={adv.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {adv.employee_name || adv.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {adv.event_name || adv.purpose || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {adv.start_date || adv.submission_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  ₹{adv.total_amount || adv.amount_required}
+                </td>
+                <td className="px-4 py-3">
+                  <StatusBadge status={adv.approval_status || adv.status} />
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(adv.id, "forward-director")}
+                      className="rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === adv.id}
+                    >
+                      Send to director
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(adv.id, "reject")}
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === adv.id}
+                    >
+                      Reject
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {pendingAdvances.length === 0 && (
+              <tr>
+                <td
+                  colSpan="6"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No pending CPDA requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default HrAdminCpdaReview;
diff --git a/src/Modules/HRModule/HrAdminLtcReview.jsx b/src/Modules/HRModule/HrAdminLtcReview.jsx
new file mode 100644
index 000000000..e465db4ec
--- /dev/null
+++ b/src/Modules/HRModule/HrAdminLtcReview.jsx
@@ -0,0 +1,133 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { getLTCApplications, approveRejectLTC } from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+
+function HrAdminLtcReview() {
+  const [loading, setLoading] = useState(true);
+  const [ltcRequests, setLtcRequests] = useState([]);
+  const [actionLoading, setActionLoading] = useState(null);
+
+  useEffect(() => {
+    const fetchLtc = async () => {
+      try {
+        const res = await getLTCApplications();
+        setLtcRequests(res?.data ?? []);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLtc();
+  }, []);
+
+  const pendingRequests = useMemo(
+    () =>
+      ltcRequests.filter(
+        (item) =>
+          (item.approval_status || item.status || "").toUpperCase() ===
+          "PENDING",
+      ),
+    [ltcRequests],
+  );
+
+  const handleDecision = async (ltcId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(ltcId);
+      await approveRejectLTC(ltcId, decision, remarks);
+      const res = await getLTCApplications();
+      setLtcRequests(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-bold">HR Admin LTC Review</h1>
+        <p className="text-sm text-slate-500">
+          Verify LTC documents and forward to accountant. HR cannot directly
+          approve.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Block Year</th>
+              <th className="px-4 py-3 font-semibold">Travel Dates</th>
+              <th className="px-4 py-3 font-semibold">Destination</th>
+              <th className="px-4 py-3 font-semibold">Status</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pendingRequests.map((ltc) => (
+              <tr key={ltc.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {ltc.employee_name || ltc.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {ltc.ltc_block_year || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {`${ltc.travel_start_date || "-"} to ${
+                    ltc.travel_end_date || "-"
+                  }`}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {ltc.destination || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <StatusBadge status={ltc.approval_status || ltc.status} />
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(ltc.id, "forward")}
+                      className="rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === ltc.id}
+                    >
+                      Send to accountant
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(ltc.id, "reject")}
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === ltc.id}
+                    >
+                      Reject
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {pendingRequests.length === 0 && (
+              <tr>
+                <td
+                  colSpan="6"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No pending LTC requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default HrAdminLtcReview;
diff --git a/src/Modules/HRModule/LTCForm.jsx b/src/Modules/HRModule/LTCForm.jsx
new file mode 100644
index 000000000..bf9256c1a
--- /dev/null
+++ b/src/Modules/HRModule/LTCForm.jsx
@@ -0,0 +1,587 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import {
+  getLTCApplications,
+  createLTCApplication,
+  downloadLTCApplication,
+  withdrawLTCApplication,
+} from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+import FormField from "./components/FormField";
+import TextAreaField from "./components/TextAreaField";
+
+function LTCForm({ onBack }) {
+  const [applications, setApplications] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [submitError, setSubmitError] = useState("");
+  const [submitSuccess, setSubmitSuccess] = useState("");
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [formData, setFormData] = useState({
+    employee_id: "",
+    employee_name: "",
+    department: "",
+    designation: "",
+    ltc_block_year: "",
+    travel_start_date: "",
+    travel_end_date: "",
+    destination: "",
+    purpose_of_travel: "",
+    family_members: "",
+    relationship_details: "",
+    travel_mode: "",
+    ticket_number: "",
+    ticket_cost: "",
+    accommodation_cost: "",
+    other_expenses: "",
+    total_amount_claimed: "",
+    tickets_upload: "",
+    bills_upload: "",
+    previous_ltc_used: "",
+    last_ltc_date: "",
+  });
+
+  const fetchData = async () => {
+    try {
+      const res = await getLTCApplications();
+      setApplications(res.data);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+  const handleChange = (e) => {
+    const val =
+      e.target.type === "checkbox" ? e.target.checked : e.target.value;
+    const { name } = e.target;
+    setFormData({ ...formData, [name]: val });
+    if (fieldErrors[name]) {
+      setFieldErrors((prev) => ({ ...prev, [name]: "" }));
+    }
+  };
+  const parseServerErrors = (errors) => {
+    if (!errors || typeof errors !== "object") return {};
+    const next = {};
+    Object.entries(errors).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        next[key] = value.join(" ");
+      } else if (typeof value === "string") {
+        next[key] = value;
+      }
+    });
+    return next;
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitError("");
+    setSubmitSuccess("");
+    setFieldErrors({});
+    try {
+      const required = [
+        { key: "employee_id", label: "Employee ID" },
+        { key: "employee_name", label: "Employee Name" },
+        { key: "department", label: "Department" },
+        { key: "designation", label: "Designation" },
+        { key: "ltc_block_year", label: "LTC Block Year" },
+        { key: "travel_start_date", label: "Travel Start Date" },
+        { key: "travel_end_date", label: "Travel End Date" },
+        { key: "destination", label: "Destination" },
+        { key: "purpose_of_travel", label: "Purpose of Travel" },
+        { key: "travel_mode", label: "Travel Mode" },
+        { key: "total_amount_claimed", label: "Total Amount Claimed" },
+        { key: "previous_ltc_used", label: "Previous LTC Used" },
+      ];
+
+      const missing = required
+        .filter((field) => !String(formData[field.key] || "").trim())
+        .map((field) => field.label);
+      if (missing.length > 0) {
+        const nextErrors = required.reduce((acc, field) => {
+          if (!String(formData[field.key] || "").trim()) {
+            acc[field.key] = "This field is required.";
+          }
+          return acc;
+        }, {});
+        setFieldErrors(nextErrors);
+        setSubmitError(`Please fill required fields: ${missing.join(", ")}`);
+        return;
+      }
+
+      if (formData.travel_start_date && formData.travel_end_date) {
+        if (formData.travel_start_date > formData.travel_end_date) {
+          setFieldErrors((prev) => ({
+            ...prev,
+            travel_end_date: "Travel end date must be on or after start date.",
+          }));
+          setSubmitError("Travel end date must be on or after start date.");
+          return;
+        }
+      }
+
+      const numericFields = [
+        "ticket_cost",
+        "accommodation_cost",
+        "other_expenses",
+        "total_amount_claimed",
+      ];
+      const hasInvalidAmount = numericFields.some((key) => {
+        if (String(formData[key] || "").trim()) {
+          const value = Number(formData[key]);
+          if (Number.isNaN(value) || value < 0) {
+            setFieldErrors((prev) => ({
+              ...prev,
+              [key]: "Amount must be a non-negative number.",
+            }));
+            setSubmitError("Amounts must be valid non-negative numbers.");
+            return true;
+          }
+        }
+        return false;
+      });
+      if (hasInvalidAmount) return;
+
+      const prevRaw = String(formData.previous_ltc_used || "")
+        .trim()
+        .toLowerCase();
+      let previousLtcUsed = null;
+      if (prevRaw === "yes" || prevRaw === "true") {
+        previousLtcUsed = true;
+      } else if (prevRaw === "no" || prevRaw === "false") {
+        previousLtcUsed = false;
+      } else {
+        setFieldErrors((prev) => ({
+          ...prev,
+          previous_ltc_used: "Use Yes or No.",
+        }));
+        setSubmitError("Previous LTC Used must be Yes or No.");
+        return;
+      }
+
+      if (previousLtcUsed && !String(formData.last_ltc_date || "").trim()) {
+        setFieldErrors((prev) => ({
+          ...prev,
+          last_ltc_date: "Last LTC Date is required.",
+        }));
+        setSubmitError("Last LTC Date is required when previous LTC was used.");
+        return;
+      }
+
+      const payload = {
+        ...formData,
+        previous_ltc_used: previousLtcUsed,
+      };
+
+      await createLTCApplication(payload);
+      setSubmitSuccess("Your form is submitted.");
+      setShowForm(false);
+      setFieldErrors({});
+      fetchData();
+    } catch (err) {
+      const serverErrors = err?.response?.data;
+      const parsed = parseServerErrors(serverErrors);
+      const generalError =
+        parsed.error || parsed.detail || parsed.non_field_errors;
+      if (generalError) {
+        setSubmitError(generalError);
+        delete parsed.error;
+        delete parsed.detail;
+        delete parsed.non_field_errors;
+      }
+      if (Object.keys(parsed).length > 0) {
+        setFieldErrors(parsed);
+        if (!generalError) {
+          setSubmitError("Please correct the highlighted fields.");
+        }
+      } else {
+        setSubmitError(
+          "Submission failed. Please check the form fields and try again.",
+        );
+      }
+    }
+  };
+
+  const handleDownload = async (id) => {
+    try {
+      const res = await downloadLTCApplication(id);
+      const url = window.URL.createObjectURL(new Blob([res.data]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `ltc-application-${id}.txt`;
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error(err);
+      window.alert("Unable to download LTC application.");
+    }
+  };
+  const handleWithdraw = async (id) => {
+    const confirm = window.confirm("Withdraw this LTC request?");
+    if (!confirm) return;
+    const remarks =
+      window.prompt("Reason for withdrawal (optional):", "") || "";
+    try {
+      await withdrawLTCApplication(id, remarks);
+      fetchData();
+    } catch (err) {
+      console.error(err);
+      window.alert("Unable to withdraw LTC request.");
+    }
+  };
+  if (loading) return <LoadingSpinner />;
+  return (
+    <div className="fusion-page">
+      <div className="fusion-card">
+        <div className="fusion-actions">
+          <div>
+            <button
+              type="button"
+              onClick={onBack}
+              className="fusion-button-ghost"
+            >
+              Back to dashboard
+            </button>
+          </div>
+          <div>
+            <h1 className="fusion-heading">LTC Applications</h1>
+            <p className="fusion-subtitle">
+              Plan and submit your LTC travel requests.
+            </p>
+          </div>
+          <button
+            onClick={() => setShowForm(true)}
+            className="fusion-button-primary"
+          >
+            Apply for LTC
+          </button>
+        </div>
+      </div>
+
+      <div className="fusion-table-wrap">
+        <div className="fusion-filter-bar">
+          <span className="fusion-subtitle">{applications.length} records</span>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="fusion-table">
+            <thead>
+              <tr>
+                <th>Employee</th>
+                <th>Block Year</th>
+                <th>Travel Start</th>
+                <th>Destination</th>
+                <th>Download</th>
+                <th>Withdraw</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {applications.map((app) => (
+                <tr key={app.id}>
+                  <td>{app.employee_name || app.name}</td>
+                  <td>{app.ltc_block_year || app.block_year}</td>
+                  <td>{app.travel_start_date || app.leave_start_date}</td>
+                  <td>{app.destination || app.place_of_visit}</td>
+                  <td>
+                    <button
+                      type="button"
+                      className="fusion-button-ghost"
+                      onClick={() => handleDownload(app.id)}
+                    >
+                      Download
+                    </button>
+                  </td>
+                  <td>
+                    {(app.approval_status || app.status) === "PENDING" ? (
+                      <button
+                        type="button"
+                        className="fusion-button-ghost"
+                        onClick={() => handleWithdraw(app.id)}
+                      >
+                        Withdraw
+                      </button>
+                    ) : (
+                      <span className="text-sm text-slate-500">-</span>
+                    )}
+                  </td>
+                  <td>
+                    <StatusBadge status={app.approval_status || app.status} />
+                  </td>
+                </tr>
+              ))}
+              {applications.length === 0 && (
+                <tr>
+                  <td
+                    colSpan="7"
+                    className="text-center"
+                    style={{ padding: "24px", color: "#94a3b8" }}
+                  >
+                    No LTC applications submitted yet.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      {showForm && (
+        <div className="fusion-modal">
+          <div className="fusion-modal-card">
+            <h2 className="fusion-heading" style={{ fontSize: "20px" }}>
+              LTC Application Form
+            </h2>
+            <p className="fusion-subtitle" style={{ marginBottom: "16px" }}>
+              Complete the required fields to submit your LTC request.
+            </p>
+            {submitSuccess && (
+              <div className="rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
+                {submitSuccess}
+              </div>
+            )}
+            {submitError && (
+              <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+                {submitError}
+              </div>
+            )}
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="fusion-section">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Basic Details
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Employee ID"
+                    name="employee_id"
+                    value={formData.employee_id}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.employee_id}
+                  />
+                  <FormField
+                    label="Employee Name"
+                    name="employee_name"
+                    value={formData.employee_name}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.employee_name}
+                  />
+                  <FormField
+                    label="Department"
+                    name="department"
+                    value={formData.department}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.department}
+                  />
+                  <FormField
+                    label="Designation"
+                    name="designation"
+                    value={formData.designation}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.designation}
+                  />
+                </div>
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Travel Details
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="LTC Block Year"
+                    name="ltc_block_year"
+                    value={formData.ltc_block_year}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.ltc_block_year}
+                  />
+                  <FormField
+                    label="Travel Start Date"
+                    name="travel_start_date"
+                    type="date"
+                    value={formData.travel_start_date}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.travel_start_date}
+                  />
+                  <FormField
+                    label="Travel End Date"
+                    name="travel_end_date"
+                    type="date"
+                    value={formData.travel_end_date}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.travel_end_date}
+                  />
+                  <FormField
+                    label="Destination"
+                    name="destination"
+                    value={formData.destination}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.destination}
+                  />
+                </div>
+                <TextAreaField
+                  label="Purpose of Travel"
+                  name="purpose_of_travel"
+                  value={formData.purpose_of_travel}
+                  onChange={handleChange}
+                  required
+                  error={fieldErrors.purpose_of_travel}
+                />
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Family Details
+                </h3>
+                <TextAreaField
+                  label="Family Members (list)"
+                  name="family_members"
+                  value={formData.family_members}
+                  onChange={handleChange}
+                />
+                <TextAreaField
+                  label="Relationship Details"
+                  name="relationship_details"
+                  value={formData.relationship_details}
+                  onChange={handleChange}
+                />
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Expense Details
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Travel Mode"
+                    name="travel_mode"
+                    value={formData.travel_mode}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.travel_mode}
+                  />
+                  <FormField
+                    label="Ticket Number"
+                    name="ticket_number"
+                    value={formData.ticket_number}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Ticket Cost"
+                    name="ticket_cost"
+                    type="number"
+                    step="0.01"
+                    value={formData.ticket_cost}
+                    onChange={handleChange}
+                    error={fieldErrors.ticket_cost}
+                  />
+                  <FormField
+                    label="Accommodation Cost"
+                    name="accommodation_cost"
+                    type="number"
+                    step="0.01"
+                    value={formData.accommodation_cost}
+                    onChange={handleChange}
+                    error={fieldErrors.accommodation_cost}
+                  />
+                  <FormField
+                    label="Other Expenses"
+                    name="other_expenses"
+                    type="number"
+                    step="0.01"
+                    value={formData.other_expenses}
+                    onChange={handleChange}
+                    error={fieldErrors.other_expenses}
+                  />
+                  <FormField
+                    label="Total Amount Claimed"
+                    name="total_amount_claimed"
+                    type="number"
+                    step="0.01"
+                    value={formData.total_amount_claimed}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.total_amount_claimed}
+                  />
+                </div>
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Documents
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Tickets Upload (reference)"
+                    name="tickets_upload"
+                    value={formData.tickets_upload}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Bills Upload (reference)"
+                    name="bills_upload"
+                    value={formData.bills_upload}
+                    onChange={handleChange}
+                  />
+                </div>
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  History & Validation
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Previous LTC Used (Yes/No)"
+                    name="previous_ltc_used"
+                    value={formData.previous_ltc_used}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.previous_ltc_used}
+                  />
+                  <FormField
+                    label="Last LTC Date"
+                    name="last_ltc_date"
+                    type="date"
+                    value={formData.last_ltc_date}
+                    onChange={handleChange}
+                    error={fieldErrors.last_ltc_date}
+                  />
+                </div>
+              </div>
+
+              <div className="flex justify-end space-x-3 mt-4">
+                <button
+                  type="button"
+                  onClick={() => setShowForm(false)}
+                  className="fusion-button-ghost"
+                >
+                  Cancel
+                </button>
+                <button type="submit" className="fusion-button-primary">
+                  Submit
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+export default LTCForm;
+
+LTCForm.propTypes = {
+  onBack: PropTypes.func.isRequired,
+};
diff --git a/src/Modules/HRModule/LeaveApplication.jsx b/src/Modules/HRModule/LeaveApplication.jsx
new file mode 100644
index 000000000..7b55a480a
--- /dev/null
+++ b/src/Modules/HRModule/LeaveApplication.jsx
@@ -0,0 +1,1058 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import {
+  getLeaveApplications,
+  createLeaveApplication,
+  getLeaveBalance,
+  submitLeaveDocument,
+  downloadLeaveApplication,
+  withdrawLeaveApplication,
+  requestLeaveCancellation,
+  requestLeaveExtension,
+  submitLeaveResumption,
+} from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+import FormField from "./components/FormField";
+import TextAreaField from "./components/TextAreaField";
+
+function LeaveApplication({ onBack }) {
+  const [applications, setApplications] = useState([]);
+  const [balance, setBalance] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState("ALL");
+  const [submitError, setSubmitError] = useState("");
+  const [submitSuccess, setSubmitSuccess] = useState("");
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [formData, setFormData] = useState({
+    employee_id: "",
+    employee_name: "",
+    department: "",
+    designation: "",
+    leave_type: "",
+    station_leave: "",
+    is_half_day: false,
+    half_day_slot: "",
+    start_date: "",
+    end_date: "",
+    total_days: "",
+    reason: "",
+    contact_during_leave: "",
+    address_during_leave: "",
+    nominee_employee_id: "",
+    handover_to: "",
+    handover_notes: "",
+    medical_certificate: "",
+    attachment_file: "",
+  });
+
+  const fetchData = async () => {
+    try {
+      const [appsRes, balRes] = await Promise.all([
+        getLeaveApplications(),
+        getLeaveBalance(),
+      ]);
+      const appsData = appsRes?.data?.results ?? appsRes?.data ?? [];
+      const balanceData = balRes?.data?.results ?? balRes?.data ?? [];
+      setApplications(Array.isArray(appsData) ? appsData : []);
+      setBalance(Array.isArray(balanceData) ? balanceData : []);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const computeTotalDays = (start, end) => {
+    if (!start || !end) return "";
+    const startDate = new Date(start);
+    const endDate = new Date(end);
+    if (Number.isNaN(startDate.getTime()) || Number.isNaN(endDate.getTime()))
+      return "";
+    const diffMs = endDate.getTime() - startDate.getTime();
+    if (diffMs < 0) return "";
+    const days = Math.floor(diffMs / (1000 * 60 * 60 * 24)) + 1;
+    return String(days);
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    const next = { ...formData, [name]: value };
+    if (fieldErrors[name]) {
+      setFieldErrors((prev) => ({ ...prev, [name]: "" }));
+    }
+    if (name === "start_date" || name === "end_date") {
+      next.total_days = computeTotalDays(next.start_date, next.end_date);
+    }
+    if (name === "leave_type") {
+      if (!["Casual", "Restricted"].includes(value)) {
+        next.station_leave = "";
+      }
+      if (value === "Vacation") {
+        next.nominee_employee_id = "";
+      }
+      if (value !== "Casual") {
+        next.is_half_day = false;
+        next.half_day_slot = "";
+      }
+    }
+    if (name === "station_leave" && value === "NOT_REQUIRED") {
+      next.nominee_employee_id = "";
+    }
+    if (name === "is_half_day") {
+      const { checked } = e.target;
+      next.is_half_day = checked;
+      if (checked) {
+        next.total_days = "0.5";
+        if (next.start_date) {
+          next.end_date = next.start_date;
+        }
+      } else {
+        next.half_day_slot = "";
+        next.total_days = computeTotalDays(next.start_date, next.end_date);
+      }
+    }
+    if ((name === "start_date" || name === "end_date") && next.is_half_day) {
+      next.end_date = next.start_date;
+      next.total_days = next.start_date ? "0.5" : "";
+    }
+    setFormData(next);
+  };
+
+  const parseServerErrors = (errors) => {
+    if (!errors || typeof errors !== "object") return {};
+    const next = {};
+    Object.entries(errors).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        next[key] = value.join(" ");
+      } else if (typeof value === "string") {
+        next[key] = value;
+      }
+    });
+    return next;
+  };
+
+  const validateLeaveForm = () => {
+    const required = [
+      { key: "employee_id", label: "Employee ID" },
+      { key: "employee_name", label: "Employee Name" },
+      { key: "department", label: "Department" },
+      { key: "designation", label: "Designation" },
+      { key: "leave_type", label: "Leave Type" },
+      { key: "start_date", label: "Start Date" },
+      { key: "end_date", label: "End Date" },
+      { key: "reason", label: "Reason" },
+      { key: "contact_during_leave", label: "Contact during leave" },
+      { key: "address_during_leave", label: "Address during leave" },
+    ];
+    const nextErrors = {};
+    const missing = required
+      .filter((field) => !String(formData[field.key] || "").trim())
+      .map((field) => field.label);
+    required.forEach((field) => {
+      if (!String(formData[field.key] || "").trim()) {
+        nextErrors[field.key] = "This field is required.";
+      }
+    });
+
+    const isClRhLeave = ["Casual", "Restricted"].includes(formData.leave_type);
+    const isStationOnly =
+      isClRhLeave && formData.station_leave === "NOT_REQUIRED";
+    const isVacationLeave = formData.leave_type === "Vacation";
+
+    if (isClRhLeave && !formData.station_leave) {
+      missing.push("Station Leave");
+      nextErrors.station_leave = "Select a station leave option.";
+    }
+
+    if (formData.is_half_day) {
+      if (formData.leave_type !== "Casual") {
+        nextErrors.is_half_day = "Half-day is only for Casual leave.";
+        setSubmitError("Half-day is only allowed for Casual leave.");
+        setFieldErrors(nextErrors);
+        return false;
+      }
+      if (!formData.half_day_slot) {
+        missing.push("Half-day Slot");
+        nextErrors.half_day_slot = "Select AM or PM.";
+      }
+      if (
+        formData.start_date &&
+        formData.end_date &&
+        formData.start_date !== formData.end_date
+      ) {
+        nextErrors.end_date = "Half-day leave must be for a single day.";
+        setSubmitError("Half-day leave must be for a single day.");
+        setFieldErrors(nextErrors);
+        return false;
+      }
+    }
+
+    if (
+      !isStationOnly &&
+      !isVacationLeave &&
+      !String(formData.nominee_employee_id || "").trim()
+    ) {
+      missing.push("Nominee Employee ID");
+      nextErrors.nominee_employee_id = "Nominee Employee ID is required.";
+    }
+
+    if (
+      String(formData.nominee_employee_id || "").trim() &&
+      String(formData.employee_id || "").trim() ===
+        String(formData.nominee_employee_id || "").trim()
+    ) {
+      nextErrors.nominee_employee_id = "Nominee must be different.";
+      setSubmitError("Nominee must be different from the applicant.");
+      setFieldErrors(nextErrors);
+      return false;
+    }
+
+    if (missing.length > 0) {
+      setFieldErrors(nextErrors);
+      setSubmitError(`Please fill required fields: ${missing.join(", ")}`);
+      return false;
+    }
+
+    if (!formData.total_days) {
+      setFieldErrors((prev) => ({
+        ...prev,
+        total_days: "Total days is required.",
+      }));
+      setSubmitError("Total Days is required.");
+      return false;
+    }
+
+    return true;
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitError("");
+    setSubmitSuccess("");
+    setFieldErrors({});
+    if (!validateLeaveForm()) {
+      return;
+    }
+    try {
+      const payload = { ...formData };
+      if (!payload.nominee_employee_id) {
+        delete payload.nominee_employee_id;
+      }
+      await createLeaveApplication(payload);
+      setSubmitSuccess("Your form is submitted.");
+      setShowForm(false);
+      setFieldErrors({});
+      setFormData({
+        employee_id: "",
+        employee_name: "",
+        department: "",
+        designation: "",
+        leave_type: "",
+        station_leave: "",
+        is_half_day: false,
+        half_day_slot: "",
+        start_date: "",
+        end_date: "",
+        total_days: "",
+        reason: "",
+        contact_during_leave: "",
+        address_during_leave: "",
+        nominee_employee_id: "",
+        handover_to: "",
+        handover_notes: "",
+        medical_certificate: "",
+        attachment_file: "",
+      });
+      fetchData();
+    } catch (err) {
+      const serverErrors = err?.response?.data;
+      const parsed = parseServerErrors(serverErrors);
+      const generalError =
+        parsed.error || parsed.detail || parsed.non_field_errors;
+      if (generalError) {
+        setSubmitError(generalError);
+        delete parsed.error;
+        delete parsed.detail;
+        delete parsed.non_field_errors;
+      }
+      if (Object.keys(parsed).length > 0) {
+        setFieldErrors(parsed);
+        if (!generalError) {
+          setSubmitError("Please correct the highlighted fields.");
+        }
+      } else {
+        setSubmitError(
+          "Submission failed. Please check the form fields and try again.",
+        );
+      }
+    }
+  };
+
+  const handleDocumentSubmit = async (leaveId) => {
+    const submission = (
+      window.prompt("Provide the requested document (link/number/details):") ||
+      ""
+    ).trim();
+    if (!submission) {
+      return;
+    }
+    try {
+      await submitLeaveDocument(leaveId, submission);
+      fetchData();
+    } catch (err) {
+      console.error(err);
+      window.alert("Unable to submit document. Please try again.");
+    }
+  };
+
+  const handleDownload = async (leaveId) => {
+    try {
+      const res = await downloadLeaveApplication(leaveId);
+      const url = window.URL.createObjectURL(new Blob([res.data]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `leave-application-${leaveId}.txt`;
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error(err);
+      window.alert("Unable to download leave application.");
+    }
+  };
+
+  const handleWithdraw = async (leaveId) => {
+    const confirm = window.confirm("Withdraw this leave request?");
+    if (!confirm) return;
+    const remarks =
+      window.prompt("Reason for withdrawal (optional):", "") || "";
+    try {
+      await withdrawLeaveApplication(leaveId, remarks);
+      fetchData();
+    } catch (err) {
+      console.error(err);
+      window.alert("Unable to withdraw leave request.");
+    }
+  };
+
+  const handleCancelRequest = async (leaveId) => {
+    const confirm = window.confirm(
+      "Request cancellation for this approved leave?",
+    );
+    if (!confirm) return;
+    const reason =
+      window.prompt("Reason for cancellation (optional):", "") || "";
+    try {
+      await requestLeaveCancellation(leaveId, reason);
+      fetchData();
+    } catch (err) {
+      console.error(err);
+      const message =
+        err?.response?.data?.error || "Unable to request cancellation.";
+      window.alert(message);
+    }
+  };
+
+  const handleExtensionRequest = async (app) => {
+    const confirm = window.confirm(
+      "Request an extension for this approved leave?",
+    );
+    if (!confirm) return;
+    const newEndDate = (
+      window.prompt("New end date (YYYY-MM-DD):", "") || ""
+    ).trim();
+    if (!newEndDate) return;
+    const parsed = new Date(newEndDate);
+    if (Number.isNaN(parsed.getTime())) {
+      window.alert("New end date must be in YYYY-MM-DD format.");
+      return;
+    }
+    if (app.end_date && newEndDate <= app.end_date) {
+      window.alert("New end date must be after the current end date.");
+      return;
+    }
+    const reason = window.prompt("Reason for extension (optional):", "") || "";
+    try {
+      await requestLeaveExtension(app.id, { new_end_date: newEndDate, reason });
+      fetchData();
+    } catch (err) {
+      console.error(err);
+      const message =
+        err?.response?.data?.error || "Unable to request extension.";
+      window.alert(message);
+    }
+  };
+
+  const handleResumptionSubmit = async (app) => {
+    const confirm = window.confirm("Submit resumption request for this leave?");
+    if (!confirm) return;
+    const resumptionDate = (
+      window.prompt("Resumption date (YYYY-MM-DD):", "") || ""
+    ).trim();
+    const reason = window.prompt("Resumption remarks (optional):", "") || "";
+    if (resumptionDate) {
+      const parsed = new Date(resumptionDate);
+      if (Number.isNaN(parsed.getTime())) {
+        window.alert("Resumption date must be in YYYY-MM-DD format.");
+        return;
+      }
+      if (app.end_date && resumptionDate <= app.end_date) {
+        window.alert("Resumption date must be after the leave end date.");
+        return;
+      }
+    }
+    try {
+      await submitLeaveResumption(app.id, {
+        resumption_date: resumptionDate,
+        reason,
+      });
+      fetchData();
+    } catch (err) {
+      console.error(err);
+      const message =
+        err?.response?.data?.error || "Unable to submit resumption.";
+      window.alert(message);
+    }
+  };
+
+  const normalizedStatus = (status) => (status || "").toUpperCase();
+  const isCancelAllowed = (app) => {
+    const startDateRaw = app.start_date || app.from_date;
+    if (!startDateRaw) return false;
+    const startDate = new Date(startDateRaw);
+    const today = new Date();
+    startDate.setHours(0, 0, 0, 0);
+    today.setHours(0, 0, 0, 0);
+    return today < startDate;
+  };
+  const isExtensionAllowed = (app) => {
+    const endDateRaw = app.end_date || app.to_date;
+    if (!endDateRaw) return false;
+    const endDate = new Date(endDateRaw);
+    const today = new Date();
+    endDate.setHours(0, 0, 0, 0);
+    today.setHours(0, 0, 0, 0);
+    return today < endDate;
+  };
+  const isResumptionAllowed = (app) => {
+    const endDateRaw = app.end_date || app.to_date;
+    if (!endDateRaw) return false;
+    const endDate = new Date(endDateRaw);
+    const today = new Date();
+    endDate.setHours(0, 0, 0, 0);
+    today.setHours(0, 0, 0, 0);
+    return today > endDate;
+  };
+  const statusCounts = applications.reduce((acc, app) => {
+    const key =
+      normalizedStatus(app.approval_status || app.status) || "UNKNOWN";
+    acc[key] = (acc[key] || 0) + 1;
+    return acc;
+  }, {});
+
+  const filteredApplications = applications.filter((app) => {
+    const term = searchTerm.trim().toLowerCase();
+    const name = (app.leave_type || app.leave_type_name || "").toLowerCase();
+    const matchesTerm = !term || name.includes(term);
+    const matchesStatus =
+      statusFilter === "ALL" ||
+      normalizedStatus(app.approval_status || app.status) === statusFilter;
+    return matchesTerm && matchesStatus;
+  });
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="fusion-page">
+      <div className="fusion-card">
+        <div className="fusion-actions">
+          <div>
+            <button
+              type="button"
+              onClick={onBack}
+              className="fusion-button-ghost"
+            >
+              Back to dashboard
+            </button>
+          </div>
+          <div>
+            <h1 className="fusion-heading">Leave Applications</h1>
+            <p className="fusion-subtitle">
+              Track your requests and manage balances.
+            </p>
+          </div>
+          <button
+            onClick={() => {
+              setSubmitError("");
+              setSubmitSuccess("");
+              setShowForm(true);
+            }}
+            className="fusion-button-primary"
+          >
+            Apply for Leave
+          </button>
+        </div>
+      </div>
+
+      <div className="fusion-grid fusion-grid-4">
+        <div className="fusion-stat">
+          <p className="fusion-stat-label">Total requests</p>
+          <p className="fusion-stat-value">{applications.length}</p>
+        </div>
+        <div className="fusion-stat">
+          <p className="fusion-stat-label">Pending</p>
+          <p className="fusion-stat-value">{statusCounts.PENDING || 0}</p>
+        </div>
+        <div className="fusion-stat">
+          <p className="fusion-stat-label">Approved</p>
+          <p className="fusion-stat-value">{statusCounts.APPROVED || 0}</p>
+        </div>
+        <div className="fusion-stat">
+          <p className="fusion-stat-label">Rejected</p>
+          <p className="fusion-stat-value">{statusCounts.REJECTED || 0}</p>
+        </div>
+      </div>
+
+      <div className="fusion-card">
+        <div>
+          <h2 className="fusion-heading" style={{ fontSize: "18px" }}>
+            Your Leave Balance
+          </h2>
+          <p className="fusion-subtitle">Live balance by leave type</p>
+        </div>
+        {balance.length > 0 ? (
+          <div className="fusion-balance-grid">
+            {balance.map((b) => (
+              <div key={b.leave_type || b.id} className="fusion-balance-card">
+                <p className="fusion-balance-label">
+                  {b.leave_type_name ||
+                    b.leave_type?.name ||
+                    b.leave_type ||
+                    "Leave"}
+                </p>
+                <p className="fusion-balance-value">{b.current_balance ?? 0}</p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="fusion-subtitle" style={{ marginTop: "12px" }}>
+            No leave balance available yet.
+          </p>
+        )}
+      </div>
+
+      <div className="fusion-table-wrap">
+        <div className="fusion-filter-bar">
+          <input
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            placeholder="Search by leave type"
+            className="fusion-input"
+            style={{ maxWidth: "280px" }}
+          />
+          <select
+            value={statusFilter}
+            onChange={(e) => setStatusFilter(e.target.value)}
+            className="fusion-select"
+            style={{ maxWidth: "200px" }}
+          >
+            <option value="ALL">All statuses</option>
+            <option value="PENDING">Pending</option>
+            <option value="APPROVED">Approved</option>
+            <option value="REJECTED">Rejected</option>
+            <option value="FORWARDED">Forwarded</option>
+            <option value="SUBMITTED">Submitted</option>
+            <option value="CANCELLED">Cancelled</option>
+          </select>
+          <span className="fusion-subtitle" style={{ marginLeft: "auto" }}>
+            {filteredApplications.length} records
+          </span>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="fusion-table">
+            <thead>
+              <tr>
+                <th>Leave Type</th>
+                <th>From</th>
+                <th>To</th>
+                <th>Days</th>
+                <th>Document request</th>
+                <th>Download</th>
+                <th>Withdraw/Cancel/Extend</th>
+                <th>Resumption</th>
+                <th>Cancel status</th>
+                <th>Extension</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredApplications.map((app) => (
+                <tr key={app.id}>
+                  <td>
+                    {app.leave_type || app.leave_type_name || "Leave request"}
+                  </td>
+                  <td>{app.start_date || app.from_date}</td>
+                  <td>{app.end_date || app.to_date}</td>
+                  <td>{app.total_days || app.num_days}</td>
+                  <td>
+                    {app.document_request_status === "REQUESTED" ? (
+                      <div className="flex flex-col gap-2">
+                        <span className="text-sm text-slate-700">
+                          {app.document_request_message || "Document requested"}
+                        </span>
+                        <button
+                          type="button"
+                          className="fusion-button-primary"
+                          onClick={() => handleDocumentSubmit(app.id)}
+                        >
+                          Submit document
+                        </button>
+                      </div>
+                    ) : app.document_request_status === "SUBMITTED" ? (
+                      <span className="text-sm text-emerald-700">
+                        Submitted
+                      </span>
+                    ) : (
+                      <span className="text-sm text-slate-500">
+                        Not requested
+                      </span>
+                    )}
+                  </td>
+                  <td>
+                    <button
+                      type="button"
+                      className="fusion-button-ghost"
+                      onClick={() => handleDownload(app.id)}
+                    >
+                      Download
+                    </button>
+                  </td>
+                  <td>
+                    {app.is_owner &&
+                    ["PENDING", "FORWARDED"].includes(
+                      app.approval_status || app.status,
+                    ) ? (
+                      <button
+                        type="button"
+                        className="fusion-button-ghost"
+                        onClick={() => handleWithdraw(app.id)}
+                      >
+                        Withdraw
+                      </button>
+                    ) : app.is_owner &&
+                      (app.approval_status || app.status) === "APPROVED" &&
+                      (app.cancel_status || "NOT_REQUESTED") ===
+                        "NOT_REQUESTED" &&
+                      isCancelAllowed(app) ? (
+                      <button
+                        type="button"
+                        className="fusion-button-ghost"
+                        onClick={() => handleCancelRequest(app.id)}
+                      >
+                        Cancel
+                      </button>
+                    ) : app.is_owner &&
+                      (app.approval_status || app.status) === "APPROVED" &&
+                      (app.cancel_status || "NOT_REQUESTED") ===
+                        "NOT_REQUESTED" ? (
+                      <span className="text-sm text-slate-400">
+                        Cancel window closed
+                      </span>
+                    ) : app.is_owner &&
+                      (app.cancel_status || "NOT_REQUESTED") === "REQUESTED" ? (
+                      <span className="text-sm text-slate-500">
+                        Cancel requested
+                      </span>
+                    ) : app.is_owner &&
+                      (app.approval_status || app.status) === "APPROVED" &&
+                      (app.extension_status || "NOT_REQUESTED") ===
+                        "NOT_REQUESTED" &&
+                      isExtensionAllowed(app) ? (
+                      <button
+                        type="button"
+                        className="fusion-button-ghost"
+                        onClick={() => handleExtensionRequest(app)}
+                      >
+                        Request extension
+                      </button>
+                    ) : app.is_owner &&
+                      (app.approval_status || app.status) === "APPROVED" &&
+                      (app.extension_status || "NOT_REQUESTED") ===
+                        "NOT_REQUESTED" ? (
+                      <span className="text-sm text-slate-400">
+                        Extension window closed
+                      </span>
+                    ) : app.is_owner &&
+                      (app.extension_status || "NOT_REQUESTED") ===
+                        "REQUESTED" ? (
+                      <span className="text-sm text-slate-500">
+                        Extension requested
+                      </span>
+                    ) : (
+                      <span className="text-sm text-slate-500">-</span>
+                    )}
+                  </td>
+                  <td>
+                    {app.is_owner &&
+                    (app.approval_status || app.status) === "APPROVED" &&
+                    (app.resumption_status || "NOT_REQUESTED") ===
+                      "NOT_REQUESTED" &&
+                    isResumptionAllowed(app) ? (
+                      <button
+                        type="button"
+                        className="fusion-button-ghost"
+                        onClick={() => handleResumptionSubmit(app)}
+                      >
+                        Submit resumption
+                      </button>
+                    ) : app.resumption_status &&
+                      app.resumption_status !== "NOT_REQUESTED" ? (
+                      <span className="text-sm text-slate-500">
+                        {app.resumption_status}
+                      </span>
+                    ) : (
+                      <span className="text-sm text-slate-500">-</span>
+                    )}
+                  </td>
+                  <td>
+                    {app.cancel_status && app.cancel_status !== "NOT_REQUESTED"
+                      ? app.cancel_status
+                      : "-"}
+                  </td>
+                  <td>
+                    {app.extension_status &&
+                    app.extension_status !== "NOT_REQUESTED"
+                      ? `${app.extension_status}${app.extension_new_end_date ? ` (to ${app.extension_new_end_date})` : ""}`
+                      : "-"}
+                  </td>
+                  <td>
+                    <StatusBadge status={app.approval_status || app.status} />
+                  </td>
+                </tr>
+              ))}
+              {filteredApplications.length === 0 && (
+                <tr>
+                  <td
+                    colSpan="11"
+                    className="text-center"
+                    style={{ padding: "24px", color: "#94a3b8" }}
+                  >
+                    No leave applications found.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {showForm && (
+        <div className="fusion-modal">
+          <div className="fusion-modal-card">
+            <h2 className="text-xl font-bold mb-1">New Leave Application</h2>
+            <p className="text-sm text-slate-500 mb-4">
+              Fields marked required must be completed before submission.
+            </p>
+            {submitSuccess && (
+              <div className="rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
+                {submitSuccess}
+              </div>
+            )}
+            {submitError && (
+              <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+                {submitError}
+              </div>
+            )}
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="fusion-section">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Basic Details
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Employee ID"
+                    name="employee_id"
+                    value={formData.employee_id}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.employee_id}
+                  />
+                  <FormField
+                    label="Employee Name"
+                    name="employee_name"
+                    value={formData.employee_name}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.employee_name}
+                  />
+                  <FormField
+                    label="Department"
+                    name="department"
+                    value={formData.department}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.department}
+                  />
+                  <FormField
+                    label="Designation"
+                    name="designation"
+                    value={formData.designation}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.designation}
+                  />
+                </div>
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Leave Details
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <div className="mb-4">
+                    <label
+                      htmlFor="leave_type"
+                      className="block text-sm font-medium text-gray-700 mb-1"
+                    >
+                      <span className="block">Leave Type</span>
+                      <select
+                        id="leave_type"
+                        name="leave_type"
+                        value={formData.leave_type}
+                        onChange={handleChange}
+                        required
+                        aria-invalid={Boolean(fieldErrors.leave_type)}
+                      >
+                        <option value="" disabled>
+                          Select leave type
+                        </option>
+                        <option value="Casual">Casual</option>
+                        <option value="Restricted">Restricted</option>
+                        <option value="Medical">Medical</option>
+                        <option value="Earned">Earned</option>
+                        <option value="Vacation">Vacation</option>
+                        <option value="Sabbatical">Sabbatical</option>
+                      </select>
+                      {fieldErrors.leave_type && (
+                        <p className="mt-1 text-xs text-red-600">
+                          {fieldErrors.leave_type}
+                        </p>
+                      )}
+                    </label>
+                  </div>
+                  {formData.leave_type === "Casual" && (
+                    <div className="mb-4">
+                      <label
+                        htmlFor="is_half_day"
+                        className="flex items-center gap-2 text-sm font-medium text-gray-700"
+                      >
+                        <input
+                          id="is_half_day"
+                          type="checkbox"
+                          name="is_half_day"
+                          checked={formData.is_half_day}
+                          onChange={handleChange}
+                        />
+                        <span>Half-day CL</span>
+                      </label>
+                    </div>
+                  )}
+                  {(formData.leave_type === "Casual" ||
+                    formData.leave_type === "Restricted") && (
+                    <div className="mb-4">
+                      <label
+                        htmlFor="station_leave"
+                        className="block text-sm font-medium text-gray-700 mb-1"
+                      >
+                        <span className="block">Station Leave</span>
+                        <select
+                          id="station_leave"
+                          name="station_leave"
+                          value={formData.station_leave}
+                          onChange={handleChange}
+                          required
+                          aria-invalid={Boolean(fieldErrors.station_leave)}
+                        >
+                          <option value="" disabled>
+                            Select station leave
+                          </option>
+                          <option value="WITH">With Station Leave</option>
+                          <option value="WITHOUT">Without Station Leave</option>
+                          <option value="NOT_REQUIRED">Not Required</option>
+                        </select>
+                        {fieldErrors.station_leave && (
+                          <p className="mt-1 text-xs text-red-600">
+                            {fieldErrors.station_leave}
+                          </p>
+                        )}
+                      </label>
+                    </div>
+                  )}
+                  {formData.leave_type === "Casual" && formData.is_half_day && (
+                    <div className="mb-4">
+                      <label
+                        htmlFor="half_day_slot"
+                        className="block text-sm font-medium text-gray-700 mb-1"
+                      >
+                        <span className="block">Half-day Slot</span>
+                        <select
+                          id="half_day_slot"
+                          name="half_day_slot"
+                          value={formData.half_day_slot}
+                          onChange={handleChange}
+                          required
+                          aria-invalid={Boolean(fieldErrors.half_day_slot)}
+                        >
+                          <option value="" disabled>
+                            Select slot
+                          </option>
+                          <option value="AM">AM</option>
+                          <option value="PM">PM</option>
+                        </select>
+                        {fieldErrors.half_day_slot && (
+                          <p className="mt-1 text-xs text-red-600">
+                            {fieldErrors.half_day_slot}
+                          </p>
+                        )}
+                      </label>
+                    </div>
+                  )}
+                  <FormField
+                    label="Total Days"
+                    name="total_days"
+                    type="number"
+                    value={formData.total_days}
+                    onChange={handleChange}
+                    required
+                    readOnly
+                    error={fieldErrors.total_days}
+                  />
+                  <FormField
+                    label="Start Date"
+                    name="start_date"
+                    type="date"
+                    value={formData.start_date}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.start_date}
+                  />
+                  <FormField
+                    label="End Date"
+                    name="end_date"
+                    type="date"
+                    value={formData.end_date}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.end_date}
+                  />
+                </div>
+                <TextAreaField
+                  label="Reason"
+                  name="reason"
+                  value={formData.reason}
+                  onChange={handleChange}
+                  required
+                  error={fieldErrors.reason}
+                />
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Contact & Responsibility
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Contact during leave"
+                    name="contact_during_leave"
+                    value={formData.contact_during_leave}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.contact_during_leave}
+                  />
+                  <FormField
+                    label="Address during leave"
+                    name="address_during_leave"
+                    value={formData.address_during_leave}
+                    onChange={handleChange}
+                    required
+                    error={fieldErrors.address_during_leave}
+                  />
+                  {!(formData.leave_type === "Vacation") &&
+                    !(
+                      formData.leave_type === "Casual" &&
+                      formData.station_leave === "NOT_REQUIRED"
+                    ) &&
+                    !(
+                      formData.leave_type === "Restricted" &&
+                      formData.station_leave === "NOT_REQUIRED"
+                    ) && (
+                      <FormField
+                        label="Nominee Employee ID"
+                        name="nominee_employee_id"
+                        value={formData.nominee_employee_id}
+                        onChange={handleChange}
+                        required
+                        error={fieldErrors.nominee_employee_id}
+                      />
+                    )}
+                </div>
+                <TextAreaField
+                  label="Handover Notes"
+                  name="handover_notes"
+                  value={formData.handover_notes}
+                  onChange={handleChange}
+                />
+              </div>
+
+              <div className="fusion-section-alt">
+                <h3 className="text-sm font-semibold text-slate-700 mb-3">
+                  Documents
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    label="Medical Certificate (reference)"
+                    name="medical_certificate"
+                    value={formData.medical_certificate}
+                    onChange={handleChange}
+                  />
+                  <FormField
+                    label="Attachment File (reference)"
+                    name="attachment_file"
+                    value={formData.attachment_file}
+                    onChange={handleChange}
+                  />
+                </div>
+              </div>
+
+              <div className="flex justify-end space-x-3 mt-4">
+                <button
+                  type="button"
+                  onClick={() => setShowForm(false)}
+                  className="fusion-button-ghost"
+                >
+                  Cancel
+                </button>
+                <button type="submit" className="fusion-button-primary">
+                  Submit
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+export default LeaveApplication;
+
+LeaveApplication.propTypes = {
+  onBack: PropTypes.func.isRequired,
+};
diff --git a/src/Modules/HRModule/LeaveApplication.module.css b/src/Modules/HRModule/LeaveApplication.module.css
new file mode 100644
index 000000000..6ad7336d9
--- /dev/null
+++ b/src/Modules/HRModule/LeaveApplication.module.css
@@ -0,0 +1,66 @@
+.page {
+  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 35%);
+}
+
+.modalOverlay {
+  background: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(2px);
+}
+
+.modalCard {
+  border-radius: 16px;
+  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
+  border: 1px solid #e2e8f0;
+}
+
+.section {
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 16px;
+  background: #f8fafc;
+}
+
+.sectionAlt {
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 16px;
+  background: #ffffff;
+}
+
+.modalCard label {
+  color: #334155;
+  font-weight: 600;
+}
+
+.modalCard input,
+.modalCard select,
+.modalCard textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #cbd5f5;
+  border-radius: 10px;
+  font-size: 0.95rem;
+  color: #0f172a;
+  background: #ffffff;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.modalCard input:focus,
+.modalCard select:focus,
+.modalCard textarea:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+}
+
+.modalCard h2 {
+  color: #0f172a;
+}
+
+.modalCard p {
+  color: #64748b;
+}
+
+.actionsRow button {
+  border-radius: 10px;
+}
diff --git a/src/Modules/HRModule/NomineeDashboard.jsx b/src/Modules/HRModule/NomineeDashboard.jsx
new file mode 100644
index 000000000..d7b55e002
--- /dev/null
+++ b/src/Modules/HRModule/NomineeDashboard.jsx
@@ -0,0 +1,151 @@
+import React, { useEffect, useMemo, useState } from "react";
+import PropTypes from "prop-types";
+import { ClockCounterClockwise } from "@phosphor-icons/react";
+import { decideLeaveNominee, getLeaveNomineeQueue } from "./api";
+import LoadingSpinner from "./components/LoadingSpinner";
+import StatusBadge from "./components/StatusBadge";
+
+function NomineeDashboard({ onBack }) {
+  const [loading, setLoading] = useState(true);
+  const [queue, setQueue] = useState([]);
+  const [error, setError] = useState("");
+
+  const fetchQueue = async () => {
+    setError("");
+    try {
+      const res = await getLeaveNomineeQueue();
+      const data = res?.data?.results ?? res?.data ?? [];
+      setQueue(Array.isArray(data) ? data : []);
+    } catch (err) {
+      setError("Unable to load nominee requests.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchQueue();
+  }, []);
+
+  const handleDecision = async (id, action) => {
+    try {
+      await decideLeaveNominee(id, action);
+      fetchQueue();
+    } catch (err) {
+      setError("Unable to submit your decision.");
+    }
+  };
+
+  const items = useMemo(() => queue, [queue]);
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="fusion-page">
+      <div className="fusion-card">
+        <div className="fusion-actions">
+          <div>
+            <button
+              type="button"
+              onClick={onBack}
+              className="fusion-button-ghost"
+            >
+              Back to dashboard
+            </button>
+          </div>
+          <div>
+            <h1 className="fusion-heading">Nominee Dashboard</h1>
+            <p className="fusion-subtitle">
+              Respond to leave handover nominations.
+            </p>
+          </div>
+          <span className="fusion-subtitle">{items.length} pending</span>
+        </div>
+      </div>
+
+      {error && (
+        <div className="fusion-card">
+          <p className="fusion-subtitle" style={{ color: "#b91c1c" }}>
+            {error}
+          </p>
+        </div>
+      )}
+
+      <div className="fusion-table-wrap">
+        <div className="fusion-filter-bar">
+          <div className="flex items-center gap-2 text-slate-900">
+            <ClockCounterClockwise size={20} className="text-blue-600" />
+            <h2 className="fusion-heading" style={{ fontSize: "18px" }}>
+              Pending nominations
+            </h2>
+          </div>
+          <p className="fusion-subtitle">
+            Accept or decline responsibility requests.
+          </p>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="fusion-table">
+            <thead>
+              <tr>
+                <th>Employee</th>
+                <th>Leave Type</th>
+                <th>Dates</th>
+                <th>Status</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item) => (
+                <tr key={item.id}>
+                  <td>{item.employee_name}</td>
+                  <td>{item.leave_type}</td>
+                  <td>
+                    {item.start_date} to {item.end_date}
+                  </td>
+                  <td>
+                    <StatusBadge status={item.nominee_status || "PENDING"} />
+                  </td>
+                  <td>
+                    <div className="flex gap-2">
+                      <button
+                        type="button"
+                        className="fusion-button-primary"
+                        onClick={() => handleDecision(item.id, "accept")}
+                      >
+                        Accept
+                      </button>
+                      <button
+                        type="button"
+                        className="fusion-button-ghost"
+                        onClick={() => handleDecision(item.id, "decline")}
+                      >
+                        Decline
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+              {items.length === 0 && (
+                <tr>
+                  <td
+                    colSpan="5"
+                    className="text-center"
+                    style={{ padding: "24px", color: "#94a3b8" }}
+                  >
+                    No nominee requests right now.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default NomineeDashboard;
+
+NomineeDashboard.propTypes = {
+  onBack: PropTypes.func.isRequired,
+};
diff --git a/src/Modules/HRModule/RegistrarLeaveApprovals.jsx b/src/Modules/HRModule/RegistrarLeaveApprovals.jsx
new file mode 100644
index 000000000..f3a5474aa
--- /dev/null
+++ b/src/Modules/HRModule/RegistrarLeaveApprovals.jsx
@@ -0,0 +1,373 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  getLeaveApplications,
+  approveRejectLeave,
+  decideLeaveCancellation,
+  decideLeaveExtension,
+} from "./api";
+import StatusBadge from "./components/StatusBadge";
+import LoadingSpinner from "./components/LoadingSpinner";
+
+function RegistrarLeaveApprovals() {
+  const [loading, setLoading] = useState(true);
+  const [leaves, setLeaves] = useState([]);
+  const [actionLoading, setActionLoading] = useState(null);
+
+  useEffect(() => {
+    const fetchLeaves = async () => {
+      try {
+        const res = await getLeaveApplications();
+        setLeaves(res?.data ?? []);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLeaves();
+  }, []);
+
+  const pendingLeaves = useMemo(
+    () =>
+      leaves.filter(
+        (item) =>
+          (item.approval_status || item.status || "").toUpperCase() ===
+          "FORWARDED",
+      ),
+    [leaves],
+  );
+
+  const cancelRequests = useMemo(
+    () =>
+      leaves.filter(
+        (item) =>
+          (item.cancel_status || "").toUpperCase() === "REQUESTED" &&
+          (item.cancel_current_approver_role || "").toUpperCase() ===
+            "REGISTRAR",
+      ),
+    [leaves],
+  );
+
+  const extensionRequests = useMemo(
+    () =>
+      leaves.filter(
+        (item) =>
+          (item.extension_status || "").toUpperCase() === "REQUESTED" &&
+          (item.extension_current_approver_role || "").toUpperCase() ===
+            "REGISTRAR",
+      ),
+    [leaves],
+  );
+
+  const handleDecision = async (leaveId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(leaveId);
+      await approveRejectLeave(leaveId, decision, remarks);
+      const res = await getLeaveApplications();
+      setLeaves(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleCancelDecision = async (leaveId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(leaveId);
+      await decideLeaveCancellation(leaveId, decision, remarks);
+      const res = await getLeaveApplications();
+      setLeaves(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleExtensionDecision = async (leaveId, decision) => {
+    const remarks = window.prompt("Add remarks (optional):", "") || "";
+    try {
+      setActionLoading(leaveId);
+      await decideLeaveExtension(leaveId, decision, remarks);
+      const res = await getLeaveApplications();
+      setLeaves(res?.data ?? []);
+    } catch (error) {
+      console.error(error);
+      window.alert("Action failed. Please try again.");
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-bold">Registrar Leave Approvals</h1>
+        <p className="text-sm text-slate-500">
+          Review leave requests forwarded by HR Admins or Accountants.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Department</th>
+              <th className="px-4 py-3 font-semibold">Leave Type</th>
+              <th className="px-4 py-3 font-semibold">From</th>
+              <th className="px-4 py-3 font-semibold">To</th>
+              <th className="px-4 py-3 font-semibold">Status</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pendingLeaves.map((leave) => (
+              <tr key={leave.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {leave.employee_name || leave.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.department || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.leave_type || leave.leave_type_name || "Leave request"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.start_date || leave.from_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.end_date || leave.to_date || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <StatusBadge status={leave.approval_status || leave.status} />
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(leave.id, "approve")}
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Approve
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(leave.id, "reject")}
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Reject
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDecision(leave.id, "forward")}
+                      className="rounded-lg bg-slate-700 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Send to director
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {pendingLeaves.length === 0 && (
+              <tr>
+                <td
+                  colSpan="7"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No forwarded leave requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <h2 className="text-lg font-semibold">Cancellation requests</h2>
+        <p className="text-sm text-slate-500">
+          Review approved leave cancellations routed to you.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Department</th>
+              <th className="px-4 py-3 font-semibold">Leave Type</th>
+              <th className="px-4 py-3 font-semibold">From</th>
+              <th className="px-4 py-3 font-semibold">To</th>
+              <th className="px-4 py-3 font-semibold">Requested by</th>
+              <th className="px-4 py-3 font-semibold">Reason</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {cancelRequests.map((leave) => (
+              <tr key={leave.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {leave.employee_name || leave.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.department || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.leave_type || leave.leave_type_name || "Leave request"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.start_date || leave.from_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.end_date || leave.to_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.cancel_requested_by_role || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.cancel_reason || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleCancelDecision(leave.id, "approve")}
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Approve cancel
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleCancelDecision(leave.id, "reject")}
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Reject cancel
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {cancelRequests.length === 0 && (
+              <tr>
+                <td
+                  colSpan="8"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No cancellation requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <h2 className="text-lg font-semibold">Extension requests</h2>
+        <p className="text-sm text-slate-500">
+          Review approved leave extensions routed to you.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-slate-200 bg-white overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-600">
+              <th className="px-4 py-3 font-semibold">Employee</th>
+              <th className="px-4 py-3 font-semibold">Department</th>
+              <th className="px-4 py-3 font-semibold">Leave Type</th>
+              <th className="px-4 py-3 font-semibold">From</th>
+              <th className="px-4 py-3 font-semibold">To</th>
+              <th className="px-4 py-3 font-semibold">New end</th>
+              <th className="px-4 py-3 font-semibold">New days</th>
+              <th className="px-4 py-3 font-semibold">Requested by</th>
+              <th className="px-4 py-3 font-semibold">Reason</th>
+              <th className="px-4 py-3 font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {extensionRequests.map((leave) => (
+              <tr key={leave.id} className="border-t border-slate-100">
+                <td className="px-4 py-3 text-slate-900">
+                  {leave.employee_name || leave.employee || "Employee"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.department || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.leave_type || leave.leave_type_name || "Leave request"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.start_date || leave.from_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.end_date || leave.to_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.extension_new_end_date || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.extension_new_total_days || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.extension_requested_by_role || "-"}
+                </td>
+                <td className="px-4 py-3 text-slate-700">
+                  {leave.extension_reason || "-"}
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() =>
+                        handleExtensionDecision(leave.id, "approve")
+                      }
+                      className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Approve extension
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        handleExtensionDecision(leave.id, "reject")
+                      }
+                      className="rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white"
+                      disabled={actionLoading === leave.id}
+                    >
+                      Reject extension
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {extensionRequests.length === 0 && (
+              <tr>
+                <td
+                  colSpan="10"
+                  className="px-4 py-8 text-center text-slate-500"
+                >
+                  No extension requests right now.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default RegistrarLeaveApprovals;
diff --git a/src/Modules/HRModule/api.js b/src/Modules/HRModule/api.js
new file mode 100644
index 000000000..d27d31268
--- /dev/null
+++ b/src/Modules/HRModule/api.js
@@ -0,0 +1,129 @@
+import axios from "axios";
+import { host } from "../../routes/globalRoutes"; // adjust path to your existing globalRoutes
+
+// If you prefer not to import, you can set baseURL directly:
+// const API_BASE = '/hr2/api';
+const API_BASE = `${host}/hr2/api`;
+
+const api = axios.create({
+  baseURL: API_BASE,
+  headers: { "Content-Type": "application/json" },
+});
+
+// Request interceptor to add auth token
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("authToken");
+    if (token) {
+      config.headers.Authorization = `Token ${token}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error),
+);
+
+// Response interceptor to handle 401
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      window.location.href = "/login";
+    }
+    return Promise.reject(error);
+  },
+);
+
+// ==================== LEAVE ====================
+export const getLeaveApplications = () => api.get("/leave-applications/");
+export const createLeaveApplication = (data) =>
+  api.post("/leave-applications/", data);
+export const getLeaveApplication = (id) =>
+  api.get(`/leave-applications/${id}/`);
+export const updateLeaveApplication = (id, data) =>
+  api.put(`/leave-applications/${id}/`, data);
+export const deleteLeaveApplication = (id) =>
+  api.delete(`/leave-applications/${id}/`);
+export const downloadLeaveApplication = (id) =>
+  api.get(`/leave-applications/${id}/download/`, { responseType: "blob" });
+export const withdrawLeaveApplication = (id, remarks) =>
+  api.post(`/leave-applications/${id}/withdraw/`, { remarks });
+export const requestLeaveCancellation = (id, reason) =>
+  api.post(`/leave-applications/${id}/cancel-request/`, { reason });
+export const decideLeaveCancellation = (id, decision, remarks) =>
+  api.post(`/leave-applications/${id}/cancel-decision/${decision}/`, {
+    remarks,
+  });
+export const getLeaveBalance = (employeeId = null) => {
+  const url = employeeId ? `/leave-balance/${employeeId}/` : "/leave-balance/";
+  return api.get(url);
+};
+export const handleLeaveResponsibility = (id, type, action, remarks) =>
+  api.post(`/leave-applications/${id}/responsibility/${type}/`, {
+    action,
+    remarks,
+  });
+export const approveRejectLeave = (id, decision, remarks) =>
+  api.post(`/leave-applications/${id}/${decision}/`, { remarks });
+export const requestLeaveDocument = (id, message) =>
+  api.post(`/leave-applications/${id}/request-document/`, { message });
+export const submitLeaveDocument = (id, submission) =>
+  api.post(`/leave-applications/${id}/submit-document/`, { submission });
+export const requestLeaveExtension = (id, payload = {}) =>
+  api.post(`/leave-applications/${id}/extension-request/`, payload);
+export const decideLeaveExtension = (id, decision, remarks) =>
+  api.post(`/leave-applications/${id}/extension-decision/${decision}/`, {
+    remarks,
+  });
+export const submitLeaveResumption = (id, payload = {}) =>
+  api.post(`/leave-applications/${id}/resumption/`, payload);
+export const decideLeaveResumption = (id, decision, remarks) =>
+  api.post(`/leave-applications/${id}/resumption-decision/${decision}/`, {
+    remarks,
+  });
+export const getLeaveNomineeQueue = () => api.get("/leave-nominee/");
+export const decideLeaveNominee = (id, action) =>
+  api.post(`/leave-nominee/${id}/`, { action });
+
+// ==================== LTC ====================
+export const getLTCApplications = () => api.get("/ltc/");
+export const createLTCApplication = (data) => api.post("/ltc/", data);
+export const getLTCApplication = (id) => api.get(`/ltc/${id}/`);
+export const updateLTCApplication = (id, data) => api.put(`/ltc/${id}/`, data);
+export const downloadLTCApplication = (id) =>
+  api.get(`/ltc/${id}/download/`, { responseType: "blob" });
+export const withdrawLTCApplication = (id, remarks) =>
+  api.post(`/ltc/${id}/withdraw/`, { remarks });
+export const approveRejectLTC = (id, decision, remarks) =>
+  api.post(`/ltc/${id}/${decision}/`, { remarks });
+
+// ==================== CPDA ADVANCE ====================
+export const getCPDAAdvances = () => api.get("/cpda-advances/");
+export const createCPDAAdvance = (data) => api.post("/cpda-advances/", data);
+export const getCPDAAdvance = (id) => api.get(`/cpda-advances/${id}/`);
+export const downloadCPDAAdvance = (id) =>
+  api.get(`/cpda-advances/${id}/download/`, { responseType: "blob" });
+export const withdrawCPDAAdvance = (id, remarks) =>
+  api.post(`/cpda-advances/${id}/withdraw/`, { remarks });
+export const approveRejectCPDAAdvance = (id, decision, remarks) =>
+  api.post(`/cpda-advances/${id}/${decision}/`, { remarks });
+
+// ==================== CPDA REIMBURSEMENT ====================
+export const getCPDAReimbursements = () => api.get("/cpda-reimbursements/");
+export const createCPDAReimbursement = (data) =>
+  api.post("/cpda-reimbursements/", data);
+export const getCPDAReimbursement = (id) =>
+  api.get(`/cpda-reimbursements/${id}/`);
+export const approveRejectCPDAReimbursement = (id, decision, remarks) =>
+  api.post(`/cpda-reimbursements/${id}/${decision}/`, { remarks });
+
+// ==================== APPRAISAL FORMS ====================
+export const getAppraisalForms = () => api.get("/appraisal-forms/");
+export const createAppraisalForm = (data) =>
+  api.post("/appraisal-forms/", data);
+export const getAppraisalForm = (id) => api.get(`/appraisal-forms/${id}/`);
+export const downloadAppraisalForm = (id) =>
+  api.get(`/appraisal-forms/${id}/download/`, { responseType: "blob" });
+export const reviewAppraisalForm = (id, payload = {}) =>
+  api.post(`/appraisal-forms/${id}/review/`, payload);
+export const assignAppraisalForm = (id, payload = {}) =>
+  api.post(`/appraisal-forms/${id}/assign/`, payload);
diff --git a/src/Modules/HRModule/components/FormField.jsx b/src/Modules/HRModule/components/FormField.jsx
new file mode 100644
index 000000000..e2e585a07
--- /dev/null
+++ b/src/Modules/HRModule/components/FormField.jsx
@@ -0,0 +1,78 @@
+import PropTypes from "prop-types";
+
+function FormField({
+  label,
+  name,
+  type = "text",
+  value,
+  onChange,
+  required = false,
+  readOnly = false,
+  step,
+  placeholder,
+  min,
+  max,
+  disabled = false,
+  autoComplete,
+  pattern,
+  error,
+}) {
+  const inputId = name ? `field-${name}` : undefined;
+  const errorId = error ? `${inputId}-error` : undefined;
+  return (
+    <div className="fusion-field">
+      <label htmlFor={inputId} className="fusion-label">
+        {label}
+        {required && <span className="ml-1 text-red-600">*</span>}
+      </label>
+      <input
+        id={inputId}
+        type={type}
+        name={name}
+        value={value}
+        onChange={onChange}
+        required={required}
+        readOnly={readOnly}
+        step={step}
+        placeholder={placeholder}
+        min={min}
+        max={max}
+        disabled={disabled}
+        autoComplete={autoComplete}
+        pattern={pattern}
+        aria-invalid={Boolean(error)}
+        aria-describedby={errorId}
+        className={`fusion-input${error ? " border-red-300" : ""}`}
+      />
+      {error && (
+        <p id={errorId} className="mt-1 text-xs text-red-600">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+FormField.propTypes = {
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+  ]),
+  onChange: PropTypes.func.isRequired,
+  required: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  placeholder: PropTypes.string,
+  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disabled: PropTypes.bool,
+  autoComplete: PropTypes.string,
+  pattern: PropTypes.string,
+  error: PropTypes.string,
+};
+
+export default FormField;
diff --git a/src/Modules/HRModule/components/LoadingSpinner.jsx b/src/Modules/HRModule/components/LoadingSpinner.jsx
new file mode 100644
index 000000000..5c37f372e
--- /dev/null
+++ b/src/Modules/HRModule/components/LoadingSpinner.jsx
@@ -0,0 +1,8 @@
+function LoadingSpinner() {
+  return (
+    <div className="flex justify-center items-center py-8">
+      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+    </div>
+  );
+}
+export default LoadingSpinner;
diff --git a/src/Modules/HRModule/components/StatusBadge.jsx b/src/Modules/HRModule/components/StatusBadge.jsx
new file mode 100644
index 000000000..2d39871d8
--- /dev/null
+++ b/src/Modules/HRModule/components/StatusBadge.jsx
@@ -0,0 +1,26 @@
+import PropTypes from "prop-types";
+
+function StatusBadge({ status }) {
+  const colors = {
+    PENDING: "bg-yellow-100 text-yellow-800",
+    FORWARDED: "bg-blue-100 text-blue-800",
+    APPROVED: "bg-green-100 text-green-800",
+    REJECTED: "bg-red-100 text-red-800",
+    CANCELLED: "bg-gray-200 text-gray-800",
+    DRAFT: "bg-gray-100 text-gray-800",
+    SUBMITTED: "bg-indigo-100 text-indigo-800",
+  };
+  return (
+    <span
+      className={`px-2 py-1 rounded-full text-xs font-semibold ${colors[status] || "bg-gray-100"}`}
+    >
+      {status}
+    </span>
+  );
+}
+
+StatusBadge.propTypes = {
+  status: PropTypes.string,
+};
+
+export default StatusBadge;
diff --git a/src/Modules/HRModule/components/TextAreaField.jsx b/src/Modules/HRModule/components/TextAreaField.jsx
new file mode 100644
index 000000000..5e8de835b
--- /dev/null
+++ b/src/Modules/HRModule/components/TextAreaField.jsx
@@ -0,0 +1,48 @@
+import PropTypes from "prop-types";
+
+function TextAreaField({
+  label,
+  name,
+  value,
+  onChange,
+  required = false,
+  error,
+}) {
+  const inputId = name ? `field-${name}` : undefined;
+  const errorId = error ? `${inputId}-error` : undefined;
+  return (
+    <div className="fusion-field">
+      <label htmlFor={inputId} className="fusion-label">
+        {label}
+        {required && <span className="ml-1 text-red-600">*</span>}
+      </label>
+      <textarea
+        id={inputId}
+        name={name}
+        value={value}
+        onChange={onChange}
+        required={required}
+        rows="3"
+        aria-invalid={Boolean(error)}
+        aria-describedby={errorId}
+        className={`fusion-textarea${error ? " border-red-300" : ""}`}
+      />
+      {error && (
+        <p id={errorId} className="mt-1 text-xs text-red-600">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+TextAreaField.propTypes = {
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func.isRequired,
+  required: PropTypes.bool,
+  error: PropTypes.string,
+};
+
+export default TextAreaField;
diff --git a/src/Modules/HRModule/index.jsx b/src/Modules/HRModule/index.jsx
new file mode 100644
index 000000000..c65db5281
--- /dev/null
+++ b/src/Modules/HRModule/index.jsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import { Tabs } from "@mantine/core";
+import { useSelector } from "react-redux";
+import EmployeeDashboard from "./EmployeeDashboard";
+import LeaveApplication from "./LeaveApplication";
+import AppraisalForm from "./AppraisalForm";
+import CPDAAdvance from "./CPDAAdvance";
+import LTCForm from "./LTCForm";
+import NomineeDashboard from "./NomineeDashboard";
+
+function HR2Module() {
+  const location = useLocation();
+  const [activeTab, setActiveTab] = useState("dashboard");
+  const role = useSelector((state) => state.user.role);
+  const isPrivilegedRole = /hod|director|registrar|accountant|hr/i.test(
+    role || "",
+  );
+  const hideFinanceTabs = false;
+  const showNominee = !isPrivilegedRole;
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const tab = params.get("tab");
+    const allowedTabs = ["dashboard", "leave", "appraisal"];
+    if (!hideFinanceTabs) {
+      allowedTabs.push("cpda-advance", "ltc");
+    }
+    if (showNominee) {
+      allowedTabs.push("nominee");
+    }
+    if (tab && allowedTabs.includes(tab)) {
+      setActiveTab(tab);
+    }
+  }, [location.search, showNominee]);
+
+  return (
+    <div className="p-6 space-y-6">
+      <Tabs
+        value={activeTab}
+        onTabChange={setActiveTab}
+        defaultValue="dashboard"
+        variant="default"
+      >
+        <Tabs.List>
+          <Tabs.Tab value="dashboard" label="Employee Dashboard" />
+          {showNominee && (
+            <Tabs.Tab value="nominee" label="Nominee Dashboard" />
+          )}
+          <Tabs.Tab value="leave" label="Leave Application" />
+          <Tabs.Tab value="appraisal" label="Appraisal" />
+          {!hideFinanceTabs && (
+            <Tabs.Tab value="cpda-advance" label="CPDA Advance" />
+          )}
+          {!hideFinanceTabs && <Tabs.Tab value="ltc" label="LTC" />}
+        </Tabs.List>
+
+        <Tabs.Panel value="dashboard" pt="xl">
+          <EmployeeDashboard onOpenTab={setActiveTab} />
+        </Tabs.Panel>
+
+        {showNominee && (
+          <Tabs.Panel value="nominee" pt="xl">
+            <NomineeDashboard onBack={() => setActiveTab("dashboard")} />
+          </Tabs.Panel>
+        )}
+
+        <Tabs.Panel value="leave" pt="xl">
+          <LeaveApplication onBack={() => setActiveTab("dashboard")} />
+        </Tabs.Panel>
+
+        {!hideFinanceTabs && (
+          <Tabs.Panel value="ltc" pt="xl">
+            <LTCForm onBack={() => setActiveTab("dashboard")} />
+          </Tabs.Panel>
+        )}
+
+        <Tabs.Panel value="appraisal" pt="xl">
+          <AppraisalForm onBack={() => setActiveTab("dashboard")} />
+        </Tabs.Panel>
+
+        {!hideFinanceTabs && (
+          <Tabs.Panel value="cpda-advance" pt="xl">
+            <CPDAAdvance onBack={() => setActiveTab("dashboard")} />
+          </Tabs.Panel>
+        )}
+      </Tabs>
+    </div>
+  );
+}
+
+export default HR2Module;
diff --git a/src/components/sidebarContent.jsx b/src/components/sidebarContent.jsx
index b77581b39..d1d3d4d56 100644
--- a/src/components/sidebarContent.jsx
+++ b/src/components/sidebarContent.jsx
@@ -42,6 +42,9 @@ import { setCurrentModule } from "../redux/moduleslice";
 
 function SidebarContent({ isCollapsed, toggleSidebar }) {
   const role = useSelector((state) => state.user.role);
+  const isEmployee = /employee/i.test(role || "");
+  const isFacultyEmployee =
+    /assistant\s+professor|associate\s+professor|professor/i.test(role || "");
 
   const Modules = [
     {
@@ -132,7 +135,7 @@ function SidebarContent({ isCollapsed, toggleSidebar }) {
       label: "Human Resource",
       id: "hr",
       icon: <HumanResourceIcon size={18} />,
-      url: "/",
+      url: "/hr2",
     },
     {
       label: "Examination",
@@ -140,7 +143,7 @@ function SidebarContent({ isCollapsed, toggleSidebar }) {
       icon: <ExamIcon size={18} />,
       url: "/examination",
     },
-        {
+    {
       label: "Database",
       id: "database",
       icon: <DatabaseIcon size={18} />,
@@ -193,11 +196,17 @@ function SidebarContent({ isCollapsed, toggleSidebar }) {
   const navigate = useNavigate();
 
   useEffect(() => {
-    const filterModules = Modules.filter(
-      (module) => accessibleModules[module.id] || module.id === "home",
-    );
+    const filterModules = Modules.filter((module) => {
+      if (
+        (isEmployee || isFacultyEmployee) &&
+        ["course_registration", "examinations"].includes(module.id)
+      ) {
+        return false;
+      }
+      return accessibleModules[module.id] || module.id === "home";
+    });
     setFilteredModules(filterModules);
-  }, [accessibleModules]);
+  }, [accessibleModules, isEmployee]);
 
   const handleModuleClick = (item) => {
     setSelected(item.label);
diff --git a/src/index.css b/src/index.css
index 39b56ad15..4e93eb74f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,4 +20,237 @@
   .hide-scrollbar::-webkit-scrollbar {
     display: none;
   }
+
+:root {
+  --fusion-primary: #15abff;
+  --fusion-bg: #f5f7f8;
+  --fusion-surface: #ffffff;
+  --fusion-border: #e2e8f0;
+  --fusion-text: #0f172a;
+  --fusion-muted: #64748b;
+}
+
+.fusion-page {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.fusion-card {
+  background: var(--fusion-surface);
+  border: 1px solid var(--fusion-border);
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
+
+.fusion-heading {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--fusion-text);
+  margin: 0;
+}
+
+.fusion-subtitle {
+  font-size: 14px;
+  color: var(--fusion-muted);
+  margin: 4px 0 0;
+}
+
+.fusion-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.fusion-button-primary {
+  background: var(--fusion-primary);
+  color: #ffffff;
+  border: none;
+  border-radius: 10px;
+  padding: 10px 16px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.fusion-button-primary:hover {
+  background: #1394df;
+}
+
+.fusion-button-ghost {
+  border: 1px solid var(--fusion-border);
+  background: #ffffff;
+  color: #334155;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.fusion-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.fusion-grid-4 {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.fusion-stat {
+  background: var(--fusion-surface);
+  border: 1px solid var(--fusion-border);
+  border-radius: 14px;
+  padding: 16px;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
+}
+
+.fusion-stat-label {
+  font-size: 13px;
+  color: var(--fusion-muted);
+}
+
+.fusion-stat-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--fusion-text);
+  margin-top: 6px;
+}
+
+.fusion-balance-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.fusion-balance-card {
+  background: #f8fafc;
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.fusion-balance-label {
+  font-size: 13px;
+  color: var(--fusion-muted);
+}
+
+.fusion-balance-value {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--fusion-text);
+  margin-top: 6px;
+}
+
+.fusion-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.fusion-table th {
+  text-align: left;
+  padding: 12px 16px;
+  background: #f8fafc;
+  color: #475569;
+  font-weight: 600;
+}
+
+.fusion-table td {
+  padding: 12px 16px;
+  border-top: 1px solid #edf2f7;
+  color: #334155;
+}
+
+.fusion-table-wrap {
+  border: 1px solid var(--fusion-border);
+  border-radius: 16px;
+  overflow: hidden;
+  background: var(--fusion-surface);
+}
+
+.fusion-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 16px;
+  border-bottom: 1px solid var(--fusion-border);
+}
+
+.fusion-input,
+.fusion-select,
+.fusion-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #cbd5f5;
+  border-radius: 10px;
+  font-size: 14px;
+  background: #ffffff;
+  color: var(--fusion-text);
+}
+
+.fusion-input:focus,
+.fusion-select:focus,
+.fusion-textarea:focus {
+  outline: none;
+  border-color: var(--fusion-primary);
+  box-shadow: 0 0 0 3px rgba(21, 171, 255, 0.15);
+}
+
+.fusion-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.fusion-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.fusion-modal {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(15, 23, 42, 0.55);
+  z-index: 50;
+}
+
+.fusion-modal-card {
+  width: min(860px, 100%);
+  max-height: 90vh;
+  overflow-y: auto;
+  background: #ffffff;
+  border-radius: 18px;
+  padding: 24px;
+  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
+}
+
+.fusion-section {
+  border: 1px solid var(--fusion-border);
+  border-radius: 12px;
+  padding: 16px;
+  background: #f8fafc;
+}
+
+.fusion-section-alt {
+  border: 1px solid var(--fusion-border);
+  border-radius: 12px;
+  padding: 16px;
+  background: #ffffff;
+}
+
+@media (max-width: 720px) {
+  .fusion-page {
+    padding: 16px;
+  }
+}
   
\ No newline at end of file
diff --git a/src/routes/globalRoutes.zip b/src/routes/globalRoutes.zip
new file mode 100644
index 000000000..b2fcf779d
Binary files /dev/null and b/src/routes/globalRoutes.zip differ
diff --git a/src/routes/hrModuleRoutes.zip b/src/routes/hrModuleRoutes.zip
new file mode 100644
index 000000000..29a29bd72
Binary files /dev/null and b/src/routes/hrModuleRoutes.zip differ
diff --git a/src/routes/hrModuleRoutes/index.jsx b/src/routes/hrModuleRoutes/index.jsx
new file mode 100644
index 000000000..16d41f662
--- /dev/null
+++ b/src/routes/hrModuleRoutes/index.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import HR2Module from "../../Modules/HRModule";
+
+function HRModuleRoutes() {
+  return <HR2Module />;
+}
+
+export default HRModuleRoutes;