diff --git a/src/App.jsx b/src/App.jsx
index 99d55a675..1bc6aa36c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,6 +15,7 @@ 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 InstituteWorks from "./Modules/InstituteWorks";
 import NotFoundPage from "./components/NotFoundPage";
 
 const theme = createTheme({
@@ -82,6 +83,14 @@ export default function App() {
         <Route path="/reset-password" element={<ForgotPassword />} />
         <Route path="/examination/*" element={<Examination />} />
         <Route path="/database/*" element={<Database />} />
+        <Route
+          path="/institute-works"
+          element={
+            <Layout>
+              <InstituteWorks />
+            </Layout>
+          }
+        />
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </MantineProvider>
diff --git a/src/Modules/InstituteWorks/AdminApprovalQueueView.jsx b/src/Modules/InstituteWorks/AdminApprovalQueueView.jsx
new file mode 100644
index 000000000..faf53f4cc
--- /dev/null
+++ b/src/Modules/InstituteWorks/AdminApprovalQueueView.jsx
@@ -0,0 +1,150 @@
+import { useEffect, useMemo, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import AdminApprovalQueueTable from "./components/AdminApprovalQueueTable";
+import AdminApprovalActionModal from "./components/AdminApprovalActionModal";
+import {
+  getApiErrorMessage,
+  getDesignations,
+  getEngineerProcessedRequests,
+  submitAdminApproval,
+} from "./api";
+
+const DEAN_HOD_ROLES = [
+  "dean (p&d)",
+  "deanpnd",
+  "dean_s",
+  "dean academic",
+  "dean (r&d)",
+  "dean_rspc",
+  "hod (cse)",
+  "hod (design)",
+  "hod (ece)",
+  "hod (me)",
+  "hod (ns)",
+  "hod (liberal arts)",
+  "hod",
+];
+
+function isDeanHodOption(value) {
+  const designation = String(value || "").split("|", 1)[0].trim().toLowerCase();
+  return DEAN_HOD_ROLES.some((role) => designation.includes(role));
+}
+
+function hasProposal(row) {
+  return row?.estimated_budget != null || row?.estimatedBudget != null;
+}
+
+function AdminApprovalQueueView() {
+  const [rows, setRows] = useState([]);
+  const [designationOptions, setDesignationOptions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const [selectedFileId, setSelectedFileId] = useState(null);
+  const [action, setAction] = useState("approve");
+  const [designation, setDesignation] = useState("");
+  const [remarks, setRemarks] = useState("");
+  const [file, setFile] = useState(null);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const [queueRows, designationsData] = await Promise.all([
+        getEngineerProcessedRequests(),
+        getDesignations(),
+      ]);
+      setRows(queueRows.filter(hasProposal));
+
+      const options = (designationsData?.holdsDesignations || []).map(
+        (item) => ({
+          value: `${item.designation?.name || ""}|${item.username || ""}`,
+          label: `${item.designation?.name || "Unknown"} (${item.username || "-"})`,
+        }),
+      );
+      setDesignationOptions(options.filter((item) => isDeanHodOption(item.value)));
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to fetch admin queue."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const ready = useMemo(
+    () => Boolean(selectedFileId && action && designation),
+    [selectedFileId, action, designation],
+  );
+
+  const openActionModal = (fileId) => {
+    setSelectedFileId(fileId);
+    setAction("approve");
+    setDesignation("");
+    setRemarks("");
+    setFile(null);
+    setOpened(true);
+  };
+
+  const submit = async (event) => {
+    event.preventDefault();
+    if (!ready) return;
+
+    setIsSaving(true);
+    try {
+      await submitAdminApproval({
+        fileid: selectedFileId,
+        action,
+        designation,
+        remarks,
+        file,
+      });
+      notifications.show({
+        color: "green",
+        message: "Admin action submitted.",
+      });
+      setOpened(false);
+      await load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to submit admin action."),
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <AdminApprovalQueueTable
+        rows={rows}
+        isLoading={isLoading}
+        onRefresh={load}
+        onAction={openActionModal}
+      />
+      <AdminApprovalActionModal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        onSubmit={submit}
+        action={action}
+        setAction={setAction}
+        designationOptions={designationOptions}
+        designation={designation}
+        setDesignation={setDesignation}
+        remarks={remarks}
+        setRemarks={setRemarks}
+        file={file}
+        setFile={setFile}
+        isSaving={isSaving}
+        isReady={ready}
+      />
+    </>
+  );
+}
+
+export default AdminApprovalQueueView;
diff --git a/src/Modules/InstituteWorks/BillAuditView.jsx b/src/Modules/InstituteWorks/BillAuditView.jsx
new file mode 100644
index 000000000..57cea6782
--- /dev/null
+++ b/src/Modules/InstituteWorks/BillAuditView.jsx
@@ -0,0 +1,106 @@
+import { useEffect, useMemo, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useSelector } from "react-redux";
+import BillAuditTable from "./components/BillAuditTable";
+import BillAuditModal from "./components/BillAuditModal";
+import {
+  getApiErrorMessage,
+  getAuditDocuments,
+  submitAuditDocument,
+} from "./api";
+
+function BillAuditView() {
+  const role = useSelector((state) => state.user.role);
+  const [rows, setRows] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const [selectedFileId, setSelectedFileId] = useState(null);
+  const [selectedBill, setSelectedBill] = useState(null);
+  const [remarks, setRemarks] = useState("");
+  const [attachment, setAttachment] = useState(null);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const auditRows = await getAuditDocuments(role);
+      setRows(auditRows);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to fetch audit documents."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, [role]);
+
+  const ready = useMemo(
+    () => Boolean(selectedFileId),
+    [selectedFileId],
+  );
+
+  const openAudit = (billRow) => {
+    setSelectedFileId(billRow?.file_id || null);
+    setSelectedBill(billRow || null);
+    setRemarks("");
+    setAttachment(null);
+    setOpened(true);
+  };
+
+  const submit = async (event) => {
+    event.preventDefault();
+    if (!ready) return;
+
+    setIsSaving(true);
+    try {
+      await submitAuditDocument({
+        fileid: selectedFileId,
+        remarks,
+        attachment,
+      });
+      notifications.show({
+        color: "green",
+        message: "Bill audited and forwarded.",
+      });
+      setOpened(false);
+      await load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to audit and forward this bill."),
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <BillAuditTable
+        rows={rows}
+        isLoading={isLoading}
+        onRefresh={load}
+        onAudit={openAudit}
+      />
+      <BillAuditModal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        onSubmit={submit}
+        selectedBill={selectedBill}
+        remarks={remarks}
+        setRemarks={setRemarks}
+        attachment={attachment}
+        setAttachment={setAttachment}
+        isSaving={isSaving}
+        isReady={ready}
+      />
+    </>
+  );
+}
+
+export default BillAuditView;
diff --git a/src/Modules/InstituteWorks/BillGenerationView.jsx b/src/Modules/InstituteWorks/BillGenerationView.jsx
new file mode 100644
index 000000000..24176b178
--- /dev/null
+++ b/src/Modules/InstituteWorks/BillGenerationView.jsx
@@ -0,0 +1,143 @@
+import { useEffect, useMemo, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useSelector } from "react-redux";
+import BillGenerationTable from "./components/BillGenerationTable";
+import BillGenerationModal from "./components/BillGenerationModal";
+import { getApiErrorMessage, getIssuedWork, markBillGenerated } from "./api";
+
+function BillGenerationView() {
+  const role = useSelector((state) => state.user.role);
+  const [rows, setRows] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [workingId, setWorkingId] = useState(null);
+  const [opened, setOpened] = useState(false);
+  const [selectedRequestId, setSelectedRequestId] = useState(null);
+  const [vendorId, setVendorId] = useState("");
+  const [billItems, setBillItems] = useState([
+    { name: "", description: "", quantity: "", price: "" },
+  ]);
+
+  const isBillItemValid = (item) =>
+    Boolean(item.name.trim()) && Number(item.quantity) > 0 && Number(item.price) >= 0;
+
+  const billTotal = useMemo(
+    () =>
+      billItems.reduce((sum, item) => {
+        const quantity = Number(item.quantity) || 0;
+        const price = Number(item.price) || 0;
+        return sum + quantity * price;
+      }, 0),
+    [billItems],
+  );
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const data = await getIssuedWork(role, {
+        work_completed: 1,
+        bill_generated: 0,
+      });
+      setRows(data);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to fetch issued work list."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, [role]);
+
+  const openGenerate = (id) => {
+    setSelectedRequestId(id);
+    setVendorId("");
+    setBillItems([{ name: "", description: "", quantity: "", price: "" }]);
+    setOpened(true);
+  };
+
+  const updateBillItem = (index, field, value) => {
+    setBillItems((current) =>
+      current.map((item, itemIndex) =>
+        itemIndex === index ? { ...item, [field]: value } : item,
+      ),
+    );
+  };
+
+  const addBillItem = () => {
+    setBillItems((current) => [
+      ...current,
+      { name: "", description: "", quantity: "", price: "" },
+    ]);
+  };
+
+  const removeBillItem = (index) => {
+    setBillItems((current) => current.filter((_, itemIndex) => itemIndex !== index));
+  };
+
+  const submitGenerate = async (event) => {
+    event.preventDefault();
+    if (!selectedRequestId || !billItems.some(isBillItemValid)) return;
+
+    const normalizedBillItems = billItems
+      .filter(isBillItemValid)
+      .map((item) => ({
+        name: item.name.trim(),
+        description: item.description.trim(),
+        quantity: Number(item.quantity),
+        price: Number(item.price),
+      }));
+
+    setWorkingId(selectedRequestId);
+    try {
+      await markBillGenerated({
+        id: selectedRequestId,
+        vendor_id: vendorId.trim(),
+        bill_items: normalizedBillItems,
+      });
+      notifications.show({
+        color: "green",
+        message: `Request #${selectedRequestId} moved to Generated Bills.`,
+      });
+      setOpened(false);
+      await load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to mark bill generated."),
+      });
+    } finally {
+      setWorkingId(null);
+    }
+  };
+
+  return (
+    <>
+      <BillGenerationTable
+        rows={rows}
+        isLoading={isLoading}
+        workingId={workingId}
+        onRefresh={load}
+        onGenerate={openGenerate}
+      />
+      <BillGenerationModal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        onSubmit={submitGenerate}
+        requestId={selectedRequestId}
+        vendorId={vendorId}
+        setVendorId={setVendorId}
+        billItems={billItems}
+        updateBillItem={updateBillItem}
+        addBillItem={addBillItem}
+        removeBillItem={removeBillItem}
+        billTotal={billTotal}
+      />
+    </>
+  );
+}
+
+export default BillGenerationView;
diff --git a/src/Modules/InstituteWorks/BillProcessingView.jsx b/src/Modules/InstituteWorks/BillProcessingView.jsx
new file mode 100644
index 000000000..96adff27c
--- /dev/null
+++ b/src/Modules/InstituteWorks/BillProcessingView.jsx
@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import BillProcessingTable from "./components/BillProcessingTable";
+import {
+  getApiErrorMessage,
+  getDesignations,
+  getGeneratedBills,
+  downloadBillPdf,
+} from "./api";
+
+function BillProcessingView() {
+  const [rows, setRows] = useState([]);
+  const [designationOptions, setDesignationOptions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const [billRows, designationsData] = await Promise.all([
+        getGeneratedBills(),
+        getDesignations(),
+      ]);
+      setRows(billRows);
+
+      const options = (designationsData?.holdsDesignations || []).map(
+        (item) => ({
+          value: `${item.designation?.name || ""}|${item.username || ""}`,
+          label: `${item.designation?.name || "Unknown"} (${item.username || "-"})`,
+        }),
+      );
+      setDesignationOptions(options);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to fetch generated bills."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  return (
+    <>
+      <BillProcessingTable
+        rows={rows}
+        isLoading={isLoading}
+        onRefresh={load}
+        getBillPdfUrl={downloadBillPdf}
+      />
+    </>
+  );
+}
+
+export default BillProcessingView;
diff --git a/src/Modules/InstituteWorks/BillSettlementView.jsx b/src/Modules/InstituteWorks/BillSettlementView.jsx
new file mode 100644
index 000000000..f255dc0dc
--- /dev/null
+++ b/src/Modules/InstituteWorks/BillSettlementView.jsx
@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import BillSettlementTable from "./components/BillSettlementTable";
+import { getApiErrorMessage, getSettleBills, settleBill } from "./api";
+
+function BillSettlementView() {
+  const [rows, setRows] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [workingId, setWorkingId] = useState(null);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const data = await getSettleBills();
+      setRows(data);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to fetch bills for settlement."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const handleSettle = async (id) => {
+    setWorkingId(id);
+    try {
+      await settleBill(id);
+      notifications.show({
+        color: "green",
+        message: `Bill settled for request #${id}.`,
+      });
+      await load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to settle this bill."),
+      });
+    } finally {
+      setWorkingId(null);
+    }
+  };
+
+  return (
+    <BillSettlementTable
+      rows={rows}
+      isLoading={isLoading}
+      workingId={workingId}
+      onRefresh={load}
+      onSettle={handleSettle}
+    />
+  );
+}
+
+export default BillSettlementView;
diff --git a/src/Modules/InstituteWorks/BudgetManagementView.jsx b/src/Modules/InstituteWorks/BudgetManagementView.jsx
new file mode 100644
index 000000000..2b043b1d8
--- /dev/null
+++ b/src/Modules/InstituteWorks/BudgetManagementView.jsx
@@ -0,0 +1,125 @@
+import { useEffect, useMemo, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import BudgetAddForm from "./components/BudgetAddForm";
+import BudgetListTable from "./components/BudgetListTable";
+import BudgetEditForm from "./components/BudgetEditForm";
+import SectionStack from "./components/SectionStack";
+import { addBudget, editBudget, getBudgets } from "./api";
+
+function BudgetManagementView() {
+  const [rows, setRows] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSavingNew, setIsSavingNew] = useState(false);
+  const [editingId, setEditingId] = useState(null);
+
+  const [newName, setNewName] = useState("");
+  const [newBudget, setNewBudget] = useState(0);
+
+  const [editName, setEditName] = useState("");
+  const [editBudgetValue, setEditBudgetValue] = useState(0);
+
+  const canCreate = useMemo(
+    () => Boolean(newName && Number(newBudget) > 0),
+    [newName, newBudget],
+  );
+  const canEdit = useMemo(
+    () => Boolean(editingId && editName && Number(editBudgetValue) >= 0),
+    [editingId, editName, editBudgetValue],
+  );
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const data = await getBudgets();
+      setRows(data);
+    } catch {
+      notifications.show({ color: "red", message: "Unable to fetch budgets." });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const submitNewBudget = async (event) => {
+    event.preventDefault();
+    if (!canCreate) return;
+
+    setIsSavingNew(true);
+    try {
+      await addBudget({ name: newName.trim(), budget: Number(newBudget) });
+      notifications.show({
+        color: "green",
+        message: "Budget added successfully.",
+      });
+      setNewName("");
+      setNewBudget(0);
+      await load();
+    } catch {
+      notifications.show({ color: "red", message: "Unable to add budget." });
+    } finally {
+      setIsSavingNew(false);
+    }
+  };
+
+  const startEdit = (row) => {
+    setEditingId(row.id);
+    setEditName(row.name || "");
+    setEditBudgetValue(Number(row.budgetIssued || 0));
+  };
+
+  const submitEdit = async () => {
+    if (!canEdit) return;
+    try {
+      await editBudget({
+        id: editingId,
+        name: editName.trim(),
+        budget: Number(editBudgetValue),
+      });
+      notifications.show({
+        color: "green",
+        message: "Budget updated successfully.",
+      });
+      setEditingId(null);
+      setEditName("");
+      setEditBudgetValue(0);
+      await load();
+    } catch {
+      notifications.show({ color: "red", message: "Unable to update budget." });
+    }
+  };
+
+  return (
+    <SectionStack>
+      <BudgetAddForm
+        newName={newName}
+        setNewName={setNewName}
+        newBudget={newBudget}
+        setNewBudget={setNewBudget}
+        onSubmit={submitNewBudget}
+        isSaving={isSavingNew}
+        canCreate={canCreate}
+      />
+      <BudgetListTable
+        rows={rows}
+        isLoading={isLoading}
+        onRefresh={load}
+        onEdit={startEdit}
+      />
+      <BudgetEditForm
+        editingId={editingId}
+        editName={editName}
+        setEditName={setEditName}
+        editBudgetValue={editBudgetValue}
+        setEditBudgetValue={setEditBudgetValue}
+        onSave={submitEdit}
+        onCancel={() => setEditingId(null)}
+        canEdit={canEdit}
+      />
+    </SectionStack>
+  );
+}
+
+export default BudgetManagementView;
diff --git a/src/Modules/InstituteWorks/CreateRequestView.jsx b/src/Modules/InstituteWorks/CreateRequestView.jsx
new file mode 100644
index 000000000..409b79d74
--- /dev/null
+++ b/src/Modules/InstituteWorks/CreateRequestView.jsx
@@ -0,0 +1,104 @@
+import { useEffect, useMemo, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useSelector } from "react-redux";
+import InfoNotice from "./components/InfoNotice";
+import RequestForm from "./components/RequestForm";
+import { createRequest, getApiErrorMessage, getDesignations } from "./api";
+
+function CreateRequestView() {
+  const role = useSelector((state) => state.user.role);
+  const [designationOptions, setDesignationOptions] = useState([]);
+  const [isLoadingDesignations, setIsLoadingDesignations] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [canCreateRequest, setCanCreateRequest] = useState(false);
+  const [accessMessage, setAccessMessage] = useState("");
+
+  useEffect(() => {
+    const loadDesignations = async () => {
+      setIsLoadingDesignations(true);
+      try {
+        const response = await getDesignations();
+        const designationData = response?.holdsDesignations || [];
+        const adminIwdReceivers = designationData.filter(
+          (item) => item?.designation?.name === "Admin IWD",
+        );
+        const options = adminIwdReceivers.map((item) => ({
+          value: `${item.designation?.name || ""}|${item.username || ""}`,
+          label: `${item.designation?.name || "Unknown"} (${item.username || "-"})`,
+        }));
+        setDesignationOptions(options);
+        setCanCreateRequest(Boolean(response?.canCreateRequest));
+
+        if (response?.canCreateRequest) {
+          setAccessMessage("");
+        } else {
+          const currentUserDesignations =
+            response?.currentUserDesignations || [];
+          setAccessMessage(
+            currentUserDesignations.length > 0
+              ? `Your current designations (${currentUserDesignations.join(", ")}) are not allowed to create IWD requests.`
+              : "You do not hold any designation that can create IWD requests.",
+          );
+        }
+      } catch (error) {
+        notifications.show({
+          color: "red",
+          message: getApiErrorMessage(error, "Unable to fetch designation options."),
+        });
+      } finally {
+        setIsLoadingDesignations(false);
+      }
+    };
+
+    loadDesignations();
+  }, []);
+
+  const emptyNotice = useMemo(
+    () =>
+      isLoadingDesignations
+        ? "Loading designations..."
+        : "No Admin IWD recipients available.",
+    [isLoadingDesignations],
+  );
+
+  const handleCreateRequest = async (payload) => {
+    setIsSubmitting(true);
+    try {
+      await createRequest({ ...payload, role });
+      notifications.show({
+        color: "green",
+        message: "IWD request created successfully.",
+      });
+    } catch (error) {
+      const message = getApiErrorMessage(error, "Failed to create request.");
+      notifications.show({
+        color: "red",
+        message,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (!isLoadingDesignations && !canCreateRequest) {
+    return (
+      <InfoNotice
+        message={accessMessage || "You are not allowed to create IWD requests."}
+      />
+    );
+  }
+
+  if (designationOptions.length === 0) {
+    return <InfoNotice message={emptyNotice} />;
+  }
+
+  return (
+    <RequestForm
+      designationOptions={designationOptions}
+      isSubmitting={isSubmitting}
+      onSubmit={handleCreateRequest}
+    />
+  );
+}
+
+export default CreateRequestView;
diff --git a/src/Modules/InstituteWorks/CreatedRequestsView.jsx b/src/Modules/InstituteWorks/CreatedRequestsView.jsx
new file mode 100644
index 000000000..8b02232b2
--- /dev/null
+++ b/src/Modules/InstituteWorks/CreatedRequestsView.jsx
@@ -0,0 +1,80 @@
+import { useEffect, useMemo, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useSelector } from "react-redux";
+import CreatedRequestsTable from "./components/CreatedRequestsTable";
+import TrackingHistoryModal from "./components/TrackingHistoryModal";
+import {
+  getCreatedRequests,
+  getViewFile,
+} from "./api";
+
+function CreatedRequestsView() {
+  const role = useSelector((state) => state.user.role);
+  const [requests, setRequests] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // View tracking modal state
+  const [trackingOpened, setTrackingOpened] = useState(false);
+  const [fileData, setFileData] = useState(null);
+  const [tracks, setTracks] = useState([]);
+  const [isTrackingLoading, setIsTrackingLoading] = useState(false);
+
+  const loadRequests = async () => {
+    setIsLoading(true);
+    try {
+      const data = await getCreatedRequests(role);
+      setRequests(data);
+    } catch {
+      notifications.show({
+        color: "red",
+        message: "Unable to fetch created IWD requests.",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!role) return;
+    loadRequests();
+  }, [role]);
+
+  const openTrackingModal = async (fileId) => {
+    setFileData(null);
+    setTracks([]);
+    setTrackingOpened(true);
+    setIsTrackingLoading(true);
+    try {
+      const data = await getViewFile(fileId);
+      setFileData(data.file || null);
+      setTracks(data.tracks || []);
+    } catch {
+      notifications.show({
+        color: "red",
+        message: "Unable to fetch file tracking data.",
+      });
+    } finally {
+      setIsTrackingLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <CreatedRequestsTable
+        requests={requests}
+        isLoading={isLoading}
+        onRefresh={loadRequests}
+        onTracking={openTrackingModal}
+      />
+      <TrackingHistoryModal
+        opened={trackingOpened}
+        onClose={() => setTrackingOpened(false)}
+        isLoading={isTrackingLoading}
+        fileData={fileData}
+        tracks={tracks}
+      />
+    </>
+  );
+}
+
+export default CreatedRequestsView;
diff --git a/src/Modules/InstituteWorks/DeanDirectorQueueView.jsx b/src/Modules/InstituteWorks/DeanDirectorQueueView.jsx
new file mode 100644
index 000000000..eb60ba2a9
--- /dev/null
+++ b/src/Modules/InstituteWorks/DeanDirectorQueueView.jsx
@@ -0,0 +1,108 @@
+import { useEffect, useMemo, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useSelector } from "react-redux";
+import DeanDirectorQueueTable from "./components/DeanDirectorQueueTable";
+import DeanDirectorActionModal from "./components/DeanDirectorActionModal";
+import {
+  getApiErrorMessage,
+  getDeanProcessedRequests,
+  submitDirectorApproval,
+} from "./api";
+
+function DeanDirectorQueueView() {
+  const role = useSelector((state) => state.user.role);
+  const [rows, setRows] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const [selectedFileId, setSelectedFileId] = useState(null);
+  const [action, setAction] = useState("approve");
+  const [remarks, setRemarks] = useState("");
+  const [file, setFile] = useState(null);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const deanRows = await getDeanProcessedRequests(role);
+      setRows(deanRows);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to fetch dean/director queue."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, [role]);
+
+  const ready = useMemo(
+    () => Boolean(selectedFileId && action),
+    [selectedFileId, action],
+  );
+
+  const openActionModal = (fileId) => {
+    setSelectedFileId(fileId);
+    setAction("approve");
+    setRemarks("");
+    setFile(null);
+    setOpened(true);
+  };
+
+  const submit = async (event) => {
+    event.preventDefault();
+    if (!ready) return;
+
+    setIsSaving(true);
+    try {
+      await submitDirectorApproval({
+        fileid: selectedFileId,
+        action,
+        remarks,
+        file,
+      });
+      notifications.show({
+        color: "green",
+        message: "Director action submitted.",
+      });
+      setOpened(false);
+      await load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to submit director action."),
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <DeanDirectorQueueTable
+        rows={rows}
+        isLoading={isLoading}
+        onRefresh={load}
+        onAction={openActionModal}
+      />
+      <DeanDirectorActionModal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        onSubmit={submit}
+        action={action}
+        setAction={setAction}
+        remarks={remarks}
+        setRemarks={setRemarks}
+        file={file}
+        setFile={setFile}
+        isSaving={isSaving}
+        isReady={ready}
+      />
+    </>
+  );
+}
+
+export default DeanDirectorQueueView;
diff --git a/src/Modules/InstituteWorks/DeanProcessingQueueView.jsx b/src/Modules/InstituteWorks/DeanProcessingQueueView.jsx
new file mode 100644
index 000000000..60b719401
--- /dev/null
+++ b/src/Modules/InstituteWorks/DeanProcessingQueueView.jsx
@@ -0,0 +1,157 @@
+import { useEffect, useMemo, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useSelector } from "react-redux";
+import DeanProcessingQueueTable from "./components/DeanProcessingQueueTable";
+import DeanProcessingActionModal from "./components/DeanProcessingActionModal";
+import {
+  getApiErrorMessage,
+  getDeanPendingRequests,
+  getDesignations,
+  handleDeanProcessRequest,
+} from "./api";
+
+function isDirectorOption(value) {
+  const designation = String(value || "").split("|", 1)[0].trim().toLowerCase();
+  return designation === "director";
+}
+
+function isAdminIwdOption(value) {
+  const designation = String(value || "").split("|", 1)[0].trim().toLowerCase();
+  return designation === "admin iwd";
+}
+
+function readField(item, snakeKey, camelKey) {
+  return item?.[snakeKey] ?? item?.[camelKey] ?? null;
+}
+
+function isDeanPendingItem(item) {
+  const admin = Number(item?.iwdAdminApproval ?? item?.processed_by_admin ?? 0);
+  const dean = Number(item?.deanProcessed ?? item?.processed_by_dean ?? 0);
+  const director = Number(item?.directorApproval ?? item?.processed_by_director ?? 0);
+  const budget = readField(item, "estimated_budget", "estimatedBudget");
+  return admin === 1 && dean === 0 && director === 0 && budget != null;
+}
+
+function DeanProcessingQueueView() {
+  const role = useSelector((state) => state.user.role);
+  const [rows, setRows] = useState([]);
+  const [designationOptions, setDesignationOptions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const [selectedFileId, setSelectedFileId] = useState(null);
+  const [action, setAction] = useState("approve");
+  const [designation, setDesignation] = useState("");
+  const [remarks, setRemarks] = useState("");
+  const [file, setFile] = useState(null);
+  const [allDesignationOptions, setAllDesignationOptions] = useState([]);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const [inboxRows, designationsData] = await Promise.all([
+        getDeanPendingRequests(role),
+        getDesignations(),
+      ]);
+      setRows(inboxRows.filter(isDeanPendingItem));
+      const options = (designationsData?.holdsDesignations || []).map(
+        (item) => ({
+          value: `${item.designation?.name || ""}|${item.username || ""}`,
+          label: `${item.designation?.name || "Unknown"} (${item.username || "-"})`,
+        }),
+      );
+      setAllDesignationOptions(options);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to fetch dean processing queue."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, [role]);
+
+  useEffect(() => {
+    const filtered =
+      action === "reject"
+        ? allDesignationOptions.filter((item) => isAdminIwdOption(item.value))
+        : allDesignationOptions.filter((item) => isDirectorOption(item.value));
+    setDesignationOptions(filtered);
+    setDesignation("");
+  }, [action, allDesignationOptions]);
+
+  const ready = useMemo(
+    () => Boolean(selectedFileId && designation),
+    [selectedFileId, designation],
+  );
+
+  const openActionModal = (fileId) => {
+    setSelectedFileId(fileId);
+    setAction("approve");
+    setDesignation("");
+    setRemarks("");
+    setFile(null);
+    setOpened(true);
+  };
+
+  const submit = async (event) => {
+    event.preventDefault();
+    if (!ready) return;
+    setIsSaving(true);
+    try {
+      await handleDeanProcessRequest({
+        fileid: selectedFileId,
+        action,
+        designation,
+        remarks,
+        file,
+      });
+      notifications.show({
+        color: "green",
+        message: "Request processed and forwarded by dean.",
+      });
+      setOpened(false);
+      await load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to process request."),
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <DeanProcessingQueueTable
+        rows={rows}
+        isLoading={isLoading}
+        onRefresh={load}
+        onAction={openActionModal}
+      />
+      <DeanProcessingActionModal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        onSubmit={submit}
+        action={action}
+        setAction={setAction}
+        designationOptions={designationOptions}
+        designation={designation}
+        setDesignation={setDesignation}
+        remarks={remarks}
+        setRemarks={setRemarks}
+        file={file}
+        setFile={setFile}
+        isSaving={isSaving}
+        isReady={ready}
+      />
+    </>
+  );
+}
+
+export default DeanProcessingQueueView;
diff --git a/src/Modules/InstituteWorks/DirectorApprovedView.jsx b/src/Modules/InstituteWorks/DirectorApprovedView.jsx
new file mode 100644
index 000000000..5ae2f3ab0
--- /dev/null
+++ b/src/Modules/InstituteWorks/DirectorApprovedView.jsx
@@ -0,0 +1,134 @@
+import { useEffect, useMemo, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import DirectorApprovedTable from "./components/DirectorApprovedTable";
+import IssueWorkOrderModal from "./components/IssueWorkOrderModal";
+import {
+  getApiErrorMessage,
+  getDirectorApprovedRequests,
+  issueWorkOrder,
+} from "./api";
+
+function toIsoDate(value) {
+  if (!value) return "";
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return "";
+  const year = d.getFullYear();
+  const month = `${d.getMonth() + 1}`.padStart(2, "0");
+  const day = `${d.getDate()}`.padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+function isCompletionDateValid(startDate, completionDate) {
+  if (!startDate || !completionDate) return true;
+  const start = new Date(startDate);
+  const end = new Date(completionDate);
+  start.setHours(0, 0, 0, 0);
+  end.setHours(0, 0, 0, 0);
+  return end >= start;
+}
+
+const initialForm = {
+  request_id: "",
+  name: "",
+  alloted_time: "",
+  start_date: null,
+  completion_date: null,
+};
+
+function DirectorApprovedView() {
+  const [requests, setRequests] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const [form, setForm] = useState(initialForm);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const data = await getDirectorApprovedRequests();
+      setRequests(data);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to fetch director-approved requests."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const readyToSubmit = useMemo(
+    () =>
+      Boolean(
+        form.request_id && form.name && form.alloted_time && form.start_date,
+      ) && isCompletionDateValid(form.start_date, form.completion_date),
+    [form],
+  );
+
+  const openForRequest = (row) => {
+    setForm({
+      request_id: row.id,
+      name: row.name || "",
+      alloted_time: "",
+      start_date: null,
+      completion_date: null,
+    });
+    setOpened(true);
+  };
+
+  const submit = async (event) => {
+    event.preventDefault();
+    if (!readyToSubmit) return;
+
+    setIsSaving(true);
+    try {
+      await issueWorkOrder({
+        request_id: form.request_id,
+        name: (form.name || "").trim(),
+        alloted_time: (form.alloted_time || "").trim(),
+        start_date: toIsoDate(form.start_date),
+        completion_date: toIsoDate(form.completion_date),
+      });
+      notifications.show({
+        color: "green",
+        message: "Work order issued successfully.",
+      });
+      setOpened(false);
+      setForm(initialForm);
+      await load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to issue work order."),
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <DirectorApprovedTable
+        requests={requests}
+        isLoading={isLoading}
+        onRefresh={load}
+        onIssue={openForRequest}
+      />
+      <IssueWorkOrderModal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        onSubmit={submit}
+        form={form}
+        setForm={setForm}
+        isSaving={isSaving}
+        isReady={readyToSubmit}
+      />
+    </>
+  );
+}
+
+export default DirectorApprovedView;
diff --git a/src/Modules/InstituteWorks/FeedbackView.jsx b/src/Modules/InstituteWorks/FeedbackView.jsx
new file mode 100644
index 000000000..18614951a
--- /dev/null
+++ b/src/Modules/InstituteWorks/FeedbackView.jsx
@@ -0,0 +1,366 @@
+import { useEffect, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import {
+  Button,
+  Container,
+  Grid,
+  Group,
+  Loader,
+  Paper,
+  Rating,
+  Select,
+  Stack,
+  Text,
+  Textarea,
+  Title,
+  Center,
+  Badge,
+  ScrollArea,
+  Table,
+} from "@mantine/core";
+import { getRequestsStatus, submitFeedback, reopenRequest, getFeedbackHistory, getApiErrorMessage } from "./api";
+
+function FeedbackView() {
+  const [completedRequests, setCompletedRequests] = useState([]);
+  const [feedbackHistory, setFeedbackHistory] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedRequestId, setSelectedRequestId] = useState("");
+  const [rating, setRating] = useState(0);
+  const [comments, setComments] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Reopen modal state
+  const [selectedReopenRequestId, setSelectedReopenRequestId] = useState("");
+  const [reopenReason, setReopenReason] = useState("");
+  const [isReopening, setIsReopening] = useState(false);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const [data, feedbackResult] = await Promise.all([
+        getRequestsStatus(""),
+        getFeedbackHistory(1, 10),
+      ]);
+      // Filter for completed/settled requests
+      const completed = (data || []).filter(
+        (req) =>
+          req.work_completed === 1 ||
+          req.bill_settled === 1 ||
+          req.status === "Final Bill Settled" ||
+          req.status === "Resolved"
+      );
+      setCompletedRequests(completed);
+      setFeedbackHistory(feedbackResult.items || []);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to load completed requests."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const handleSubmitFeedback = async () => {
+    if (!selectedRequestId || rating === 0) {
+      notifications.show({
+        color: "yellow",
+        message: "Please select a request and provide a rating.",
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      await submitFeedback(parseInt(selectedRequestId), rating, comments);
+      notifications.show({
+        color: "green",
+        message: "Feedback submitted successfully!",
+      });
+      setSelectedRequestId("");
+      setRating(0);
+      setComments("");
+      load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Failed to submit feedback."),
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleReopenRequest = async () => {
+    if (!selectedReopenRequestId) {
+      notifications.show({
+        color: "yellow",
+        message: "Please select a request to reopen.",
+      });
+      return;
+    }
+
+    setIsReopening(true);
+    try {
+      await reopenRequest(parseInt(selectedReopenRequestId), reopenReason);
+      notifications.show({
+        color: "green",
+        message: "Request reopened successfully. It will be re-worked.",
+      });
+      setSelectedReopenRequestId("");
+      setReopenReason("");
+      load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Failed to reopen request."),
+      });
+    } finally {
+      setIsReopening(false);
+    }
+  };
+
+  if (isLoading && completedRequests.length === 0) {
+    return (
+      <Center p="xl" style={{ minHeight: "400px" }}>
+        <Loader />
+      </Center>
+    );
+  }
+
+  const requestOptions = completedRequests.map((req) => ({
+    value: req.id?.toString() || "",
+    label: `Request #${req.id} - ${req.name} (${req.area})`,
+  }));
+
+  return (
+    <Container size="lg" py="xl">
+      <Title order={2} mb="xl">
+        Feedback & Case Management
+      </Title>
+
+      <Grid>
+        {/* Feedback Submission */}
+        <Grid.Col span={{ base: 12, md: 6 }}>
+          <Paper p="md" radius="md" withBorder>
+            <Title order={4} mb="lg">
+              Submit Feedback
+            </Title>
+            <Stack gap="md">
+              <div>
+                <Text size="sm" fw={500} mb="xs">
+                  Select Completed Request
+                </Text>
+                <Select
+                  placeholder="Choose a request..."
+                  data={requestOptions}
+                  value={selectedRequestId}
+                  onChange={(val) => setSelectedRequestId(val || "")}
+                  searchable
+                />
+              </div>
+
+              <div>
+                <Text size="sm" fw={500} mb="xs">
+                  Rate Your Experience
+                </Text>
+                <Text size="xs" c="dimmed" mb="xs">
+                  Select 1 to 5 stars.
+                </Text>
+                <Group gap="md">
+                  <Rating
+                    value={rating}
+                    onChange={setRating}
+                    size="lg"
+                    fractions={1}
+                    count={5}
+                    color="yellow"
+                  />
+                  <div>
+                    {rating > 0 && (
+                      <Badge color={rating >= 4 ? "green" : rating >= 3 ? "yellow" : "red"}>
+                        {rating === 5
+                          ? "Excellent"
+                          : rating === 4
+                          ? "Good"
+                          : rating === 3
+                          ? "Average"
+                          : rating === 2
+                          ? "Below Average"
+                          : "Poor"}
+                      </Badge>
+                    )}
+                  </div>
+                </Group>
+              </div>
+
+              {selectedRequestId ? (
+                <>
+                  <Textarea
+                    label="Additional Comments"
+                    placeholder="Tell us about your experience..."
+                    value={comments}
+                    onChange={(e) => setComments(e.currentTarget.value)}
+                    minRows={3}
+                  />
+
+                  <Button
+                    onClick={handleSubmitFeedback}
+                    loading={isSubmitting}
+                    fullWidth
+                  >
+                    Submit Feedback
+                  </Button>
+
+                  {rating <= 2 && (
+                    <Paper p="sm" bg="orange.1" radius="sm" withBorder>
+                      <Text size="sm" c="orange.9">
+                        ⚠️ Low rating noted. You can reopen this case if issues need further work.
+                      </Text>
+                    </Paper>
+                  )}
+                </>
+              ) : (
+                <Text size="sm" c="dimmed">
+                  Choose a completed request to enable comments and submission.
+                </Text>
+              )}
+            </Stack>
+          </Paper>
+        </Grid.Col>
+
+        {/* Case Reopening */}
+        <Grid.Col span={{ base: 12, md: 6 }}>
+          <Paper p="md" radius="md" withBorder>
+            <Title order={4} mb="lg">
+              Reopen Case
+            </Title>
+            <Stack gap="md">
+              <Text size="sm" c="gray">
+                Reopen a completed request if issues are found that require additional work.
+              </Text>
+
+              <div>
+                <Text size="sm" fw={500} mb="xs">
+                  Select Request to Reopen
+                </Text>
+                <Select
+                  placeholder="Choose a request..."
+                  data={requestOptions}
+                  value={selectedReopenRequestId}
+                  onChange={(val) => setSelectedReopenRequestId(val || "")}
+                  searchable
+                />
+              </div>
+
+              {selectedReopenRequestId && (
+                <>
+                  <Textarea
+                    label="Reason for Reopening"
+                    placeholder="Describe the issues that need attention..."
+                    value={reopenReason}
+                    onChange={(e) => setReopenReason(e.currentTarget.value)}
+                    minRows={3}
+                  />
+
+                  <Paper p="md" bg="red.1" radius="sm" withBorder>
+                    <Text size="sm" c="red.9">
+                      ⚠️ Reopening will revert the request to work-in-progress state. The engineer will need to re-do the work and resubmit bills.
+                    </Text>
+                  </Paper>
+
+                  <Button
+                    onClick={handleReopenRequest}
+                    loading={isReopening}
+                    color="red"
+                    fullWidth
+                  >
+                    Reopen Request
+                  </Button>
+                </>
+              )}
+            </Stack>
+          </Paper>
+        </Grid.Col>
+      </Grid>
+
+      <Paper p="md" radius="md" withBorder mt="xl">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Recent Feedback</Title>
+          <Text size="sm" c="dimmed">
+            Latest submitted ratings and reopen flags
+          </Text>
+        </Group>
+        <ScrollArea>
+          <Table striped highlightOnHover>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Created At</Table.Th>
+                <Table.Th>Request</Table.Th>
+                <Table.Th>Rating</Table.Th>
+                <Table.Th>Reopened</Table.Th>
+                <Table.Th>Comments</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {feedbackHistory.length === 0 ? (
+                <Table.Tr>
+                  <Table.Td colSpan={5} ta="center" py="xl">
+                    <Text c="gray">No feedback records found.</Text>
+                  </Table.Td>
+                </Table.Tr>
+              ) : (
+                feedbackHistory.map((feedback) => (
+                  <Table.Tr key={feedback.id}>
+                    <Table.Td>
+                      {feedback.created_at ? new Date(feedback.created_at).toLocaleString() : "-"}
+                    </Table.Td>
+                    <Table.Td>#{feedback.request}</Table.Td>
+                    <Table.Td>
+                      <Stack gap={4}>
+                        <Badge color={feedback.rating >= 4 ? "green" : feedback.rating >= 3 ? "yellow" : "red"} variant="light">
+                          {feedback.rating}/5
+                        </Badge>
+                        <Rating value={Number(feedback.rating || 0)} readOnly size="sm" fractions={1} color="yellow" />
+                      </Stack>
+                    </Table.Td>
+                    <Table.Td>
+                      <Badge color={feedback.reopened ? "orange" : "gray"} variant="light">
+                        {feedback.reopened ? "Yes" : "No"}
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td>{feedback.comments || "-"}</Table.Td>
+                  </Table.Tr>
+                ))
+              )}
+            </Table.Tbody>
+          </Table>
+        </ScrollArea>
+      </Paper>
+
+      {/* Instructions */}
+      <Paper p="md" radius="md" withBorder mt="xl" bg="blue.0">
+        <Title order={5} mb="sm">
+          ℹ️ How to Use
+        </Title>
+        <Stack gap="xs" size="sm">
+          <Text>
+            <strong>Feedback:</strong> After your request is completed and billed, please rate your experience and provide comments to help us improve.
+          </Text>
+          <Text>
+            <strong>Reopen:</strong> If you encounter post-repair issues, reopen the case immediately so the team can address it.
+          </Text>
+          <Text>
+            <strong>Rating Guide:</strong> 1=Poor, 2=Below Average, 3=Average, 4=Good, 5=Excellent
+          </Text>
+        </Stack>
+      </Paper>
+    </Container>
+  );
+}
+
+export default FeedbackView;
diff --git a/src/Modules/InstituteWorks/InventoryManagementView.jsx b/src/Modules/InstituteWorks/InventoryManagementView.jsx
new file mode 100644
index 000000000..d9ba0dae8
--- /dev/null
+++ b/src/Modules/InstituteWorks/InventoryManagementView.jsx
@@ -0,0 +1,440 @@
+import { useEffect, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import {
+  Button,
+  Container,
+  Dialog,
+  Grid,
+  Group,
+  Loader,
+  NumberInput,
+  Paper,
+  ScrollArea,
+  Table,
+  TextInput,
+  Title,
+  Badge,
+  Modal,
+  Stack,
+  Text,
+  Center,
+  Select,
+} from "@mantine/core";
+import { getInventoryItems, getInventoryTransactions, issueMaterials, receiveMaterials, getApiErrorMessage } from "./api";
+
+function InventoryManagementView() {
+  const [items, setItems] = useState([]);
+  const [transactions, setTransactions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [lowStockFilter, setLowStockFilter] = useState("");
+
+  // Issue Material Modal
+  const [issueModalOpen, setIssueModalOpen] = useState(false);
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [issueQuantity, setIssueQuantity] = useState(1);
+  const [issueRemarks, setIssueRemarks] = useState("");
+  const [isIssuing, setIsIssuing] = useState(false);
+
+  // Receive Material Modal
+  const [receiveModalOpen, setReceiveModalOpen] = useState(false);
+  const [receiveQuantity, setReceiveQuantity] = useState(1);
+  const [receiveRemarks, setReceiveRemarks] = useState("");
+  const [isReceiving, setIsReceiving] = useState(false);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const filters = {};
+      if (searchQuery) filters.name = searchQuery;
+      if (lowStockFilter) filters.is_low_stock = lowStockFilter === "true";
+
+      const [result, transactionResult] = await Promise.all([
+        getInventoryItems(currentPage, 20, filters),
+        getInventoryTransactions(1, 10),
+      ]);
+      setItems(result.items || []);
+      setTransactions(transactionResult.items || []);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to load inventory items."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, [currentPage, searchQuery, lowStockFilter]);
+
+  const handleIssueMaterial = async () => {
+    if (!selectedItem || issueQuantity <= 0) {
+      notifications.show({
+        color: "yellow",
+        message: "Please select item and quantity.",
+      });
+      return;
+    }
+
+    setIsIssuing(true);
+    try {
+      await issueMaterials(selectedItem.id, issueQuantity, null, issueRemarks);
+      notifications.show({
+        color: "green",
+        message: `Successfully issued ${issueQuantity} ${selectedItem.unit} of ${selectedItem.name}`,
+      });
+      setIssueModalOpen(false);
+      setSelectedItem(null);
+      setIssueQuantity(1);
+      setIssueRemarks("");
+      load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Failed to issue material."),
+      });
+    } finally {
+      setIsIssuing(false);
+    }
+  };
+
+  const handleReceiveMaterial = async () => {
+    if (!selectedItem || receiveQuantity <= 0) {
+      notifications.show({
+        color: "yellow",
+        message: "Please select item and quantity.",
+      });
+      return;
+    }
+
+    setIsReceiving(true);
+    try {
+      await receiveMaterials(selectedItem.id, receiveQuantity, receiveRemarks);
+      notifications.show({
+        color: "green",
+        message: `Successfully received ${receiveQuantity} ${selectedItem.unit} of ${selectedItem.name}`,
+      });
+      setReceiveModalOpen(false);
+      setSelectedItem(null);
+      setReceiveQuantity(1);
+      setReceiveRemarks("");
+      load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Failed to receive material."),
+      });
+    } finally {
+      setIsReceiving(false);
+    }
+  };
+
+  if (isLoading && items.length === 0) {
+    return (
+      <Center p="xl" style={{ minHeight: "400px" }}>
+        <Loader />
+      </Center>
+    );
+  }
+
+  return (
+    <Container size="lg" py="xl">
+      <Group mb="xl" justify="space-between">
+        <Title order={2}>Inventory Management</Title>
+        <Button onClick={load} loading={isLoading} size="sm" variant="light">
+          Refresh
+        </Button>
+      </Group>
+
+      {/* Filters */}
+      <Paper p="md" radius="md" withBorder mb="xl">
+        <Group grow>
+          <TextInput
+            placeholder="Search by item name..."
+            value={searchQuery}
+            onChange={(e) => {
+              setSearchQuery(e.currentTarget.value);
+              setCurrentPage(1);
+            }}
+            rightSection={searchQuery ? "✕" : null}
+          />
+          <Select
+            placeholder="Filter by stock status"
+            data={[
+              { label: "All Items", value: "" },
+              { label: "In Stock", value: "false" },
+              { label: "Low Stock", value: "true" },
+            ]}
+            value={lowStockFilter}
+            onChange={(val) => {
+              setLowStockFilter(val || "");
+              setCurrentPage(1);
+            }}
+            clearable
+          />
+        </Group>
+      </Paper>
+
+      {/* Items Table */}
+      <Paper radius="md" withBorder>
+        <ScrollArea>
+          <Table striped highlightOnHover>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Item Name</Table.Th>
+                <Table.Th>Description</Table.Th>
+                <Table.Th>Unit</Table.Th>
+                <Table.Th>Available</Table.Th>
+                <Table.Th>Reorder Level</Table.Th>
+                <Table.Th>Status</Table.Th>
+                <Table.Th>Actions</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {items.length === 0 ? (
+                <Table.Tr>
+                  <Table.Td colSpan={7} ta="center" py="xl">
+                    <Text c="gray">No inventory items found.</Text>
+                  </Table.Td>
+                </Table.Tr>
+              ) : (
+                items.map((item) => (
+                  <Table.Tr
+                    key={item.id}
+                    style={{
+                      backgroundColor: item.is_low_stock ? "#ffe0e0" : undefined,
+                    }}
+                  >
+                    <Table.Td fw={500}>{item.name}</Table.Td>
+                    <Table.Td size="sm">{item.description || "-"}</Table.Td>
+                    <Table.Td>{item.unit}</Table.Td>
+                    <Table.Td fw={500}>{item.quantity_available}</Table.Td>
+                    <Table.Td>{item.reorder_level}</Table.Td>
+                    <Table.Td>
+                      {item.is_low_stock ? (
+                        <Badge color="red" variant="filled">
+                          LOW STOCK
+                        </Badge>
+                      ) : item.needs_procurement ? (
+                        <Badge color="orange" variant="filled">
+                          NO STOCK
+                        </Badge>
+                      ) : (
+                        <Badge color="green" variant="light">
+                          OK
+                        </Badge>
+                      )}
+                    </Table.Td>
+                    <Table.Td>
+                      <Group gap="xs">
+                        <Button
+                          size="xs"
+                          variant="light"
+                          color="blue"
+                          onClick={() => {
+                            setSelectedItem(item);
+                            setIssueQuantity(1);
+                            setIssueRemarks("");
+                            setIssueModalOpen(true);
+                          }}
+                        >
+                          Issue
+                        </Button>
+                        <Button
+                          size="xs"
+                          variant="light"
+                          color="green"
+                          onClick={() => {
+                            setSelectedItem(item);
+                            setReceiveQuantity(1);
+                            setReceiveRemarks("");
+                            setReceiveModalOpen(true);
+                          }}
+                        >
+                          Receive
+                        </Button>
+                      </Group>
+                    </Table.Td>
+                  </Table.Tr>
+                ))
+              )}
+            </Table.Tbody>
+          </Table>
+        </ScrollArea>
+      </Paper>
+
+      <Paper radius="md" withBorder mt="xl">
+        <Group justify="space-between" p="md">
+          <Text fw={700}>Recent Inventory Transactions</Text>
+          <Text size="sm" c="dimmed">
+            Latest issue and receipt activity
+          </Text>
+        </Group>
+        <ScrollArea>
+          <Table striped highlightOnHover>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Timestamp</Table.Th>
+                <Table.Th>Item</Table.Th>
+                <Table.Th>Type</Table.Th>
+                <Table.Th>Qty</Table.Th>
+                <Table.Th>Request</Table.Th>
+                <Table.Th>By</Table.Th>
+                <Table.Th>Remarks</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {transactions.length === 0 ? (
+                <Table.Tr>
+                  <Table.Td colSpan={7} ta="center" py="xl">
+                    <Text c="gray">No recent inventory transactions.</Text>
+                  </Table.Td>
+                </Table.Tr>
+              ) : (
+                transactions.map((transaction) => {
+                  const typeColor =
+                    transaction.transaction_type === "issue"
+                      ? "red"
+                      : transaction.transaction_type === "receipt"
+                        ? "green"
+                        : "blue";
+                  const timestamp = transaction.timestamp
+                    ? new Date(transaction.timestamp).toLocaleString()
+                    : "-";
+
+                  return (
+                    <Table.Tr key={transaction.id}>
+                      <Table.Td>{timestamp}</Table.Td>
+                      <Table.Td>{transaction.item_name || transaction.item}</Table.Td>
+                      <Table.Td>
+                        <Badge color={typeColor} variant="light">
+                          {transaction.transaction_type}
+                        </Badge>
+                      </Table.Td>
+                      <Table.Td>{transaction.quantity}</Table.Td>
+                      <Table.Td>{transaction.request || "-"}</Table.Td>
+                      <Table.Td>{transaction.performed_by}</Table.Td>
+                      <Table.Td>{transaction.remarks || "-"}</Table.Td>
+                    </Table.Tr>
+                  );
+                })
+              )}
+            </Table.Tbody>
+          </Table>
+        </ScrollArea>
+      </Paper>
+
+      {/* Issue Material Modal */}
+      <Modal
+        opened={issueModalOpen}
+        onClose={() => {
+          setIssueModalOpen(false);
+          setSelectedItem(null);
+        }}
+        title={`Issue Material: ${selectedItem?.name || ""}`}
+      >
+        <Stack gap="md">
+          {selectedItem && (
+            <>
+              <div>
+                <Text size="sm" c="gray">
+                  Available: {selectedItem.quantity_available} {selectedItem.unit}
+                </Text>
+              </div>
+              <NumberInput
+                label="Quantity to Issue"
+                placeholder="Enter quantity"
+                value={issueQuantity}
+                onChange={(val) => setIssueQuantity(val || 1)}
+                min={1}
+                max={selectedItem.quantity_available}
+              />
+              <TextInput
+                label="Remarks"
+                placeholder="Optional notes..."
+                value={issueRemarks}
+                onChange={(e) => setIssueRemarks(e.currentTarget.value)}
+              />
+              <Group>
+                <Button
+                  onClick={handleIssueMaterial}
+                  loading={isIssuing}
+                  color="blue"
+                >
+                  Issue Material
+                </Button>
+                <Button
+                  variant="default"
+                  onClick={() => {
+                    setIssueModalOpen(false);
+                    setSelectedItem(null);
+                  }}
+                >
+                  Cancel
+                </Button>
+              </Group>
+            </>
+          )}
+        </Stack>
+      </Modal>
+
+      {/* Receive Material Modal */}
+      <Modal
+        opened={receiveModalOpen}
+        onClose={() => {
+          setReceiveModalOpen(false);
+          setSelectedItem(null);
+        }}
+        title={`Receive Material: ${selectedItem?.name || ""}`}
+      >
+        <Stack gap="md">
+          {selectedItem && (
+            <>
+              <div>
+                <Text size="sm" c="gray">
+                  Unit: {selectedItem.unit}
+                </Text>
+              </div>
+              <NumberInput
+                label="Quantity to Receive"
+                placeholder="Enter quantity"
+                value={receiveQuantity}
+                onChange={(val) => setReceiveQuantity(val || 1)}
+                min={1}
+              />
+              <TextInput
+                label="Remarks"
+                placeholder="Optional notes..."
+                value={receiveRemarks}
+                onChange={(e) => setReceiveRemarks(e.currentTarget.value)}
+              />
+              <Group>
+                <Button
+                  onClick={handleReceiveMaterial}
+                  loading={isReceiving}
+                  color="green"
+                >
+                  Receive Material
+                </Button>
+                <Button
+                  variant="default"
+                  onClick={() => {
+                    setReceiveModalOpen(false);
+                    setSelectedItem(null);
+                  }}
+                >
+                  Cancel
+                </Button>
+              </Group>
+            </>
+          )}
+        </Stack>
+      </Modal>
+    </Container>
+  );
+}
+
+export default InventoryManagementView;
diff --git a/src/Modules/InstituteWorks/ProposalBuilderView.jsx b/src/Modules/InstituteWorks/ProposalBuilderView.jsx
new file mode 100644
index 000000000..7e7b16d84
--- /dev/null
+++ b/src/Modules/InstituteWorks/ProposalBuilderView.jsx
@@ -0,0 +1,191 @@
+import { useEffect, useMemo, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useSelector } from "react-redux";
+import ProposalRequestsTable from "./components/ProposalRequestsTable";
+import ProposalItemsModal from "./components/ProposalItemsModal";
+import {
+  createProposal,
+  getApiErrorMessage,
+  getDesignations,
+  getRequestsStatus,
+} from "./api";
+
+function newItemRow() {
+  return {
+    name: "",
+    description: "",
+    unit: "",
+    quantity: 1,
+    price_per_unit: 0,
+    docs: null,
+  };
+}
+
+function hasActiveProposal(row) {
+  const activeProposal = row?.active_proposal ?? row?.activeProposal;
+  return Boolean(activeProposal);
+}
+
+function ProposalBuilderView() {
+  const role = useSelector((state) => state.user.role);
+  const [rows, setRows] = useState([]);
+  const [designationOptions, setDesignationOptions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const [selectedRequestId, setSelectedRequestId] = useState(null);
+  const [selectedRequestPriority, setSelectedRequestPriority] = useState(false);
+  const [designation, setDesignation] = useState("");
+  const [supportingDocument, setSupportingDocument] = useState(null);
+  const [items, setItems] = useState([newItemRow()]);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const [statusRows, designationsData] = await Promise.all([
+        getRequestsStatus(role),
+        getDesignations(),
+      ]);
+      const pendingEngineerProposal = statusRows.filter(
+        (row) => !hasActiveProposal(row),
+      );
+      setRows(pendingEngineerProposal);
+
+      const options = (designationsData?.holdsDesignations || []).map(
+        (item) => ({
+          value: `${item.designation?.name || ""}|${item.username || ""}`,
+          label: `${item.designation?.name || "Unknown"} (${item.username || "-"})`,
+        }),
+      );
+      const adminIwdOptions = options.filter((item) =>
+        item.value.startsWith("Admin IWD|"),
+      );
+      setDesignationOptions(adminIwdOptions);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to load proposal builder data."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, [role]);
+
+  const totalBudget = useMemo(
+    () =>
+      items.reduce(
+        (acc, item) =>
+          acc + Number(item.quantity || 0) * Number(item.price_per_unit || 0),
+        0,
+      ),
+    [items],
+  );
+
+  const ready = useMemo(
+    () =>
+      Boolean(
+        selectedRequestId &&
+        designation &&
+        items.length > 0 &&
+        items.every((item) => item.name && item.unit),
+      ),
+    [selectedRequestId, designation, items],
+  );
+
+  const openModal = async (row) => {
+    if (hasActiveProposal(row)) {
+      notifications.show({
+        color: "yellow",
+        message: "An active proposal already exists for this request.",
+      });
+      await load();
+      return;
+    }
+
+    setSelectedRequestId(row.request_id);
+    setSelectedRequestPriority(Boolean(row?.is_priority ?? row?.isPriority));
+    setDesignation("");
+    setSupportingDocument(null);
+    setItems([newItemRow()]);
+    setOpened(true);
+  };
+
+  const updateItem = (index, field, value) => {
+    setItems((prev) =>
+      prev.map((item, i) => (i === index ? { ...item, [field]: value } : item)),
+    );
+  };
+
+  const addItem = () => {
+    setItems((prev) => [...prev, newItemRow()]);
+  };
+
+  const removeItem = (index) => {
+    setItems((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const submit = async (event) => {
+    event.preventDefault();
+    if (!ready) return;
+
+    setIsSaving(true);
+    try {
+      await createProposal({
+        id: selectedRequestId,
+        designation,
+        supporting_documents: supportingDocument,
+        items,
+        isPriority: selectedRequestPriority,
+      });
+      notifications.show({
+        color: "green",
+        message: "Proposal created successfully.",
+      });
+      setOpened(false);
+      await load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to create proposal."),
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <ProposalRequestsTable
+        rows={rows}
+        isLoading={isLoading}
+        onRefresh={load}
+        onCreate={openModal}
+      />
+      <ProposalItemsModal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        onSubmit={submit}
+        title="Create Proposal"
+        submitLabel="Submit Proposal"
+        designationOptions={designationOptions}
+        designation={designation}
+        setDesignation={setDesignation}
+        supportingDocument={supportingDocument}
+        setSupportingDocument={setSupportingDocument}
+        items={items}
+        updateItem={updateItem}
+        addItem={addItem}
+        removeItem={removeItem}
+        totalBudget={totalBudget}
+        isSaving={isSaving}
+        isReady={ready}
+      />
+    </>
+  );
+}
+
+export default ProposalBuilderView;
diff --git a/src/Modules/InstituteWorks/RejectedRequestsView.jsx b/src/Modules/InstituteWorks/RejectedRequestsView.jsx
new file mode 100644
index 000000000..87670bc92
--- /dev/null
+++ b/src/Modules/InstituteWorks/RejectedRequestsView.jsx
@@ -0,0 +1,162 @@
+import { useEffect, useMemo, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useSelector } from "react-redux";
+import RejectedRequestsTable from "./components/RejectedRequestsTable";
+import ProposalItemsModal from "./components/ProposalItemsModal";
+import {
+  getApiErrorMessage,
+  getDesignations,
+  getRejectedRequests,
+  handleUpdateRequest,
+} from "./api";
+
+function newItemRow() {
+  return {
+    name: "",
+    description: "",
+    unit: "",
+    quantity: 1,
+    price_per_unit: 0,
+    docs: null,
+  };
+}
+
+function RejectedRequestsView() {
+  const role = useSelector((state) => state.user.role);
+  const [rows, setRows] = useState([]);
+  const [designationOptions, setDesignationOptions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const [selectedRequestId, setSelectedRequestId] = useState(null);
+  const [designation, setDesignation] = useState("");
+  const [supportingDocument, setSupportingDocument] = useState(null);
+  const [items, setItems] = useState([newItemRow()]);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const [rejectedRows, designationsData] = await Promise.all([
+        getRejectedRequests(role),
+        getDesignations(),
+      ]);
+      setRows(rejectedRows);
+      const options = (designationsData?.holdsDesignations || []).map(
+        (item) => ({
+          value: `${item.designation?.name || ""}|${item.username || ""}`,
+          label: `${item.designation?.name || "Unknown"} (${item.username || "-"})`,
+        }),
+      );
+      setDesignationOptions(options);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to fetch rejected requests."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, [role]);
+
+  const totalBudget = useMemo(
+    () =>
+      items.reduce(
+        (acc, item) =>
+          acc + Number(item.quantity || 0) * Number(item.price_per_unit || 0),
+        0,
+      ),
+    [items],
+  );
+
+  const ready = useMemo(
+    () =>
+      Boolean(
+        selectedRequestId &&
+        designation &&
+        items.length > 0 &&
+        items.every((item) => item.name && item.unit),
+      ),
+    [selectedRequestId, designation, items],
+  );
+
+  const openModal = (requestId) => {
+    setSelectedRequestId(requestId);
+    setDesignation("");
+    setSupportingDocument(null);
+    setItems([newItemRow()]);
+    setOpened(true);
+  };
+
+  const updateItem = (index, field, value) => {
+    setItems((prev) =>
+      prev.map((item, i) => (i === index ? { ...item, [field]: value } : item)),
+    );
+  };
+
+  const addItem = () => setItems((prev) => [...prev, newItemRow()]);
+  const removeItem = (index) =>
+    setItems((prev) => prev.filter((_, i) => i !== index));
+
+  const submit = async (event) => {
+    event.preventDefault();
+    if (!ready) return;
+    setIsSaving(true);
+    try {
+      await handleUpdateRequest({
+        id: selectedRequestId,
+        designation,
+        supporting_documents: supportingDocument,
+        items,
+      });
+      notifications.show({
+        color: "green",
+        message: "Request resubmitted successfully.",
+      });
+      setOpened(false);
+      await load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to resubmit request."),
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <RejectedRequestsTable
+        rows={rows}
+        isLoading={isLoading}
+        onRefresh={load}
+        onResubmit={openModal}
+      />
+      <ProposalItemsModal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        onSubmit={submit}
+        title="Resubmit with Updated Proposal"
+        submitLabel="Resubmit"
+        designationOptions={designationOptions}
+        designation={designation}
+        setDesignation={setDesignation}
+        supportingDocument={supportingDocument}
+        setSupportingDocument={setSupportingDocument}
+        items={items}
+        updateItem={updateItem}
+        addItem={addItem}
+        removeItem={removeItem}
+        totalBudget={totalBudget}
+        isSaving={isSaving}
+        isReady={ready}
+      />
+    </>
+  );
+}
+
+export default RejectedRequestsView;
diff --git a/src/Modules/InstituteWorks/RequestsInProgressView.jsx b/src/Modules/InstituteWorks/RequestsInProgressView.jsx
new file mode 100644
index 000000000..1bc169120
--- /dev/null
+++ b/src/Modules/InstituteWorks/RequestsInProgressView.jsx
@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import RequestsInProgressTable from "./components/RequestsInProgressTable";
+import { getRequestsInProgress } from "./api";
+
+function RequestsInProgressView() {
+  const [rows, setRows] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const data = await getRequestsInProgress();
+      setRows(data);
+    } catch {
+      notifications.show({
+        color: "red",
+        message: "Unable to fetch requests in progress.",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  return (
+    <RequestsInProgressTable
+      rows={rows}
+      isLoading={isLoading}
+      onRefresh={load}
+    />
+  );
+}
+
+export default RequestsInProgressView;
diff --git a/src/Modules/InstituteWorks/RequestsStatusView.jsx b/src/Modules/InstituteWorks/RequestsStatusView.jsx
new file mode 100644
index 000000000..6d082f340
--- /dev/null
+++ b/src/Modules/InstituteWorks/RequestsStatusView.jsx
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useSelector } from "react-redux";
+import RequestsStatusTable from "./components/RequestsStatusTable";
+import { getRequestsStatus } from "./api";
+
+function RequestsStatusView() {
+  const role = useSelector((state) => state.user.role);
+  const [rows, setRows] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const data = await getRequestsStatus(role);
+      setRows(data);
+    } catch {
+      notifications.show({
+        color: "red",
+        message: "Unable to fetch request status list.",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, [role]);
+
+  return <RequestsStatusTable rows={rows} isLoading={isLoading} onRefresh={load} />;
+}
+
+export default RequestsStatusView;
diff --git a/src/Modules/InstituteWorks/SLADashboardView.jsx b/src/Modules/InstituteWorks/SLADashboardView.jsx
new file mode 100644
index 000000000..a6d188f5d
--- /dev/null
+++ b/src/Modules/InstituteWorks/SLADashboardView.jsx
@@ -0,0 +1,276 @@
+import { useEffect, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { Container, Grid, Paper, Text, Title, Badge, Table, ScrollArea, Loader, Center, Button, Group } from "@mantine/core";
+import { getSLADashboard, getSLAEscalations, getApiErrorMessage } from "./api";
+
+function SLADashboardView() {
+  const [dashboardData, setDashboardData] = useState(null);
+  const [escalations, setEscalations] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const [data, escalationResult] = await Promise.all([
+        getSLADashboard(),
+        getSLAEscalations(1, 10),
+      ]);
+      setDashboardData(data);
+      setEscalations(escalationResult.items || []);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to fetch SLA dashboard."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+    // Auto-refresh every 5 minutes
+    const timer = setInterval(load, 5 * 60 * 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  if (isLoading && !dashboardData) {
+    return (
+      <Center p="xl" style={{ minHeight: "400px" }}>
+        <Loader />
+      </Center>
+    );
+  }
+
+  const {
+    total_active = 0,
+    pending_count = 0,
+    due_soon_count = 0,
+    overdue_count = 0,
+    overdue_requests = [],
+    escalation_count = 0,
+    priority_count = 0,
+  } = dashboardData || {};
+
+  // Determine metric colors
+  const getMetricColor = (count, threshold = 5) => {
+    if (count === 0) return "blue";
+    if (count > threshold) return "red";
+    if (count > threshold / 2) return "yellow";
+    return "green";
+  };
+
+  return (
+    <Container size="lg" py="xl">
+      <Group mb="xl" justify="space-between">
+        <Title order={2}>SLA Monitoring Dashboard</Title>
+        <Button onClick={load} loading={isLoading} size="sm" variant="light">
+          Refresh
+        </Button>
+      </Group>
+
+      {/* Key Metrics */}
+      <Grid mb="xl">
+        <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
+          <Paper p="md" radius="md" withBorder>
+            <Text size="sm" c="gray" mb="xs">
+              Total Active
+            </Text>
+            <Text size="xl" fw={700}>
+              {total_active}
+            </Text>
+          </Paper>
+        </Grid.Col>
+
+        <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
+          <Paper p="md" radius="md" withBorder>
+            <Text size="sm" c="gray" mb="xs">
+              On Track
+            </Text>
+            <Text size="xl" fw={700} c="green">
+              {pending_count}
+            </Text>
+          </Paper>
+        </Grid.Col>
+
+        <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
+          <Paper p="md" radius="md" withBorder style={{ borderLeft: "4px solid #fab005" }}>
+            <Text size="sm" c="gray" mb="xs">
+              Due Soon
+            </Text>
+            <Text size="xl" fw={700} c="orange">
+              {due_soon_count}
+            </Text>
+          </Paper>
+        </Grid.Col>
+
+        <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
+          <Paper p="md" radius="md" withBorder style={{ borderLeft: "4px solid #fa5252" }}>
+            <Text size="sm" c="gray" mb="xs">
+              Overdue
+            </Text>
+            <Text size="xl" fw={700} c="red">
+              {overdue_count}
+            </Text>
+          </Paper>
+        </Grid.Col>
+      </Grid>
+
+      <Grid>
+        <Grid.Col span={{ base: 12, md: 6 }}>
+          <Paper p="md" radius="md" withBorder>
+            <Text fw={700} mb="md">
+              Escalations & Priority
+            </Text>
+            <Group grow>
+              <div>
+                <Text size="sm" c="gray">
+                  Active Escalations
+                </Text>
+                <Badge
+                  color={getMetricColor(escalation_count)}
+                  size="lg"
+                  variant="filled"
+                >
+                  {escalation_count}
+                </Badge>
+              </div>
+              <div>
+                <Text size="sm" c="gray">
+                  Priority Requests
+                </Text>
+                <Badge color={getMetricColor(priority_count)} size="lg" variant="filled">
+                  {priority_count}
+                </Badge>
+              </div>
+            </Group>
+          </Paper>
+        </Grid.Col>
+
+        <Grid.Col span={{ base: 12, md: 6 }}>
+          <Paper p="md" radius="md" withBorder>
+            <Text fw={700} mb="md">
+              SLA Compliance
+            </Text>
+            <Group grow>
+              <div>
+                <Text size="sm" c="gray">
+                  Compliance Rate
+                </Text>
+                <Text size="lg" fw={700}>
+                  {total_active > 0
+                    ? ((pending_count / total_active) * 100).toFixed(1)
+                    : 100}
+                  %
+                </Text>
+              </div>
+            </Group>
+          </Paper>
+        </Grid.Col>
+      </Grid>
+
+      {/* Overdue Requests Table */}
+      {overdue_requests && overdue_requests.length > 0 ? (
+        <Paper p="md" radius="md" withBorder mt="xl">
+          <Title order={4} mb="md">
+            Overdue Requests
+            <Badge color="red" ml="xs" variant="filled">
+              {overdue_requests.length}
+            </Badge>
+          </Title>
+          <ScrollArea>
+            <Table striped highlightOnHover>
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th>Request ID</Table.Th>
+                  <Table.Th>Request Name</Table.Th>
+                  <Table.Th>Approver Level</Table.Th>
+                  <Table.Th>Days Overdue</Table.Th>
+                  <Table.Th>Status</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {overdue_requests.map((req, idx) => (
+                  <Table.Tr key={idx} style={{ backgroundColor: "#ffe0e0" }}>
+                    <Table.Td fw={500}>#{req.request_id}</Table.Td>
+                    <Table.Td>{req.request_name}</Table.Td>
+                    <Table.Td>{req.approver_level}</Table.Td>
+                    <Table.Td>
+                      <Badge color="red" variant="filled">
+                        {req.days_overdue > 0 ? `+${req.days_overdue}` : "0"}
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td>
+                      {req.is_priority ? (
+                        <Badge color="orange" variant="filled">
+                          PRIORITY
+                        </Badge>
+                      ) : (
+                        <Badge color="gray" variant="light">
+                          Normal
+                        </Badge>
+                      )}
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </ScrollArea>
+        </Paper>
+      ) : (
+        <Paper p="md" radius="md" withBorder mt="xl">
+          <Text c="green" fw={500} ta="center">
+            ✓ No overdue requests - All SLAs are being met!
+          </Text>
+        </Paper>
+      )}
+
+      <Paper p="md" radius="md" withBorder mt="xl">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Recent SLA Escalations</Title>
+          <Text size="sm" c="dimmed">
+            Latest overdue and redirected requests
+          </Text>
+        </Group>
+        <ScrollArea>
+          <Table striped highlightOnHover>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Request</Table.Th>
+                <Table.Th>From</Table.Th>
+                <Table.Th>To</Table.Th>
+                <Table.Th>Reason</Table.Th>
+                <Table.Th>Resolved</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {escalations.length === 0 ? (
+                <Table.Tr>
+                  <Table.Td colSpan={5} ta="center" py="xl">
+                    <Text c="gray">No escalation records found.</Text>
+                  </Table.Td>
+                </Table.Tr>
+              ) : (
+                escalations.map((escalation) => (
+                  <Table.Tr key={escalation.id}>
+                    <Table.Td>#{escalation.request}</Table.Td>
+                    <Table.Td>{escalation.escalated_from}</Table.Td>
+                    <Table.Td>{escalation.escalated_to}</Table.Td>
+                    <Table.Td>{escalation.reason}</Table.Td>
+                    <Table.Td>
+                      <Badge color={escalation.resolved ? "green" : "red"} variant="light">
+                        {escalation.resolved ? "Resolved" : "Open"}
+                      </Badge>
+                    </Table.Td>
+                  </Table.Tr>
+                ))
+              )}
+            </Table.Tbody>
+          </Table>
+        </ScrollArea>
+      </Paper>
+    </Container>
+  );
+}
+
+export default SLADashboardView;
diff --git a/src/Modules/InstituteWorks/VendorManagementView.jsx b/src/Modules/InstituteWorks/VendorManagementView.jsx
new file mode 100644
index 000000000..690ce4cb5
--- /dev/null
+++ b/src/Modules/InstituteWorks/VendorManagementView.jsx
@@ -0,0 +1,120 @@
+import { useEffect, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useSelector } from "react-redux";
+import VendorManagementContent from "./components/VendorManagementContent";
+import VendorFormModal from "./components/VendorFormModal";
+import { addVendor, getIssuedWork, getVendors, getWork } from "./api";
+
+function VendorManagementView() {
+  const role = useSelector((state) => state.user.role);
+  const [issuedWorks, setIssuedWorks] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedRequestId, setSelectedRequestId] = useState("");
+  const [vendors, setVendors] = useState([]);
+  const [workId, setWorkId] = useState(null);
+  const [isFetchingVendors, setIsFetchingVendors] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [newVendor, setNewVendor] = useState({
+    name: "",
+    contact_number: "",
+    email_address: "",
+  });
+
+  const loadIssuedWorks = async () => {
+    setIsLoading(true);
+    try {
+      const data = await getIssuedWork(role);
+      setIssuedWorks(data);
+    } catch {
+      notifications.show({
+        color: "red",
+        message: "Unable to fetch issued works.",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadIssuedWorks();
+  }, [role]);
+
+  const fetchVendors = async (requestId) => {
+    setSelectedRequestId(requestId || "");
+    setVendors([]);
+    setWorkId(null);
+    if (!requestId) return;
+    setIsFetchingVendors(true);
+    try {
+      const work = await getWork(requestId);
+      setWorkId(work.id);
+      const vendorList = await getVendors(work.id);
+      setVendors(vendorList);
+    } catch {
+      notifications.show({
+        color: "red",
+        message: "Unable to fetch vendors for this work order.",
+      });
+    } finally {
+      setIsFetchingVendors(false);
+    }
+  };
+
+  const openAddVendorModal = () => {
+    setNewVendor({ name: "", contact_number: "", email_address: "" });
+    setOpened(true);
+  };
+
+  const handleAddVendor = async (event) => {
+    event.preventDefault();
+    if (!workId || !newVendor.name) return;
+    setIsSaving(true);
+    try {
+      await addVendor({ work: workId, ...newVendor });
+      notifications.show({
+        color: "green",
+        message: "Vendor added successfully.",
+      });
+      setOpened(false);
+      await fetchVendors(selectedRequestId);
+    } catch {
+      notifications.show({
+        color: "red",
+        message: workId
+          ? "Unable to add vendor."
+          : "Issue the work order first, then add a vendor.",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <VendorManagementContent
+        issuedWorks={issuedWorks}
+        isLoading={isLoading}
+        selectedRequestId={selectedRequestId}
+        onSelectRequest={fetchVendors}
+        vendors={vendors}
+        isFetchingVendors={isFetchingVendors}
+        workId={workId}
+        onOpenAddVendor={openAddVendorModal}
+        onRefresh={loadIssuedWorks}
+      />
+      <VendorFormModal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        onSubmit={handleAddVendor}
+        requestId={selectedRequestId}
+        workId={workId}
+        newVendor={newVendor}
+        setNewVendor={setNewVendor}
+        isSaving={isSaving}
+      />
+    </>
+  );
+}
+
+export default VendorManagementView;
diff --git a/src/Modules/InstituteWorks/WorkProgressView.jsx b/src/Modules/InstituteWorks/WorkProgressView.jsx
new file mode 100644
index 000000000..d5dbc68e4
--- /dev/null
+++ b/src/Modules/InstituteWorks/WorkProgressView.jsx
@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useSelector } from "react-redux";
+import WorkProgressTable from "./components/WorkProgressTable";
+import { getApiErrorMessage, getWorkUnderProgress, markWorkCompleted } from "./api";
+
+function WorkProgressView() {
+  const role = useSelector((state) => state.user.role);
+  const [rows, setRows] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [workingId, setWorkingId] = useState(null);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const data = await getWorkUnderProgress(role);
+      setRows(data);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to fetch work-under-progress records."),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, [role]);
+
+  const completeWork = async (id) => {
+    setWorkingId(id);
+    try {
+      await markWorkCompleted(id);
+      notifications.show({
+        color: "green",
+        message: `Work marked completed for request #${id}.`,
+      });
+      await load();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(error, "Unable to mark work as completed."),
+      });
+    } finally {
+      setWorkingId(null);
+    }
+  };
+
+  return (
+    <WorkProgressTable
+      rows={rows}
+      isLoading={isLoading}
+      workingId={workingId}
+      onRefresh={load}
+      onComplete={completeWork}
+    />
+  );
+}
+
+export default WorkProgressView;
diff --git a/src/Modules/InstituteWorks/api.js b/src/Modules/InstituteWorks/api.js
new file mode 100644
index 000000000..d15f4aed4
--- /dev/null
+++ b/src/Modules/InstituteWorks/api.js
@@ -0,0 +1,690 @@
+import axios from "axios";
+import {
+  addBudgetRoute,
+  auditDocumentRoute,
+  auditDocumentViewRoute,
+  createProposalRoute,
+  createRequestRoute,
+  createdRequestsRoute,
+  deanPendingRequestsRoute,
+  deanProcessedRequestsRoute,
+  directorApprovedRequestsRoute,
+  editBudgetRoute,
+  engineerProcessedRequestsRoute,
+  fetchDesignationsRoute,
+  generateBillPdfRoute,
+  generatedBillsViewRoute,
+  getItemsRoute,
+  getProposalsRoute,
+  handleAdminApprovalRoute,
+  handleBillGeneratedRequestsRoute,
+  handleDirectorApprovalRoute,
+  handleProcessBillsRoute,
+  issuedWorkRoute,
+  issueWorkOrderRoute,
+  requestsStatusRoute,
+  settleBillRoute,
+  settleBillsViewRoute,
+  viewBudgetRoute,
+  workCompletedRoute,
+  workUnderProgressRoute,
+  viewFileRoute,
+  forwardRequestRoute,
+  handleDeanProcessRequestRoute,
+  rejectedRequestsRoute,
+  handleUpdateRequestsRoute,
+  requestsInProgressRoute,
+  addVendorRoute,
+  getWorkRoute,
+  getVendorsRoute,
+  // NEW SLA & INVENTORY ROUTES
+  slaDashboardRoute,
+  inventoryItemsRoute,
+  inventoryTransactionsRoute,
+  issueMaterialsRoute,
+  receiveMaterialsRoute,
+  feedbackHistoryRoute,
+  submitFeedbackRoute,
+  reopenRequestRoute,
+  slaEscalationsRoute,
+} from "../../routes/instituteWorksRoutes";
+
+const iwdApi = axios.create();
+
+const extractFirstErrorMessage = (value, parentKey = "") => {
+  if (value == null) return "";
+  if (typeof value === "string") {
+    return parentKey ? `${parentKey}: ${value}` : value;
+  }
+  if (Array.isArray(value)) {
+    return value.reduce((message, item) => {
+      if (message) return message;
+      return extractFirstErrorMessage(item, parentKey);
+    }, "");
+  }
+  if (typeof value === "object") {
+    return Object.entries(value).reduce((message, [key, nestedValue]) => {
+      if (message) return message;
+      const nextKey =
+        key === "non_field_errors" || key === "detail" ? parentKey : key;
+      return extractFirstErrorMessage(nestedValue, nextKey);
+    }, "");
+  }
+  return "";
+};
+
+export const getApiErrorMessage = (error, fallback = "Request failed.") => {
+  if (!axios.isAxiosError(error)) return fallback;
+
+  const data = error.response?.data;
+  const status = error.response?.status;
+
+  if (status === 403 && (!data || typeof data === "string")) {
+    return "You are not authorized for this action.";
+  }
+
+  if (typeof data === "string") {
+    return data;
+  }
+
+  if (data && typeof data === "object") {
+    if (typeof data.error === "string" && data.error.trim()) return data.error;
+    if (typeof data.message === "string" && data.message.trim()) {
+      return data.message;
+    }
+
+    const extracted = extractFirstErrorMessage(data);
+    if (extracted) return extracted;
+  }
+
+  return error.message || fallback;
+};
+
+iwdApi.interceptors.request.use((config) => {
+  const token = localStorage.getItem("authToken");
+  if (token) {
+    config.headers.Authorization = `Token ${token}`;
+  }
+  return config;
+});
+
+export const getDesignations = async () => {
+  const { data } = await iwdApi.get(fetchDesignationsRoute);
+  return data || {};
+};
+
+export const createRequest = async ({
+  name,
+  area,
+  description,
+  designation,
+  role,
+  isPriority,
+  file,
+}) => {
+  const formData = new FormData();
+  formData.append("name", name);
+  formData.append("area", area);
+  formData.append("description", description);
+  formData.append("designation", designation);
+  formData.append("role", role || "");
+  formData.append("isPriority", isPriority ? "true" : "false");
+  if (file) {
+    formData.append("file", file);
+  }
+
+  const { data } = await iwdApi.post(createRequestRoute, formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+  return data;
+};
+
+export const getCreatedRequests = async (role) => {
+  const { data } = await iwdApi.get(createdRequestsRoute, {
+    params: { role },
+  });
+  return Array.isArray(data) ? data : [];
+};
+
+export const getRequestsStatus = async (role) => {
+  const { data } = await iwdApi.get(requestsStatusRoute, {
+    params: { role },
+  });
+  if (Array.isArray(data)) return data;
+  if (Array.isArray(data?.obj)) return data.obj;
+  return [];
+};
+
+export const getDirectorApprovedRequests = async () => {
+  const { data } = await iwdApi.get(directorApprovedRequestsRoute);
+  if (Array.isArray(data)) return data;
+  if (Array.isArray(data?.obj)) return data.obj;
+  return [];
+};
+
+export const issueWorkOrder = async ({
+  request_id,
+  name,
+  alloted_time,
+  start_date,
+  completion_date,
+}) => {
+  const payload = {
+    request_id,
+    name,
+    alloted_time,
+    start_date,
+  };
+
+  if (completion_date) {
+    payload.completion_date = completion_date;
+  }
+
+  const { data } = await iwdApi.post(issueWorkOrderRoute, payload);
+  return data;
+};
+
+export const getWorkUnderProgress = async (role) => {
+  const { data } = await iwdApi.get(workUnderProgressRoute, {
+    params: { role },
+  });
+  if (Array.isArray(data)) return data;
+  if (Array.isArray(data?.obj)) return data.obj;
+  return [];
+};
+
+export const markWorkCompleted = async (id) => {
+  const { data } = await iwdApi.patch(workCompletedRoute, { id });
+  return data;
+};
+
+export const getBudgets = async () => {
+  const { data } = await iwdApi.get(viewBudgetRoute);
+  return data?.obj || [];
+};
+
+export const addBudget = async ({ name, budget }) => {
+  const { data } = await iwdApi.post(addBudgetRoute, {
+    name,
+    budget,
+  });
+  return data;
+};
+
+export const editBudget = async ({ id, name, budget }) => {
+  const { data } = await iwdApi.post(editBudgetRoute, {
+    id,
+    name,
+    budget,
+  });
+  return data;
+};
+
+export const getDeanProcessedRequests = async (role) => {
+  const { data } = await iwdApi.get(deanProcessedRequestsRoute, {
+    params: { role },
+  });
+  return Array.isArray(data) ? data : [];
+};
+
+export const getDeanPendingRequests = async (role) => {
+  const { data } = await iwdApi.get(deanPendingRequestsRoute, {
+    params: { role },
+  });
+  return Array.isArray(data) ? data : [];
+};
+
+export const submitDirectorApproval = async ({
+  fileid,
+  action,
+  designation,
+  remarks,
+  file,
+}) => {
+  const formData = new FormData();
+  formData.append("fileid", fileid);
+  formData.append("action", action);
+  if (designation) {
+    formData.append("designation", designation);
+  }
+  formData.append("remarks", remarks || "");
+  if (file) {
+    formData.append("file", file);
+  }
+
+  const { data } = await iwdApi.post(handleDirectorApprovalRoute, formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+  return data;
+};
+
+export const getAuditDocuments = async (role) => {
+  const { data } = await iwdApi.get(auditDocumentViewRoute, {
+    params: { role },
+  });
+  return Array.isArray(data) ? data : [];
+};
+
+export const submitAuditDocument = async ({
+  fileid,
+  designation,
+  remarks,
+  attachment,
+}) => {
+  const formData = new FormData();
+  formData.append("fileid", fileid);
+  if (designation) {
+    formData.append("designation", designation);
+  }
+  formData.append("remarks", remarks || "");
+  if (attachment) {
+    formData.append("attachment", attachment);
+  }
+
+  const { data } = await iwdApi.post(auditDocumentRoute, formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+  return data;
+};
+
+export const getSettleBills = async () => {
+  const { data } = await iwdApi.get(settleBillsViewRoute);
+  return Array.isArray(data?.data) ? data.data : [];
+};
+
+export const settleBill = async (id) => {
+  const { data } = await iwdApi.post(settleBillRoute, { id });
+  return data;
+};
+
+export const getEngineerProcessedRequests = async () => {
+  const { data } = await iwdApi.get(engineerProcessedRequestsRoute);
+  return Array.isArray(data) ? data : [];
+};
+
+export const submitAdminApproval = async ({
+  fileid,
+  action,
+  designation,
+  remarks,
+  file,
+}) => {
+  const formData = new FormData();
+  formData.append("fileid", fileid);
+  formData.append("action", action);
+  formData.append("designation", designation);
+  formData.append("remarks", remarks || "");
+  if (file) {
+    formData.append("file", file);
+  }
+
+  const { data } = await iwdApi.post(handleAdminApprovalRoute, formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+  return data;
+};
+
+export const createProposal = async ({
+  id,
+  designation,
+  supporting_documents,
+  items,
+  isPriority,
+}) => {
+  const formData = new FormData();
+  formData.append("id", id);
+  formData.append("designation", designation);
+  formData.append("isPriority", isPriority ? "true" : "false");
+  if (supporting_documents) {
+    formData.append("supporting_documents", supporting_documents);
+  }
+
+  items.forEach((item, index) => {
+    formData.append(`items[${index}][name]`, item.name || "");
+    formData.append(`items[${index}][description]`, item.description || "");
+    formData.append(`items[${index}][unit]`, item.unit || "");
+    formData.append(`items[${index}][quantity]`, item.quantity ?? 0);
+    formData.append(
+      `items[${index}][price_per_unit]`,
+      item.price_per_unit ?? 0,
+    );
+    if (item.docs) {
+      formData.append(`items[${index}][docs]`, item.docs);
+    }
+  });
+
+  const { data } = await iwdApi.post(createProposalRoute, formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+  return data;
+};
+
+export const getProposals = async (request_id) => {
+  const { data } = await iwdApi.get(getProposalsRoute, {
+    params: { request_id },
+  });
+  return Array.isArray(data) ? data : [];
+};
+
+export const getItems = async (proposal_id) => {
+  const { data } = await iwdApi.get(getItemsRoute, {
+    params: { proposal_id },
+  });
+  return data || { itemsList: [], proposal: null };
+};
+
+export const getIssuedWork = async (role, filters = {}) => {
+  const { data } = await iwdApi.get(issuedWorkRoute, {
+    params: { role, ...filters },
+  });
+  if (Array.isArray(data)) return data;
+  if (Array.isArray(data?.obj)) return data.obj;
+  return [];
+};
+
+export const markBillGenerated = async ({ id, vendor_id, bill_items }) => {
+  const payload = { id };
+  if (vendor_id) payload.vendor_id = vendor_id;
+  if (bill_items) payload.bill_items = JSON.stringify(bill_items);
+
+  const { data } = await iwdApi.post(handleBillGeneratedRequestsRoute, payload);
+  return data;
+};
+
+export const getGeneratedBills = async () => {
+  const { data } = await iwdApi.get(generatedBillsViewRoute);
+  return Array.isArray(data?.obj) ? data.obj : [];
+};
+
+export const processBill = async ({
+  fileid,
+  designation,
+  remarks,
+  attachment,
+  vendor_id,
+}) => {
+  const formData = new FormData();
+  formData.append("fileid", fileid);
+  formData.append("designation", designation);
+  formData.append("remarks", remarks || "");
+  if (attachment) {
+    formData.append("attachment", attachment);
+  }
+  if (vendor_id) {
+    formData.append("vendor_id", vendor_id);
+  }
+
+  const { data } = await iwdApi.post(handleProcessBillsRoute, formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+  return data;
+};
+
+export const getBillPdfUrl = (request_id) =>
+  `${generateBillPdfRoute}?request_id=${request_id}`;
+
+export const downloadBillPdf = async (request_id) => {
+  const response = await iwdApi.get(generateBillPdfRoute, {
+    params: { request_id },
+    responseType: "blob",
+  });
+
+  const blob = new Blob([response.data], { type: "application/pdf" });
+  const objectUrl = window.URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = objectUrl;
+  link.download = `Request_${request_id}_bill.pdf`;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  window.URL.revokeObjectURL(objectUrl);
+};
+
+export const getViewFile = async (file_id) => {
+  const { data } = await iwdApi.get(viewFileRoute, { params: { file_id } });
+  return data || { file: null, tracks: [] };
+};
+
+export const forwardRequest = async ({
+  fileid,
+  designation,
+  remarks,
+  file,
+}) => {
+  const formData = new FormData();
+  formData.append("fileid", fileid);
+  formData.append("designation", designation);
+  formData.append("remarks", remarks || "");
+  if (file) formData.append("file", file);
+  const { data } = await iwdApi.post(forwardRequestRoute, formData, {
+    headers: { "Content-Type": "multipart/form-data" },
+  });
+  return data;
+};
+
+export const handleDeanProcessRequest = async ({
+  fileid,
+  action,
+  designation,
+  remarks,
+  file,
+}) => {
+  const formData = new FormData();
+  formData.append("fileid", fileid);
+  formData.append("action", action || "approve");
+  formData.append("designation", designation);
+  formData.append("remarks", remarks || "");
+  if (file) formData.append("file", file);
+  const { data } = await iwdApi.post(handleDeanProcessRequestRoute, formData, {
+    headers: { "Content-Type": "multipart/form-data" },
+  });
+  return data;
+};
+
+export const getRejectedRequests = async (role) => {
+  const { data } = await iwdApi.get(rejectedRequestsRoute, {
+    params: { role },
+  });
+  return Array.isArray(data) ? data : [];
+};
+
+export const handleUpdateRequest = async ({
+  id,
+  designation,
+  supporting_documents,
+  items,
+}) => {
+  const formData = new FormData();
+  formData.append("id", id);
+  formData.append("designation", designation);
+  if (supporting_documents)
+    formData.append("supporting_documents", supporting_documents);
+  items.forEach((item, index) => {
+    formData.append(`items[${index}][name]`, item.name || "");
+    formData.append(`items[${index}][description]`, item.description || "");
+    formData.append(`items[${index}][unit]`, item.unit || "");
+    formData.append(`items[${index}][quantity]`, item.quantity ?? 0);
+    formData.append(
+      `items[${index}][price_per_unit]`,
+      item.price_per_unit ?? 0,
+    );
+    if (item.docs) formData.append(`items[${index}][docs]`, item.docs);
+  });
+  const { data } = await iwdApi.post(handleUpdateRequestsRoute, formData, {
+    headers: { "Content-Type": "multipart/form-data" },
+  });
+  return data;
+};
+
+export const getRequestsInProgress = async () => {
+  const { data } = await iwdApi.get(requestsInProgressRoute);
+  if (Array.isArray(data)) return data;
+  if (Array.isArray(data?.obj)) return data.obj;
+  return [];
+};
+
+export const addVendor = async ({
+  work,
+  name,
+  contact_number,
+  email_address,
+}) => {
+  const { data } = await iwdApi.post(addVendorRoute, {
+    work,
+    name,
+    contact_number,
+    email_address,
+  });
+  return data;
+};
+
+export const getWork = async (request_id) => {
+  const { data } = await iwdApi.get(getWorkRoute, { params: { request_id } });
+  return data;
+};
+
+export const getVendors = async (work) => {
+  const { data } = await iwdApi.get(getVendorsRoute, { params: { work } });
+  return Array.isArray(data) ? data : [];
+};
+// ===== NEW SLA & INVENTORY API FUNCTIONS (UC-29, UC-30, UC-31) =====
+
+export const getSLADashboard = async () => {
+  const { data } = await iwdApi.get(slaDashboardRoute);
+  return (
+    data || {
+      total_active: 0,
+      pending_count: 0,
+      due_soon_count: 0,
+      overdue_count: 0,
+      overdue_requests: [],
+      escalation_count: 0,
+      priority_count: 0,
+    }
+  );
+};
+
+export const getInventoryItems = async (
+  page = 1,
+  page_size = 20,
+  filters = {},
+) => {
+  const params = { page, page_size, ...filters };
+  const { data } = await iwdApi.get(inventoryItemsRoute, { params });
+  return {
+    items: Array.isArray(data?.items) ? data.items : [],
+    pagination: data?.pagination || {
+      current_page: 1,
+      total_pages: 1,
+      total_count: 0,
+      page_size: 20,
+    },
+  };
+};
+
+export const getInventoryTransactions = async (
+  page = 1,
+  page_size = 20,
+  filters = {},
+) => {
+  const params = { page, page_size, ...filters };
+  const { data } = await iwdApi.get(inventoryTransactionsRoute, { params });
+  return {
+    items: Array.isArray(data?.obj) ? data.obj : [],
+    pagination: data?.pagination || {
+      current_page: 1,
+      total_pages: 1,
+      total_count: 0,
+      page_size: 20,
+    },
+  };
+};
+
+export const issueMaterials = async (
+  item_id,
+  quantity,
+  request_id = null,
+  remarks = "",
+) => {
+  const { data } = await iwdApi.post(issueMaterialsRoute, {
+    item_id,
+    quantity,
+    request_id,
+    remarks,
+  });
+  return data;
+};
+
+export const receiveMaterials = async (item_id, quantity, remarks = "") => {
+  const { data } = await iwdApi.post(receiveMaterialsRoute, {
+    item_id,
+    quantity,
+    remarks,
+  });
+  return data;
+};
+
+export const submitFeedback = async (request_id, rating, comments = "") => {
+  const { data } = await iwdApi.post(submitFeedbackRoute, {
+    request_id,
+    rating,
+    comments,
+  });
+  return data;
+};
+
+export const reopenRequest = async (request_id, reason = "") => {
+  const { data } = await iwdApi.post(reopenRequestRoute, {
+    request_id,
+    reason,
+  });
+  return data;
+};
+
+export const getFeedbackHistory = async (
+  page = 1,
+  page_size = 20,
+  filters = {},
+) => {
+  const params = { page, page_size, ...filters };
+  const { data } = await iwdApi.get(feedbackHistoryRoute, { params });
+  return {
+    items: Array.isArray(data?.obj) ? data.obj : [],
+    pagination: data?.pagination || {
+      current_page: 1,
+      total_pages: 1,
+      total_count: 0,
+      page_size: 20,
+    },
+  };
+};
+
+export const getSLAEscalations = async (
+  page = 1,
+  page_size = 20,
+  filters = {},
+) => {
+  const params = { page, page_size, ...filters };
+  const { data } = await iwdApi.get(slaEscalationsRoute, { params });
+  return {
+    items: Array.isArray(data?.obj) ? data.obj : [],
+    pagination: data?.pagination || {
+      current_page: 1,
+      total_pages: 1,
+      total_count: 0,
+      page_size: 20,
+    },
+  };
+};
diff --git a/src/Modules/InstituteWorks/components/AdminApprovalActionModal.jsx b/src/Modules/InstituteWorks/components/AdminApprovalActionModal.jsx
new file mode 100644
index 000000000..4b4819f6b
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/AdminApprovalActionModal.jsx
@@ -0,0 +1,93 @@
+import {
+  Button,
+  FileInput,
+  Group,
+  Modal,
+  Select,
+  Stack,
+  Textarea,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+const actionOptions = [
+  { value: "approve", label: "Approve" },
+  { value: "reject", label: "Reject" },
+];
+
+function AdminApprovalActionModal({
+  opened,
+  onClose,
+  onSubmit,
+  action,
+  setAction,
+  designationOptions,
+  designation,
+  setDesignation,
+  remarks,
+  setRemarks,
+  file = null,
+  setFile,
+  isSaving,
+  isReady,
+}) {
+  return (
+    <Modal opened={opened} onClose={onClose} title="IWD Admin Decision" centered>
+      <form onSubmit={onSubmit}>
+        <Stack>
+          <Select
+            label="Action"
+            data={actionOptions}
+            value={action}
+            onChange={(value) => setAction(value || "approve")}
+            required
+          />
+          <Select
+            label="Forward To"
+            placeholder="Select designation and user"
+            data={designationOptions}
+            value={designation}
+            onChange={(value) => setDesignation(value || "")}
+            searchable
+            required
+          />
+          <Textarea
+            label="Remarks"
+            value={remarks}
+            onChange={(event) => setRemarks(event.currentTarget.value)}
+            minRows={3}
+          />
+          <FileInput label="Attachment" value={file} onChange={setFile} clearable />
+          <Group justify="flex-end">
+            <Button type="submit" loading={isSaving} disabled={!isReady}>
+              Submit
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  );
+}
+
+AdminApprovalActionModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  action: PropTypes.string.isRequired,
+  setAction: PropTypes.func.isRequired,
+  designationOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  designation: PropTypes.string.isRequired,
+  setDesignation: PropTypes.func.isRequired,
+  remarks: PropTypes.string.isRequired,
+  setRemarks: PropTypes.func.isRequired,
+  file: PropTypes.oneOfType([PropTypes.instanceOf(File), PropTypes.oneOf([null])]),
+  setFile: PropTypes.func.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isReady: PropTypes.bool.isRequired,
+};
+
+export default AdminApprovalActionModal;
diff --git a/src/Modules/InstituteWorks/components/AdminApprovalQueueTable.jsx b/src/Modules/InstituteWorks/components/AdminApprovalQueueTable.jsx
new file mode 100644
index 000000000..de7fb4959
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/AdminApprovalQueueTable.jsx
@@ -0,0 +1,99 @@
+import {
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+const currencyFormatter = new Intl.NumberFormat("en-IN", {
+  maximumFractionDigits: 2,
+});
+
+function readField(item, snakeKey, camelKey) {
+  return item?.[snakeKey] ?? item?.[camelKey] ?? null;
+}
+
+function AdminApprovalQueueTable({ rows, isLoading, onRefresh, onAction }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Engineer Processed Queue</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Request ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Area</Table.Th>
+              <Table.Th>Created By</Table.Th>
+              <Table.Th>Budget</Table.Th>
+              <Table.Th>Priority</Table.Th>
+              <Table.Th>Next Approver</Table.Th>
+              <Table.Th>File ID</Table.Th>
+              <Table.Th>Action</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows.map((item) => (
+                <Table.Tr key={item.file_id}>
+                  <Table.Td>{item.id}</Table.Td>
+                  <Table.Td>{item.name}</Table.Td>
+                  <Table.Td>{item.area}</Table.Td>
+                  <Table.Td>{item.requestCreatedBy}</Table.Td>
+                  <Table.Td>
+                    {readField(item, "estimated_budget", "estimatedBudget") != null
+                      ? `Rs ${currencyFormatter.format(Number(readField(item, "estimated_budget", "estimatedBudget")))}`
+                      : "-"}
+                  </Table.Td>
+                  <Table.Td>{readField(item, "is_priority", "isPriority") ? "Priority" : "Normal"}</Table.Td>
+                  <Table.Td>{readField(item, "next_approver", "nextApprover") || "-"}</Table.Td>
+                  <Table.Td>{item.file_id}</Table.Td>
+                  <Table.Td>
+                    <Button size="xs" onClick={() => onAction(item.file_id)}>
+                      Approve / Reject
+                    </Button>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={9}>
+                  <Text ta="center" c="dimmed">
+                    No requests are ready for admin approval yet.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+AdminApprovalQueueTable.propTypes = {
+  rows: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      name: PropTypes.string,
+      area: PropTypes.string,
+      requestCreatedBy: PropTypes.string,
+      file_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    }),
+  ).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+  onAction: PropTypes.func.isRequired,
+};
+
+export default AdminApprovalQueueTable;
diff --git a/src/Modules/InstituteWorks/components/BillAuditModal.jsx b/src/Modules/InstituteWorks/components/BillAuditModal.jsx
new file mode 100644
index 000000000..767079ba0
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/BillAuditModal.jsx
@@ -0,0 +1,109 @@
+import {
+  Button,
+  FileInput,
+  Group,
+  Modal,
+  Stack,
+  Text,
+  Textarea,
+  Table,
+  Divider,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function BillAuditModal({
+  opened,
+  onClose,
+  onSubmit,
+  selectedBill,
+  remarks,
+  setRemarks,
+  attachment = null,
+  setAttachment,
+  isSaving,
+  isReady,
+}) {
+  return (
+    <Modal opened={opened} onClose={onClose} title="Audit Bill" centered>
+      <form onSubmit={onSubmit}>
+        <Stack>
+          <Text size="sm" c="dimmed">
+            Request #{selectedBill?.request_id || "-"} | {selectedBill?.request_name || "-"}
+          </Text>
+          <Text size="sm" c="dimmed">
+            Vendor: {selectedBill?.vendor_name || "-"} | Total: {Number(selectedBill?.bill_total || 0).toFixed(2)} | Items: {selectedBill?.bill_item_count ?? 0}
+          </Text>
+          <Text size="sm" c="dimmed">
+            This review forwards the bill to Accounts Admin automatically.
+          </Text>
+          <Divider label="Bill Items" labelPosition="center" />
+          <Table striped highlightOnHover withTableBorder withColumnBorders>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Item</Table.Th>
+                <Table.Th>Description</Table.Th>
+                <Table.Th>Qty</Table.Th>
+                <Table.Th>Rate</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {(selectedBill?.bill_items || []).length > 0 ? (
+                selectedBill.bill_items.map((item, index) => (
+                  <Table.Tr key={`${item.name || "item"}-${index}`}>
+                    <Table.Td>{item.name || "-"}</Table.Td>
+                    <Table.Td>{item.description || "-"}</Table.Td>
+                    <Table.Td>{item.quantity ?? 0}</Table.Td>
+                    <Table.Td>{Number(item.price || 0).toFixed(2)}</Table.Td>
+                  </Table.Tr>
+                ))
+              ) : (
+                <Table.Tr>
+                  <Table.Td colSpan={4}>
+                    <Text ta="center" c="dimmed">
+                      No bill items found.
+                    </Text>
+                  </Table.Td>
+                </Table.Tr>
+              )}
+            </Table.Tbody>
+          </Table>
+          <Textarea
+            label="Remarks"
+            value={remarks}
+            onChange={(event) => setRemarks(event.currentTarget.value)}
+            minRows={3}
+          />
+          <FileInput
+            label="Attachment"
+            value={attachment}
+            onChange={setAttachment}
+            clearable
+          />
+          <Group justify="flex-end">
+            <Button type="submit" loading={isSaving} disabled={!isReady}>
+              Submit
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  );
+}
+
+BillAuditModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  selectedBill: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])]),
+  remarks: PropTypes.string.isRequired,
+  setRemarks: PropTypes.func.isRequired,
+  attachment: PropTypes.oneOfType([
+    PropTypes.instanceOf(File),
+    PropTypes.oneOf([null]),
+  ]),
+  setAttachment: PropTypes.func.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isReady: PropTypes.bool.isRequired,
+};
+
+export default BillAuditModal;
diff --git a/src/Modules/InstituteWorks/components/BillAuditTable.jsx b/src/Modules/InstituteWorks/components/BillAuditTable.jsx
new file mode 100644
index 000000000..69d71d948
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/BillAuditTable.jsx
@@ -0,0 +1,102 @@
+import {
+  Button,
+  Badge,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function BillAuditTable({ rows, isLoading, onRefresh, onAudit }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Audit Documents</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Request ID</Table.Th>
+              <Table.Th>Request Name</Table.Th>
+              <Table.Th>Vendor</Table.Th>
+              <Table.Th>Total</Table.Th>
+              <Table.Th>Items</Table.Th>
+              <Table.Th>Bill File</Table.Th>
+              <Table.Th>File ID</Table.Th>
+              <Table.Th>Action</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows.map((item) => (
+                <Table.Tr key={item.file_id}>
+                  <Table.Td>{item.request_id}</Table.Td>
+                  <Table.Td>{item.request_name || "-"}</Table.Td>
+                  <Table.Td>{item.vendor_name || "-"}</Table.Td>
+                  <Table.Td>{Number(item.bill_total || 0).toFixed(2)}</Table.Td>
+                  <Table.Td>{item.bill_item_count ?? 0}</Table.Td>
+                  <Table.Td>
+                    {item.fileUrl ? (
+                      <a href={item.fileUrl} target="_blank" rel="noreferrer">
+                        Open Bill
+                      </a>
+                    ) : (
+                      "-"
+                    )}
+                  </Table.Td>
+                  <Table.Td>{item.file_id}</Table.Td>
+                  <Table.Td>
+                    <Group gap="xs">
+                      <Badge color={item.bill_audited ? "green" : "yellow"} variant="light">
+                        {item.bill_audited ? "Audited" : "Pending"}
+                      </Badge>
+                      <Button size="xs" onClick={() => onAudit(item)}>
+                        Review & Send to Accounts
+                      </Button>
+                    </Group>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={8}>
+                  <Text ta="center" c="dimmed">
+                    No bills pending for audit.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+BillAuditTable.propTypes = {
+  rows: PropTypes.arrayOf(
+    PropTypes.shape({
+      request_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      request_name: PropTypes.string,
+      vendor_name: PropTypes.string,
+      bill_total: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      bill_item_count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      bill_audited: PropTypes.bool,
+      fileUrl: PropTypes.string,
+      file_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    }),
+  ).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+  onAudit: PropTypes.func.isRequired,
+};
+
+export default BillAuditTable;
diff --git a/src/Modules/InstituteWorks/components/BillGenerationModal.jsx b/src/Modules/InstituteWorks/components/BillGenerationModal.jsx
new file mode 100644
index 000000000..4f86a170d
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/BillGenerationModal.jsx
@@ -0,0 +1,124 @@
+import {
+  Button,
+  Divider,
+  Group,
+  Modal,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function BillGenerationModal({
+  opened,
+  onClose,
+  onSubmit,
+  requestId,
+  vendorId,
+  setVendorId,
+  billItems,
+  updateBillItem,
+  addBillItem,
+  removeBillItem,
+  billTotal,
+}) {
+  return (
+    <Modal opened={opened} onClose={onClose} title="Add Actual Bill Details" centered size="lg">
+      <form onSubmit={onSubmit}>
+        <Stack>
+          <TextInput label="Request ID" value={String(requestId || "")} readOnly />
+          <TextInput
+            label="Vendor ID (Optional)"
+            value={vendorId}
+            onChange={(event) => setVendorId(event.currentTarget.value)}
+            placeholder="e.g. 12"
+          />
+          <Divider label="Actual Bill Items" labelPosition="center" />
+          <Text size="sm" c="dimmed">
+            Enter the items actually used for this work order. These are saved with the bill and
+            used for the final PDF.
+          </Text>
+          <Stack gap="sm">
+            {billItems.map((item, index) => (
+              <Stack
+                key={`bill-item-${index}`}
+                gap="xs"
+                p="xs"
+                style={{ border: "1px solid var(--mantine-color-gray-3)", borderRadius: 8 }}
+              >
+                <Group align="flex-end" grow>
+                  <TextInput
+                    label={`Item ${index + 1}`}
+                    placeholder="Item name"
+                    value={item.name}
+                    onChange={(event) => updateBillItem(index, "name", event.currentTarget.value)}
+                    required
+                  />
+                  <TextInput
+                    label="Description"
+                    placeholder="Actual bill description"
+                    value={item.description}
+                    onChange={(event) => updateBillItem(index, "description", event.currentTarget.value)}
+                  />
+                </Group>
+                <Group align="flex-end" grow>
+                  <TextInput
+                    label="Quantity"
+                    type="number"
+                    min="1"
+                    value={item.quantity}
+                    onChange={(event) => updateBillItem(index, "quantity", event.currentTarget.value)}
+                    required
+                  />
+                  <TextInput
+                    label="Rate"
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    value={item.price}
+                    onChange={(event) => updateBillItem(index, "price", event.currentTarget.value)}
+                    required
+                  />
+                  <Button
+                    type="button"
+                    variant="light"
+                    color="red"
+                    onClick={() => removeBillItem(index)}
+                    disabled={billItems.length === 1}
+                  >
+                    Remove
+                  </Button>
+                </Group>
+              </Stack>
+            ))}
+          </Stack>
+          <Group justify="space-between">
+            <Button type="button" variant="light" onClick={addBillItem}>
+              Add Item
+            </Button>
+            <Text fw={600}>Bill Total: {billTotal.toFixed(2)}</Text>
+          </Group>
+          <Group justify="flex-end">
+            <Button type="submit">Generate Bill</Button>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  );
+}
+
+BillGenerationModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  requestId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  vendorId: PropTypes.string.isRequired,
+  setVendorId: PropTypes.func.isRequired,
+  billItems: PropTypes.arrayOf(PropTypes.object).isRequired,
+  updateBillItem: PropTypes.func.isRequired,
+  addBillItem: PropTypes.func.isRequired,
+  removeBillItem: PropTypes.func.isRequired,
+  billTotal: PropTypes.number.isRequired,
+};
+
+export default BillGenerationModal;
\ No newline at end of file
diff --git a/src/Modules/InstituteWorks/components/BillGenerationTable.jsx b/src/Modules/InstituteWorks/components/BillGenerationTable.jsx
new file mode 100644
index 000000000..52b00a22d
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/BillGenerationTable.jsx
@@ -0,0 +1,90 @@
+import {
+  Badge,
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function BillGenerationTable({ rows, isLoading, workingId = null, onRefresh, onGenerate }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <div>
+          <Title order={4}>Bill Generation Queue</Title>
+          <Text size="sm" c="dimmed">
+            Enter the actual bill items used on site, then generate the bill for Accounts.
+          </Text>
+        </div>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Request ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Area</Table.Th>
+              <Table.Th>Work Completed</Table.Th>
+              <Table.Th>Action</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows.map((item) => {
+                const completed = Boolean(item.work_completed);
+                return (
+                  <Table.Tr key={item.request_id}>
+                    <Table.Td>{item.request_id}</Table.Td>
+                    <Table.Td>{item.name}</Table.Td>
+                    <Table.Td>{item.area}</Table.Td>
+                    <Table.Td>
+                      <Badge color={completed ? "green" : "yellow"} variant="light">
+                        {completed ? "Completed" : "Pending"}
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td>
+                      <Button
+                        size="xs"
+                        onClick={() => onGenerate(item.request_id)}
+                        loading={workingId === item.request_id}
+                        disabled={!completed}
+                      >
+                        Add Bill Details
+                      </Button>
+                    </Table.Td>
+                  </Table.Tr>
+                );
+              })
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={5}>
+                  <Text ta="center" c="dimmed">
+                    No issued work records found.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+BillGenerationTable.propTypes = {
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  workingId: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.oneOf([null])]),
+  onRefresh: PropTypes.func.isRequired,
+  onGenerate: PropTypes.func.isRequired,
+};
+
+export default BillGenerationTable;
diff --git a/src/Modules/InstituteWorks/components/BillProcessingTable.jsx b/src/Modules/InstituteWorks/components/BillProcessingTable.jsx
new file mode 100644
index 000000000..782e62300
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/BillProcessingTable.jsx
@@ -0,0 +1,76 @@
+import {
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function BillProcessingTable({ rows, isLoading, onRefresh, getBillPdfUrl }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Generated Bills</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Request ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Area</Table.Th>
+              <Table.Th>Bill PDF</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows.map((item) => (
+                <Table.Tr key={item.file_id}>
+                  <Table.Td>{item.id}</Table.Td>
+                  <Table.Td>{item.name}</Table.Td>
+                  <Table.Td>{item.area}</Table.Td>
+                  <Table.Td>
+                    <Button size="xs" variant="light" onClick={() => getBillPdfUrl(item.id)}>
+                      Download PDF
+                    </Button>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={4}>
+                  <Text ta="center" c="dimmed">
+                    No generated bills available.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+BillProcessingTable.propTypes = {
+  rows: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      name: PropTypes.string,
+      area: PropTypes.string,
+      file_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    }),
+  ).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+  getBillPdfUrl: PropTypes.func.isRequired,
+};
+
+export default BillProcessingTable;
diff --git a/src/Modules/InstituteWorks/components/BillSettlementTable.jsx b/src/Modules/InstituteWorks/components/BillSettlementTable.jsx
new file mode 100644
index 000000000..0cc508150
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/BillSettlementTable.jsx
@@ -0,0 +1,91 @@
+import {
+  Badge,
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function BillSettlementTable({ rows, isLoading, workingId = null, onRefresh, onSettle }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Settle Bills</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Request ID</Table.Th>
+              <Table.Th>Bill</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>Action</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows.map((item) => {
+                const settled = Boolean(item.billSettled);
+                return (
+                  <Table.Tr key={item.requestId}>
+                    <Table.Td>{item.requestId}</Table.Td>
+                    <Table.Td>
+                      {item.fileUrl ? (
+                        <a href={item.fileUrl} target="_blank" rel="noreferrer">
+                          Open Bill
+                        </a>
+                      ) : (
+                        "-"
+                      )}
+                    </Table.Td>
+                    <Table.Td>
+                      <Badge color={settled ? "green" : "yellow"} variant="light">
+                        {settled ? "Settled" : "Pending"}
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td>
+                      <Button
+                        size="xs"
+                        disabled={settled}
+                        loading={workingId === item.requestId}
+                        onClick={() => onSettle(item.requestId)}
+                      >
+                        {settled ? "Done" : "Settle"}
+                      </Button>
+                    </Table.Td>
+                  </Table.Tr>
+                );
+              })
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={4}>
+                  <Text ta="center" c="dimmed">
+                    No bills available for settlement.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+BillSettlementTable.propTypes = {
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  workingId: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.oneOf([null])]),
+  onRefresh: PropTypes.func.isRequired,
+  onSettle: PropTypes.func.isRequired,
+};
+
+export default BillSettlementTable;
diff --git a/src/Modules/InstituteWorks/components/BudgetAddForm.jsx b/src/Modules/InstituteWorks/components/BudgetAddForm.jsx
new file mode 100644
index 000000000..b40535189
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/BudgetAddForm.jsx
@@ -0,0 +1,54 @@
+import { Button, Group, NumberInput, Paper, TextInput, Title } from "@mantine/core";
+import PropTypes from "prop-types";
+
+function BudgetAddForm({
+  newName,
+  setNewName,
+  newBudget,
+  setNewBudget,
+  onSubmit,
+  isSaving,
+  canCreate,
+}) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Title order={4} mb="md">
+        Add Budget
+      </Title>
+      <form onSubmit={onSubmit}>
+        <Group align="end">
+          <TextInput
+            label="Budget Head"
+            value={newName}
+            onChange={(event) => setNewName(event.currentTarget.value)}
+            placeholder="Maintenance FY 2026"
+            required
+          />
+          <NumberInput
+            label="Amount"
+            value={newBudget}
+            onChange={setNewBudget}
+            min={0}
+            thousandSeparator=","
+            required
+          />
+          <Button type="submit" loading={isSaving} disabled={!canCreate}>
+            Add
+          </Button>
+        </Group>
+      </form>
+    </Paper>
+  );
+}
+
+BudgetAddForm.propTypes = {
+  newName: PropTypes.string.isRequired,
+  setNewName: PropTypes.func.isRequired,
+  newBudget: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  setNewBudget: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  canCreate: PropTypes.bool.isRequired,
+};
+
+export default BudgetAddForm;
diff --git a/src/Modules/InstituteWorks/components/BudgetEditForm.jsx b/src/Modules/InstituteWorks/components/BudgetEditForm.jsx
new file mode 100644
index 000000000..d8de9c76c
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/BudgetEditForm.jsx
@@ -0,0 +1,58 @@
+import { Button, Group, NumberInput, Paper, TextInput, Title } from "@mantine/core";
+import PropTypes from "prop-types";
+
+function BudgetEditForm({
+  editingId = null,
+  editName,
+  setEditName,
+  editBudgetValue,
+  setEditBudgetValue,
+  onSave,
+  onCancel,
+  canEdit,
+}) {
+  if (!editingId) return null;
+
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Title order={5} mb="md">
+        Edit Budget #{editingId}
+      </Title>
+      <Group align="end">
+        <TextInput
+          label="Budget Head"
+          value={editName}
+          onChange={(event) => setEditName(event.currentTarget.value)}
+          required
+        />
+        <NumberInput
+          label="Amount"
+          value={editBudgetValue}
+          onChange={setEditBudgetValue}
+          min={0}
+          thousandSeparator=","
+          required
+        />
+        <Button onClick={onSave} disabled={!canEdit}>
+          Save
+        </Button>
+        <Button variant="default" onClick={onCancel}>
+          Cancel
+        </Button>
+      </Group>
+    </Paper>
+  );
+}
+
+BudgetEditForm.propTypes = {
+  editingId: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.oneOf([null])]),
+  editName: PropTypes.string.isRequired,
+  setEditName: PropTypes.func.isRequired,
+  editBudgetValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  setEditBudgetValue: PropTypes.func.isRequired,
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  canEdit: PropTypes.bool.isRequired,
+};
+
+export default BudgetEditForm;
diff --git a/src/Modules/InstituteWorks/components/BudgetListTable.jsx b/src/Modules/InstituteWorks/components/BudgetListTable.jsx
new file mode 100644
index 000000000..6034e7ab1
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/BudgetListTable.jsx
@@ -0,0 +1,75 @@
+import {
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function BudgetListTable({ rows, isLoading, onRefresh, onEdit }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Budget List</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Budget Issued</Table.Th>
+              <Table.Th>Action</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows.map((row) => (
+                <Table.Tr key={row.id}>
+                  <Table.Td>{row.id}</Table.Td>
+                  <Table.Td>{row.name}</Table.Td>
+                  <Table.Td>{row.budgetIssued}</Table.Td>
+                  <Table.Td>
+                    <Button size="xs" variant="subtle" onClick={() => onEdit(row)}>
+                      Edit
+                    </Button>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={4}>
+                  <Text ta="center" c="dimmed">
+                    No budgets available.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+BudgetListTable.propTypes = {
+  rows: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      name: PropTypes.string,
+      budgetIssued: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    }),
+  ).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+  onEdit: PropTypes.func.isRequired,
+};
+
+export default BudgetListTable;
diff --git a/src/Modules/InstituteWorks/components/CreatedRequestsTable.jsx b/src/Modules/InstituteWorks/components/CreatedRequestsTable.jsx
new file mode 100644
index 000000000..53aa3824c
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/CreatedRequestsTable.jsx
@@ -0,0 +1,153 @@
+import {
+  Badge,
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function statusBadgeColor(status) {
+  if (status === 1) return "green";
+  if (status === -1) return "red";
+  return "yellow";
+}
+
+const currencyFormatter = new Intl.NumberFormat("en-IN", {
+  maximumFractionDigits: 2,
+});
+
+function readField(item, snakeKey, camelKey) {
+  return item?.[snakeKey] ?? item?.[camelKey] ?? null;
+}
+
+function formatDeadline(item) {
+  const approver = (readField(item, "next_approver", "nextApprover") || "").toLowerCase();
+  const deadline =
+    approver.includes("director")
+      ? readField(item, "director_approval_deadline", "directorApprovalDeadline")
+      : approver.includes("hod")
+        ? readField(item, "hod_approval_deadline", "hodApprovalDeadline")
+        : readField(item, "iwd_admin_approval_deadline", "iwdAdminApprovalDeadline");
+
+  if (!deadline) return "-";
+  const date = new Date(deadline);
+  return Number.isNaN(date.getTime()) ? String(deadline) : date.toLocaleString();
+}
+
+function CreatedRequestsTable({
+  requests,
+  isLoading,
+  onRefresh,
+  onTracking,
+}) {
+  const rows = requests.map((request) => {
+    const hasProposal = readField(request, "estimated_budget", "estimatedBudget") != null;
+
+    return (
+      <Table.Tr key={request.request_id}>
+        <Table.Td>{request.request_id}</Table.Td>
+        <Table.Td>{request.name}</Table.Td>
+        <Table.Td>{request.area}</Table.Td>
+        <Table.Td>{request.requestCreatedBy}</Table.Td>
+        <Table.Td>
+          {hasProposal
+            ? `Rs ${currencyFormatter.format(Number(readField(request, "estimated_budget", "estimatedBudget")))}`
+            : "-"}
+        </Table.Td>
+        <Table.Td>{readField(request, "is_priority", "isPriority") ? "Priority" : "Normal"}</Table.Td>
+        <Table.Td>{readField(request, "next_approver", "nextApprover") || "-"}</Table.Td>
+        <Table.Td>{formatDeadline(request)}</Table.Td>
+        <Table.Td>
+          <Badge
+            color={statusBadgeColor(request.directorApproval)}
+            variant="light"
+          >
+            {request.directorApproval === 1
+              ? "Approved"
+              : request.directorApproval === -1
+                ? "Rejected"
+                : "Pending"}
+          </Badge>
+        </Table.Td>
+        <Table.Td>{request.file_id || "-"}</Table.Td>
+        <Table.Td>
+          <Group gap="xs" wrap="nowrap">
+            <Button
+              size="xs"
+              variant="subtle"
+              onClick={() => onTracking(request.file_id)}
+              disabled={!request.file_id}
+            >
+              Tracking
+            </Button>
+          </Group>
+        </Table.Td>
+      </Table.Tr>
+    );
+  });
+
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Created Requests</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Area</Table.Th>
+              <Table.Th>Created By</Table.Th>
+                <Table.Th>Budget</Table.Th>
+                <Table.Th>Priority</Table.Th>
+                <Table.Th>Next Approver</Table.Th>
+                <Table.Th>SLA Deadline</Table.Th>
+              <Table.Th>Director Approval</Table.Th>
+              <Table.Th>File ID</Table.Th>
+              <Table.Th>Actions</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={11}>
+                  <Text ta="center" c="dimmed">
+                    No requests found for your current role.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+CreatedRequestsTable.propTypes = {
+  requests: PropTypes.arrayOf(
+    PropTypes.shape({
+      request_id: PropTypes.number,
+      name: PropTypes.string,
+      area: PropTypes.string,
+      requestCreatedBy: PropTypes.string,
+      directorApproval: PropTypes.number,
+      file_id: PropTypes.number,
+    }),
+  ).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+  onTracking: PropTypes.func.isRequired,
+};
+
+export default CreatedRequestsTable;
diff --git a/src/Modules/InstituteWorks/components/DeanDirectorActionModal.jsx b/src/Modules/InstituteWorks/components/DeanDirectorActionModal.jsx
new file mode 100644
index 000000000..e57deea37
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/DeanDirectorActionModal.jsx
@@ -0,0 +1,73 @@
+import {
+  Button,
+  FileInput,
+  Group,
+  Modal,
+  Select,
+  Stack,
+  Textarea,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+const actionOptions = [
+  { value: "approve", label: "Approve" },
+  { value: "reject", label: "Reject" },
+];
+
+function DeanDirectorActionModal({
+  opened,
+  onClose,
+  onSubmit,
+  action,
+  setAction,
+  remarks,
+  setRemarks,
+  file = null,
+  setFile,
+  isSaving,
+  isReady,
+}) {
+  return (
+    <Modal opened={opened} onClose={onClose} title="Director Decision" centered>
+      <form onSubmit={onSubmit}>
+        <Stack>
+          <Select
+            label="Action"
+            data={actionOptions}
+            value={action}
+            onChange={(value) => setAction(value || "approve")}
+            required
+          />
+          <Textarea
+            label="Remarks"
+            value={remarks}
+            onChange={(event) => setRemarks(event.currentTarget.value)}
+            minRows={3}
+          />
+          <FileInput label="Attachment" value={file} onChange={setFile} clearable />
+          <Group justify="flex-end">
+            <Button type="submit" loading={isSaving} disabled={!isReady}>
+              Submit
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  );
+}
+
+DeanDirectorActionModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  action: PropTypes.string.isRequired,
+  setAction: PropTypes.func.isRequired,
+  remarks: PropTypes.string.isRequired,
+  setRemarks: PropTypes.func.isRequired,
+  file: PropTypes.oneOfType([PropTypes.instanceOf(File), PropTypes.oneOf([null])]),
+  setFile: PropTypes.func.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isReady: PropTypes.bool.isRequired,
+};
+
+export default DeanDirectorActionModal;
diff --git a/src/Modules/InstituteWorks/components/DeanDirectorQueueTable.jsx b/src/Modules/InstituteWorks/components/DeanDirectorQueueTable.jsx
new file mode 100644
index 000000000..7b79f42d0
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/DeanDirectorQueueTable.jsx
@@ -0,0 +1,99 @@
+import {
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+const currencyFormatter = new Intl.NumberFormat("en-IN", {
+  maximumFractionDigits: 2,
+});
+
+function readField(item, snakeKey, camelKey) {
+  return item?.[snakeKey] ?? item?.[camelKey] ?? null;
+}
+
+function DeanDirectorQueueTable({ rows, isLoading, onRefresh, onAction }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Dean Processed Queue</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Request ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Area</Table.Th>
+              <Table.Th>Created By</Table.Th>
+              <Table.Th>Budget</Table.Th>
+              <Table.Th>Priority</Table.Th>
+              <Table.Th>Next Approver</Table.Th>
+              <Table.Th>File ID</Table.Th>
+              <Table.Th>Action</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows.map((item) => (
+                <Table.Tr key={item.file_id}>
+                  <Table.Td>{item.request_id}</Table.Td>
+                  <Table.Td>{item.name}</Table.Td>
+                  <Table.Td>{item.area}</Table.Td>
+                  <Table.Td>{item.requestCreatedBy}</Table.Td>
+                  <Table.Td>
+                    {readField(item, "estimated_budget", "estimatedBudget") != null
+                      ? `Rs ${currencyFormatter.format(Number(readField(item, "estimated_budget", "estimatedBudget")))}`
+                      : "-"}
+                  </Table.Td>
+                  <Table.Td>{readField(item, "is_priority", "isPriority") ? "Priority" : "Normal"}</Table.Td>
+                  <Table.Td>{readField(item, "next_approver", "nextApprover") || "-"}</Table.Td>
+                  <Table.Td>{item.file_id}</Table.Td>
+                  <Table.Td>
+                    <Button size="xs" onClick={() => onAction(item.file_id)}>
+                      Approve / Reject
+                    </Button>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={9}>
+                  <Text ta="center" c="dimmed">
+                    No dean-processed requests available.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+DeanDirectorQueueTable.propTypes = {
+  rows: PropTypes.arrayOf(
+    PropTypes.shape({
+      request_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      name: PropTypes.string,
+      area: PropTypes.string,
+      requestCreatedBy: PropTypes.string,
+      file_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    }),
+  ).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+  onAction: PropTypes.func.isRequired,
+};
+
+export default DeanDirectorQueueTable;
diff --git a/src/Modules/InstituteWorks/components/DeanProcessingActionModal.jsx b/src/Modules/InstituteWorks/components/DeanProcessingActionModal.jsx
new file mode 100644
index 000000000..073a9c5f7
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/DeanProcessingActionModal.jsx
@@ -0,0 +1,98 @@
+import {
+  Button,
+  FileInput,
+  Group,
+  Modal,
+  Select,
+  Stack,
+  Textarea,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+const actionOptions = [
+  { value: "approve", label: "Approve" },
+  { value: "reject", label: "Reject" },
+];
+
+function DeanProcessingActionModal({
+  opened,
+  onClose,
+  onSubmit,
+  action,
+  setAction,
+  designationOptions,
+  designation,
+  setDesignation,
+  remarks,
+  setRemarks,
+  file = null,
+  setFile,
+  isSaving,
+  isReady,
+}) {
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={action === "reject" ? "Reject & Return to IWD Admin" : "Approve & Forward to Director"}
+      centered
+    >
+      <form onSubmit={onSubmit}>
+        <Stack>
+          <Select
+            label="Action"
+            data={actionOptions}
+            value={action}
+            onChange={(value) => setAction(value || "approve")}
+            required
+          />
+          <Select
+            label="Forward To"
+            placeholder="Select designation and user"
+            data={designationOptions}
+            value={designation}
+            onChange={(value) => setDesignation(value || "")}
+            searchable
+            required
+          />
+          <Textarea
+            label="Remarks"
+            value={remarks}
+            onChange={(event) => setRemarks(event.currentTarget.value)}
+            minRows={3}
+          />
+          <FileInput label="Attachment" value={file} onChange={setFile} clearable />
+          <Group justify="flex-end">
+            <Button type="submit" loading={isSaving} disabled={!isReady}>
+              {action === "reject" ? "Reject" : "Forward"}
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  );
+}
+
+DeanProcessingActionModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  action: PropTypes.string.isRequired,
+  setAction: PropTypes.func.isRequired,
+  designationOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  designation: PropTypes.string.isRequired,
+  setDesignation: PropTypes.func.isRequired,
+  remarks: PropTypes.string.isRequired,
+  setRemarks: PropTypes.func.isRequired,
+  file: PropTypes.oneOfType([PropTypes.instanceOf(File), PropTypes.oneOf([null])]),
+  setFile: PropTypes.func.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isReady: PropTypes.bool.isRequired,
+};
+
+export default DeanProcessingActionModal;
diff --git a/src/Modules/InstituteWorks/components/DeanProcessingQueueTable.jsx b/src/Modules/InstituteWorks/components/DeanProcessingQueueTable.jsx
new file mode 100644
index 000000000..3eff880cc
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/DeanProcessingQueueTable.jsx
@@ -0,0 +1,85 @@
+import {
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function DeanProcessingQueueTable({ rows, isLoading, onRefresh, onAction }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Dean Processing Queue</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Request ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Area</Table.Th>
+              <Table.Th>Created By</Table.Th>
+              <Table.Th>File ID</Table.Th>
+              <Table.Th>Action</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows.map((item) => (
+                <Table.Tr key={item.file_id}>
+                  <Table.Td>{item.request_id}</Table.Td>
+                  <Table.Td>{item.name}</Table.Td>
+                  <Table.Td>{item.area}</Table.Td>
+                  <Table.Td>{item.requestCreatedBy}</Table.Td>
+                  <Table.Td>{item.file_id}</Table.Td>
+                  <Table.Td>
+                    <Button
+                      size="xs"
+                      onClick={() => onAction(item.file_id)}
+                      disabled={!item.file_id}
+                    >
+                      Process & Forward
+                    </Button>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={6}>
+                  <Text ta="center" c="dimmed">
+                    No requests in dean processing queue.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+DeanProcessingQueueTable.propTypes = {
+  rows: PropTypes.arrayOf(
+    PropTypes.shape({
+      request_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      name: PropTypes.string,
+      area: PropTypes.string,
+      requestCreatedBy: PropTypes.string,
+      file_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    }),
+  ).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+  onAction: PropTypes.func.isRequired,
+};
+
+export default DeanProcessingQueueTable;
diff --git a/src/Modules/InstituteWorks/components/DirectorApprovedTable.jsx b/src/Modules/InstituteWorks/components/DirectorApprovedTable.jsx
new file mode 100644
index 000000000..830931714
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/DirectorApprovedTable.jsx
@@ -0,0 +1,96 @@
+import {
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+const currencyFormatter = new Intl.NumberFormat("en-IN", {
+  maximumFractionDigits: 2,
+});
+
+function readField(item, snakeKey, camelKey) {
+  return item?.[snakeKey] ?? item?.[camelKey] ?? null;
+}
+
+function DirectorApprovedTable({ requests, isLoading, onRefresh, onIssue }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Director Approved Requests</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Area</Table.Th>
+              <Table.Th>Created By</Table.Th>
+              <Table.Th>Budget</Table.Th>
+              <Table.Th>Priority</Table.Th>
+              <Table.Th>Next Approver</Table.Th>
+              <Table.Th>Action</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {requests.length > 0 ? (
+              requests.map((item) => (
+                <Table.Tr key={item.id}>
+                  <Table.Td>{item.id}</Table.Td>
+                  <Table.Td>{item.name}</Table.Td>
+                  <Table.Td>{item.area}</Table.Td>
+                  <Table.Td>{item.requestCreatedBy}</Table.Td>
+                  <Table.Td>
+                    {readField(item, "estimated_budget", "estimatedBudget") != null
+                      ? `Rs ${currencyFormatter.format(Number(readField(item, "estimated_budget", "estimatedBudget")))}`
+                      : "-"}
+                  </Table.Td>
+                  <Table.Td>{readField(item, "is_priority", "isPriority") ? "Priority" : "Normal"}</Table.Td>
+                  <Table.Td>{readField(item, "next_approver", "nextApprover") || "-"}</Table.Td>
+                  <Table.Td>
+                    <Button size="xs" onClick={() => onIssue(item)}>
+                      Issue Work Order
+                    </Button>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={8}>
+                  <Text ta="center" c="dimmed">
+                    No requests are currently approved by director.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+DirectorApprovedTable.propTypes = {
+  requests: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      name: PropTypes.string,
+      area: PropTypes.string,
+      requestCreatedBy: PropTypes.string,
+    }),
+  ).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+  onIssue: PropTypes.func.isRequired,
+};
+
+export default DirectorApprovedTable;
diff --git a/src/Modules/InstituteWorks/components/ForwardRequestModal.jsx b/src/Modules/InstituteWorks/components/ForwardRequestModal.jsx
new file mode 100644
index 000000000..20a867aed
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/ForwardRequestModal.jsx
@@ -0,0 +1,85 @@
+import {
+  Button,
+  FileInput,
+  Group,
+  Modal,
+  Select,
+  Stack,
+  Textarea,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function ForwardRequestModal({
+  opened,
+  onClose,
+  onSubmit,
+  designationOptions,
+  designation,
+  setDesignation,
+  remarks,
+  setRemarks,
+  attachment = null,
+  setAttachment,
+  isSaving,
+  isReady,
+}) {
+  return (
+    <Modal opened={opened} onClose={onClose} title="Forward Request" centered>
+      <form onSubmit={onSubmit}>
+        <Stack>
+          <Select
+            label="Forward To"
+            placeholder="Select designation and user"
+            data={designationOptions}
+            value={designation}
+            onChange={(value) => setDesignation(value || "")}
+            searchable
+            required
+          />
+          <Textarea
+            label="Remarks"
+            value={remarks}
+            onChange={(event) => setRemarks(event.currentTarget.value)}
+            minRows={3}
+          />
+          <FileInput
+            label="Attachment"
+            value={attachment}
+            onChange={setAttachment}
+            clearable
+          />
+          <Group justify="flex-end">
+            <Button type="submit" loading={isSaving} disabled={!isReady}>
+              Forward
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  );
+}
+
+ForwardRequestModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  designationOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  designation: PropTypes.string.isRequired,
+  setDesignation: PropTypes.func.isRequired,
+  remarks: PropTypes.string.isRequired,
+  setRemarks: PropTypes.func.isRequired,
+  attachment: PropTypes.oneOfType([
+    PropTypes.instanceOf(File),
+    PropTypes.oneOf([null]),
+  ]),
+  setAttachment: PropTypes.func.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isReady: PropTypes.bool.isRequired,
+};
+
+export default ForwardRequestModal;
diff --git a/src/Modules/InstituteWorks/components/InfoNotice.jsx b/src/Modules/InstituteWorks/components/InfoNotice.jsx
new file mode 100644
index 000000000..19e9b1b1d
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/InfoNotice.jsx
@@ -0,0 +1,16 @@
+import { Text } from "@mantine/core";
+import PropTypes from "prop-types";
+
+function InfoNotice({ message }) {
+  return (
+    <Text c="dimmed" mt="md">
+      {message}
+    </Text>
+  );
+}
+
+InfoNotice.propTypes = {
+  message: PropTypes.string.isRequired,
+};
+
+export default InfoNotice;
diff --git a/src/Modules/InstituteWorks/components/InstituteWorksShell.jsx b/src/Modules/InstituteWorks/components/InstituteWorksShell.jsx
new file mode 100644
index 000000000..823977299
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/InstituteWorksShell.jsx
@@ -0,0 +1,33 @@
+import { Flex } from "@mantine/core";
+import PropTypes from "prop-types";
+import CustomBreadcrumbs from "../../../components/Breadcrumbs";
+import ModuleTabs from "../../../components/moduleTabs";
+
+function InstituteWorksShell({ tabs, activeTab, setActiveTab, children }) {
+  return (
+    <>
+      <CustomBreadcrumbs />
+      <Flex justify="space-between" align="center" mt="lg">
+        <ModuleTabs
+          tabs={tabs}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+        />
+      </Flex>
+      {children}
+    </>
+  );
+}
+
+InstituteWorksShell.propTypes = {
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  activeTab: PropTypes.string.isRequired,
+  setActiveTab: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default InstituteWorksShell;
diff --git a/src/Modules/InstituteWorks/components/IssueWorkOrderModal.jsx b/src/Modules/InstituteWorks/components/IssueWorkOrderModal.jsx
new file mode 100644
index 000000000..6c9648813
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/IssueWorkOrderModal.jsx
@@ -0,0 +1,97 @@
+import { Button, Group, Modal, Stack, TextInput } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
+import PropTypes from "prop-types";
+
+function startOfToday() {
+  const now = new Date();
+  now.setHours(0, 0, 0, 0);
+  return now;
+}
+
+function IssueWorkOrderModal({ opened, onClose, onSubmit, form, setForm, isSaving, isReady }) {
+  const minStartDate = startOfToday();
+
+  return (
+    <Modal opened={opened} onClose={onClose} title="Issue Work Order" centered>
+      <form onSubmit={onSubmit}>
+        <Stack>
+          <TextInput label="Request ID" value={String(form.request_id || "")} readOnly />
+          <TextInput
+            label="Agency / Work Name"
+            value={form.name}
+            onChange={(event) =>
+              setForm((prev) => ({
+                ...prev,
+                name: event.currentTarget.value,
+              }))
+            }
+            required
+          />
+          <TextInput
+            label="Allotted Time"
+            placeholder="e.g. 45 days"
+            value={form.alloted_time}
+            onChange={(event) =>
+              setForm((prev) => ({
+                ...prev,
+                alloted_time: event.currentTarget.value,
+              }))
+            }
+            required
+          />
+          <DateInput
+            label="Start Date"
+            value={form.start_date}
+            onChange={(value) => setForm((prev) => ({ ...prev, start_date: value }))}
+            valueFormat="YYYY-MM-DD"
+            minDate={minStartDate}
+            required
+          />
+          <DateInput
+            label="Expected Completion Date"
+            value={form.completion_date}
+            onChange={(value) =>
+              setForm((prev) => {
+                if (value && prev.start_date) {
+                  const start = new Date(prev.start_date);
+                  const end = new Date(value);
+                  start.setHours(0, 0, 0, 0);
+                  end.setHours(0, 0, 0, 0);
+                  if (end < start) {
+                    return prev;
+                  }
+                }
+                return { ...prev, completion_date: value };
+              })
+            }
+            valueFormat="YYYY-MM-DD"
+            minDate={form.start_date || minStartDate}
+          />
+          <Group justify="flex-end">
+            <Button type="submit" loading={isSaving} disabled={!isReady}>
+              Submit
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  );
+}
+
+IssueWorkOrderModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  form: PropTypes.shape({
+    request_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    name: PropTypes.string,
+    alloted_time: PropTypes.string,
+    start_date: PropTypes.instanceOf(Date),
+    completion_date: PropTypes.instanceOf(Date),
+  }).isRequired,
+  setForm: PropTypes.func.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isReady: PropTypes.bool.isRequired,
+};
+
+export default IssueWorkOrderModal;
diff --git a/src/Modules/InstituteWorks/components/ProposalItemsModal.jsx b/src/Modules/InstituteWorks/components/ProposalItemsModal.jsx
new file mode 100644
index 000000000..07e26fbc1
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/ProposalItemsModal.jsx
@@ -0,0 +1,153 @@
+import {
+  ActionIcon,
+  Button,
+  FileInput,
+  Group,
+  Modal,
+  NumberInput,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { Trash } from "@phosphor-icons/react";
+import PropTypes from "prop-types";
+
+function ProposalItemsModal({
+  opened,
+  onClose,
+  onSubmit,
+  title,
+  submitLabel,
+  designationOptions,
+  designation,
+  setDesignation,
+  supportingDocument = null,
+  setSupportingDocument,
+  items,
+  updateItem,
+  addItem,
+  removeItem,
+  totalBudget,
+  isSaving,
+  isReady,
+}) {
+  return (
+    <Modal opened={opened} onClose={onClose} title={title} size="xl" centered>
+      <form onSubmit={onSubmit}>
+        <Stack>
+          <Select
+            label="Forward To"
+            data={designationOptions}
+            value={designation}
+            onChange={(value) => setDesignation(value || "")}
+            searchable
+            required
+          />
+
+          <FileInput
+            label="Supporting Document"
+            value={supportingDocument}
+            onChange={setSupportingDocument}
+            clearable
+          />
+
+          {items.map((item, index) => (
+            <Paper key={`${index + 1}-item`} withBorder p="sm" radius="md">
+              <Group grow align="end" wrap="wrap">
+                <TextInput
+                  label="Item Name"
+                  value={item.name}
+                  onChange={(event) => updateItem(index, "name", event.currentTarget.value)}
+                  required
+                />
+                <TextInput
+                  label="Unit"
+                  value={item.unit}
+                  onChange={(event) => updateItem(index, "unit", event.currentTarget.value)}
+                  required
+                />
+                <NumberInput
+                  label="Quantity"
+                  min={0}
+                  value={item.quantity}
+                  onChange={(value) => updateItem(index, "quantity", value)}
+                  required
+                />
+                <NumberInput
+                  label="Price / Unit"
+                  min={0}
+                  value={item.price_per_unit}
+                  onChange={(value) => updateItem(index, "price_per_unit", value)}
+                  required
+                />
+              </Group>
+
+              <Group mt="sm" align="end">
+                <TextInput
+                  style={{ flex: 1 }}
+                  label="Description"
+                  value={item.description}
+                  onChange={(event) =>
+                    updateItem(index, "description", event.currentTarget.value)
+                  }
+                />
+                <FileInput
+                  style={{ flex: 1 }}
+                  label="Item Document"
+                  value={item.docs}
+                  onChange={(value) => updateItem(index, "docs", value)}
+                  clearable
+                />
+                <ActionIcon
+                  variant="light"
+                  color="red"
+                  onClick={() => removeItem(index)}
+                  disabled={items.length === 1}
+                >
+                  <Trash size={16} />
+                </ActionIcon>
+              </Group>
+            </Paper>
+          ))}
+
+          <Group justify="space-between">
+            <Button variant="default" onClick={addItem}>
+              Add Item
+            </Button>
+            <Text fw={600}>Estimated Total: {totalBudget.toFixed(2)}</Text>
+          </Group>
+
+          <Group justify="flex-end">
+            <Button type="submit" loading={isSaving} disabled={!isReady}>
+              {submitLabel}
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  );
+}
+
+ProposalItemsModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  submitLabel: PropTypes.string.isRequired,
+  designationOptions: PropTypes.arrayOf(PropTypes.object).isRequired,
+  designation: PropTypes.string.isRequired,
+  setDesignation: PropTypes.func.isRequired,
+  supportingDocument: PropTypes.oneOfType([PropTypes.instanceOf(File), PropTypes.oneOf([null])]),
+  setSupportingDocument: PropTypes.func.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  updateItem: PropTypes.func.isRequired,
+  addItem: PropTypes.func.isRequired,
+  removeItem: PropTypes.func.isRequired,
+  totalBudget: PropTypes.number.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isReady: PropTypes.bool.isRequired,
+};
+
+export default ProposalItemsModal;
diff --git a/src/Modules/InstituteWorks/components/ProposalRequestsTable.jsx b/src/Modules/InstituteWorks/components/ProposalRequestsTable.jsx
new file mode 100644
index 000000000..61e0ec936
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/ProposalRequestsTable.jsx
@@ -0,0 +1,71 @@
+import {
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function ProposalRequestsTable({ rows, isLoading, onRefresh, onCreate }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Proposal Builder</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Request ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Area</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>Action</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows.map((row) => (
+                <Table.Tr key={row.request_id}>
+                  <Table.Td>{row.request_id}</Table.Td>
+                  <Table.Td>{row.name}</Table.Td>
+                  <Table.Td>{row.area}</Table.Td>
+                  <Table.Td>{row.status}</Table.Td>
+                  <Table.Td>
+                    <Button size="xs" onClick={() => onCreate(row)}>
+                      Create Proposal
+                    </Button>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={5}>
+                  <Text ta="center" c="dimmed">
+                    No requests are waiting for an engineer proposal.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+ProposalRequestsTable.propTypes = {
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+  onCreate: PropTypes.func.isRequired,
+};
+
+export default ProposalRequestsTable;
diff --git a/src/Modules/InstituteWorks/components/RejectedRequestsTable.jsx b/src/Modules/InstituteWorks/components/RejectedRequestsTable.jsx
new file mode 100644
index 000000000..87fa56c95
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/RejectedRequestsTable.jsx
@@ -0,0 +1,71 @@
+import {
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function RejectedRequestsTable({ rows, isLoading, onRefresh, onResubmit }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Rejected Requests</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Request ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Area</Table.Th>
+              <Table.Th>Created By</Table.Th>
+              <Table.Th>Action</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows.map((row) => (
+                <Table.Tr key={row.id}>
+                  <Table.Td>{row.id}</Table.Td>
+                  <Table.Td>{row.name}</Table.Td>
+                  <Table.Td>{row.area}</Table.Td>
+                  <Table.Td>{row.requestCreatedBy}</Table.Td>
+                  <Table.Td>
+                    <Button size="xs" color="orange" onClick={() => onResubmit(row.id)}>
+                      Resubmit
+                    </Button>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={5}>
+                  <Text ta="center" c="dimmed">
+                    No rejected requests found.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+RejectedRequestsTable.propTypes = {
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+  onResubmit: PropTypes.func.isRequired,
+};
+
+export default RejectedRequestsTable;
diff --git a/src/Modules/InstituteWorks/components/RequestForm.jsx b/src/Modules/InstituteWorks/components/RequestForm.jsx
new file mode 100644
index 000000000..38680c129
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/RequestForm.jsx
@@ -0,0 +1,123 @@
+import { useState } from "react";
+import {
+  Button,
+  FileInput,
+  Group,
+  Paper,
+  Select,
+  Switch,
+  Stack,
+  TextInput,
+  Textarea,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function RequestForm({ designationOptions, isSubmitting, onSubmit }) {
+  const [name, setName] = useState("");
+  const [area, setArea] = useState("");
+  const [description, setDescription] = useState("");
+  const [designation, setDesignation] = useState("");
+  const [isPriority, setIsPriority] = useState(false);
+  const [file, setFile] = useState(null);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (!name || !area || !description || !designation) return;
+
+    await onSubmit({
+      name,
+      area,
+      description,
+      designation,
+      isPriority,
+      file,
+    });
+
+    setName("");
+    setArea("");
+    setDescription("");
+    setDesignation("");
+    setIsPriority(false);
+    setFile(null);
+  };
+
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Title order={4} mb="md">
+        New IWD Request
+      </Title>
+      <form onSubmit={handleSubmit}>
+        <Stack>
+          <TextInput
+            label="Request Title"
+            placeholder="Electrical repair in workshop"
+            value={name}
+            onChange={(event) => setName(event.currentTarget.value)}
+            required
+          />
+
+          <TextInput
+            label="Area"
+            placeholder="Mechanical Lab Block"
+            value={area}
+            onChange={(event) => setArea(event.currentTarget.value)}
+            required
+          />
+
+          <Textarea
+            label="Description"
+            placeholder="Describe the issue and urgency"
+            minRows={4}
+            value={description}
+            onChange={(event) => setDescription(event.currentTarget.value)}
+            required
+          />
+
+          <Select
+            label="Forward To"
+            placeholder="Select a designation"
+            data={designationOptions}
+            value={designation}
+            onChange={(value) => setDesignation(value || "")}
+            searchable
+            required
+          />
+
+          <Switch
+            label="Mark as Priority Request"
+            checked={isPriority}
+            onChange={(event) => setIsPriority(event.currentTarget.checked)}
+          />
+
+          <FileInput
+            label="Attachment"
+            placeholder="Optional supporting file"
+            value={file}
+            onChange={setFile}
+            clearable
+          />
+
+          <Group justify="flex-end">
+            <Button type="submit" loading={isSubmitting}>
+              Create Request
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Paper>
+  );
+}
+
+RequestForm.propTypes = {
+  designationOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+export default RequestForm;
diff --git a/src/Modules/InstituteWorks/components/RequestsInProgressTable.jsx b/src/Modules/InstituteWorks/components/RequestsInProgressTable.jsx
new file mode 100644
index 000000000..274edcb32
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/RequestsInProgressTable.jsx
@@ -0,0 +1,96 @@
+import {
+  Badge,
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+const currencyFormatter = new Intl.NumberFormat("en-IN", {
+  maximumFractionDigits: 2,
+});
+
+function readField(item, snakeKey, camelKey) {
+  return item?.[snakeKey] ?? item?.[camelKey] ?? null;
+}
+
+function RequestsInProgressTable({ rows, isLoading, onRefresh }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Requests In Progress</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Request ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Area</Table.Th>
+              <Table.Th>Created By</Table.Th>
+              <Table.Th>Budget</Table.Th>
+              <Table.Th>Priority</Table.Th>
+              <Table.Th>Work Order</Table.Th>
+              <Table.Th>Work Status</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows.map((item) => {
+                const isCompleted = Boolean(item.workCompleted);
+                return (
+                  <Table.Tr key={item.id}>
+                    <Table.Td>{item.id}</Table.Td>
+                    <Table.Td>{item.name}</Table.Td>
+                    <Table.Td>{item.area}</Table.Td>
+                    <Table.Td>{item.requestCreatedBy}</Table.Td>
+                    <Table.Td>
+                      {readField(item, "estimated_budget", "estimatedBudget") != null
+                        ? `Rs ${currencyFormatter.format(Number(readField(item, "estimated_budget", "estimatedBudget")))}`
+                        : "-"}
+                    </Table.Td>
+                    <Table.Td>{readField(item, "is_priority", "isPriority") ? "Priority" : "Normal"}</Table.Td>
+                    <Table.Td>
+                      <Badge color="blue" variant="light">
+                        Issued
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td>
+                      <Badge color={isCompleted ? "green" : "yellow"} variant="light">
+                        {isCompleted ? "Completed" : "In Progress"}
+                      </Badge>
+                    </Table.Td>
+                  </Table.Tr>
+                );
+              })
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={8}>
+                  <Text ta="center" c="dimmed">
+                    No requests in progress.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+RequestsInProgressTable.propTypes = {
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+};
+
+export default RequestsInProgressTable;
diff --git a/src/Modules/InstituteWorks/components/RequestsStatusTable.jsx b/src/Modules/InstituteWorks/components/RequestsStatusTable.jsx
new file mode 100644
index 000000000..646c85092
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/RequestsStatusTable.jsx
@@ -0,0 +1,152 @@
+import {
+  Badge,
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function approvalBadgeColor(value) {
+  if (value === 1) return "green";
+  if (value === -1) return "red";
+  return "yellow";
+}
+
+const currencyFormatter = new Intl.NumberFormat("en-IN", {
+  maximumFractionDigits: 2,
+});
+
+function readField(item, snakeKey, camelKey) {
+  return item?.[snakeKey] ?? item?.[camelKey] ?? null;
+}
+
+function formatDeadline(item) {
+  const approver = (readField(item, "next_approver", "nextApprover") || "").toLowerCase();
+  const deadline =
+    approver.includes("director")
+      ? readField(item, "director_approval_deadline", "directorApprovalDeadline")
+      : approver.includes("hod")
+        ? readField(item, "hod_approval_deadline", "hodApprovalDeadline")
+        : readField(item, "iwd_admin_approval_deadline", "iwdAdminApprovalDeadline");
+
+  if (!deadline) return "-";
+  const date = new Date(deadline);
+  return Number.isNaN(date.getTime()) ? String(deadline) : date.toLocaleString();
+}
+
+function RequestsStatusTable({ rows, isLoading, onRefresh }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>IWD Request Status</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Area</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>Budget</Table.Th>
+              <Table.Th>Priority</Table.Th>
+              <Table.Th>Next Approver</Table.Th>
+              <Table.Th>SLA Deadline</Table.Th>
+              <Table.Th>IWD Admin</Table.Th>
+              <Table.Th>Dean/HOD</Table.Th>
+              <Table.Th>Director</Table.Th>
+              <Table.Th>Work Order</Table.Th>
+              <Table.Th>Completed</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows.map((item) => (
+                <Table.Tr key={item.request_id}>
+                  <Table.Td>{item.request_id}</Table.Td>
+                  <Table.Td>{item.name}</Table.Td>
+                  <Table.Td>{item.area}</Table.Td>
+                  <Table.Td>{item.status || "-"}</Table.Td>
+                  <Table.Td>
+                    {readField(item, "estimated_budget", "estimatedBudget") != null
+                      ? `Rs ${currencyFormatter.format(Number(readField(item, "estimated_budget", "estimatedBudget")))}`
+                      : "-"}
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge color={readField(item, "is_priority", "isPriority") ? "orange" : "gray"} variant="light">
+                      {readField(item, "is_priority", "isPriority") ? "Priority" : "Normal"}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>{readField(item, "next_approver", "nextApprover") || "-"}</Table.Td>
+                  <Table.Td>{formatDeadline(item)}</Table.Td>
+                  <Table.Td>
+                    <Badge
+                      color={approvalBadgeColor(item.processed_by_admin)}
+                      variant="light"
+                    >
+                      {item.processed_by_admin === 1
+                        ? "Approved"
+                        : item.processed_by_admin === -1
+                          ? "Rejected"
+                          : "Pending"}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge
+                      color={approvalBadgeColor(item.processed_by_dean)}
+                      variant="light"
+                    >
+                      {item.processed_by_dean === 1
+                        ? "Approved"
+                        : item.processed_by_dean === -1
+                          ? "Rejected"
+                          : "Pending"}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge
+                      color={approvalBadgeColor(item.processed_by_director)}
+                      variant="light"
+                    >
+                      {item.processed_by_director === 1
+                        ? "Approved"
+                        : item.processed_by_director === -1
+                          ? "Rejected"
+                          : "Pending"}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>{item.work_order ? "Yes" : "No"}</Table.Td>
+                  <Table.Td>{item.work_completed ? "Yes" : "No"}</Table.Td>
+                </Table.Tr>
+              ))
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={13}>
+                  <Text ta="center" c="dimmed">
+                    No request status data found.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+RequestsStatusTable.propTypes = {
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+};
+
+export default RequestsStatusTable;
diff --git a/src/Modules/InstituteWorks/components/SectionStack.jsx b/src/Modules/InstituteWorks/components/SectionStack.jsx
new file mode 100644
index 000000000..7c1810530
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/SectionStack.jsx
@@ -0,0 +1,12 @@
+import { Stack } from "@mantine/core";
+import PropTypes from "prop-types";
+
+function SectionStack({ children }) {
+  return <Stack>{children}</Stack>;
+}
+
+SectionStack.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default SectionStack;
diff --git a/src/Modules/InstituteWorks/components/TrackingHistoryModal.jsx b/src/Modules/InstituteWorks/components/TrackingHistoryModal.jsx
new file mode 100644
index 000000000..8126b09d5
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/TrackingHistoryModal.jsx
@@ -0,0 +1,105 @@
+import { Badge, Modal, Paper, Stack, Table, Text } from "@mantine/core";
+import PropTypes from "prop-types";
+
+function TrackingHistoryModal({ opened, onClose, isLoading, fileData = null, tracks }) {
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="File Tracking History"
+      size="xl"
+      centered
+    >
+      {isLoading ? (
+        <Text ta="center" c="dimmed" py="md">
+          Loading...
+        </Text>
+      ) : (
+        <Stack gap="sm">
+          {fileData && (
+            <Paper withBorder p="sm" radius="md">
+              <Text size="sm">
+                <strong>File ID:</strong> {fileData.id}
+              </Text>
+              <Text size="sm">
+                <strong>Module:</strong> {fileData.src_module}
+              </Text>
+              <Text size="sm">
+                <strong>Uploader:</strong> {fileData.uploader} (
+                {fileData.uploader_designation})
+              </Text>
+            </Paper>
+          )}
+          <Table striped highlightOnHover>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>#</Table.Th>
+                <Table.Th>From</Table.Th>
+                <Table.Th>To</Table.Th>
+                <Table.Th>Designation</Table.Th>
+                <Table.Th>Remarks</Table.Th>
+                <Table.Th>Date</Table.Th>
+                <Table.Th>Read</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {tracks.length > 0 ? (
+                tracks.map((track, idx) => (
+                  <Table.Tr key={track.id}>
+                    <Table.Td>{idx + 1}</Table.Td>
+                    <Table.Td>{track.current_id}</Table.Td>
+                    <Table.Td>{track.receiver_id}</Table.Td>
+                    <Table.Td>{track.receiver_designation}</Table.Td>
+                    <Table.Td>{track.remarks || "-"}</Table.Td>
+                    <Table.Td>{track.forward_date || "-"}</Table.Td>
+                    <Table.Td>
+                      <Badge
+                        color={track.is_read ? "green" : "yellow"}
+                        variant="light"
+                      >
+                        {track.is_read ? "Read" : "Unread"}
+                      </Badge>
+                    </Table.Td>
+                  </Table.Tr>
+                ))
+              ) : (
+                <Table.Tr>
+                  <Table.Td colSpan={7}>
+                    <Text ta="center" c="dimmed">
+                      No tracking records.
+                    </Text>
+                  </Table.Td>
+                </Table.Tr>
+              )}
+            </Table.Tbody>
+          </Table>
+        </Stack>
+      )}
+    </Modal>
+  );
+}
+
+TrackingHistoryModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  fileData: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    src_module: PropTypes.string,
+    uploader: PropTypes.string,
+    uploader_designation: PropTypes.string,
+  }),
+  tracks: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      current_id: PropTypes.string,
+      receiver_id: PropTypes.string,
+      receiver_designation: PropTypes.string,
+      remarks: PropTypes.string,
+      forward_date: PropTypes.string,
+      is_read: PropTypes.bool,
+    }),
+  ).isRequired,
+};
+
+export default TrackingHistoryModal;
diff --git a/src/Modules/InstituteWorks/components/VendorFormModal.jsx b/src/Modules/InstituteWorks/components/VendorFormModal.jsx
new file mode 100644
index 000000000..48d461b3b
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/VendorFormModal.jsx
@@ -0,0 +1,70 @@
+import { Button, Group, Modal, Stack, Text, TextInput } from "@mantine/core";
+import PropTypes from "prop-types";
+
+function VendorFormModal({
+  opened,
+  onClose,
+  onSubmit,
+  requestId,
+  workId,
+  newVendor,
+  setNewVendor,
+  isSaving,
+}) {
+  return (
+    <Modal opened={opened} onClose={onClose} title="Add Vendor" centered>
+      <form onSubmit={onSubmit}>
+        <Stack>
+          <Text size="sm" c="dimmed">
+            Request #{requestId || "-"} | Work Order #{workId || "-"}
+          </Text>
+          <TextInput
+            label="Vendor Name"
+            value={newVendor.name}
+            onChange={(e) =>
+              setNewVendor((v) => ({ ...v, name: e.currentTarget.value }))
+            }
+            required
+          />
+          <TextInput
+            label="Contact Number"
+            value={newVendor.contact_number}
+            onChange={(e) =>
+              setNewVendor((v) => ({ ...v, contact_number: e.currentTarget.value }))
+            }
+          />
+          <TextInput
+            label="Email Address"
+            type="email"
+            value={newVendor.email_address}
+            onChange={(e) =>
+              setNewVendor((v) => ({ ...v, email_address: e.currentTarget.value }))
+            }
+          />
+          <Group justify="flex-end">
+            <Button type="submit" loading={isSaving} disabled={!newVendor.name || !workId}>
+              Add
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  );
+}
+
+VendorFormModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  requestId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  workId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  newVendor: PropTypes.shape({
+    name: PropTypes.string,
+    contact_number: PropTypes.string,
+    email_address: PropTypes.string,
+  }).isRequired,
+  setNewVendor: PropTypes.func.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+};
+
+export default VendorFormModal;
diff --git a/src/Modules/InstituteWorks/components/VendorManagementContent.jsx b/src/Modules/InstituteWorks/components/VendorManagementContent.jsx
new file mode 100644
index 000000000..0fabf8de2
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/VendorManagementContent.jsx
@@ -0,0 +1,130 @@
+import {
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Select,
+  Stack,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+function VendorManagementContent({
+  issuedWorks,
+  isLoading,
+  selectedRequestId,
+  onSelectRequest,
+  vendors,
+  isFetchingVendors,
+  workId = null,
+  onOpenAddVendor,
+  onRefresh,
+}) {
+  const requestOptions = issuedWorks.map((w) => ({
+    value: String(w.request_id),
+    label: `#${w.request_id} - ${w.name}`,
+  }));
+
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Vendor Management</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <Stack gap="md">
+        <Select
+          label="Select Work Order (by Request)"
+          placeholder="Choose a request"
+          data={requestOptions}
+          value={selectedRequestId || null}
+          onChange={(value) => onSelectRequest(value || "")}
+          searchable
+          clearable
+        />
+
+        {selectedRequestId && (
+          <>
+            <Group justify="space-between">
+              <Title order={6}>Vendors for Request #{selectedRequestId}</Title>
+              <Button size="xs" onClick={onOpenAddVendor} disabled={!workId}>
+                Add Vendor
+              </Button>
+            </Group>
+
+            <ScrollArea>
+              <Table striped highlightOnHover>
+                <Table.Thead>
+                  <Table.Tr>
+                    <Table.Th>Vendor ID</Table.Th>
+                    <Table.Th>Name</Table.Th>
+                    <Table.Th>Contact Number</Table.Th>
+                    <Table.Th>Email</Table.Th>
+                  </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                  {isFetchingVendors ? (
+                    <Table.Tr>
+                      <Table.Td colSpan={4}>
+                        <Text ta="center" c="dimmed">
+                          Loading...
+                        </Text>
+                      </Table.Td>
+                    </Table.Tr>
+                  ) : vendors.length > 0 ? (
+                    vendors.map((vendor) => (
+                      <Table.Tr key={vendor.vendor_id}>
+                        <Table.Td>{vendor.vendor_id}</Table.Td>
+                        <Table.Td>{vendor.name}</Table.Td>
+                        <Table.Td>{vendor.contact_number || "-"}</Table.Td>
+                        <Table.Td>{vendor.email_address || "-"}</Table.Td>
+                      </Table.Tr>
+                    ))
+                  ) : (
+                    <Table.Tr>
+                      <Table.Td colSpan={4}>
+                        <Text ta="center" c="dimmed">
+                          No vendors added yet for this work order.
+                        </Text>
+                      </Table.Td>
+                    </Table.Tr>
+                  )}
+                </Table.Tbody>
+              </Table>
+            </ScrollArea>
+          </>
+        )}
+      </Stack>
+    </Paper>
+  );
+}
+
+VendorManagementContent.propTypes = {
+  issuedWorks: PropTypes.arrayOf(
+    PropTypes.shape({
+      request_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      name: PropTypes.string,
+    }),
+  ).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  selectedRequestId: PropTypes.string.isRequired,
+  onSelectRequest: PropTypes.func.isRequired,
+  vendors: PropTypes.arrayOf(
+    PropTypes.shape({
+      vendor_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      name: PropTypes.string,
+      contact_number: PropTypes.string,
+      email_address: PropTypes.string,
+    }),
+  ).isRequired,
+  isFetchingVendors: PropTypes.bool.isRequired,
+  workId: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.oneOf([null])]),
+  onOpenAddVendor: PropTypes.func.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+};
+
+export default VendorManagementContent;
diff --git a/src/Modules/InstituteWorks/components/WorkProgressTable.jsx b/src/Modules/InstituteWorks/components/WorkProgressTable.jsx
new file mode 100644
index 000000000..965b46313
--- /dev/null
+++ b/src/Modules/InstituteWorks/components/WorkProgressTable.jsx
@@ -0,0 +1,104 @@
+import {
+  Badge,
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+
+const currencyFormatter = new Intl.NumberFormat("en-IN", {
+  maximumFractionDigits: 2,
+});
+
+function readField(item, snakeKey, camelKey) {
+  return item?.[snakeKey] ?? item?.[camelKey] ?? null;
+}
+
+function WorkProgressTable({ rows, isLoading, workingId = null, onRefresh, onComplete }) {
+  return (
+    <Paper withBorder p="md" radius="md" bg="white">
+      <Group justify="space-between" mb="md">
+        <Title order={4}>Work Under Progress</Title>
+        <Button variant="light" onClick={onRefresh} loading={isLoading}>
+          Refresh
+        </Button>
+      </Group>
+
+      <ScrollArea>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Area</Table.Th>
+              <Table.Th>Created By</Table.Th>
+              <Table.Th>Budget</Table.Th>
+              <Table.Th>Priority</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>Action</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows.map((item) => {
+                const isCompleted = Boolean(item.workCompleted);
+                return (
+                  <Table.Tr key={item.id}>
+                    <Table.Td>{item.id}</Table.Td>
+                    <Table.Td>{item.name}</Table.Td>
+                    <Table.Td>{item.area}</Table.Td>
+                    <Table.Td>{item.requestCreatedBy}</Table.Td>
+                    <Table.Td>
+                      {readField(item, "estimated_budget", "estimatedBudget") != null
+                        ? `Rs ${currencyFormatter.format(Number(readField(item, "estimated_budget", "estimatedBudget")))}`
+                        : "-"}
+                    </Table.Td>
+                    <Table.Td>{readField(item, "is_priority", "isPriority") ? "Priority" : "Normal"}</Table.Td>
+                    <Table.Td>
+                      <Badge color={isCompleted ? "green" : "yellow"} variant="light">
+                        {isCompleted ? "Completed" : "In Progress"}
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td>
+                      <Button
+                        size="xs"
+                        variant={isCompleted ? "default" : "filled"}
+                        disabled={isCompleted}
+                        loading={workingId === item.id}
+                        onClick={() => onComplete(item.id)}
+                      >
+                        {isCompleted ? "Done" : "Mark Completed"}
+                      </Button>
+                    </Table.Td>
+                  </Table.Tr>
+                );
+              })
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={8}>
+                  <Text ta="center" c="dimmed">
+                    No work items found.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+WorkProgressTable.propTypes = {
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  workingId: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.oneOf([null])]),
+  onRefresh: PropTypes.func.isRequired,
+  onComplete: PropTypes.func.isRequired,
+};
+
+export default WorkProgressTable;
diff --git a/src/Modules/InstituteWorks/index.jsx b/src/Modules/InstituteWorks/index.jsx
new file mode 100644
index 000000000..d2e8dc638
--- /dev/null
+++ b/src/Modules/InstituteWorks/index.jsx
@@ -0,0 +1,247 @@
+import { useEffect, useMemo, useState } from "react";
+import { useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
+import { setActiveTab_ } from "../../redux/moduleslice";
+import InstituteWorksShell from "./components/InstituteWorksShell";
+import CreateRequestView from "./CreateRequestView";
+import CreatedRequestsView from "./CreatedRequestsView";
+import RequestsStatusView from "./RequestsStatusView";
+import DirectorApprovedView from "./DirectorApprovedView";
+import WorkProgressView from "./WorkProgressView";
+import BudgetManagementView from "./BudgetManagementView";
+import DeanDirectorQueueView from "./DeanDirectorQueueView";
+import BillAuditView from "./BillAuditView";
+import BillSettlementView from "./BillSettlementView";
+import AdminApprovalQueueView from "./AdminApprovalQueueView";
+import ProposalBuilderView from "./ProposalBuilderView";
+import BillGenerationView from "./BillGenerationView";
+import BillProcessingView from "./BillProcessingView";
+import DeanProcessingQueueView from "./DeanProcessingQueueView";
+import VendorManagementView from "./VendorManagementView";
+import RequestsInProgressView from "./RequestsInProgressView";
+// NEW SLA & INVENTORY VIEWS
+import SLADashboardView from "./SLADashboardView";
+import InventoryManagementView from "./InventoryManagementView";
+import FeedbackView from "./FeedbackView";
+
+const ENGINEER_ROLES = [
+  "junior engineer",
+  "executive engineer (civil)",
+  "electrical_ae",
+  "electrical_je",
+  "ee",
+  "civil_ae",
+  "civil_je",
+  "research engineer",
+];
+
+const WORKFLOW_ROLES = [
+  "admin iwd",
+  "director",
+  "dean (p&d)",
+  "deanpnd",
+  "dean_s",
+  "dean academic",
+  "dean (r&d)",
+  "dean_rspc",
+  "hod (cse)",
+  "hod (design)",
+  "hod (ece)",
+  "hod (me)",
+  "hod (ns)",
+  "hod (liberal arts)",
+  "accounts admin",
+  "auditor",
+];
+
+const DEAN_HOD_ROLES = [
+  "dean (p&d)",
+  "deanpnd",
+  "dean_s",
+  "dean academic",
+  "dean (r&d)",
+  "dean_rspc",
+  "hod (cse)",
+  "hod (design)",
+  "hod (ece)",
+  "hod (me)",
+  "hod (ns)",
+  "hod (liberal arts)",
+  "hod",
+];
+
+function normalizeRole(role) {
+  return String(role || "").trim().toLowerCase();
+}
+
+function isEngineerRole(normalizedRole) {
+  return ENGINEER_ROLES.some((role) => normalizedRole.includes(role));
+}
+
+function isDeanProcessingRole(normalizedRole) {
+  return DEAN_HOD_ROLES.some((role) => normalizedRole.includes(role));
+}
+
+function isVendorManagementRole(normalizedRole) {
+  return (
+    normalizedRole.includes("accounts admin") ||
+    normalizedRole.includes("admin iwd")
+  );
+}
+
+function canCreateAndTrackRequests(normalizedRole) {
+  return (
+    WORKFLOW_ROLES.some((role) => normalizedRole.includes(role)) ||
+    isEngineerRole(normalizedRole) ||
+    normalizedRole.includes("hod")
+  );
+}
+
+function InstituteWorks() {
+  const dispatch = useDispatch();
+  const role = useSelector((state) => state.user.role);
+  const [activeTab, setActiveTab] = useState("0");
+  const normalizedRole = normalizeRole(role);
+  const engineerUser = isEngineerRole(normalizedRole);
+
+  const tabsConfig = useMemo(
+    () => [
+      {
+        title: "Create Request",
+        component: CreateRequestView,
+        visible: canCreateAndTrackRequests(normalizedRole),
+      },
+      {
+        title: "Created Requests",
+        component: CreatedRequestsView,
+        visible: canCreateAndTrackRequests(normalizedRole),
+      },
+      {
+        title: "Request Status",
+        component: RequestsStatusView,
+        visible: true,
+      },
+      {
+        title: "Admin Queue",
+        component: AdminApprovalQueueView,
+        visible: normalizedRole.includes("admin iwd"),
+      },
+      {
+        title: "Proposal Builder",
+        component: ProposalBuilderView,
+        visible: isEngineerRole(normalizedRole),
+      },
+      {
+        title: "Director Approved",
+        component: DirectorApprovedView,
+        visible: normalizedRole.includes("director"),
+      },
+      {
+        title: "Director Queue",
+        component: DeanDirectorQueueView,
+        visible: normalizedRole.includes("director"),
+      },
+      {
+        title: "Dean Processing",
+        component: DeanProcessingQueueView,
+        visible: isDeanProcessingRole(normalizedRole),
+      },
+      {
+        title: "Work Progress",
+        component: WorkProgressView,
+        visible: isEngineerRole(normalizedRole),
+      },
+      {
+        title: "Requests In Progress",
+        component: RequestsInProgressView,
+        visible: true,
+      },
+      {
+        title: "Bill Generation",
+        component: BillGenerationView,
+        visible: isEngineerRole(normalizedRole),
+      },
+      {
+        title: "Bill Processing",
+        component: BillProcessingView,
+        visible: normalizedRole.includes("accounts admin"),
+      },
+      {
+        title: "Vendor Management",
+        component: VendorManagementView,
+        visible: isVendorManagementRole(normalizedRole),
+      },
+      {
+        title: "Budget Management",
+        component: BudgetManagementView,
+        visible: normalizedRole.includes("admin iwd"),
+      },
+      {
+        title: "Bill Audit",
+        component: BillAuditView,
+        visible: normalizedRole.includes("auditor"),
+      },
+      {
+        title: "Bill Settlement",
+        component: BillSettlementView,
+        visible: normalizedRole.includes("accounts admin"),
+      },
+      // ===== NEW SLA & INVENTORY TABS (UC-29, UC-30, UC-31) =====
+      {
+        title: "SLA Dashboard",
+        component: SLADashboardView,
+        visible: normalizedRole.includes("admin iwd") || normalizedRole.includes("director"),
+      },
+      {
+        title: "Inventory Management",
+        component: InventoryManagementView,
+        visible: normalizedRole.includes("admin iwd"),
+      },
+      {
+        title: "Feedback & Cases",
+        component: FeedbackView,
+        visible: true,
+      },
+    ],
+    [engineerUser, normalizedRole],
+  );
+
+  const visibleTabs = useMemo(
+    () => tabsConfig.filter((tab) => tab.visible),
+    [tabsConfig],
+  );
+
+  const tabItems = visibleTabs.map((tab) => ({ title: tab.title }));
+
+  useEffect(() => {
+    const activeIndex = parseInt(activeTab, 10);
+    if (!Number.isNaN(activeIndex) && activeIndex < visibleTabs.length) {
+      return;
+    }
+    setActiveTab("0");
+  }, [activeTab, visibleTabs]);
+
+  useEffect(() => {
+    const activeIndex = parseInt(activeTab, 10);
+    const safeIndex = Number.isNaN(activeIndex) ? 0 : activeIndex;
+    const activeTitle = visibleTabs[safeIndex]?.title || "Request Status";
+    dispatch(setActiveTab_(activeTitle));
+  }, [activeTab, dispatch, visibleTabs]);
+
+  const activeIndex = parseInt(activeTab, 10);
+  const ActiveComponent =
+    visibleTabs[Number.isNaN(activeIndex) ? 0 : activeIndex]?.component ||
+    RequestsStatusView;
+
+  return (
+    <InstituteWorksShell
+      tabs={tabItems}
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+    >
+      <ActiveComponent />
+    </InstituteWorksShell>
+  );
+}
+
+export default InstituteWorks;
diff --git a/src/components/sidebarContent.jsx b/src/components/sidebarContent.jsx
index b77581b39..5132e5ca1 100644
--- a/src/components/sidebarContent.jsx
+++ b/src/components/sidebarContent.jsx
@@ -140,7 +140,7 @@ function SidebarContent({ isCollapsed, toggleSidebar }) {
       icon: <ExamIcon size={18} />,
       url: "/examination",
     },
-        {
+    {
       label: "Database",
       id: "database",
       icon: <DatabaseIcon size={18} />,
@@ -156,7 +156,7 @@ function SidebarContent({ isCollapsed, toggleSidebar }) {
       label: "Institute Work Departments",
       id: "iwd",
       icon: <IWDIcon size={18} />,
-      url: "/",
+      url: "/institute-works",
     },
     {
       label: "Hostel Management",
diff --git a/src/routes/instituteWorksRoutes/index.jsx b/src/routes/instituteWorksRoutes/index.jsx
new file mode 100644
index 000000000..029f30cfd
--- /dev/null
+++ b/src/routes/instituteWorksRoutes/index.jsx
@@ -0,0 +1,52 @@
+import { host } from "../globalRoutes";
+
+const iwdBaseRoute = `${host}/iwdModuleV2/api`;
+
+export const fetchDesignationsRoute = `${iwdBaseRoute}/fetch-designations/`;
+export const createRequestRoute = `${iwdBaseRoute}/create-request/`;
+export const createdRequestsRoute = `${iwdBaseRoute}/created-requests/`;
+export const requestsStatusRoute = `${iwdBaseRoute}/requests-status/`;
+export const directorApprovedRequestsRoute = `${iwdBaseRoute}/director-approved-requests/`;
+export const issueWorkOrderRoute = `${iwdBaseRoute}/issue-work-order/`;
+export const workUnderProgressRoute = `${iwdBaseRoute}/work-under-progress/`;
+export const workCompletedRoute = `${iwdBaseRoute}/work-completed/`;
+export const viewBudgetRoute = `${iwdBaseRoute}/view-budget/`;
+export const addBudgetRoute = `${iwdBaseRoute}/add-budget/`;
+export const editBudgetRoute = `${iwdBaseRoute}/edit-budget/`;
+export const deanPendingRequestsRoute = `${iwdBaseRoute}/dean-pending-requests/`;
+export const deanProcessedRequestsRoute = `${iwdBaseRoute}/dean-processed-requests/`;
+export const handleDirectorApprovalRoute = `${iwdBaseRoute}/handle-director-approval/`;
+export const auditDocumentViewRoute = `${iwdBaseRoute}/audit-document-view/`;
+export const auditDocumentRoute = `${iwdBaseRoute}/audit-document/`;
+export const settleBillsViewRoute = `${iwdBaseRoute}/settle-bills-view/`;
+export const settleBillRoute = `${iwdBaseRoute}/handle-settle-bill-request/`;
+export const engineerProcessedRequestsRoute = `${iwdBaseRoute}/engineer-processed-requests/`;
+export const handleAdminApprovalRoute = `${iwdBaseRoute}/handle-admin-approval/`;
+export const createProposalRoute = `${iwdBaseRoute}/create-proposal/`;
+export const getProposalsRoute = `${iwdBaseRoute}/get-proposals/`;
+export const getItemsRoute = `${iwdBaseRoute}/get-items/`;
+export const issuedWorkRoute = `${iwdBaseRoute}/issued-work/`;
+export const handleBillGeneratedRequestsRoute = `${iwdBaseRoute}/handle-bill-generated-requests/`;
+export const generatedBillsViewRoute = `${iwdBaseRoute}/generated-bills-view/`;
+export const handleProcessBillsRoute = `${iwdBaseRoute}/handle-process-bills/`;
+export const generateBillPdfRoute = `${iwdBaseRoute}/generate-bill-pdf/`;
+export const viewFileRoute = `${iwdBaseRoute}/view-file/`;
+export const forwardRequestRoute = `${iwdBaseRoute}/forward-request/`;
+export const handleDeanProcessRequestRoute = `${iwdBaseRoute}/handle-dean-process-request/`;
+export const rejectedRequestsRoute = `${iwdBaseRoute}/rejected-requests-view/`;
+export const handleUpdateRequestsRoute = `${iwdBaseRoute}/handle-update-requests/`;
+export const requestsInProgressRoute = `${iwdBaseRoute}/requests-in-progress/`;
+export const addVendorRoute = `${iwdBaseRoute}/add-vendor/`;
+export const getWorkRoute = `${iwdBaseRoute}/get-work/`;
+export const getVendorsRoute = `${iwdBaseRoute}/get-vendors/`;
+
+// ===== NEW SLA & INVENTORY ENDPOINTS (UC-29, UC-30, UC-31) =====
+export const slaDashboardRoute = `${iwdBaseRoute}/sla-dashboard/`;
+export const inventoryItemsRoute = `${iwdBaseRoute}/inventory-items/`;
+export const inventoryTransactionsRoute = `${iwdBaseRoute}/inventory-transactions/`;
+export const issueMaterialsRoute = `${iwdBaseRoute}/issue-materials/`;
+export const receiveMaterialsRoute = `${iwdBaseRoute}/receive-materials/`;
+export const feedbackHistoryRoute = `${iwdBaseRoute}/feedback-history/`;
+export const submitFeedbackRoute = `${iwdBaseRoute}/submit-feedback/`;
+export const reopenRequestRoute = `${iwdBaseRoute}/reopen-request/`;
+export const slaEscalationsRoute = `${iwdBaseRoute}/sla-escalations/`;