diff --git a/README.md b/README.md
index a5d94ac54..05ae0c4c9 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,10 @@
 # Fusion Frontend
 
 ## Overview
+
 This Project is the frontend of the Fusion - IIITDMJ's ERP Portal. We've migrated the frontend of fusion from Django templates to a modern React-based architecture.
 
-## ## Tech Stack
+## Tech Stack
 
 - [ReactJS](https://react.dev/learn) as the main frontend library
 - [Mantine UI](https://mantine.dev/getting-started/) for UI components
@@ -14,16 +15,128 @@ This Project is the frontend of the Fusion - IIITDMJ's ERP Portal. We've migrate
 Check the `package.json` file for more information about all the libraries being used.
 This project is using Eslint and Prettier for linting and formatting the code.
 
-## Setting up the project 🛠️
+## Module-Wise Sync Targets
+
+For production synchronization targets, refer to: [Fusion-README](https://github.com/FusionIIIT/Fusion-README)
+
+## Full-Stack Module-Wise Git Workflow Guide
+
+This section outlines the repository setup, branch management, and contribution workflow for teams working on the Fusion ERP Frontend.
+
+### Phase 1: Team Lead Setup
+
+1. **Fork the Main Repository:**
+
+   * Go to [https://github.com/FusionIIIT/Fusion-client](https://github.com/FusionIIIT/Fusion-client) and click **Fork, **Uncheck** **the ****Checkbox,** **andclick ****Create fork.****
+2. **Share:**
+
+   * Distribute your forked repository URL to your team members
+
+### Phase 2: Team Member Setup
+
+1. **Fork the Team Lead's Repository:**
+
+   * Navigate to your Team Lead's fork and fork it to your own GitHub account
+2. **Clone Locally:**
+
+   ```sh
+   git clone https://github.com/<Your-Username>/Fusion-client.git
+   ```
+3. **Set Upstream:**
+
+   ```sh
+   cd Fusion-client
+   git remote add upstream https://github.com/<TeamLead-Username>/Fusion-client.git
+   ```
+
+### Phase 3: Module-Wise Branch Switching
+
+**Note:** v1 (MANUAL : Work on Existing Codebase) and v2 (AI : Work from Scracth according to documnets and Fusion README) - If you are assigned to the AI group, replace `v1` with `v2` in the commands below.
+
+Fetch upstream data first:
 
-1. Fork the repository
+```sh
+cd Fusion-client
+git fetch upstream
+```
+
+Then run your specific module command:
+
+* **Examination:** `git checkout -b examination-v1 upstream/examination-v1`
+* **LMS:** `git checkout -b lms-v1 upstream/lms-v1`
+* **Award & Scholarship:** `git checkout -b scholarships-v1 upstream/scholarships-v1`
+* **Department:** `git checkout -b department-v1 upstream/department-v1`
+* **Other Academic Procedure:** `git checkout -b academic-procedures-v1 upstream/academic-procedures-v1`
+* **Announcements:** `git checkout -b announcements-v1 upstream/announcements-v1`
+* **Placement Cell + PBI:** `git checkout -b placement-pbi-v1 upstream/placement-pbi-v1`
+* **Gymkhana:** `git checkout -b gymkhana-v1 upstream/gymkhana-v1`
+* **Primary Health Center:** `git checkout -b health-center-v1 upstream/health-center-v1`
+* **Hostel Management:** `git checkout -b hostel-management-v1 upstream/hostel-management-v1`
+* **Mess Management:** `git checkout -b mess-management-v1 upstream/mess-management-v1`
+* **Visitor Hostel:** `git checkout -b visitor-hostel-v1 upstream/visitor-hostel-v1`
+* **Visitor Management System:** `git checkout -b visitor-management-v1 upstream/visitor-management-v1`
+* **Dashboards:** `git checkout -b dashboards-v1 upstream/dashboards-v1`
+* **File Tracking System:** `git checkout -b file-tracking-v1 upstream/file-tracking-v1`
+* **RSPC:** `git checkout -b rspc-v1 upstream/rspc-v1`
+* **P&S Management:** `git checkout -b ps-management-v1 upstream/ps-management-v1`
+* **HR (EIS):** `git checkout -b hr-eis-v1 upstream/hr-eis-v1`
+* **Patent Management System:** `git checkout -b patent-management-v1 upstream/patent-management-v1`
+* **Institute Works Department:** `git checkout -b institute-works-v1 upstream/institute-works-v1`
+* **Internal Audit and Accounts:** `git checkout -b audit-accounts-v1 upstream/audit-accounts-v1`
+* **Complaint Management:** `git checkout -b complaint-management-v1 upstream/complaint-management-v1`
+
+## Setting up the project
+
+1. Fork the repository (as described above)
 2. Clone **your forked** repository
-3. Change directory to the project folder(`cd path/to/project`)
-4. Run `npm install` to install all the dependencies
-5. Run `npm run dev` to start the development server.
+3. Change directory to the project folder: `cd Fusion-client`
+4. Install all dependencies:
+   ```sh
+   npm install
+   ```
+5. Run the development server:
+   ```sh
+   npm run dev
+   ```
+
    The development server will start at `http://localhost:5173/`
 
-Make sure that your backend server is running properly before starting the frontend server.
+**Important:** Make sure that your backend server is running properly before starting the frontend server.
+
+## Phase 4: Syncing, Committing, and PRs
+
+### Production Sync Targets
+
+* **Frontend Production Branch:** `acad-main`
+
+### Workflow
+
+1. **Sync with Production:**
+
+   * Frequently pull the latest changes from your specific module's production branch to avoid merge conflicts later
+   * Team lead syncs first, then team members sync from the team lead's fork
+
+   ```sh
+   git pull upstream <your-assigned-branch>
+   ```
+2. **Make Changes:**
+
+   * Make your code changes and commit them locally to your active module branch
+3. **Committing:**
+
+   ```sh
+   git add .
+   git commit -m "Your descriptive commit message"
+   ```
+4. **Pushing:**
+
+   ```sh
+   git push origin <your-assigned-branch>
+   ```
+5. **Create Pull Request:**
+
+   * Go to `https://github.com/<your_user_name>/Fusion-client/tree/<your-assigned-branch>` and create a Pull Request
+   * **Important:** Target the Team Lead's fork, NOT the main FusionIIIT repository
 
 ## Project Structure and important information
 
@@ -35,7 +148,7 @@ Make sure that your backend server is running properly before starting the front
 6. All the web pages related to a a **module** are in `src/modules/<module-name>` folder.
 7. All the components related to a **module** are in the `src/modules/<module-name>/components` folder.
 8. All the styles related to a **module** are in the `src/modules/<module-name>/styles` folder.
-9. All the state management related code is in the `src/redux` folder. The `src/redux/userSlice.jsx` file contains user-related states. 
+9. All the state management related code is in the `src/redux` folder. The `src/redux/userSlice.jsx` file contains user-related states.
 
 - Note: You can access the username and role of the user using the `useSelector` hook.
 
@@ -63,4 +176,3 @@ const ExampleComponent = () => {
 - All the constants should be in UPPERCASE.
 
 **Note**: Please make sure to follow the project structure and naming conventions while adding new files or folders to the project.
-
diff --git a/src/Modules/FileTracking/FeatureOne.jsx b/src/Modules/FileTracking/FeatureOne.jsx
new file mode 100644
index 000000000..81f033c08
--- /dev/null
+++ b/src/Modules/FileTracking/FeatureOne.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+import SectionNavigation from "./components/SectionNavigation";
+
+export default function FeatureOne() {
+    return <SectionNavigation />;
+}
diff --git a/src/Modules/FileTracking/FeatureTwo.jsx b/src/Modules/FileTracking/FeatureTwo.jsx
new file mode 100644
index 000000000..afab2c0aa
--- /dev/null
+++ b/src/Modules/FileTracking/FeatureTwo.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+import AdminManagement from "./components/AdminManagement";
+
+export default function FeatureTwo() {
+    return <AdminManagement />;
+}
diff --git a/src/Modules/FileTracking/api.js b/src/Modules/FileTracking/api.js
new file mode 100644
index 000000000..e7f351712
--- /dev/null
+++ b/src/Modules/FileTracking/api.js
@@ -0,0 +1,188 @@
+import axios from "axios";
+
+import {
+    newAdminAuditLogsRoute,
+    newAdminPoliciesRoute,
+    newAdminUserDetailRoute,
+    newAdminUsersRoute,
+    newAmendRoute,
+    newApproveRoute,
+    newArchiveListRoute,
+    newArchiveRoute,
+    newCloseRoute,
+    newDeleteDraftRoute,
+    newDesignationsRoute,
+    newDraftsRoute,
+    newFileDetailRoute,
+    newFilesRoute,
+    newFileTypesRoute,
+    newForwardRoute,
+    newHistoryRoute,
+    newInboxRoute,
+    newOutboxRoute,
+    newPendingRoute,
+    newRejectRoute,
+    newReturnRoute,
+    newSendRoute,
+} from "../../routes/filetrackingRoutes";
+
+axios.defaults.withCredentials = true;
+
+const authConfig = (token) => ({
+    withCredentials: true,
+    headers: {
+        Authorization: `Token ${token}`,
+    },
+});
+
+const listPayload = (payload) => {
+    if (Array.isArray(payload)) {
+        return payload;
+    }
+
+    if (payload && Array.isArray(payload.results)) {
+        return payload.results;
+    }
+
+    return [];
+};
+
+export const listNewFiles = async (token, params = {}) => {
+    const response = await axios.get(newFilesRoute, { ...authConfig(token), params });
+    return listPayload(response.data);
+};
+
+export const createNewFile = async (payload, token) => {
+    const response = await axios.post(newFilesRoute, payload, authConfig(token));
+    return response.data;
+};
+
+export const getNewFileDetail = async (id, token) => {
+    const response = await axios.get(newFileDetailRoute(id), authConfig(token));
+    return response.data;
+};
+
+export const updateNewFileDetail = async (id, payload, token) => {
+    const response = await axios.put(newFileDetailRoute(id), payload, authConfig(token));
+    return response.data;
+};
+
+export const sendFile = async (id, payload, token) => {
+    const response = await axios.post(newSendRoute(id), payload, authConfig(token));
+    return response.data;
+};
+
+export const forwardFile = async (id, payload, token) => {
+    const response = await axios.post(newForwardRoute(id), payload, authConfig(token));
+    return response.data;
+};
+
+export const returnFile = async (id, payload, token) => {
+    const response = await axios.post(newReturnRoute(id), payload, authConfig(token));
+    return response.data;
+};
+
+export const amendFile = async (id, payload, token) => {
+    const response = await axios.post(newAmendRoute(id), payload, authConfig(token));
+    return response.data;
+};
+
+export const approveFile = async (id, payload, token) => {
+    const response = await axios.post(newApproveRoute(id), payload, authConfig(token));
+    return response.data;
+};
+
+export const rejectFile = async (id, payload, token) => {
+    const response = await axios.post(newRejectRoute(id), payload, authConfig(token));
+    return response.data;
+};
+
+export const closeFile = async (id, payload, token) => {
+    const response = await axios.post(newCloseRoute(id), payload, authConfig(token));
+    return response.data;
+};
+
+export const archiveFile = async (id, payload, token) => {
+    const response = await axios.post(newArchiveRoute(id), payload, authConfig(token));
+    return response.data;
+};
+
+export const getFileHistory = async (id, token) => {
+    const response = await axios.get(newHistoryRoute(id), authConfig(token));
+    return response.data;
+};
+
+export const listDrafts = async (token) => {
+    const response = await axios.get(newDraftsRoute, authConfig(token));
+    return listPayload(response.data);
+};
+
+export const deleteDraft = async (id, token) => {
+    const response = await axios.delete(newDeleteDraftRoute(id), authConfig(token));
+    return response.data;
+};
+
+export const listInbox = async (token, params = {}) => {
+    const response = await axios.get(newInboxRoute, { ...authConfig(token), params });
+    return listPayload(response.data);
+};
+
+export const listOutbox = async (token, params = {}) => {
+    const response = await axios.get(newOutboxRoute, { ...authConfig(token), params });
+    return listPayload(response.data);
+};
+
+export const listPending = async (token, params = {}) => {
+    const response = await axios.get(newPendingRoute, { ...authConfig(token), params });
+    return listPayload(response.data);
+};
+
+export const listArchive = async (token, params = {}) => {
+    const response = await axios.get(newArchiveListRoute, { ...authConfig(token), params });
+    return listPayload(response.data);
+};
+
+export const listFileTypes = async (token) => {
+    const response = await axios.get(newFileTypesRoute, authConfig(token));
+    return response.data;
+};
+
+export const listDesignations = async (token) => {
+    const response = await axios.get(newDesignationsRoute, authConfig(token));
+    return listPayload(response.data);
+};
+
+export const listAdminUsers = async (token, params = {}) => {
+    const response = await axios.get(newAdminUsersRoute, { ...authConfig(token), params });
+    return listPayload(response.data);
+};
+
+export const createAdminUser = async (payload, token) => {
+    const response = await axios.post(newAdminUsersRoute, payload, authConfig(token));
+    return response.data;
+};
+
+export const updateAdminUser = async (id, payload, token) => {
+    const response = await axios.put(newAdminUserDetailRoute(id), payload, authConfig(token));
+    return response.data;
+};
+
+export const deactivateAdminUser = async (id, token) => {
+    const response = await axios.delete(newAdminUserDetailRoute(id), authConfig(token));
+    return response.data;
+};
+
+export const listAdminPolicies = async (token) => {
+    const response = await axios.get(newAdminPoliciesRoute, authConfig(token));
+    return listPayload(response.data);
+};
+
+export const updateAdminPolicies = async (payload, token) => {
+    const response = await axios.put(newAdminPoliciesRoute, payload, authConfig(token));
+    return response.data;
+};
+
+export const listAdminAuditLogs = async (token, params = {}) => {
+    const response = await axios.get(newAdminAuditLogsRoute, { ...authConfig(token), params });
+    return listPayload(response.data);
+};
diff --git a/src/Modules/FileTracking/components/AdminManagement.jsx b/src/Modules/FileTracking/components/AdminManagement.jsx
new file mode 100644
index 000000000..2f4ad610a
--- /dev/null
+++ b/src/Modules/FileTracking/components/AdminManagement.jsx
@@ -0,0 +1,459 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+    Box,
+    Button,
+    Card,
+    Divider,
+    Group,
+    Modal,
+    Select,
+    Stack,
+    Table,
+    Tabs,
+    Text,
+    TextInput,
+    Textarea,
+    Title,
+    Switch,
+} from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import {
+    createAdminUser,
+    deactivateAdminUser,
+    listAdminAuditLogs,
+    listAdminPolicies,
+    listAdminUsers,
+    listDesignations,
+    updateAdminPolicies,
+    updateAdminUser,
+} from "../api";
+import { getApiErrorMessage } from "../utils/apiErrors";
+
+const DEFAULT_CREATE_FORM = {
+    username: "",
+    password: "",
+    first_name: "",
+    last_name: "",
+    email: "",
+    designation_names: [],
+};
+
+export default function AdminManagement() {
+    const token = localStorage.getItem("authToken");
+
+    const [users, setUsers] = useState([]);
+    const [designations, setDesignations] = useState([]);
+    const [logs, setLogs] = useState([]);
+    const [policies, setPolicies] = useState([]);
+
+    const [createForm, setCreateForm] = useState(DEFAULT_CREATE_FORM);
+    const [newPolicyKey, setNewPolicyKey] = useState("");
+    const [newPolicyValue, setNewPolicyValue] = useState("{}");
+    const [selectedUser, setSelectedUser] = useState(null);
+    const [editRoles, setEditRoles] = useState([]);
+    const [editIsStaff, setEditIsStaff] = useState(false);
+    const [editIsActive, setEditIsActive] = useState(true);
+    const [showUserModal, setShowUserModal] = useState(false);
+
+    const designationOptions = useMemo(
+        () => designations.map((d) => ({ value: d.name, label: d.full_name || d.name })),
+        [designations],
+    );
+
+    const loadUsers = async () => {
+        const data = await listAdminUsers(token);
+        setUsers(data || []);
+    };
+
+    const loadDesignations = async () => {
+        const data = await listDesignations(token);
+        setDesignations(data || []);
+    };
+
+    const loadPolicies = async () => {
+        const data = await listAdminPolicies(token);
+        setPolicies(data || []);
+    };
+
+    const loadLogs = async () => {
+        const data = await listAdminAuditLogs(token, { limit: 200 });
+        setLogs(data || []);
+    };
+
+    const loadAll = async () => {
+        try {
+            await Promise.all([loadUsers(), loadDesignations(), loadPolicies(), loadLogs()]);
+        } catch (err) {
+            notifications.show({
+                title: "Admin console unavailable",
+                message: getApiErrorMessage(err, "Failed to load admin data."),
+                color: "red",
+            });
+        }
+    };
+
+    useEffect(() => {
+        loadAll();
+    }, []);
+
+    const handleCreateUser = async () => {
+        if (!createForm.username || !createForm.password) {
+            notifications.show({
+                title: "Missing required fields",
+                message: "Username and password are required.",
+                color: "red",
+            });
+            return;
+        }
+
+        try {
+            await createAdminUser(createForm, token);
+            notifications.show({
+                title: "User created",
+                message: `User ${createForm.username} created successfully.`,
+                color: "green",
+            });
+            setCreateForm(DEFAULT_CREATE_FORM);
+            loadUsers();
+            loadLogs();
+        } catch (err) {
+            notifications.show({
+                title: "Create failed",
+                message: getApiErrorMessage(err, "Could not create user."),
+                color: "red",
+            });
+        }
+    };
+
+    const openEditUser = (user) => {
+        setSelectedUser(user);
+        setEditRoles(user.roles || []);
+        setEditIsStaff(Boolean(user.is_staff));
+        setEditIsActive(Boolean(user.is_active));
+        setShowUserModal(true);
+    };
+
+    const handleUpdateUser = async () => {
+        if (!selectedUser) return;
+
+        try {
+            await updateAdminUser(
+                selectedUser.id,
+                {
+                    designation_names: editRoles,
+                    is_staff: editIsStaff,
+                    is_active: editIsActive,
+                },
+                token,
+            );
+
+            notifications.show({
+                title: "User updated",
+                message: `Updated roles for ${selectedUser.username}.`,
+                color: "green",
+            });
+            setShowUserModal(false);
+            loadUsers();
+            loadLogs();
+        } catch (err) {
+            notifications.show({
+                title: "Update failed",
+                message: getApiErrorMessage(err, "Could not update user."),
+                color: "red",
+            });
+        }
+    };
+
+    const handleDeactivateUser = async (user) => {
+        try {
+            await deactivateAdminUser(user.id, token);
+            notifications.show({
+                title: "User deactivated",
+                message: `${user.username} has been deactivated.`,
+                color: "green",
+            });
+            loadUsers();
+            loadLogs();
+        } catch (err) {
+            notifications.show({
+                title: "Deactivate failed",
+                message: getApiErrorMessage(err, "Could not deactivate user."),
+                color: "red",
+            });
+        }
+    };
+
+    const handleSavePolicy = async () => {
+        if (!newPolicyKey) {
+            notifications.show({
+                title: "Policy key required",
+                message: "Enter a policy key.",
+                color: "red",
+            });
+            return;
+        }
+
+        let parsedValue = {};
+        try {
+            parsedValue = JSON.parse(newPolicyValue || "{}");
+        } catch (err) {
+            notifications.show({
+                title: "Invalid JSON",
+                message: "Policy value must be valid JSON.",
+                color: "red",
+            });
+            return;
+        }
+
+        try {
+            await updateAdminPolicies(
+                {
+                    key: newPolicyKey,
+                    value: parsedValue,
+                },
+                token,
+            );
+            notifications.show({
+                title: "Policy updated",
+                message: `${newPolicyKey} saved successfully.`,
+                color: "green",
+            });
+            setNewPolicyKey("");
+            setNewPolicyValue("{}");
+            loadPolicies();
+            loadLogs();
+        } catch (err) {
+            notifications.show({
+                title: "Policy update failed",
+                message: getApiErrorMessage(err, "Could not update policy."),
+                color: "red",
+            });
+        }
+    };
+
+    return (
+        <Card
+            shadow="sm"
+            padding="lg"
+            radius="md"
+            withBorder
+            style={{
+                backgroundColor: "#F5F7F8",
+                height: "70vh",
+                width: "90vw",
+                overflowY: "auto",
+            }}
+        >
+            <Group justify="space-between" mb="md">
+                <Title order={3}>FT Admin User and Role Management</Title>
+                <Button variant="outline" onClick={loadAll}>Refresh</Button>
+            </Group>
+
+            <Tabs defaultValue="users">
+                <Tabs.List>
+                    <Tabs.Tab value="users">Users and Roles</Tabs.Tab>
+                    <Tabs.Tab value="policies">Policies</Tabs.Tab>
+                    <Tabs.Tab value="audit">Audit Logs</Tabs.Tab>
+                </Tabs.List>
+
+                <Tabs.Panel value="users" pt="md">
+                    <Stack gap="md">
+                        <Box>
+                            <Text fw={600} mb="xs">Create User</Text>
+                            <Group grow>
+                                <TextInput
+                                    label="Username"
+                                    value={createForm.username}
+                                    onChange={(e) => setCreateForm((s) => ({ ...s, username: e.currentTarget.value }))}
+                                />
+                                <TextInput
+                                    label="Password"
+                                    type="password"
+                                    value={createForm.password}
+                                    onChange={(e) => setCreateForm((s) => ({ ...s, password: e.currentTarget.value }))}
+                                />
+                                <TextInput
+                                    label="First Name"
+                                    value={createForm.first_name}
+                                    onChange={(e) => setCreateForm((s) => ({ ...s, first_name: e.currentTarget.value }))}
+                                />
+                                <TextInput
+                                    label="Last Name"
+                                    value={createForm.last_name}
+                                    onChange={(e) => setCreateForm((s) => ({ ...s, last_name: e.currentTarget.value }))}
+                                />
+                            </Group>
+                            <Group grow mt="sm">
+                                <TextInput
+                                    label="Email"
+                                    value={createForm.email}
+                                    onChange={(e) => setCreateForm((s) => ({ ...s, email: e.currentTarget.value }))}
+                                />
+                                <Select
+                                    label="Role Designations"
+                                    data={designationOptions}
+                                    value={null}
+                                    onChange={(value) => {
+                                        if (!value) return;
+                                        setCreateForm((s) => ({
+                                            ...s,
+                                            designation_names: Array.from(new Set([...(s.designation_names || []), value])),
+                                        }));
+                                    }}
+                                    searchable
+                                />
+                            </Group>
+                            <Text size="sm" c="dimmed" mt="xs">
+                                Selected Roles: {(createForm.designation_names || []).join(", ") || "None"}
+                            </Text>
+                            <Group mt="sm">
+                                <Button onClick={handleCreateUser}>Create User</Button>
+                            </Group>
+                        </Box>
+
+                        <Divider />
+
+                        <Box>
+                            <Text fw={600} mb="xs">Existing Users</Text>
+                            <Table withTableBorder withColumnBorders>
+                                <thead>
+                                    <tr>
+                                        <th>Username</th>
+                                        <th>Name</th>
+                                        <th>Roles</th>
+                                        <th>Status</th>
+                                        <th>Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {users.map((user) => (
+                                        <tr key={user.id}>
+                                            <td>{user.username}</td>
+                                            <td>{`${user.first_name || ""} ${user.last_name || ""}`.trim() || "-"}</td>
+                                            <td>{(user.roles || []).join(", ") || "-"}</td>
+                                            <td>{user.is_active ? "Active" : "Inactive"}</td>
+                                            <td>
+                                                <Group gap="xs">
+                                                    <Button size="xs" variant="light" onClick={() => openEditUser(user)}>
+                                                        Edit Roles
+                                                    </Button>
+                                                    {user.is_active && (
+                                                        <Button size="xs" color="red" variant="light" onClick={() => handleDeactivateUser(user)}>
+                                                            Deactivate
+                                                        </Button>
+                                                    )}
+                                                </Group>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </Table>
+                        </Box>
+                    </Stack>
+                </Tabs.Panel>
+
+                <Tabs.Panel value="policies" pt="md">
+                    <Stack gap="md">
+                        <Box>
+                            <Text fw={600} mb="xs">Update FT Policy</Text>
+                            <TextInput
+                                label="Policy Key"
+                                placeholder="example: allowed_designations"
+                                value={newPolicyKey}
+                                onChange={(e) => setNewPolicyKey(e.currentTarget.value)}
+                            />
+                            <Textarea
+                                label="Policy JSON Value"
+                                minRows={6}
+                                mt="sm"
+                                value={newPolicyValue}
+                                onChange={(e) => setNewPolicyValue(e.currentTarget.value)}
+                            />
+                            <Group mt="sm">
+                                <Button onClick={handleSavePolicy}>Save Policy</Button>
+                            </Group>
+                        </Box>
+
+                        <Divider />
+
+                        <Box>
+                            <Text fw={600} mb="xs">Current Policies</Text>
+                            <Table withTableBorder withColumnBorders>
+                                <thead>
+                                    <tr>
+                                        <th>Key</th>
+                                        <th>Value</th>
+                                        <th>Updated By</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {policies.map((policy) => (
+                                        <tr key={policy.key}>
+                                            <td>{policy.key}</td>
+                                            <td><Text size="sm">{JSON.stringify(policy.value)}</Text></td>
+                                            <td>{policy.updated_by || "-"}</td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </Table>
+                        </Box>
+                    </Stack>
+                </Tabs.Panel>
+
+                <Tabs.Panel value="audit" pt="md">
+                    <Table withTableBorder withColumnBorders>
+                        <thead>
+                            <tr>
+                                <th>Time</th>
+                                <th>Actor</th>
+                                <th>Action</th>
+                                <th>Target</th>
+                                <th>Details</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {logs.map((row) => (
+                                <tr key={row.id}>
+                                    <td>{new Date(row.created_at).toLocaleString()}</td>
+                                    <td>{row.actor || "system"}</td>
+                                    <td>{row.action}</td>
+                                    <td>{row.target_user || row.target_identifier || "-"}</td>
+                                    <td><Text size="sm">{JSON.stringify(row.details || {})}</Text></td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </Table>
+                </Tabs.Panel>
+            </Tabs>
+
+            <Modal opened={showUserModal} onClose={() => setShowUserModal(false)} title="Edit User Roles" centered>
+                <Stack>
+                    <Text fw={600}>{selectedUser?.username}</Text>
+                    <Select
+                        label="Add Role Designation"
+                        data={designationOptions}
+                        value={null}
+                        onChange={(value) => {
+                            if (!value) return;
+                            setEditRoles((prev) => Array.from(new Set([...(prev || []), value])));
+                        }}
+                        searchable
+                    />
+                    <Text size="sm">Current roles: {editRoles.join(", ") || "None"}</Text>
+                    <Button
+                        variant="outline"
+                        onClick={() => setEditRoles([])}
+                    >
+                        Clear Roles
+                    </Button>
+                    <Switch label="is_staff" checked={editIsStaff} onChange={(e) => setEditIsStaff(e.currentTarget.checked)} />
+                    <Switch label="is_active" checked={editIsActive} onChange={(e) => setEditIsActive(e.currentTarget.checked)} />
+                    <Group justify="flex-end">
+                        <Button variant="outline" onClick={() => setShowUserModal(false)}>Cancel</Button>
+                        <Button onClick={handleUpdateUser}>Save Changes</Button>
+                    </Group>
+                </Stack>
+            </Modal>
+        </Card>
+    );
+}
diff --git a/src/Modules/FileTracking/components/Archive.jsx b/src/Modules/FileTracking/components/Archive.jsx
new file mode 100644
index 000000000..5a59c587c
--- /dev/null
+++ b/src/Modules/FileTracking/components/Archive.jsx
@@ -0,0 +1,675 @@
+import { useState, useEffect } from "react";
+import {
+  Box,
+  Card,
+  Title,
+  Table,
+  ActionIcon,
+  Tooltip,
+  Group,
+  TextInput,
+  Pagination,
+  Text,
+  Badge,
+  Divider,
+  Button,
+  Stack,
+  ScrollArea,
+  useMantineTheme,
+  Paper,
+  Skeleton,
+  Modal,
+  Center,
+  LoadingOverlay,
+} from "@mantine/core";
+import {
+  ArrowArcLeft,
+  Eye,
+  CaretUp,
+  CaretDown,
+  ArrowsDownUp,
+  MagnifyingGlass,
+  ArrowClockwise,
+  FileText,
+  Folder,
+} from "@phosphor-icons/react";
+import axios from "axios";
+import { useSelector } from "react-redux";
+import { useMediaQuery } from "@mantine/hooks";
+import { notifications } from "@mantine/notifications";
+import View from "./ViewFile";
+import {
+  newArchiveListRoute,
+  newUnarchiveRoute,
+} from "../../../routes/filetrackingRoutes";
+
+export default function ArchiveFiles() {
+  const [files, setFiles] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageInput, setPageInput] = useState("");
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: "asc" });
+  const [searchQuery, setSearchQuery] = useState("");
+  const [unarchiveLoading, setUnarchiveLoading] = useState(false);
+  const [confirmUnarchiveModal, setConfirmUnarchiveModal] = useState(false);
+  const [selectedUnarchiveFile, setSelectedUnarchiveFile] = useState(null);
+  const itemsPerPage = 7;
+  const token = localStorage.getItem("authToken");
+  const role = useSelector((state) => state.user.role);
+  const username = useSelector((state) => state.user.roll_no);
+  let current_module = useSelector((state) => state.module.current_module);
+  current_module = current_module.split(" ").join("").toLowerCase();
+  const theme = useMantineTheme();
+
+  // Media query for responsive design
+  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+
+  const convertDate = (date) => {
+    const d = new Date(date);
+    return d.toLocaleString();
+  };
+
+  useEffect(() => {
+    const getFiles = async () => {
+      setLoading(true);
+      try {
+        const response = await axios.get(`${newArchiveListRoute}`, {
+          withCredentials: true,
+          headers: {
+            Authorization: `Token ${token}`,
+          },
+        });
+        setFiles(response.data);
+      } catch (err) {
+        console.error("Error fetching files:", err);
+        notifications.show({
+          title: "Error",
+          message: "Failed to load archived files. Please try again.",
+          color: "red",
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    // Call the getFiles function to fetch data on component mount
+    getFiles();
+  }, [role, username, token, current_module]);
+
+  const handleSort = (key) => {
+    setSortConfig((prev) => ({
+      key,
+      direction: prev.key === key && prev.direction === "asc" ? "desc" : "asc",
+    }));
+    setCurrentPage(1);
+  };
+
+  const sortedFiles = [...files].sort((a, b) => {
+    if (!sortConfig.key) return 0;
+    const direction = sortConfig.direction === "asc" ? 1 : -1;
+    return a[sortConfig.key] > b[sortConfig.key] ? direction : -direction;
+  });
+
+  // Helper function to generate file ID
+  const generateFileId = (file) => {
+    if (file?.file_number) return file.file_number;
+    const dt = new Date(file.upload_date || file.created_at);
+    if (Number.isNaN(dt.getTime())) return `FTS-#${file?.id || ""}`;
+    return `${file.branch || "FTS"}-${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, "0")}-#${file.id}`;
+  };
+
+  const filteredFiles = sortedFiles.filter((file) => {
+    const idString = generateFileId(file);
+    return (
+      idString.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (file.uploader || "").toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (file.subject || "").toLowerCase().includes(searchQuery.toLowerCase()) ||
+      convertDate(file.upload_date || file.created_at)
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase())
+    );
+  });
+
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = Math.min(startIndex + itemsPerPage, filteredFiles.length);
+
+  const [selectedFile, setSelectedFile] = useState(null);
+
+  const openUnarchiveModal = (file) => {
+    setSelectedUnarchiveFile(file);
+    setConfirmUnarchiveModal(true);
+  };
+
+  const handleToggleArchive = async (fileID) => {
+    setUnarchiveLoading(true);
+    try {
+      await axios.post(newUnarchiveRoute(fileID), {
+        remarks: "Unarchived from archive section",
+      }, {
+        withCredentials: true,
+        headers: {
+          Authorization: `Token ${localStorage.getItem("authToken")}`,
+          "Content-Type": "application/json",
+        },
+      });
+      const updatedFiles = files.filter((file) => file.id !== fileID);
+      setFiles(updatedFiles);
+
+      notifications.show({
+        title: "Success",
+        message: "File has been unarchived successfully",
+        color: "green",
+      });
+    } catch (err) {
+      console.error("Error unarchiving file:", err);
+      notifications.show({
+        title: "Error",
+        message: "Failed to unarchive file. Please try again.",
+        color: "red",
+      });
+    } finally {
+      setUnarchiveLoading(false);
+      setConfirmUnarchiveModal(false);
+    }
+  };
+
+  const handleViewFile = (file) => {
+    setSelectedFile(file);
+  };
+
+  const handleBack = () => {
+    setSelectedFile(null);
+  };
+
+  const tableStyles = {
+    padding: "8px",
+    textAlign: "center",
+    border: "1px solid #ddd",
+    height: "32px",
+  };
+
+  // Mobile card view rendering
+  const renderMobileView = () => {
+    if (loading) {
+      return (
+        <Stack spacing="md">
+          {[...Array(3)].map((_, i) => (
+            <Paper key={i} shadow="xs" p="md" withBorder>
+              <Skeleton height={20} width="60%" mb="sm" />
+              <Skeleton height={15} mb="xs" />
+              <Skeleton height={15} width="70%" mb="md" />
+              <Group position="apart">
+                <Skeleton height={30} width={80} />
+                <Skeleton height={30} width={80} />
+              </Group>
+            </Paper>
+          ))}
+        </Stack>
+      );
+    }
+
+    if (filteredFiles.length === 0) {
+      return (
+        <Center style={{ height: "200px" }}>
+          <Stack align="center" spacing="xs">
+            <Folder size={48} color={theme.colors.gray[5]} />
+            <Text c="dimmed" size="lg">
+              No archived files found!
+            </Text>
+            {searchQuery && (
+              <Button
+                variant="subtle"
+                leftIcon={<ArrowClockwise size={16} />}
+                onClick={() => setSearchQuery("")}
+              >
+                Clear search
+              </Button>
+            )}
+          </Stack>
+        </Center>
+      );
+    }
+
+    return (
+      <Stack spacing="md">
+        {filteredFiles
+          .slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
+          .map((file, index) => (
+            <Card
+              key={index}
+              shadow="sm"
+              p="md"
+              radius="md"
+              withBorder
+              style={{ position: "relative" }}
+            >
+              <Badge
+                color="orange"
+                variant="light"
+                size="sm"
+                style={{ position: "absolute", top: 10, right: 10 }}
+              >
+                Archived
+              </Badge>
+
+              <Text weight={600} size="md" mb={6}>
+                {file.subject}
+              </Text>
+
+              <Text size="sm" color="dimmed" mb={6}>
+                {generateFileId(file)}
+              </Text>
+
+              <Divider my="xs" />
+
+              <Group position="apart" mt="xs">
+                <Text size="sm">
+                  <Text span weight={500}>
+                    Created by:
+                  </Text>{" "}
+                  {file.uploader}
+                </Text>
+                <Text size="sm" color="dimmed">
+                  {convertDate(file.upload_date || file.created_at)}
+                </Text>
+              </Group>
+
+              <Group position="apart" mt="md">
+                <Tooltip label="View File" position="top" withArrow>
+                  <Button
+                    variant="light"
+                    color="blue"
+                    size="xs"
+                    leftIcon={<Eye size="1rem" />}
+                    onClick={() => handleViewFile(file)}
+                    fullWidth={isMobile}
+                  >
+                    View
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Unarchive file" position="top" withArrow>
+                  <Button
+                    variant="light"
+                    color="green"
+                    size="xs"
+                    leftIcon={<ArrowArcLeft size="1rem" />}
+                    onClick={() => openUnarchiveModal(file)}
+                    fullWidth={isMobile}
+                  >
+                    Unarchive
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Card>
+          ))}
+      </Stack>
+    );
+  };
+
+  // Desktop table view rendering
+  const renderDesktopView = () => {
+    if (loading) {
+      return (
+        <Box p="md">
+          <Skeleton height={40} mb="sm" />
+          <Skeleton height={30} mb="xs" />
+          <Skeleton height={30} mb="xs" />
+          <Skeleton height={30} mb="xs" />
+        </Box>
+      );
+    }
+
+    if (filteredFiles.length === 0) {
+      return (
+        <Center style={{ height: "200px" }}>
+          <Stack align="center" spacing="xs">
+            <Folder size={48} color={theme.colors.gray[5]} />
+            <Text color="dimmed" size="lg">
+              No archived files found
+            </Text>
+            {searchQuery && (
+              <Button
+                variant="subtle"
+                leftIcon={<ArrowClockwise size={16} />}
+                onClick={() => setSearchQuery("")}
+              >
+                Clear search
+              </Button>
+            )}
+          </Stack>
+        </Center>
+      );
+    }
+
+    return (
+      <ScrollArea>
+        <Table
+          highlightOnHover
+          style={{
+            width: "100%",
+            borderCollapse: "collapse",
+            tableLayout: "fixed",
+            fontSize: "14px",
+            minWidth: "900px", // Ensures horizontal scroll on smaller screens
+          }}
+        >
+          <thead
+            style={{
+              position: "sticky",
+              top: 0,
+              backgroundColor: "#fff",
+              zIndex: 1,
+            }}
+          >
+            <tr style={{ backgroundColor: "#0000" }}>
+              <th style={{ ...tableStyles, width: "8%" }}>Unarchive</th>
+              {[
+                { key: "id", label: "File ID", width: "15%" },
+                { key: "subject", label: "Subject", width: "25%" },
+                { key: "upload_date", label: "Date", width: "15%" },
+                { key: "uploader", label: "Created by", width: "15%" },
+              ].map(({ key, label, width }) => (
+                <th
+                  key={key}
+                  onClick={() => handleSort(key)}
+                  style={{
+                    cursor: "pointer",
+                    ...tableStyles,
+                    width,
+                  }}
+                >
+                  {label}
+                  {sortConfig.key === key ? (
+                    sortConfig.direction === "asc" ? (
+                      <CaretUp size={16} />
+                    ) : (
+                      <CaretDown size={16} />
+                    )
+                  ) : (
+                    <ArrowsDownUp size={16} opacity={0.6} />
+                  )}
+                </th>
+              ))}
+              <th style={{ ...tableStyles, width: "7%" }}>View File</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredFiles
+              .slice(
+                (currentPage - 1) * itemsPerPage,
+                currentPage * itemsPerPage,
+              )
+              .map((file, index) => (
+                <tr key={index}>
+                  <td style={tableStyles}>
+                    <Tooltip label="Unarchive file" position="top" withArrow>
+                      <ActionIcon
+                        variant="light"
+                        color="green"
+                        onClick={() => openUnarchiveModal(file)}
+                        style={{ width: "1.5rem", height: "1.6rem" }}
+                      >
+                        <ArrowArcLeft size="1rem" />
+                      </ActionIcon>
+                    </Tooltip>
+                  </td>
+                  <td style={tableStyles}>{generateFileId(file)}</td>
+                  <td style={tableStyles}>{file.subject}</td>
+                  <td style={tableStyles}>{convertDate(file.upload_date || file.created_at)}</td>
+                  <td style={tableStyles}>
+                    {file.uploader}[{file.uploader_designation}]
+                  </td>
+                  <td style={tableStyles}>
+                    <ActionIcon
+                      variant="outline"
+                      color="blue"
+                      onClick={() => handleViewFile(file)}
+                      style={{ width: "1.5rem", height: "1.6rem" }}
+                    >
+                      <Eye size="1rem" />
+                    </ActionIcon>
+                  </td>
+                </tr>
+              ))}
+          </tbody>
+        </Table>
+      </ScrollArea>
+    );
+  };
+
+  const handlePageJump = (e) => {
+    if (e.key === "Enter") {
+      const pageNumber = parseInt(pageInput, 10);
+      const totalPages = Math.ceil(filteredFiles.length / itemsPerPage);
+      if (
+        Number.isNaN(pageNumber) ||
+        pageNumber < 1 ||
+        pageNumber > totalPages
+      ) {
+        setPageInput("");
+        return;
+      }
+      setCurrentPage(pageNumber);
+      setPageInput("");
+    }
+  };
+
+  return (
+    <Card
+      shadow="sm"
+      padding="lg"
+      radius="md"
+      withBorder
+      style={{
+        backgroundColor: "#F5F7F8",
+        width: "100%",
+        minHeight: "65vh",
+        maxHeight: "70vh",
+        display: "flex",
+        flexDirection: "column",
+        overflowY: selectedFile ? "hidden" : "auto",
+      }}
+    >
+      {!selectedFile ? (
+        <>
+          <Group
+            position="apart"
+            mb="md"
+            align="center"
+            style={{ flexWrap: "wrap" }}
+          >
+            <Group spacing="xs" noWrap>
+              <FileText size={24} />
+              <Title
+                order={2}
+                style={{
+                  fontSize: "24px",
+                }}
+              >
+                Archived Files
+              </Title>
+            </Group>
+            <TextInput
+              placeholder="Search files..."
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                setCurrentPage(1);
+              }}
+              style={{
+                marginBottom: isMobile ? "10px" : "0",
+                width: isMobile ? "100%" : "auto",
+              }}
+              icon={<MagnifyingGlass size={16} />}
+            />
+          </Group>
+
+          <Box
+            style={{
+              border: "1px solid #ddd",
+              borderRadius: "8px",
+              overflowY: "auto",
+              height: "100%",
+              minHeight: "300px",
+              backgroundColor: "#fff",
+              display: "flex",
+              flexDirection: "column",
+              marginBottom: 0,
+              position: "relative",
+            }}
+          >
+            <div
+              style={{
+                flex: 1,
+                overflowY: "auto",
+                marginBottom: "-1px",
+                padding: isMobile ? "10px" : "0",
+              }}
+            >
+              {isMobile ? renderMobileView() : renderDesktopView()}
+            </div>
+
+            {!loading && filteredFiles.length > 0 && (
+              <Group
+                position="right"
+                style={{
+                  backgroundColor: "#fff",
+                  padding: "8px 16px",
+                  borderTop: "1px solid #ddd",
+                  marginTop: "auto",
+                  minHeight: "50px",
+                  display: "flex",
+                  alignItems: "center",
+                  height: "35px",
+                  gap: "16px",
+                  flexWrap: "wrap",
+                  justifyContent: isMobile ? "center" : "flex-end",
+                }}
+              >
+                <Text size="sm" color="dimmed">
+                  {`Showing ${filteredFiles.length > 0 ? startIndex + 1 : 0}-${endIndex} of ${filteredFiles.length} files`}
+                </Text>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "12px",
+                    height: "36px",
+                    marginLeft: isMobile ? "0" : "auto",
+                    flexWrap: isMobile ? "wrap" : "nowrap",
+                    justifyContent: isMobile ? "center" : "flex-start",
+                    width: isMobile ? "100%" : "auto",
+                  }}
+                >
+                  <Tooltip
+                    label={`Enter page number (1-${Math.ceil(filteredFiles.length / itemsPerPage)})`}
+                    position="top"
+                  >
+                    <TextInput
+                      placeholder="Page #"
+                      value={pageInput}
+                      onChange={(e) => {
+                        setPageInput(e.target.value.replace(/[^0-9]/g, ""));
+                      }}
+                      onKeyDown={handlePageJump}
+                      style={{
+                        width: "80px",
+                        textAlign: "center",
+                      }}
+                      size="sm"
+                      type="text"
+                      maxLength={3}
+                    />
+                  </Tooltip>
+                  <Pagination
+                    total={Math.ceil(filteredFiles.length / itemsPerPage)}
+                    value={currentPage}
+                    size="sm"
+                    onChange={setCurrentPage}
+                    boundaries={isMobile ? 0 : 1}
+                    siblings={isMobile ? 0 : 1}
+                    withEdges={!isMobile}
+                  />
+                </div>
+              </Group>
+            )}
+          </Box>
+        </>
+      ) : (
+        <div>
+          <View
+            onBack={handleBack}
+            fileID={selectedFile.id}
+            updateFiles={() =>
+              setFiles(files.filter((f) => f.id !== selectedFile.id))
+            }
+            isArchived // Pass isArchived prop to View component
+          />
+        </div>
+      )}
+
+      {/* Unarchive Confirmation Modal */}
+      <Modal
+        opened={confirmUnarchiveModal}
+        onClose={() => setConfirmUnarchiveModal(false)}
+        title={
+          <Text align="center" weight={600} size="lg">
+            Confirm Unarchive
+          </Text>
+        }
+        centered
+        size={isMobile ? "xs" : "sm"}
+      >
+        <LoadingOverlay visible={unarchiveLoading} overlayBlur={2} />
+
+        <Paper p="md" withBorder mb="md">
+          <Text weight={600} mb="md">
+            Are you sure you want to unarchive this file?
+          </Text>
+
+          {selectedUnarchiveFile && (
+            <>
+              <Group spacing="xs" mb="xs">
+                <Text weight={500}>Subject:</Text>
+                <Text>{selectedUnarchiveFile.subject}</Text>
+              </Group>
+
+              <Group spacing="xs" mb="xs">
+                <Text weight={500}>File ID:</Text>
+                <Text>{generateFileId(selectedUnarchiveFile)}</Text>
+              </Group>
+
+              <Group spacing="xs">
+                <Text weight={500}>Created by:</Text>
+                <Text>
+                  {selectedUnarchiveFile.uploader}[
+                  {selectedUnarchiveFile.uploader_designation}]
+                </Text>
+              </Group>
+            </>
+          )}
+        </Paper>
+
+        <Group justify="center" gap="xl" style={{ width: "100%" }}>
+          <Button
+            onClick={() => handleToggleArchive(selectedUnarchiveFile.id)}
+            color="green"
+            style={{ width: isMobile ? "100px" : "120px" }}
+            loading={unarchiveLoading}
+          >
+            Unarchive
+          </Button>
+          <Button
+            onClick={() => setConfirmUnarchiveModal(false)}
+            variant="outline"
+            style={{ width: isMobile ? "100px" : "120px" }}
+            disabled={unarchiveLoading}
+          >
+            Cancel
+          </Button>
+        </Group>
+      </Modal>
+    </Card>
+  );
+}
diff --git a/src/Modules/FileTracking/components/ComposeFile.jsx b/src/Modules/FileTracking/components/ComposeFile.jsx
new file mode 100644
index 000000000..563f50b08
--- /dev/null
+++ b/src/Modules/FileTracking/components/ComposeFile.jsx
@@ -0,0 +1,592 @@
+import React, { useEffect } from "react";
+import {
+  Box,
+  Button,
+  Card,
+  FileInput,
+  TextInput,
+  Textarea,
+  Title,
+  ActionIcon,
+  Text,
+  Select,
+  Group,
+  Autocomplete,
+  Grid,
+  Modal,
+  Paper,
+} from "@mantine/core";
+import {
+  Upload,
+  FloppyDisk,
+  PaperPlaneTilt,
+  Trash,
+} from "@phosphor-icons/react";
+import { notifications } from "@mantine/notifications";
+import { useSelector } from "react-redux";
+import axios from "axios";
+import { ChatCenteredText } from "phosphor-react";
+import {
+  getUsernameRoute,
+  newFilesRoute,
+  newDraftsRoute,
+  newFileTypesRoute,
+} from "../../../routes/filetrackingRoutes";
+import { getApiErrorMessage } from "../utils/apiErrors";
+
+axios.defaults.withCredentials = true;
+
+export default function Compose() {
+  const [files, setFiles] = React.useState([]);
+  const [usernameSuggestions, setUsernameSuggestions] = React.useState([]);
+  const username = useSelector((state) => state.user.roll_no);
+  const [receiver_username, setReceiverUsername] = React.useState("");
+  const [subject, setSubject] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [remarks, setRemarks] = React.useState("");
+  const [fileTypeId, setFileTypeId] = React.useState("");
+  const [priority, setPriority] = React.useState("NORMAL");
+  const [fileTypes, setFileTypes] = React.useState([]);
+  const token = localStorage.getItem("authToken");
+  const [showConfirmModal, setShowConfirmModal] = React.useState(false);
+  const [isSavingDraft, setIsSavingDraft] = React.useState(false);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const roles = useSelector((state) => state.user.roles);
+  let module = useSelector((state) => state.module.current_module);
+  module = module.split(" ").join("").toLowerCase();
+  const uploaderRole = useSelector((state) => state.user.role);
+  const [designation, setDesignation] = React.useState("");
+  const options = Array.isArray(roles)
+    ? roles.map((role) => ({ value: role, label: role }))
+    : [];
+  const validateAttachments = (uploadedFiles) => {
+    if (!uploadedFiles) {
+      return { valid: [], invalidMessages: [] };
+    }
+
+    const allowedExtensions = [".pdf", ".jpg", ".jpeg", ".png"];
+    const maxSizeBytes = 10 * 1024 * 1024;
+    const fileArray = Array.isArray(uploadedFiles) ? uploadedFiles : [uploadedFiles];
+    const valid = [];
+    const invalidMessages = [];
+
+    fileArray.forEach((file) => {
+      const fileName = file?.name || "file";
+      const dotIndex = fileName.lastIndexOf(".");
+      const ext = dotIndex >= 0 ? fileName.substring(dotIndex).toLowerCase() : "";
+
+      if (!allowedExtensions.includes(ext)) {
+        invalidMessages.push(`Unsupported attachment type: ${fileName}. Allowed: PDF, JPG, JPEG, PNG`);
+        return;
+      }
+
+      if ((file?.size || 0) > maxSizeBytes) {
+        invalidMessages.push(`Attachment too large: ${fileName}. Max size is 10MB`);
+        return;
+      }
+
+      valid.push(file);
+    });
+
+    return { valid, invalidMessages };
+  };
+
+  const handleFileChange = (uploadedFiles) => {
+    const { valid, invalidMessages } = validateAttachments(uploadedFiles);
+
+    invalidMessages.forEach((message) => {
+      notifications.show({
+        title: "Invalid file",
+        message,
+        color: "red",
+        position: "top-center",
+      });
+    });
+
+    if (!uploadedFiles) {
+      setFiles([]);
+      return;
+    }
+
+    setFiles((prevFiles) => {
+      const existing = Array.isArray(prevFiles) ? prevFiles : [];
+      const existingNames = new Set(existing.map((f) => (f?.name || "").toLowerCase()));
+      const dedupedToAdd = [];
+
+      valid.forEach((file) => {
+        const normalizedName = (file?.name || "").toLowerCase();
+        if (!normalizedName) {
+          return;
+        }
+
+        if (existingNames.has(normalizedName)) {
+          notifications.show({
+            title: "Duplicate file name",
+            message: `A file named ${file.name} is already attached.`,
+            color: "red",
+            position: "top-center",
+          });
+          return;
+        }
+
+        existingNames.add(normalizedName);
+        dedupedToAdd.push(file);
+      });
+
+      return [...existing, ...dedupedToAdd];
+    });
+  };
+  const removeFile = () => {
+    setFiles([]);
+  };
+  const postSubmit = () => {
+    setFiles([]);
+    setFileTypeId("");
+    setPriority("NORMAL");
+    setDesignation("");
+    setReceiverUsername("");
+    setSubject("");
+    setDescription("");
+    setRemarks("");
+  };
+  useEffect(() => {
+    setDesignation(roles && Array.isArray(roles) && roles.length > 0 ? roles[0] : '');
+  }, [roles]);
+
+  useEffect(() => {
+    let isMounted = true;
+    const getUsernameSuggestion = async () => {
+      try {
+        const response = await axios.post(
+          `${getUsernameRoute}`,
+          { value: receiver_username },
+          {
+            headers: { Authorization: `Token ${token}` },
+          },
+        );
+        const users = JSON.parse(response.data.users);
+        if (response.data && Array.isArray(users)) {
+          const suggestedUsernames = users.map((user) => user.fields.username);
+          if (isMounted) {
+            setUsernameSuggestions(suggestedUsernames);
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching username suggestion:", error);
+      }
+    };
+
+    if (receiver_username) {
+      getUsernameSuggestion();
+    }
+
+    return () => {
+      isMounted = false;
+    };
+  }, [receiver_username, token]);
+
+  useEffect(() => {
+    const fetchFileTypes = async () => {
+      try {
+        const response = await axios.get(`${newFileTypesRoute}`, {
+          headers: {
+            Authorization: `Token ${token}`,
+          },
+        });
+        setFileTypes(response.data);
+      } catch (err) {
+        console.error("Error fetching file types:", err);
+        notifications.show({
+          title: "Could not load file types",
+          message: getApiErrorMessage(err, "Please refresh and try again."),
+          color: "red",
+          position: "top-center",
+        });
+      }
+    };
+
+    fetchFileTypes();
+  }, [token]);
+
+  const handleSaveDraft = async () => {
+    if (isSavingDraft) return;
+
+    if (!fileTypeId || !subject) {
+      notifications.show({
+        title: "Draft save failed",
+        message: "Please choose file type and subject at minimum.",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    if (!remarks || remarks.trim().length < 5) {
+      notifications.show({
+        title: "Draft save failed",
+        message: "Please enter a mandatory comment (minimum 5 characters).",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    try {
+      setIsSavingDraft(true);
+      const formData = new FormData();
+      formData.append("file_type_id", String(fileTypeId));
+      formData.append("subject", subject);
+      formData.append("description", description);
+      formData.append("remarks", remarks);
+      formData.append("priority", priority);
+      if (Array.isArray(files) && files.length > 0) {
+        files.forEach((fileItem) => formData.append("files", fileItem));
+      }
+
+      await axios.post(
+        `${newDraftsRoute}`,
+        formData,
+        {
+          headers: {
+            Authorization: `Token ${token}`,
+            "Content-Type": "multipart/form-data",
+          },
+        },
+      );
+
+      notifications.show({
+        title: "Draft saved successfully",
+        message: "The draft has been saved successfully.",
+        color: "green",
+        position: "top-center",
+      });
+      postSubmit();
+    } catch (err) {
+      console.log(err);
+      notifications.show({
+        title: "Draft save error",
+        message: getApiErrorMessage(err, "Could not save draft. Please try again."),
+        color: "red",
+        position: "top-center",
+      });
+    } finally {
+      setIsSavingDraft(false);
+    }
+  };
+
+  const handleCreateFile = () => {
+    if (!subject || !description || !fileTypeId) {
+      notifications.show({
+        title: "Incomplete Form",
+        message: "Please select file type, subject, and description before submitting.",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    if (!remarks || remarks.trim().length < 5) {
+      notifications.show({
+        title: "Incomplete Form",
+        message: "Please enter a mandatory comment (minimum 5 characters).",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    setShowConfirmModal(true);
+  };
+
+  const finalSubmit = async () => {
+    if (isSubmitting) return;
+
+    setShowConfirmModal(false);
+    if (!fileTypeId || !subject) {
+      notifications.show({
+        title: "Submit failed",
+        message: "Please select file type and enter subject before submit.",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      const formData = new FormData();
+      formData.append("file_type_id", String(fileTypeId));
+      formData.append("subject", subject);
+      formData.append("description", description);
+      formData.append("priority", priority);
+      formData.append("remarks", remarks);
+      formData.append("action", "create");
+      files.forEach((file) => {
+        formData.append("files", file);
+      });
+
+      const response = await axios.post(
+        `${newFilesRoute}`,
+        formData,
+        {
+          headers: {
+            Authorization: `Token ${token}`,
+            "Content-Type": "multipart/form-data",
+          },
+        },
+      );
+
+      if (response.status === 201) {
+        notifications.show({
+          title: "File created successfully",
+          message: `File created: ${response.data.file_number}`,
+          color: "green",
+          position: "top-center",
+        });
+        postSubmit();
+      }
+    } catch (err) {
+      console.error(err);
+      notifications.show({
+        title: "File creation error",
+        message: getApiErrorMessage(err, "Could not create file. Please try again."),
+        color: "red",
+        position: "top-center",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Card
+      shadow="sm"
+      padding="lg"
+      radius="md"
+      withBorder
+      className="inbox-card"
+      style={{
+        backgroundColor: "#F5F7F8",
+        width: "100%",
+        minHeight: "70vh",
+        maxHeight: "70vh",
+        overflowY: "auto",
+      }}
+    >
+      <Box
+        style={{
+          position: "sticky",
+          top: 0,
+          zIndex: 2,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          marginLeft: "auto",
+          width: "fit-content",
+        }}
+      >
+        <ActionIcon
+          size="lg"
+          variant="outline"
+          color="blue"
+          disabled={isSavingDraft || isSubmitting}
+          onClick={() => handleSaveDraft()}
+          title="Save as Draft"
+        >
+          <FloppyDisk size={20} />
+        </ActionIcon>
+        <Text color="blue" size="xs" mt={4}>
+          Save as Draft
+        </Text>
+      </Box>
+
+      <Title
+        order={2}
+        mb="md"
+        style={{
+          fontSize: "24px",
+        }}
+      >
+        Compose File
+      </Title>
+      <Box
+        component="form"
+        onSubmit={(e) => e.preventDefault()}
+        style={{
+          backgroundColor: "#F5F7F8",
+          padding: "16px",
+        }}
+      >
+        <TextInput
+          label="Title of File"
+          placeholder="Enter file title"
+          mb="sm"
+          value={subject}
+          onChange={(e) => setSubject(e.target.value)}
+          required
+        />
+        <Textarea
+          label="Description"
+          placeholder="Enter description (2500 letters maximum)"
+          mb="sm"
+          value={description}
+          onChange={(e) => {
+            if (description.length < 2500) {
+              setDescription(e.currentTarget.value);
+            }
+          }}
+          required
+        />
+        <Text
+          align="right"
+          size="sm"
+          c={description.length >= 200 ? "red" : "dimmed"}
+        >
+          {description.length} / 2500 letters
+        </Text>
+
+        <Select
+          label="File Type"
+          placeholder="Select file type"
+          value={fileTypeId}
+          data={fileTypes.map((type) => ({ value: String(type.id), label: type.name }))}
+          onChange={(value) => setFileTypeId(value || "")}
+          searchable
+          nothingFoundMessage="No file types found"
+          mb="sm"
+        />
+
+        <Select
+          label="Priority"
+          placeholder="Select priority"
+          value={priority}
+          data={[
+            { value: "LOW", label: "Low" },
+            { value: "NORMAL", label: "Normal" },
+            { value: "HIGH", label: "High" },
+            { value: "URGENT", label: "Urgent" },
+          ]}
+          onChange={(value) => setPriority(value)}
+          mb="sm"
+        />
+
+        <Textarea
+          label="Remarks"
+          placeholder="Enter remarks (500 characters maximum)"
+          value={remarks}
+          onChange={(e) => {
+            if (remarks.length < 500) {
+              setRemarks(e.currentTarget.value);
+            }
+          }}
+          mb="xs"
+          minRows={3}
+          required
+          icon={<ChatCenteredText size={16} />}
+        />
+        <Text
+          align="right"
+          size="sm"
+          c={remarks.length >= 450 ? "red" : "dimmed"}
+        >
+          {remarks.length} / 500 letters
+        </Text>
+        <Select
+          label="Designation"
+          placeholder="Sender's Designation"
+          value={designation}
+          data={options}
+          mb="sm"
+          onChange={(value) => setDesignation(value)}
+        />
+        <FileInput
+          label="Attach file (PDF, JPG, PNG) (MAX: 10MB)"
+          placeholder="Upload file"
+          accept="application/pdf,image/jpeg,image/png"
+          icon={<Upload size={16} />}
+          value={files}
+          onChange={handleFileChange}
+          mb="sm"
+          multiple
+        />
+        {Array.isArray(files) && files.length > 0 && (
+          <Group position="apart" mt="sm">
+            <Button
+              leftSection={<Trash size={16} />}
+              color="red"
+              onClick={removeFile}
+              compact
+            >
+              Remove File
+            </Button>
+          </Group>
+        )}
+        <Button
+          type="submit"
+          color="blue"
+          disabled={isSavingDraft || isSubmitting}
+          style={{
+            display: "block",
+            margin: "0 auto",
+            width: "200px",
+          }}
+          onClick={handleCreateFile}
+        >
+          {isSubmitting ? "Creating..." : "Create File"}
+        </Button>
+      </Box>
+
+      <Modal
+        opened={showConfirmModal}
+        onClose={() => setShowConfirmModal(false)}
+        title={
+          <Text align="center" weight={600} size="lg">
+            Confirm File Creation
+          </Text>
+        }
+        centered
+        size="md"
+      >
+        <Paper p="md" withBorder mb="md">
+          <Text weight={600} mb="md" size="md">
+            Do you want to create this file and keep it in Created Files?
+          </Text>
+
+          <Grid>
+            <Grid.Col span={5}>
+              <Text weight={500}>Sender:</Text>
+            </Grid.Col>
+            <Grid.Col span={7}>
+              <Text>
+                {username} [{designation}]
+              </Text>
+            </Grid.Col>
+          </Grid>
+        </Paper>
+
+        <Group justify="center" gap="xl" style={{ width: "100%" }}>
+          <Button
+            onClick={finalSubmit}
+            color="blue"
+            loading={isSubmitting}
+            disabled={isSavingDraft}
+            style={{ width: "120px" }}
+            radius="md"
+            leftSection={<PaperPlaneTilt size={16} />}
+          >
+            Confirm
+          </Button>
+          <Button
+            onClick={() => setShowConfirmModal(false)}
+            variant="outline"
+            style={{ width: "120px" }}
+            radius="md"
+          >
+            Cancel
+          </Button>
+        </Group>
+      </Modal>
+    </Card>
+  );
+}
diff --git a/src/Modules/FileTracking/components/CreatedFiles.jsx b/src/Modules/FileTracking/components/CreatedFiles.jsx
new file mode 100644
index 000000000..24e7f0701
--- /dev/null
+++ b/src/Modules/FileTracking/components/CreatedFiles.jsx
@@ -0,0 +1,500 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  ActionIcon,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Center,
+  Checkbox,
+  FileInput,
+  Group,
+  Modal,
+  Pagination,
+  ScrollArea,
+  Select,
+  Stack,
+  Table,
+  Text,
+  TextInput,
+  Textarea,
+  Title,
+  Tooltip,
+  Divider,
+  useMantineTheme,
+} from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import { notifications } from "@mantine/notifications";
+import { useSelector } from "react-redux";
+import {
+  Eye,
+  MagnifyingGlass,
+  PaperPlaneTilt,
+  PencilSimple,
+  Folder,
+  Upload,
+} from "@phosphor-icons/react";
+
+import { getNewFileDetail, listFileTypes, listNewFiles, updateNewFileDetail } from "../api";
+import { getApiErrorMessage } from "../utils/apiErrors";
+import SendFile from "./SendFile";
+import View from "./ViewFile";
+
+const ITEMS_PER_PAGE = 7;
+
+export default function CreatedFiles() {
+  const token = localStorage.getItem("authToken");
+  const role = useSelector((state) => state.user.role);
+  const username = useSelector((state) => state.user.roll_no);
+  let currentModule = useSelector((state) => state.module.current_module);
+  currentModule = currentModule.split(" ").join("").toLowerCase();
+
+  const theme = useMantineTheme();
+  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+
+  const [files, setFiles] = useState([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [fileToSend, setFileToSend] = useState(null);
+
+  const [editingFile, setEditingFile] = useState(null);
+  const [fileTypes, setFileTypes] = useState([]);
+  const [editFileTypeId, setEditFileTypeId] = useState("");
+  const [editSubject, setEditSubject] = useState("");
+  const [editDescription, setEditDescription] = useState("");
+  const [editPriority, setEditPriority] = useState("NORMAL");
+  const [editRemarks, setEditRemarks] = useState("");
+  const [editAttachments, setEditAttachments] = useState([]);
+  const [removedAttachmentIds, setRemovedAttachmentIds] = useState([]);
+  const [editFiles, setEditFiles] = useState([]);
+  const [isUpdating, setIsUpdating] = useState(false);
+
+  const convertDate = (date) => {
+    const d = new Date(date);
+    return Number.isNaN(d.getTime()) ? "-" : d.toLocaleString();
+  };
+
+  const generateFileId = (file) => {
+    if (file?.file_number) return file.file_number;
+    if (!file || !file.created_at || !file.id) return "Loading...";
+    const date = new Date(file.created_at);
+    if (Number.isNaN(date.getTime())) return `FTS-#${file.id}`;
+    return `FTS-${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-#${file.id}`;
+  };
+
+  const fetchCreatedFiles = async () => {
+    try {
+      const data = await listNewFiles(token, { status: "CREATED" });
+      const createdOnly = (Array.isArray(data) ? data : []).filter((file) => file?.status === "CREATED");
+      setFiles(createdOnly);
+    } catch (err) {
+      notifications.show({
+        title: "Could not load Created Files",
+        message: getApiErrorMessage(err, "Please refresh and try again."),
+        color: "red",
+        position: "top-center",
+      });
+    }
+  };
+
+  useEffect(() => {
+    fetchCreatedFiles();
+  }, [role, token, username, currentModule]);
+
+  useEffect(() => {
+    const fetchFileTypes = async () => {
+      try {
+        const data = await listFileTypes(token);
+        setFileTypes(Array.isArray(data) ? data : []);
+      } catch (err) {
+        notifications.show({
+          title: "Could not load file types",
+          message: getApiErrorMessage(err, "Please refresh and try again."),
+          color: "red",
+          position: "top-center",
+        });
+      }
+    };
+
+    fetchFileTypes();
+  }, [token]);
+
+  const filteredFiles = useMemo(() => {
+    const q = searchQuery.toLowerCase();
+    return files.filter((file) => {
+      const idString = (file.file_number || "").toLowerCase();
+      const subject = (file.subject || "").toLowerCase();
+      const status = (file.status || "").toLowerCase();
+      const date = convertDate(file.created_at).toLowerCase();
+      return (
+        idString.includes(q) ||
+        subject.includes(q) ||
+        status.includes(q) ||
+        date.includes(q)
+      );
+    });
+  }, [files, searchQuery]);
+
+  const pagedFiles = filteredFiles.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE,
+  );
+
+  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+  const endIndex = Math.min(startIndex + ITEMS_PER_PAGE, filteredFiles.length);
+
+  const openEditModal = async (file) => {
+    try {
+      const detail = await getNewFileDetail(file.id, token);
+      const selectedFile = detail || file;
+      setEditingFile(selectedFile);
+      setEditFileTypeId(selectedFile?.file_type?.id ? String(selectedFile.file_type.id) : "");
+      setEditSubject(selectedFile?.subject || "");
+      setEditDescription(selectedFile?.description || "");
+      setEditPriority(selectedFile?.priority || "NORMAL");
+      setEditRemarks("");
+      setEditAttachments(Array.isArray(selectedFile?.attachments) ? selectedFile.attachments : []);
+      setRemovedAttachmentIds([]);
+      setEditFiles([]);
+    } catch (err) {
+      notifications.show({
+        title: "Could not load file details",
+        message: getApiErrorMessage(err, "Please try again."),
+        color: "red",
+        position: "top-center",
+      });
+    }
+  };
+
+  const closeEditModal = () => {
+    if (isUpdating) return;
+    setEditingFile(null);
+    setEditFileTypeId("");
+    setEditSubject("");
+    setEditDescription("");
+    setEditPriority("NORMAL");
+    setEditRemarks("");
+    setEditAttachments([]);
+    setRemovedAttachmentIds([]);
+    setEditFiles([]);
+  };
+
+  const handleUpdateFile = async () => {
+    if (!editingFile) return;
+
+    if (!editFileTypeId) {
+      notifications.show({
+        title: "File type is required",
+        message: "Please select a file type before saving.",
+        color: "orange",
+        position: "top-center",
+      });
+      return;
+    }
+
+    const trimmedSubject = editSubject.trim();
+    if (!trimmedSubject) {
+      notifications.show({
+        title: "Subject is required",
+        message: "Please enter a subject before saving.",
+        color: "orange",
+        position: "top-center",
+      });
+      return;
+    }
+
+    try {
+      setIsUpdating(true);
+      const formData = new FormData();
+      formData.append("file_type_id", editFileTypeId);
+      formData.append("subject", trimmedSubject);
+      formData.append("description", editDescription);
+      formData.append("priority", editPriority);
+      if (editRemarks.trim()) {
+        formData.append("remarks", editRemarks.trim());
+      }
+      removedAttachmentIds.forEach((attachmentId) => {
+        formData.append("remove_attachment_ids", String(attachmentId));
+      });
+      if (Array.isArray(editFiles) && editFiles.length > 0) {
+        editFiles.forEach((file) => formData.append("files", file));
+      }
+
+      await updateNewFileDetail(editingFile.id, formData, token);
+
+      notifications.show({
+        title: "File updated",
+        message: "Changes were saved in Created Files.",
+        color: "green",
+        position: "top-center",
+      });
+
+      closeEditModal();
+      fetchCreatedFiles();
+    } catch (err) {
+      notifications.show({
+        title: "Update failed",
+        message: getApiErrorMessage(err, "Could not update the file."),
+        color: "red",
+        position: "top-center",
+      });
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const handleEditFilesChange = (uploadedFiles) => {
+    if (!uploadedFiles) {
+      setEditFiles([]);
+      return;
+    }
+
+    const fileArray = Array.isArray(uploadedFiles) ? uploadedFiles : [uploadedFiles];
+    setEditFiles(fileArray);
+  };
+
+  const handleAttachmentToggle = (attachmentId) => {
+    setRemovedAttachmentIds((prev) => {
+      const idNumber = Number(attachmentId);
+      if (prev.includes(idNumber)) {
+        return prev.filter((id) => id !== idNumber);
+      }
+      return [...prev, idNumber];
+    });
+  };
+  return (
+    <Card
+      shadow="sm"
+      radius="md"
+      withBorder
+      style={{
+        backgroundColor: "#F5F7F8",
+        width: "100%",
+        minHeight: "70vh",
+        maxHeight: "70vh",
+        display: "flex",
+        flexDirection: "column",
+        overflowY: selectedFile ? "hidden" : "auto",
+      }}
+    >
+      <Group position="apart" mb="md" align="center" grow>
+        <Title order={2}>Created Files</Title>
+        <TextInput
+          placeholder="Search created files..."
+          value={searchQuery}
+          onChange={(e) => {
+            setSearchQuery(e.target.value);
+            setCurrentPage(1);
+          }}
+          style={{ width: isMobile ? "100%" : "auto", maxWidth: isMobile ? "100%" : "360px" }}
+          icon={<MagnifyingGlass size={16} />}
+        />
+      </Group>
+
+      {selectedFile ? (
+        <div style={{ height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+          <Title
+            order={3}
+            mb="md"
+            style={{
+              fontSize: isMobile ? "22px" : "26px",
+              textAlign: "center",
+            }}
+          >
+            {selectedFile.subject}
+          </Title>
+          <View onBack={() => setSelectedFile(null)} fileID={selectedFile.id} updateFiles={fetchCreatedFiles} />
+        </div>
+      ) : (
+        <Box
+          style={{
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            overflowY: "auto",
+            height: "100%",
+            minHeight: "300px",
+            backgroundColor: "#fff",
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <ScrollArea style={{ flex: 1 }}>
+            {pagedFiles.length > 0 ? (
+              <Table
+                highlightOnHover
+                style={{
+                  width: "100%",
+                  borderCollapse: "collapse",
+                  tableLayout: "fixed",
+                  fontSize: "14px",
+                  minWidth: "860px",
+                }}
+              >
+                <thead style={{ position: "sticky", top: 0, backgroundColor: "#fff", zIndex: 1 }}>
+                  <tr>
+                    <th style={{ padding: "10px", border: "1px solid #ddd", width: "17%" }}>File ID</th>
+                    <th style={{ padding: "10px", border: "1px solid #ddd", width: "30%" }}>Subject</th>
+                    <th style={{ padding: "10px", border: "1px solid #ddd", width: "18%" }}>Created On</th>
+                    <th style={{ padding: "10px", border: "1px solid #ddd", width: "12%" }}>Status</th>
+                    <th style={{ padding: "10px", border: "1px solid #ddd", width: "23%" }}>Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {pagedFiles.map((file) => (
+                    <tr key={file.id}>
+                      <td style={{ padding: "8px", border: "1px solid #ddd", textAlign: "center" }}>
+                        {generateFileId(file)}
+                      </td>
+                      <td style={{ padding: "8px", border: "1px solid #ddd", textAlign: "center" }}>
+                        {file.subject || "-"}
+                      </td>
+                      <td style={{ padding: "8px", border: "1px solid #ddd", textAlign: "center" }}>
+                        {convertDate(file.created_at)}
+                      </td>
+                      <td style={{ padding: "8px", border: "1px solid #ddd", textAlign: "center" }}>
+                        <Badge color="yellow" variant="light">
+                          Created
+                        </Badge>
+                      </td>
+                      <td style={{ padding: "8px", border: "1px solid #ddd", textAlign: "center" }}>
+                        <Group position="center" spacing={8}>
+                          <Tooltip label="View File" withArrow>
+                            <ActionIcon variant="light" color="blue" onClick={() => setSelectedFile(file)}>
+                              <Eye size="1rem" />
+                            </ActionIcon>
+                          </Tooltip>
+                          <Tooltip label="Edit File" withArrow>
+                            <ActionIcon variant="light" color="grape" onClick={() => openEditModal(file)}>
+                              <PencilSimple size="1rem" />
+                            </ActionIcon>
+                          </Tooltip>
+                          <Tooltip label="Send to Outbox" withArrow>
+                            <ActionIcon variant="light" color="cyan" onClick={() => setFileToSend(file)}>
+                              <PaperPlaneTilt size="1rem" />
+                            </ActionIcon>
+                          </Tooltip>
+                        </Group>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+            ) : (
+              <Center style={{ height: "220px" }}>
+                <Stack align="center" spacing="xs">
+                  <Folder size={48} color={theme.colors.gray[5]} />
+                  <Text c="dimmed" size="lg">
+                    No files in Created Files
+                  </Text>
+                </Stack>
+              </Center>
+            )}
+          </ScrollArea>
+
+          <Group
+            position="right"
+            style={{
+              backgroundColor: "#fff",
+              padding: "8px 16px",
+              borderTop: "1px solid #ddd",
+              minHeight: "60px",
+              display: "flex",
+              alignItems: "center",
+              gap: "16px",
+              flexWrap: "wrap",
+              justifyContent: isMobile ? "center" : "flex-end",
+            }}
+          >
+            <Text size="sm" color="dimmed">
+              {`Showing ${filteredFiles.length > 0 ? startIndex + 1 : 0}-${endIndex} of ${filteredFiles.length} files`}
+            </Text>
+            <Pagination
+              total={Math.ceil(filteredFiles.length / ITEMS_PER_PAGE) || 1}
+              value={currentPage}
+              size="sm"
+              onChange={setCurrentPage}
+              boundaries={isMobile ? 0 : 1}
+              siblings={isMobile ? 0 : 1}
+              withEdges={!isMobile}
+            />
+          </Group>
+        </Box>
+      )}
+
+      <SendFile file={fileToSend} onClose={() => setFileToSend(null)} onSuccess={fetchCreatedFiles} />
+
+      <Modal opened={!!editingFile} onClose={closeEditModal} title="Edit Created File" centered size="lg">
+        <Stack spacing="sm">
+          <Select
+            label="File Type"
+            value={editFileTypeId}
+            onChange={(value) => setEditFileTypeId(value || "")}
+            data={fileTypes.map((type) => ({ value: String(type.id), label: type.name }))}
+            searchable
+            nothingFoundMessage="No file types found"
+            required
+          />
+          <TextInput label="Subject" value={editSubject} onChange={(e) => setEditSubject(e.currentTarget.value)} required />
+          <Textarea label="Description" minRows={4} value={editDescription} onChange={(e) => setEditDescription(e.currentTarget.value)} />
+          <Select
+            label="Priority"
+            value={editPriority}
+            onChange={(value) => setEditPriority(value || "NORMAL")}
+            data={[
+              { value: "LOW", label: "Low" },
+              { value: "NORMAL", label: "Normal" },
+              { value: "HIGH", label: "High" },
+              { value: "URGENT", label: "Urgent" },
+            ]}
+          />
+          <Textarea
+            label="Remarks"
+            minRows={3}
+            placeholder="Optional update note"
+            value={editRemarks}
+            onChange={(e) => setEditRemarks(e.currentTarget.value)}
+          />
+          <Divider label="Existing attachments" labelPosition="center" />
+          {Array.isArray(editAttachments) && editAttachments.length > 0 ? (
+            <Stack spacing={6}>
+              {editAttachments.map((attachment) => (
+                <Checkbox
+                  key={attachment.id}
+                  checked={!removedAttachmentIds.includes(Number(attachment.id))}
+                  onChange={() => handleAttachmentToggle(attachment.id)}
+                  label={attachment.name || `Attachment ${attachment.id}`}
+                />
+              ))}
+            </Stack>
+          ) : (
+            <Text size="xs" c="dimmed">
+              No attachments on this file yet.
+            </Text>
+          )}
+          <FileInput
+            label="Add attachments"
+            placeholder="Upload new attachments"
+            accept="application/pdf,image/jpeg,image/png"
+            icon={<Upload size={16} />}
+            value={editFiles}
+            onChange={handleEditFilesChange}
+            multiple
+            clearable
+          />
+          <Text size="xs" c="dimmed">
+            Uncheck an existing attachment to remove it. Newly uploaded attachments are added on save.
+          </Text>
+          <Group position="right" mt="sm">
+            <Button variant="outline" onClick={closeEditModal} disabled={isUpdating}>
+              Cancel
+            </Button>
+            <Button onClick={handleUpdateFile} loading={isUpdating}>
+              Save Changes
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Card>
+  );
+}
diff --git a/src/Modules/FileTracking/components/Drafts.jsx b/src/Modules/FileTracking/components/Drafts.jsx
new file mode 100644
index 000000000..6e4b0127a
--- /dev/null
+++ b/src/Modules/FileTracking/components/Drafts.jsx
@@ -0,0 +1,688 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Box,
+  Card,
+  Title,
+  Table,
+  Button,
+  ActionIcon,
+  Tooltip,
+  Modal,
+  Text,
+  Group,
+  TextInput,
+  Pagination,
+  Stack,
+  Divider,
+  ScrollArea,
+  useMantineTheme,
+} from "@mantine/core";
+import {
+  CaretUp,
+  CaretDown,
+  ArrowsDownUp,
+  PencilSimple,
+  Trash,
+  MagnifyingGlass,
+} from "@phosphor-icons/react";
+import { notifications } from "@mantine/notifications";
+import { useMediaQuery } from "@mantine/hooks";
+import axios from "axios";
+import { useSelector } from "react-redux";
+import EditDraft from "./EditDraft";
+import {
+  newDeleteDraftRoute,
+  newDraftsRoute,
+} from "../../../routes/filetrackingRoutes";
+
+export default function Draft() {
+  const [files, setFiles] = useState([]);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageInput, setPageInput] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: "asc" });
+  const itemsPerPage = 7;
+  const theme = useMantineTheme();
+
+  // Media query for responsive design
+  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+
+  const token = localStorage.getItem("authToken");
+  const role = useSelector((state) => state.user.role);
+  const username = useSelector((state) => state.user.roll_no);
+  let current_module = useSelector((state) => state.module.current_module);
+  current_module = current_module.split(" ").join("").toLowerCase();
+
+  useEffect(() => {
+    const getFiles = async () => {
+      try {
+        const response = await axios.get(`${newDraftsRoute}`, {
+          params: {
+            username,
+            designation: role,
+            src_module: current_module,
+          },
+          withCredentials: true,
+          headers: {
+            Authorization: `Token ${token}`,
+            "Content-Type": "multipart/form-data",
+          },
+        });
+        setFiles(response.data);
+        console.log(response.data);
+      } catch (err) {
+        console.error("Error fetching files:", err);
+      }
+    };
+
+    getFiles();
+  }, [username, role, current_module, token]);
+
+  const [editFile, setEditFile] = useState(null); // File being edited
+
+  const getDraftField = (file, key) => {
+    if (!file) return "";
+    const extra = file.draft_data || file.file_extra_JSON || {};
+    return (extra[key] || file[key] || "").toString();
+  };
+
+  const handleDeleteFile = async (fileID) => {
+    try {
+      await axios.delete(`${newDeleteDraftRoute(fileID)}?confirm=true`, {
+        withCredentials: true,
+        headers: {
+          Authorization: `Token ${token}`,
+        },
+      });
+      setFiles((prevFiles) => prevFiles.filter((file) => file.id !== fileID));
+      notifications.show({
+        title: "Draft deleted",
+        message: "The draft has been successfully deleted",
+        color: "red",
+      });
+    } catch (err) {
+      console.error("Error deleting draft:", err);
+      notifications.show({
+        title: "Delete failed",
+        message: err?.response?.data?.error || "Could not delete draft. Please try again.",
+        color: "red",
+      });
+    }
+  };
+
+  const sortedFiles = [...files].sort((a, b) => {
+    if (!sortConfig.key) return 0;
+    const direction = sortConfig.direction === "asc" ? 1 : -1;
+
+    if (sortConfig.key === "file_id") {
+      return direction * (a.id - b.id);
+    }
+
+    if (sortConfig.key === "subject") {
+      const aSubject = (a?.file_extra_JSON?.subject || a?.subject || "").toString();
+      const bSubject = (b?.file_extra_JSON?.subject || b?.subject || "").toString();
+      return direction * aSubject.localeCompare(bSubject);
+    }
+
+    if (sortConfig.key === "description") {
+      const aDescription = (a?.file_extra_JSON?.description || a?.description || "").toString();
+      const bDescription = (b?.file_extra_JSON?.description || b?.description || "").toString();
+      return direction * aDescription.localeCompare(bDescription);
+    }
+
+    if (sortConfig.key === "remarks") {
+      const aRemarks = (a?.file_extra_JSON?.remarks || a?.remarks || "").toString();
+      const bRemarks = (b?.file_extra_JSON?.remarks || b?.remarks || "").toString();
+      return direction * aRemarks.localeCompare(bRemarks);
+    }
+
+    return direction * (a[sortConfig.key] > b[sortConfig.key] ? 1 : -1);
+  });
+
+  const filteredFiles = sortedFiles.filter((file) => {
+    const fileDate = file?.upload_date || file?.created_at;
+    const parsedDate = fileDate ? new Date(fileDate) : null;
+    const idString = file?.file_number
+      ? file.file_number
+      : parsedDate && !Number.isNaN(parsedDate.getTime())
+        ? `${file.branch || "FTS"}-${parsedDate.getFullYear()}-${(parsedDate.getMonth() + 1).toString().padStart(2, "0")}-#${file.id}`
+        : `FTS-#${file?.id || ""}`;
+    const subject = getDraftField(file, "subject").toLowerCase();
+    const description = getDraftField(file, "description").toLowerCase();
+    const remarks = getDraftField(file, "remarks").toLowerCase();
+    const uploader = (file?.uploader || file?.created_by || "").toLowerCase();
+    return (
+      idString.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      subject.includes(searchQuery.toLowerCase()) ||
+      uploader.includes(searchQuery.toLowerCase()) ||
+      description.includes(searchQuery.toLowerCase()) ||
+      remarks.includes(searchQuery.toLowerCase())
+    );
+  });
+
+  const handlePageJump = (e) => {
+    if (e.key === "Enter") {
+      const pageNumber = Number.parseInt(pageInput, 10);
+      const totalPages = Math.ceil(filteredFiles.length / itemsPerPage);
+      if (
+        Number.isNaN(pageNumber) ||
+        pageNumber < 1 ||
+        pageNumber > totalPages
+      ) {
+        setPageInput("");
+        return;
+      }
+      setCurrentPage(pageNumber);
+      setPageInput("");
+    }
+  };
+
+  const handleSort = (key) => {
+    setSortConfig((prev) => ({
+      key,
+      direction: prev.key === key && prev.direction === "asc" ? "desc" : "asc",
+    }));
+    setCurrentPage(1);
+  };
+
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = Math.min(startIndex + itemsPerPage, filteredFiles.length);
+
+  // Delete modal functions
+  const openDeleteModal = (file) => {
+    setSelectedFile(file);
+    setShowDeleteModal(true);
+  };
+
+  const confirmDelete = () => {
+    if (selectedFile) {
+      handleDeleteFile(selectedFile.id);
+      setShowDeleteModal(false);
+      setSelectedFile(null);
+    }
+  };
+
+  const handleEditFile = (file) => {
+    setEditFile(file); // Set the file to edit mode
+  };
+
+  const handleBack = () => {
+    setEditFile(null); // Exit edit mode and go back
+  };
+
+  // Mobile card view rendering
+  const renderMobileView = () => {
+    return (
+      <Stack spacing="md">
+        {filteredFiles
+          .slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
+          .map((file, index) => (
+            <Card
+              key={index}
+              shadow="sm"
+              p="md"
+              radius="md"
+              withBorder
+              style={{ position: "relative" }}
+            >
+              <Text weight={600} size="md" mb={6}>
+                {getDraftField(file, "subject") || "-"}
+              </Text>
+
+              <Divider my="xs" />
+
+              <Text size="sm" mb={8}>
+                <Text span weight={500}>
+                  Description:
+                </Text>{" "}
+                {getDraftField(file, "description") || "-"}
+              </Text>
+
+              <Text size="sm" mb={8}>
+                <Text span weight={500}>
+                  Remarks:
+                </Text>{" "}
+                {getDraftField(file, "remarks") || "-"}
+              </Text>
+
+              <Group position="apart" mt="xs">
+                <Text size="sm">
+                  <Text span weight={500}>
+                    Created by:
+                  </Text>{" "}
+                  {file.uploader}
+                </Text>
+                <Text size="sm" color="dimmed">
+                  {file.uploader_designation}
+                </Text>
+                <Text size="sm" color="dimmed">
+                  {new Date(file.upload_date || file.created_at).toLocaleString()}
+                </Text>
+              </Group>
+
+              <Group position="apart" mt="md">
+                <Tooltip label="Edit Draft" position="top" withArrow>
+                  <Button
+                    variant="light"
+                    color="blue"
+                    size="xs"
+                    leftIcon={<PencilSimple size="1rem" />}
+                    onClick={() => handleEditFile(file)}
+                  >
+                    Edit
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Delete Draft" position="top" withArrow>
+                  <Button
+                    variant="light"
+                    color="red"
+                    size="xs"
+                    leftIcon={<Trash size="1rem" />}
+                    onClick={() => openDeleteModal(file)}
+                  >
+                    Delete
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Card>
+          ))}
+      </Stack>
+    );
+  };
+
+  // Desktop table view rendering
+  const renderDesktopView = () => {
+    return (
+      <ScrollArea>
+        <Table
+          highlightOnHover
+          style={{
+            width: "100%",
+            borderCollapse: "collapse",
+            tableLayout: "fixed",
+            fontSize: "14px",
+            minWidth: "900px", // Ensures horizontal scroll on smaller screens
+          }}
+        >
+          <thead
+            style={{
+              position: "sticky",
+              top: 0,
+              backgroundColor: "#fff",
+              zIndex: 1,
+            }}
+          >
+            <tr style={{ backgroundColor: "#0000" }}>
+              {[
+                { key: "subject", label: "Subject" },
+                { key: "description", label: "Description" },
+                { key: "remarks", label: "Remarks" },
+                { key: "upload_date", label: "Date" },
+                { key: "uploader", label: "Created By" },
+              ].map(({ key, label }) => (
+                <th
+                  key={key}
+                  onClick={() => handleSort(key)}
+                  style={{
+                    cursor: "pointer",
+                    padding: "10px",
+                    width: "14%",
+                    border: "1px solid #0000",
+                    alignItems: "center",
+                    gap: "5px",
+                    height: "36px",
+                  }}
+                >
+                  {label}
+                  {sortConfig.key === key ? (
+                    sortConfig.direction === "asc" ? (
+                      <CaretUp size={16} />
+                    ) : (
+                      <CaretDown size={16} />
+                    )
+                  ) : (
+                    <ArrowsDownUp size={16} opacity={0.6} />
+                  )}
+                </th>
+              ))}
+              <th
+                style={{
+                  padding: "6px",
+                  width: "7%",
+                  border: "1px solid #ddd",
+                  height: "36px",
+                }}
+              >
+                Edit
+              </th>
+              <th
+                style={{
+                  padding: "6px",
+                  width: "7%",
+                  border: "1px solid #ddd",
+                  height: "36px",
+                }}
+              >
+                Delete
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredFiles
+              .slice(
+                (currentPage - 1) * itemsPerPage,
+                currentPage * itemsPerPage,
+              )
+              .map((file, index) => (
+                <tr key={index}>
+                  <td
+                    style={{
+                      padding: "6px",
+                      border: "1px solid #ddd",
+                      textAlign: "center",
+                      height: "36px",
+                    }}
+                  >
+                    {getDraftField(file, "subject") || "-"}
+                  </td>
+                  <td
+                    style={{
+                      padding: "6px",
+                      border: "1px solid #ddd",
+                      textAlign: "center",
+                      height: "36px",
+                    }}
+                  >
+                    {getDraftField(file, "description") || "-"}
+                  </td>
+                  <td
+                    style={{
+                      padding: "6px",
+                      border: "1px solid #ddd",
+                      textAlign: "center",
+                      height: "36px",
+                    }}
+                  >
+                    {getDraftField(file, "remarks") || "-"}
+                  </td>
+                  <td
+                    style={{
+                      padding: "6px",
+                      textAlign: "center",
+                      border: "1px solid #ddd",
+                      height: "36px",
+                    }}
+                  >
+                    {new Date(file.upload_date || file.created_at).toLocaleString()}
+                  </td>
+                  <td
+                    style={{
+                      padding: "6px",
+                      border: "1px solid #ddd",
+                      textAlign: "center",
+                      height: "36px",
+                    }}
+                  >
+                    {file.uploader || file.created_by || "-"}
+                  </td>
+                  <td
+                    style={{
+                      padding: "6px",
+                      textAlign: "center",
+                      border: "1px solid #ddd",
+                      height: "36px",
+                    }}
+                  >
+                    <Tooltip label="Edit Draft" position="top" withArrow>
+                      <ActionIcon
+                        variant="light"
+                        color="black"
+                        style={{
+                          transition: "background-color 0.3s",
+                          width: "2rem",
+                          height: "2rem",
+                        }}
+                        onClick={() => handleEditFile(file)}
+                        onMouseEnter={(e) => {
+                          e.target.style.backgroundColor = "#E3F2FD";
+                        }}
+                        onMouseLeave={(e) => {
+                          e.target.style.backgroundColor = "transparent";
+                        }}
+                      >
+                        <PencilSimple size="1rem" />
+                      </ActionIcon>
+                    </Tooltip>
+                  </td>
+                  <td
+                    style={{
+                      padding: "6px",
+                      textAlign: "center",
+                      border: "1px solid #ddd",
+                      height: "36px",
+                    }}
+                  >
+                    <Tooltip label="Delete Draft" position="top" withArrow>
+                      <ActionIcon
+                        variant="light"
+                        color="red"
+                        style={{
+                          transition: "background-color 0.3s",
+                          width: "2rem",
+                          height: "2rem",
+                        }}
+                        onClick={() => openDeleteModal(file)}
+                        onMouseEnter={(e) => {
+                          e.target.style.backgroundColor = "#ffebee";
+                        }}
+                        onMouseLeave={(e) => {
+                          e.target.style.backgroundColor = "transparent";
+                        }}
+                      >
+                        <Trash size="1rem" />
+                      </ActionIcon>
+                    </Tooltip>
+                  </td>
+                </tr>
+              ))}
+          </tbody>
+        </Table>
+      </ScrollArea>
+    );
+  };
+
+  return (
+    <>
+      <Card
+        shadow="sm"
+        padding="lg"
+        radius="md"
+        withBorder
+        style={{
+          backgroundColor: "#F5F7F8",
+          width: "100%",
+          minHeight: "70vh",
+          maxHeight: "70vh",
+          display: "flex",
+          flexDirection: "column",
+          overflowY: "auto",
+        }}
+      >
+        {!editFile && (
+          <Group
+            position="apart"
+            mb="md"
+            align="center"
+            style={{ flexWrap: "wrap" }}
+          >
+            <Title
+              order={2}
+              style={{
+                fontSize: "24px",
+              }}
+            >
+              Drafts
+            </Title>
+            <TextInput
+              placeholder="Search files..."
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                setCurrentPage(1);
+              }}
+              style={{
+                marginBottom: isMobile ? "10px" : "0",
+                width: isMobile ? "100%" : "auto",
+              }}
+              icon={<MagnifyingGlass size={16} />}
+            />
+          </Group>
+        )}
+
+        {editFile ? (
+          <EditDraft
+            file={editFile}
+            onBack={handleBack}
+            deleteDraft={handleDeleteFile}
+          />
+        ) : (
+          <Box
+            style={{
+              border: "1px solid #ddd",
+              borderRadius: "8px",
+              overflowY: "auto",
+              height: "100%",
+              minHeight: "300px",
+              backgroundColor: "#fff",
+              display: "flex",
+              flexDirection: "column",
+              marginBottom: 0,
+            }}
+          >
+            <div
+              style={{
+                flex: 1,
+                overflowY: "auto",
+                marginBottom: "-1px",
+                padding: isMobile ? "10px" : "0",
+              }}
+            >
+              {isMobile ? renderMobileView() : renderDesktopView()}
+            </div>
+            <Group
+              position="right"
+              style={{
+                backgroundColor: "#fff",
+                padding: "8px 16px",
+                borderTop: "1px solid #ddd",
+                marginTop: "auto",
+                minHeight: "60px",
+                display: "flex",
+                alignItems: "center",
+                height: "35px",
+                gap: "16px",
+                flexWrap: "wrap",
+                justifyContent: isMobile ? "center" : "flex-end",
+              }}
+            >
+              <Text size="sm" color="dimmed">
+                {`Showing ${filteredFiles.length > 0 ? startIndex + 1 : 0}-${endIndex} of ${filteredFiles.length} files`}
+              </Text>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "12px",
+                  height: "36px",
+                  marginLeft: isMobile ? "0" : "auto",
+                  flexWrap: isMobile ? "wrap" : "nowrap",
+                  justifyContent: isMobile ? "center" : "flex-start",
+                  width: isMobile ? "100%" : "auto",
+                }}
+              >
+                <Tooltip
+                  label={`Enter page number (1-${Math.ceil(filteredFiles.length / itemsPerPage)})`}
+                  position="top"
+                >
+                  <TextInput
+                    placeholder="Page #"
+                    value={pageInput}
+                    onChange={(e) => {
+                      setPageInput(e.target.value.replace(/[^0-9]/g, ""));
+                    }}
+                    onKeyDown={handlePageJump}
+                    style={{
+                      width: "80px",
+                      textAlign: "center",
+                    }}
+                    size="sm"
+                    type="text"
+                    maxLength={3}
+                  />
+                </Tooltip>
+                <Pagination
+                  total={Math.ceil(filteredFiles.length / itemsPerPage)}
+                  value={currentPage}
+                  onChange={(page) => {
+                    setCurrentPage(page);
+                    setPageInput("");
+                  }}
+                  size="sm"
+                  boundaries={isMobile ? 0 : 1}
+                  siblings={isMobile ? 0 : 1}
+                  withEdges={!isMobile}
+                />
+              </div>
+            </Group>
+          </Box>
+        )}
+      </Card>
+
+      {/* Delete Confirmation Modal */}
+      <Modal
+        opened={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+        title={
+          <Text align="center" weight={600} size="lg">
+            Confirm Deletion
+          </Text>
+        }
+        centered
+        size={isMobile ? "xs" : "md"}
+      >
+        <Text weight={600} mb="ls">
+          Do you want to delete this file?
+        </Text>
+        {selectedFile && (
+          <>
+            <Text mb="ls">
+              Subject: {getDraftField(selectedFile, "subject") || "-"}
+            </Text>
+            <Text mb="md">File ID: #{selectedFile.id}</Text>
+          </>
+        )}
+        <Group justify="center" gap="xl" style={{ width: "100%" }}>
+          <Button
+            onClick={confirmDelete}
+            color="blue"
+            style={{ width: isMobile ? "100px" : "120px" }}
+          >
+            Confirm
+          </Button>
+          <Button
+            onClick={() => setShowDeleteModal(false)}
+            variant="outline"
+            style={{ width: isMobile ? "100px" : "120px" }}
+          >
+            Cancel
+          </Button>
+        </Group>
+      </Modal>
+    </>
+  );
+}
diff --git a/src/Modules/FileTracking/components/EditDraft.jsx b/src/Modules/FileTracking/components/EditDraft.jsx
new file mode 100644
index 000000000..3fbc264bf
--- /dev/null
+++ b/src/Modules/FileTracking/components/EditDraft.jsx
@@ -0,0 +1,362 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable prettier/prettier */
+import React, { useEffect, useState } from "react";
+import {
+  Card,
+  Title,
+  TextInput,
+  FileInput,
+  Button,
+  Textarea,
+  Box,
+  Group,
+} from "@mantine/core";
+import { ArrowLeft, Upload } from "@phosphor-icons/react";
+import { notifications } from "@mantine/notifications";
+import axios from "axios";
+import { useSelector } from "react-redux";
+import { Trash } from "phosphor-react";
+import {
+  newFilesRoute,
+} from "../../../routes/filetrackingRoutes";
+
+// eslint-disable-next-line react/prop-types
+export default function EditDraft({ file, onBack, deleteDraft }) {
+  // Initialize state with data from the draft (file prop)
+  const draftData = file?.draft_data || file?.file_extra_JSON || {};
+
+  const draftSubject = draftData.subject || file?.subject || "";
+  const draftDescription = draftData.description || file?.description || "";
+  const draftRemarks = draftData.remarks || file?.remarks || "";
+
+  const [title, setTitle] = useState(draftSubject);
+  // eslint-disable-next-line no-unused-vars
+  const [description, setDescription] = useState(draftDescription);
+  const [remarks, setRemarks] = useState(draftRemarks);
+  const [attachedFile, setAttachedFile] = useState(null);
+  const [existingAttachments, setExistingAttachments] = useState(
+    Array.isArray(draftData.attachments) ? draftData.attachments : [],
+  );
+  const token = localStorage.getItem("authToken");
+  let module = useSelector((state) => state.module.current_module);
+  module = module.split(" ").join("").toLowerCase();
+  const uploaderRole = useSelector((state) => state.user.role);
+  // eslint-disable-next-line no-unused-vars
+  const [designation, setDesignation] = useState(uploaderRole);
+  useEffect(() => {
+    const nextDraftData = file?.draft_data || file?.file_extra_JSON || {};
+    setTitle(nextDraftData.subject || file?.subject || "");
+    setDescription(nextDraftData.description || file?.description || "");
+    setRemarks(nextDraftData.remarks || file?.remarks || "");
+    setAttachedFile(null);
+    setExistingAttachments(
+      Array.isArray(nextDraftData.attachments) ? nextDraftData.attachments : [],
+    );
+  }, [file]);
+
+  const removeFile = () => {
+    setAttachedFile(null);
+    setExistingAttachments([]);
+  };
+
+  const handleFileChange = (uploadedFile) => {
+    setAttachedFile(uploadedFile);
+    if (uploadedFile) {
+      setExistingAttachments([]);
+    }
+  };
+
+  const decodeBase64ToFile = (attachment, index) => {
+    if (!attachment?.content_b64) return null;
+    try {
+      const binary = atob(attachment.content_b64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i += 1) {
+        bytes[i] = binary.charCodeAt(i);
+      }
+      const name = attachment.name || `draft-attachment-${index + 1}`;
+      const contentType = attachment.content_type || "application/octet-stream";
+      return new File([bytes], name, { type: contentType });
+    } catch (error) {
+      console.error("Failed to decode draft attachment", error);
+      return null;
+    }
+  };
+  const handleSaveDraft = async () => {
+    if (!title || !description || !remarks || remarks.trim().length < 5) {
+      notifications.show({
+        title: "Incomplete form",
+        message: "Title, description and remark (minimum 5 characters) are required.",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    if (!file?.id || !file?.file_type_id) {
+      notifications.show({
+        title: "Draft data missing",
+        message: "Draft does not contain required information.",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    try {
+      const formData = new FormData();
+      const filesToUpload = [];
+
+      if (attachedFile instanceof File) {
+        filesToUpload.push(attachedFile);
+      } else if (existingAttachments.length > 0) {
+        existingAttachments.forEach((attachment, index) => {
+          const converted = decodeBase64ToFile(attachment, index);
+          if (converted) {
+            filesToUpload.push(converted);
+          }
+        });
+      }
+
+      filesToUpload.forEach((fileItem) => {
+        if (fileItem instanceof File) {
+          formData.append("files", fileItem);
+        }
+      });
+
+      formData.append("file_type_id", String(file.file_type_id));
+      formData.append("subject", title);
+      formData.append("description", description);
+      formData.append("remarks", remarks);
+      formData.append("priority", draftData.priority || "NORMAL");
+      formData.append("action", "draft");
+
+      const response = await axios.post(`${newFilesRoute}`, formData, {
+        headers: {
+          Authorization: `Token ${token}`,
+          "Content-Type": "multipart/form-data",
+        },
+      });
+
+      if (response.status === 201) {
+        notifications.show({
+          title: "Draft saved successfully",
+          message: "Your draft has been updated.",
+          color: "green",
+          position: "top-center",
+        });
+        onBack();
+      }
+    } catch (err) {
+      notifications.show({
+        title: "Save draft failed",
+        message: err?.response?.data?.error || "Could not save draft. Please try again.",
+        color: "red",
+        position: "top-center",
+      });
+    }
+  };
+
+  const handleSubmitDraft = async () => {
+    if (!title || !description || !remarks || remarks.trim().length < 5) {
+      notifications.show({
+        title: "Incomplete form",
+        message: "Title, description and remark (minimum 5 characters) are required.",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    if (!file?.file_type_id) {
+      notifications.show({
+        title: "Draft data missing",
+        message: "Draft does not contain file type information. Please recreate the draft.",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    try {
+      const formData = new FormData();
+      const filesToUpload = [];
+
+      if (attachedFile instanceof File) {
+        filesToUpload.push(attachedFile);
+      } else if (existingAttachments.length > 0) {
+        existingAttachments.forEach((attachment, index) => {
+          const converted = decodeBase64ToFile(attachment, index);
+          if (converted) {
+            filesToUpload.push(converted);
+          }
+        });
+      }
+
+      filesToUpload.forEach((fileItem) => {
+        if (fileItem instanceof File) {
+          formData.append("files", fileItem);
+        }
+      });
+
+      formData.append("file_type_id", String(file.file_type_id));
+      formData.append("subject", title);
+      formData.append("description", description);
+      formData.append("remarks", remarks);
+      formData.append("priority", draftData.priority || "NORMAL");
+      formData.append("action", "submit");
+
+      const response = await axios.post(`${newFilesRoute}`, formData, {
+        headers: {
+          Authorization: `Token ${token}`,
+          "Content-Type": "multipart/form-data",
+        },
+      });
+
+      if (response.status === 201) {
+        notifications.show({
+          title: "File created successfully",
+          message: "Draft has been submitted as a file. Go to Created Files to send it.",
+          color: "green",
+          position: "top-center",
+        });
+        deleteDraft(file.id);
+        onBack();
+      }
+    } catch (err) {
+      notifications.show({
+        title: "Submit failed",
+        message: err?.response?.data?.error || "Could not submit draft. Please try again.",
+        color: "red",
+        position: "top-center",
+      });
+    }
+  };
+
+  return (
+    <Card
+      // shadow="sm" padding="lg" radius="md" withBorder
+      shadow="sm"
+      padding="lg"
+      radius="m"
+      withBorder
+      style={{
+        backgroundColor: "#F5F7F8",
+        // position: "absolute",
+        height: "70vh",
+        width: "90vw",
+        overflowY: "auto",
+      }}
+    >
+      <Box
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "1rem",
+        }}
+      >
+        <Button
+          variant="subtle"
+          onClick={onBack}
+          style={{ marginRight: "1rem" }}
+        >
+          <ArrowLeft size={24} />
+        </Button>
+        <Title order={3} style={{ flexGrow: 1, textAlign: "center" }}>
+          Edit Draft: {title}
+        </Title>
+      </Box>
+
+      <TextInput
+        label="Title"
+        placeholder="Enter Title"
+        value={title}
+        onChange={(e) => setTitle(e.currentTarget.value)}
+        mb="sm"
+      />
+      <Textarea
+        label="Description"
+        placeholder="Enter your description here"
+        value={description}
+        onChange={(e) => setDescription(e.currentTarget.value)}
+        mb="sm"
+      />
+      <FileInput
+        label="Attach file (PDF, JPG, PNG) (MAX: 10MB)"
+        accept="application/pdf,image/jpeg,image/png"
+        icon={<Upload size={16} />}
+        placeholder="Choose file"
+        value={attachedFile}
+        onChange={handleFileChange}
+        mb="sm"
+        withAsterisk
+      />
+      {existingAttachments.length > 0 && !attachedFile && (
+        <Box mb="sm">
+          <strong>Saved attachment{existingAttachments.length > 1 ? "s" : ""}:</strong>
+          {existingAttachments.map((attachment, idx) => (
+            <Box key={`${attachment?.name || "attachment"}-${idx}`}>
+              {attachment?.name || `Attachment ${idx + 1}`}
+            </Box>
+          ))}
+        </Box>
+      )}
+      {attachedFile && (
+        <Group position="apart" mt="sm">
+          <Button
+            leftIcon={<Trash size={16} />}
+            color="red"
+            onClick={removeFile}
+            compact
+          >
+            Remove File
+          </Button>
+        </Group>
+      )}
+      <Textarea
+        label="Remark"
+        placeholder="Enter remark"
+        mb="sm"
+        value={remarks}
+        onChange={(e) => setRemarks(e.currentTarget.value)}
+      />
+
+      {/* ✅ Draft Edit: Two actions only - Save Draft or Submit as File */}
+
+      <Box
+        style={{
+          display: "flex",
+          gap: "1rem",
+          justifyContent: "center",
+          alignItems: "center",
+          marginTop: "auto",
+        }}
+      >
+        <Button
+          variant="light"
+          style={{
+            width: "150px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+          onClick={handleSaveDraft}
+        >
+          Save Draft
+        </Button>
+        <Button
+          style={{
+            width: "150px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+          onClick={handleSubmitDraft}
+        >
+          Submit as File
+        </Button>
+      </Box>
+    </Card>
+  );
+}
diff --git a/src/Modules/FileTracking/components/FileTrackingErrorBoundary.jsx b/src/Modules/FileTracking/components/FileTrackingErrorBoundary.jsx
new file mode 100644
index 000000000..fccfff9e2
--- /dev/null
+++ b/src/Modules/FileTracking/components/FileTrackingErrorBoundary.jsx
@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Alert, Button, Group, Stack, Text } from "@mantine/core";
+
+class FileTrackingErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+
+    componentDidCatch(error) {
+        // Keep crash details in console for developers while showing a safe UI to users.
+        // eslint-disable-next-line no-console
+        console.error("FileTracking UI crashed:", error);
+    }
+
+    reset = () => {
+        this.setState({ hasError: false });
+    };
+
+    render() {
+        if (!this.state.hasError) {
+            return this.props.children;
+        }
+
+        return (
+            <Alert color="red" title="Something went wrong in File Tracking" radius="md">
+                <Stack spacing="sm">
+                    <Text size="sm">Your unsent data is still in this page state. Try reloading this section.</Text>
+                    <Group>
+                        <Button size="xs" onClick={this.reset}>
+                            Retry
+                        </Button>
+                        <Button size="xs" variant="outline" onClick={() => window.location.reload()}>
+                            Reload page
+                        </Button>
+                    </Group>
+                </Stack>
+            </Alert>
+        );
+    }
+}
+
+FileTrackingErrorBoundary.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+
+export default FileTrackingErrorBoundary;
diff --git a/src/Modules/FileTracking/components/Inbox.jsx b/src/Modules/FileTracking/components/Inbox.jsx
new file mode 100644
index 000000000..c8d1a307e
--- /dev/null
+++ b/src/Modules/FileTracking/components/Inbox.jsx
@@ -0,0 +1,765 @@
+import React, { useEffect, useState } from "react";
+import {
+  Box,
+  Card,
+  Title,
+  Table,
+  ActionIcon,
+  Tooltip,
+  TextInput,
+  Group,
+  Modal,
+  Text,
+  Button,
+  Pagination,
+  Stack,
+  Badge,
+  Divider,
+  useMantineTheme,
+  ScrollArea,
+  Center,
+} from "@mantine/core";
+import {
+  Archive,
+  Eye,
+  CaretUp,
+  CaretDown,
+  ArrowsDownUp,
+  MagnifyingGlass,
+} from "@phosphor-icons/react";
+import axios from "axios";
+import { useSelector } from "react-redux";
+import { notifications } from "@mantine/notifications";
+import { useMediaQuery } from "@mantine/hooks";
+import { ArrowClockwise, Folder } from "@phosphor-icons/react";
+import View from "./ViewFile";
+import {
+  newArchiveRoute,
+} from "../../../routes/filetrackingRoutes";
+import { listInbox } from "../api";
+import { getApiErrorMessage } from "../utils/apiErrors";
+
+export default function Inboxfunc() {
+  const [files, setFiles] = useState([]);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const token = localStorage.getItem("authToken");
+  const role = useSelector((state) => state.user.role);
+  const username = useSelector((state) => state.user.roll_no);
+  const accountUsername = useSelector((state) => state.user.username);
+  const loginUsername = useSelector((state) => state.user.loginUsername);
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: "asc" });
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageInput, setPageInput] = useState("");
+  const itemsPerPage = 7;
+  const theme = useMantineTheme();
+  let current_module = useSelector((state) => state.module.current_module);
+  current_module = current_module.split(" ").join("").toLowerCase();
+
+  // Media query for responsive design
+  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+
+  // New state for archive confirmation modal
+  const [showArchiveModal, setShowArchiveModal] = useState(false);
+  const [selectedArchiveFile, setSelectedArchiveFile] = useState(null);
+
+  // Helper function to convert dates
+  const convertDate = (date) => {
+    const d = new Date(date);
+    return d.toLocaleString();
+  };
+
+  // Helper function to generate file ID (new API file_number preferred)
+  const generateFileId = (file) => {
+    if (file?.file_number) return file.file_number;
+    if (!file || !file.upload_date || !file.id) return "Loading...";
+    return `${file.branch || "FTS"}-${new Date(file.upload_date).getFullYear()}-${(
+      new Date(file.upload_date).getMonth() + 1
+    )
+      .toString()
+      .padStart(2, "0")}-#${file.id}`;
+  };
+
+  // Fetch files on component mount
+  useEffect(() => {
+    const getFiles = async () => {
+      try {
+        const data = await listInbox(token);
+        console.log("Inbox: ", data);
+        setFiles(data);
+      } catch (err) {
+        console.error("Error fetching files:", err);
+        notifications.show({
+          title: "Could not load Inbox",
+          message: getApiErrorMessage(err, "Please refresh and try again."),
+          color: "red",
+        });
+      }
+    };
+
+    getFiles();
+  }, [username, role, current_module, token]);
+
+  const handleArchive = async (fileID) => {
+    try {
+      await axios.post(newArchiveRoute(fileID), {
+        remarks: "Archived from inbox",
+      }, {
+        withCredentials: true,
+        headers: {
+          Authorization: `Token ${token}`,
+          "Content-Type": "application/json",
+        },
+      });
+      const updatedFiles = files.filter((file) => file.id !== fileID);
+      setFiles(updatedFiles);
+      notifications.show({
+        title: "File archived",
+        message: "The file has been successfully archived",
+        color: "green",
+      });
+    } catch (err) {
+      console.error("Error archiving file:", err);
+      notifications.show({
+        title: "Archive failed",
+        message:
+          err?.response?.data?.error ||
+          "Could not archive file. Ensure file is closed before archive.",
+        color: "red",
+      });
+    }
+  };
+
+  const canArchiveFile = (file) =>
+    isCurrentUser(file?.uploader || file?.created_by) && file?.status === "CLOSED";
+
+  const normalizeIdentifier = (value) => {
+    if (!value) return "";
+    return String(value).split("[")[0].trim().toLowerCase();
+  };
+
+  const userIdentitySet = new Set(
+    [
+      normalizeIdentifier(username),
+      normalizeIdentifier(accountUsername),
+      normalizeIdentifier(loginUsername),
+    ].filter(Boolean),
+  );
+
+  const isCurrentUser = (value) => userIdentitySet.has(normalizeIdentifier(value));
+
+  const handleBack = () => {
+    setSelectedFile(null);
+  };
+
+  const sortedFiles = [...files].sort((a, b) => {
+    if (!sortConfig.key) return 0;
+    const direction = sortConfig.direction === "asc" ? 1 : -1;
+    return a[sortConfig.key] > b[sortConfig.key] ? direction : -direction;
+  });
+
+  const filteredFiles = sortedFiles.filter((file) => {
+    const idString = generateFileId(file).toLowerCase();
+    const createdBy = (file.created_by || "").toLowerCase();
+    const subjectValue = (file.subject || "").toLowerCase();
+    const descriptionValue = (file.description || "").toLowerCase();
+    const statusValue = (file.status || "").toLowerCase();
+
+    return (
+      idString.includes(searchQuery.toLowerCase()) ||
+      createdBy.includes(searchQuery.toLowerCase()) ||
+      subjectValue.includes(searchQuery.toLowerCase()) ||
+      descriptionValue.includes(searchQuery.toLowerCase()) ||
+      statusValue.includes(searchQuery.toLowerCase()) ||
+      convertDate(file.created_at || file.received_at || file.upload_date)
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase())
+    );
+  });
+
+  const handlePageJump = (e) => {
+    if (e.key === "Enter") {
+      const pageNumber = parseInt(pageInput, 10);
+      const totalPages = Math.ceil(filteredFiles.length / itemsPerPage);
+      if (
+        Number.isNaN(pageNumber) ||
+        pageNumber < 1 ||
+        pageNumber > totalPages
+      ) {
+        setPageInput("");
+        return;
+      }
+      setCurrentPage(pageNumber);
+      setPageInput("");
+    }
+  };
+
+  const handleSort = (key) => {
+    setSortConfig((prev) => ({
+      key,
+      direction: prev.key === key && prev.direction === "asc" ? "desc" : "asc",
+    }));
+    setCurrentPage(1);
+  };
+
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = Math.min(startIndex + itemsPerPage, filteredFiles.length);
+
+  // Using e.currentTarget ensures the style is applied to the ActionIcon element
+  const handleMouseEnter = (e) => {
+    e.currentTarget.style.backgroundColor = e.currentTarget.dataset.hoverColor;
+  };
+
+  const handleMouseLeave = (e) => {
+    e.currentTarget.style.backgroundColor =
+      e.currentTarget.dataset.defaultColor;
+  };
+
+  // Archive modal functions
+  const openArchiveModal = (file) => {
+    setSelectedArchiveFile(file);
+    setShowArchiveModal(true);
+  };
+
+  const confirmArchive = () => {
+    if (selectedArchiveFile) {
+      handleArchive(selectedArchiveFile.id);
+      setShowArchiveModal(false);
+      setSelectedArchiveFile(null);
+    }
+  };
+  // Mobile card view rendering
+  const renderMobileView = () => {
+    return (
+      <Stack spacing="md">
+        {filteredFiles.length === 0 && (
+          <Center style={{ height: "200px" }}>
+            <Stack align="center" spacing="xs">
+              <Folder size={48} color={theme.colors.gray[5]} />
+              <Text c="dimmed" size="lg">
+                No files in Inbox!
+              </Text>
+              {searchQuery && (
+                <Button
+                  variant="subtle"
+                  leftIcon={<ArrowClockwise size={16} />}
+                  onClick={() => setSearchQuery("")}
+                >
+                  Clear search
+                </Button>
+              )}
+            </Stack>
+          </Center>
+        )}
+        {filteredFiles.length > 0 &&
+          filteredFiles
+            .slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
+            .map((file, index) => (
+              <Card
+                key={index}
+                shadow="sm"
+                p="md"
+                radius="md"
+                withBorder
+                style={{ position: "relative" }}
+              >
+                <Badge
+                  color="blue"
+                  variant="light"
+                  size="sm"
+                  style={{ position: "absolute", top: 10, right: 10 }}
+                >
+                  {generateFileId(file)}
+                </Badge>
+
+                <Text weight={600} size="md" mb={6}>
+                  {file.subject}
+                </Text>
+
+                <Group position="apart" mt="xs" mb="xs">
+                  <Text size="sm">
+                    <Text span weight={500}>
+                      From:
+                    </Text>{" "}
+                    {file.sent_by_user || file.created_by || "-"}
+                  </Text>
+                  <Text size="sm" color="dimmed">
+                    {file.sent_by_designation || file.current_designation || "-"}
+                  </Text>
+                </Group>
+
+                <Divider my="xs" />
+
+                <Group position="apart" mt="xs">
+                  <Text size="sm">
+                    <Text span weight={500}>
+                      Created by:
+                    </Text>{" "}
+                    {file.created_by || file.uploader || "-"}
+                  </Text>
+                  <Text size="sm" color="dimmed">
+                    {file.uploader_designation || file.current_designation || "-"}
+                  </Text>
+                  <Text size="sm" color="dimmed">
+                    {convertDate(file.upload_date)}
+                  </Text>
+                </Group>
+
+                <Group position="apart" mt="md">
+                  <Tooltip label="View File" position="top" withArrow>
+                    <Button
+                      variant="light"
+                      color="blue"
+                      size="xs"
+                      leftIcon={<Eye size="1rem" />}
+                      onClick={() => setSelectedFile(file)}
+                    >
+                      View
+                    </Button>
+                  </Tooltip>
+
+                  {isCurrentUser(file.uploader || file.created_by) && (
+                    <Tooltip
+                      label={
+                        canArchiveFile(file)
+                          ? "Archive file"
+                          : "Only file owner can archive closed files"
+                      }
+                      position="top"
+                      withArrow
+                    >
+                      <Button
+                        variant="light"
+                        color="red"
+                        size="xs"
+                        leftIcon={<Archive size="1rem" />}
+                        onClick={() => openArchiveModal(file)}
+                        disabled={!canArchiveFile(file)}
+                      >
+                        Archive
+                      </Button>
+                    </Tooltip>
+                  )}
+                </Group>
+              </Card>
+            ))}
+      </Stack>
+    );
+  };
+
+  // Desktop table view rendering
+  const renderDesktopView = () => {
+    return (
+      <ScrollArea>
+        {filteredFiles.length > 0 ? (
+          <Table
+            highlightOnHover
+            style={{
+              width: "100%",
+              borderCollapse: "collapse",
+              tableLayout: "fixed",
+              fontSize: "14px",
+              minWidth: "900px", // Ensures horizontal scroll on smaller screens
+            }}
+          >
+            <thead
+              style={{
+                position: "sticky",
+                top: 0,
+                backgroundColor: "#fff",
+                zIndex: 1,
+              }}
+            >
+              <tr style={{ backgroundColor: "#0000" }}>
+                <th style={{ padding: "6px", width: "8.5%", height: "36px" }}>
+                  Archive
+                </th>
+                {["File ID", "Sent By", "Subject", "Date", "Created By"].map(
+                  (key) => (
+                    <th
+                      key={key}
+                      onClick={() => handleSort(key)}
+                      style={{
+                        cursor: "pointer",
+                        padding: "6px",
+                        width: "15.5%",
+                        border: "1px solid #0000",
+                        alignItems: "center",
+                        gap: "5px",
+                        height: "36px",
+                      }}
+                    >
+                      {key.charAt(0).toUpperCase() + key.slice(1)}
+                      {sortConfig.key === key ? (
+                        sortConfig.direction === "asc" ? (
+                          <CaretUp size={16} />
+                        ) : (
+                          <CaretDown size={16} />
+                        )
+                      ) : (
+                        <ArrowsDownUp size={16} opacity={0.6} />
+                      )}
+                    </th>
+                  ),
+                )}
+                <th
+                  style={{
+                    padding: "6px",
+                    width: "8.5%",
+                    border: "1px solid #ddd",
+                    height: "36px",
+                  }}
+                >
+                  View File
+                </th>
+              </tr>
+            </thead>
+
+            <tbody>
+              {filteredFiles
+                .slice(
+                  (currentPage - 1) * itemsPerPage,
+                  currentPage * itemsPerPage,
+                )
+                .map((file, index) => (
+                  <tr key={index}>
+                    <td
+                      style={{
+                        padding: "9px",
+                        textAlign: "center",
+                        border: "1px solid #ddd",
+                        height: "36px",
+                      }}
+                    >
+                      <Tooltip
+                        label={
+                          canArchiveFile(file)
+                            ? "Archive file"
+                            : "Only file owner can archive closed files"
+                        }
+                        position="top"
+                        withArrow
+                      >
+                        <ActionIcon
+                          variant="light"
+                          color="blue"
+                          className="archive-icon"
+                          data-default-color="transparent"
+                          data-hover-color="#ffebee"
+                          onMouseEnter={handleMouseEnter}
+                          onMouseLeave={handleMouseLeave}
+                          onClick={() => openArchiveModal(file)}
+                          disabled={!canArchiveFile(file)}
+                        >
+                          <Archive size="1.5rem" />
+                        </ActionIcon>
+                      </Tooltip>
+                    </td>
+                    <td
+                      style={{
+                        padding: "6px",
+                        border: "1px solid #ddd",
+                        textAlign: "center",
+                        height: "36px",
+                      }}
+                    >
+                      {generateFileId(file)}
+                    </td>
+
+                    <td
+                      style={{
+                        padding: "6px",
+                        border: "1px solid #ddd",
+                        textAlign: "center",
+                        height: "36px",
+                      }}
+                    >
+                      {file.sent_by_user || file.created_by || "-"}[{file.sent_by_designation || file.current_designation || "-"}]
+                    </td>
+                    <td
+                      style={{
+                        padding: "6px",
+                        border: "1px solid #ddd",
+                        textAlign: "center",
+                        height: "36px",
+                      }}
+                    >
+                      {file.subject}
+                    </td>
+                    <td
+                      style={{
+                        padding: "6px",
+                        border: "1px solid #ddd",
+                        textAlign: "center",
+                        height: "36px",
+                      }}
+                    >
+                      {convertDate(file.created_at || file.received_at || file.upload_date)}
+                    </td>
+                    <td
+                      style={{
+                        padding: "6px",
+                        border: "1px solid #ddd",
+                        textAlign: "center",
+                        height: "36px",
+                      }}
+                    >
+                      {file.created_by || file.uploader || "-"}[{file.uploader_designation || "-"}]
+                    </td>
+                    <td
+                      style={{
+                        padding: "6px",
+                        textAlign: "center",
+                        border: "1px solid #ddd",
+                        height: "36px",
+                      }}
+                    >
+                      <Tooltip label="View File" position="top" withArrow>
+                        <ActionIcon
+                          variant="light"
+                          color="black"
+                          style={{
+                            transition: "background-color 0.3s",
+                            width: "2rem",
+                            height: "2rem",
+                          }}
+                          onClick={() => setSelectedFile(file)}
+                          onMouseEnter={(e) => {
+                            e.target.style.backgroundColor = "#E3F2FD";
+                          }}
+                          onMouseLeave={(e) => {
+                            e.target.style.backgroundColor = "transparent";
+                          }}
+                        >
+                          <Eye size="1rem" />
+                        </ActionIcon>
+                      </Tooltip>
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </Table>
+        ) : (
+          <Center style={{ height: "200px" }}>
+            <Stack align="center" spacing="xs">
+              <Folder size={48} color={theme.colors.gray[5]} />
+              <Text c="dimmed" size="lg">
+                No files in Inbox!
+              </Text>
+              {searchQuery && (
+                <Button
+                  variant="subtle"
+                  leftIcon={<ArrowClockwise size={16} />}
+                  onClick={() => setSearchQuery("")}
+                >
+                  Clear search
+                </Button>
+              )}
+            </Stack>
+          </Center>
+        )}
+      </ScrollArea>
+    );
+  };
+
+  return (
+    <Card
+      shadow="sm"
+      padding="lg"
+      radius="md"
+      withBorder
+      style={{
+        backgroundColor: "#F5F7F8",
+        width: "100%",
+        minHeight: "70vh",
+        maxHeight: "70vh",
+        display: "flex",
+        flexDirection: "column",
+        overflowY: selectedFile ? "hidden" : "auto",
+      }}
+    >
+      {!selectedFile && (
+        <Group
+          position="apart"
+          mb="md"
+          align="center"
+          style={{ flexWrap: "wrap" }}
+        >
+          <Title
+            order={2}
+            style={{
+              fontSize: "24px",
+            }}
+          >
+            Inbox
+          </Title>
+          <TextInput
+            placeholder="Search files..."
+            value={searchQuery}
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              setCurrentPage(1);
+            }}
+            style={{
+              marginBottom: isMobile ? "10px" : "0",
+              width: isMobile ? "100%" : "auto",
+            }}
+            icon={<MagnifyingGlass size={16} />}
+          />
+        </Group>
+      )}
+
+      {selectedFile ? (
+        <div style={{ height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+          <Title
+            order={3}
+            mb="md"
+            style={{
+              fontSize: isMobile ? "22px" : "26px",
+              textAlign: "center",
+              width: "100%",
+            }}
+          >
+            {selectedFile.subject}
+          </Title>
+          <View
+            onBack={handleBack}
+            fileID={selectedFile.id}
+            contextSource="inbox"
+            updateFiles={() =>
+              setFiles(files.filter((f) => f.id !== selectedFile.id))
+            }
+          />
+        </div>
+      ) : (
+        <Box
+          style={{
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            overflowY: "auto",
+            height: "100%",
+            minHeight: "300px",
+            backgroundColor: "#fff",
+            display: "flex",
+            flexDirection: "column",
+            marginBottom: 0,
+          }}
+        >
+          <div
+            style={{
+              flex: 1,
+              overflowY: "auto",
+              marginBottom: "-1px",
+              padding: isMobile ? "10px" : "0",
+            }}
+          >
+            {isMobile ? renderMobileView() : renderDesktopView()}
+          </div>
+          <Group
+            position="right"
+            style={{
+              backgroundColor: "#fff",
+              padding: "8px 16px",
+              borderTop: "1px solid #ddd",
+              marginTop: "auto",
+              minHeight: "20px",
+              display: "flex",
+              alignItems: "center",
+              height: "58px",
+              gap: "16px",
+              flexWrap: "wrap",
+              justifyContent: isMobile ? "center" : "flex-end",
+            }}
+          >
+            <Text size="sm" color="dimmed">
+              {`Showing ${filteredFiles.length > 0 ? startIndex + 1 : 0}-${endIndex} of ${filteredFiles.length} files`}
+            </Text>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "12px",
+                height: "36px",
+                marginLeft: isMobile ? "0" : "auto",
+                flexWrap: isMobile ? "wrap" : "nowrap",
+                justifyContent: isMobile ? "center" : "flex-start",
+                width: isMobile ? "100%" : "auto",
+              }}
+            >
+              <Tooltip
+                label={`Enter page number (1-${Math.ceil(filteredFiles.length / itemsPerPage)})`}
+                position="top"
+              >
+                <TextInput
+                  placeholder="Page #"
+                  value={pageInput}
+                  onChange={(e) => {
+                    setPageInput(e.target.value.replace(/[^0-9]/g, ""));
+                  }}
+                  onKeyDown={handlePageJump}
+                  style={{
+                    width: "80px",
+                    textAlign: "center",
+                  }}
+                  size="sm"
+                  type="text"
+                  maxLength={3}
+                />
+              </Tooltip>
+              <Pagination
+                total={Math.ceil(filteredFiles.length / itemsPerPage)}
+                value={currentPage}
+                onChange={(page) => {
+                  setCurrentPage(page);
+                  setPageInput("");
+                }}
+                size="sm"
+                boundaries={isMobile ? 0 : 1}
+                siblings={isMobile ? 0 : 1}
+                withEdges={!isMobile}
+              />
+            </div>
+          </Group>
+        </Box>
+      )}
+      {/* Archive Confirmation Modal */}
+      <Modal
+        opened={showArchiveModal}
+        onClose={() => setShowArchiveModal(false)}
+        title={
+          <Text align="center" weight={600} size="lg">
+            Confirm Archive
+          </Text>
+        }
+        centered
+        size={isMobile ? "xs" : "md"}
+      >
+        <Text weight={600} mb="md">
+          Are you sure you want to archive this file?
+        </Text>
+        {selectedArchiveFile && (
+          <>
+            <Text mb="ls">Subject: {selectedArchiveFile.subject}</Text>
+            <Text mb="md">File ID: {generateFileId(selectedArchiveFile)}</Text>
+          </>
+        )}
+        <Group justify="center" gap="xl" style={{ width: "100%" }}>
+          <Button
+            onClick={confirmArchive}
+            color="blue"
+            style={{ width: isMobile ? "100px" : "120px" }}
+          >
+            Confirm
+          </Button>
+          <Button
+            onClick={() => setShowArchiveModal(false)}
+            variant="outline"
+            style={{ width: isMobile ? "100px" : "120px" }}
+          >
+            Cancel
+          </Button>
+        </Group>
+      </Modal>
+    </Card>
+  );
+}
diff --git a/src/Modules/FileTracking/components/Outbox.jsx b/src/Modules/FileTracking/components/Outbox.jsx
new file mode 100644
index 000000000..aad82102f
--- /dev/null
+++ b/src/Modules/FileTracking/components/Outbox.jsx
@@ -0,0 +1,802 @@
+import { useState, useEffect } from "react";
+import {
+  Box,
+  Card,
+  Title,
+  Table,
+  ActionIcon,
+  Tooltip,
+  Group,
+  TextInput,
+  Pagination,
+  Text,
+  Badge,
+  Divider,
+  Button,
+  Stack,
+  ScrollArea,
+  useMantineTheme,
+  Center,
+  Chip,
+} from "@mantine/core";
+import {
+  Eye,
+  Archive,
+  CaretUp,
+  CaretDown,
+  ArrowsDownUp,
+  MagnifyingGlass,
+  PaperPlaneTilt,
+} from "@phosphor-icons/react";
+import { useSelector } from "react-redux";
+import { useMediaQuery } from "@mantine/hooks";
+import axios from "axios";
+import { notifications } from "@mantine/notifications";
+import { ArrowClockwise, Folder } from "@phosphor-icons/react";
+import View from "./ViewFile";
+import SendFile from "./SendFile";
+import { newArchiveRoute } from "../../../routes/filetrackingRoutes";
+import { listOutbox, listPending } from "../api";
+import { getApiErrorMessage } from "../utils/apiErrors";
+
+const STATUS_COLORS = {
+  PENDING: "yellow",
+  "IN PROGRESS": "blue",
+  ACCEPTED: "green",
+  REJECTED: "red",
+  CREATED: "gray",
+  SENT: "cyan",
+  FORWARDED: "blue",
+  APPROVED: "green",
+  RETURNED: "orange",
+  CLOSED: "violet",
+  ARCHIVED: "gray",
+};
+
+const STATUS_FILTER_OPTIONS = [
+  { value: "all", label: "All" },
+  { value: "PENDING", label: "Pending" },
+  { value: "IN PROGRESS", label: "In Progress" },
+  { value: "ACCEPTED", label: "Accepted" },
+  { value: "REJECTED", label: "Rejected" },
+];
+
+export default function Outboxfunc() {
+  const [files, setFiles] = useState([]);
+  const [statusFilter, setStatusFilter] = useState("all");
+  const token = localStorage.getItem("authToken");
+  const role = useSelector((state) => state.user.role);
+  const username = useSelector((state) => state.user.roll_no);
+  const accountUsername = useSelector((state) => state.user.username);
+  const loginUsername = useSelector((state) => state.user.loginUsername);
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: "asc" });
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageInput, setPageInput] = useState("");
+  const itemsPerPage = 7;
+  let current_module = useSelector((state) => state.module.current_module);
+  current_module = current_module.split(" ").join("").toLowerCase();
+  const theme = useMantineTheme();
+
+  // Media query for responsive design
+  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+
+  const convertDate = (date) => {
+    const d = new Date(date);
+    return d.toLocaleString();
+  };
+
+  const [selectedFile, setSelectedFile] = useState(null);
+
+  const fetchAllFiles = async () => {
+    try {
+      const [outboxData, pendingData] = await Promise.all([
+        listOutbox(token),
+        listPending(token),
+      ]);
+
+      // Combine outbox and pending files
+      const combinedFiles = [
+        ...(Array.isArray(outboxData) ? outboxData : []),
+        ...(Array.isArray(pendingData) ? pendingData : []),
+      ];
+
+      // Remove duplicates by ID
+      const uniqueFiles = Array.from(
+        new Map(combinedFiles.map((file) => [file.id, file])).values()
+      );
+
+      setFiles(uniqueFiles);
+      console.log("Combined Outbox + Pending files:", uniqueFiles);
+    } catch (err) {
+      console.error("Error fetching files:", err);
+      notifications.show({
+        title: "Could not load Outbox",
+        message: getApiErrorMessage(err, "Please refresh and try again."),
+        color: "red",
+        position: "top-center",
+      });
+    }
+  };
+
+  useEffect(() => {
+    fetchAllFiles();
+  }, [role, token, username, current_module]);
+
+  const handleBack = () => {
+    setSelectedFile(null);
+  };
+
+  const normalizeIdentifier = (value) => {
+    if (!value) return "";
+    return String(value).split("[")[0].trim().toLowerCase();
+  };
+
+  const userIdentitySet = new Set(
+    [
+      normalizeIdentifier(username),
+      normalizeIdentifier(accountUsername),
+      normalizeIdentifier(loginUsername),
+    ].filter(Boolean),
+  );
+
+  const isCurrentUser = (value) => userIdentitySet.has(normalizeIdentifier(value));
+
+  const canArchiveFile = (file) => {
+    if (typeof file?.can_archive === "boolean") {
+      const isCreatorByIdentity = isCurrentUser(file?.created_by || file?.uploader);
+      return (file.can_archive || isCreatorByIdentity) && file?.status === "CLOSED";
+    }
+
+    return isCurrentUser(file?.created_by || file?.uploader) && file?.status === "CLOSED";
+  };
+
+  const canSendFile = (file) => {
+    if (!file) return false;
+
+    if (typeof file?.can_send === "boolean") {
+      return file.can_send;
+    }
+
+    const isCreator = isCurrentUser(file?.created_by || file?.uploader);
+    const isCreatedStatus = file?.status === "CREATED";
+
+    return isCreator && isCreatedStatus;
+  };
+
+  const getSendRestrictionLabel = (file) => {
+    if (!file) return "File details unavailable";
+    if (file?.status !== "CREATED") {
+      return `File status is ${file?.status || "UNKNOWN"}. Only CREATED files can be sent`;
+    }
+    if (!canSendFile(file)) {
+      return "Only creator can send CREATED files";
+    }
+    return "Send File to Receiver";
+  };
+
+  const getStatusColor = (status) => {
+    const normalized = normalizeStatus(status);
+    return STATUS_COLORS[normalized] || STATUS_COLORS.IN_PROGRESS || "gray";
+  };
+
+  const normalizeStatus = (status) => {
+    if (!status) return "PENDING";
+    const normalized = String(status).toUpperCase().trim();
+    // Map common status variations to our filter options
+    if (normalized.includes("PENDING")) return "PENDING";
+    if (normalized.includes("FORWARD")) return "IN PROGRESS";
+    if (normalized.includes("PROGRESS")) return "IN PROGRESS";
+    if (normalized.includes("ACCEPT")) return "ACCEPTED";
+    if (normalized.includes("REJECT")) return "REJECTED";
+    return normalized;
+  };
+
+  const handleArchive = async (fileID) => {
+    try {
+      await axios.post(
+        newArchiveRoute(fileID),
+        { remarks: "Archived from outbox" },
+        {
+          withCredentials: true,
+          headers: {
+            Authorization: `Token ${token}`,
+            "Content-Type": "application/json",
+          },
+        },
+      );
+
+      setFiles((prevFiles) => prevFiles.filter((file) => file.id !== fileID));
+    } catch (err) {
+      console.error("Error archiving file:", err);
+      notifications.show({
+        title: "Archive failed",
+        message: getApiErrorMessage(err, "Could not archive file."),
+        color: "red",
+        position: "top-center",
+      });
+    }
+  };
+
+  const sortedFiles = [...files].sort((a, b) => {
+    if (!sortConfig.key) return 0;
+    const direction = sortConfig.direction === "asc" ? 1 : -1;
+    return a[sortConfig.key] > b[sortConfig.key] ? direction : -direction;
+  });
+
+  // Apply status filter
+  const statusFilteredFiles = sortedFiles.filter((file) => {
+    if (statusFilter === "all") return true;
+    const fileStatus = normalizeStatus(file.status);
+    return fileStatus === statusFilter;
+  });
+
+  // Apply search filter
+  const filteredFiles = statusFilteredFiles.filter((file) => {
+    const idString = (file.file_number || "").toLowerCase();
+    const subjectValue = (file.subject || "").toLowerCase();
+    const createdBy = (file.created_by || file.uploader || "").toLowerCase();
+    const statusValue = (file.status || "").toLowerCase();
+    const dateValue = convertDate(file.created_at || file.received_at || file.upload_date).toLowerCase();
+
+    return (
+      idString.includes(searchQuery.toLowerCase()) ||
+      subjectValue.includes(searchQuery.toLowerCase()) ||
+      createdBy.includes(searchQuery.toLowerCase()) ||
+      statusValue.includes(searchQuery.toLowerCase()) ||
+      dateValue.includes(searchQuery.toLowerCase())
+    );
+  });
+
+  const handlePageJump = (e) => {
+    if (e.key === "Enter") {
+      const pageNumber = Number.parseInt(pageInput, 10);
+      const totalPages = Math.ceil(filteredFiles.length / itemsPerPage);
+      if (
+        Number.isNaN(pageNumber) ||
+        pageNumber < 1 ||
+        pageNumber > totalPages
+      ) {
+        setPageInput("");
+        return;
+      }
+      setCurrentPage(pageNumber);
+      setPageInput("");
+    }
+  };
+
+  const handleSort = (key) => {
+    setSortConfig((prev) => ({
+      key,
+      direction: prev.key === key && prev.direction === "asc" ? "desc" : "asc",
+    }));
+    setCurrentPage(1);
+  };
+
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = Math.min(startIndex + itemsPerPage, filteredFiles.length);
+
+  // Helper function to generate file ID
+  const generateFileId = (file) => {
+    if (file?.file_number) return file.file_number;
+    if (!file || !file.upload_date || !file.id) return "Loading...";
+    const date = new Date(file.upload_date);
+    if (Number.isNaN(date.getTime())) return `FTS-#${file.id}`;
+    return `${file.branch || "FTS"}-${date.getFullYear()}-${(date.getMonth() + 1)
+      .toString()
+      .padStart(2, "0")}-#${file.id}`;
+  };
+
+  // Mobile card view rendering
+  const renderMobileView = () => {
+    return (
+      <Stack spacing="md">
+        {filteredFiles.length === 0 && (
+          <Center style={{ height: "200px" }}>
+            <Stack align="center" spacing="xs">
+              <Folder size={48} color={theme.colors.gray[5]} />
+              <Text c="dimmed" size="lg">
+                No files found in Outbox!
+              </Text>
+              {searchQuery && (
+                <Button
+                  variant="subtle"
+                  leftSection={<ArrowClockwise size={16} />}
+                  onClick={() => setSearchQuery("")}
+                >
+                  Clear search
+                </Button>
+              )}
+            </Stack>
+          </Center>
+        )}
+        {filteredFiles.length > 0 &&
+          filteredFiles
+            .slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
+            .map((file, index) => (
+              <Card
+                key={index}
+                shadow="sm"
+                p="md"
+                radius="md"
+                withBorder
+                style={{ position: "relative" }}
+              >
+                <Group position="apart" mb="xs">
+                  <Badge color="blue" variant="light" size="sm">
+                    {generateFileId(file)}
+                  </Badge>
+                  <Badge color={getStatusColor(file.status)} variant="filled" size="sm">
+                    {normalizeStatus(file.status)}
+                  </Badge>
+                </Group>
+
+                <Text weight={600} size="md" mb={6}>
+                  {file.subject}
+                </Text>
+
+                <Group position="apart" mt="xs" mb="xs">
+                  <Text size="sm">
+                    <Text span weight={500}>
+                      Status:
+                    </Text>{" "}
+                    {file.status}
+                  </Text>
+                </Group>
+
+                <Divider my="xs" />
+
+                <Group position="apart" mt="xs">
+                  <Text size="sm">
+                    <Text span weight={500}>
+                      Created by:
+                    </Text>{" "}
+                    {file.uploader}
+                  </Text>
+                  <Text size="sm" color="dimmed">
+                    {convertDate(file.upload_date)}
+                  </Text>
+                </Group>
+
+                <Group position="apart" mt="md">
+                  <Tooltip label="View File" position="top" withArrow>
+                    <Button
+                      variant="light"
+                      color="blue"
+                      size="xs"
+                      leftSection={<Eye size="1rem" />}
+                      onClick={() => setSelectedFile(file)}
+                      fullWidth
+                    >
+                      View
+                    </Button>
+                  </Tooltip>
+
+                  <Tooltip
+                    label={canArchiveFile(file) ? "Archive File" : "Only file owner can archive closed files"}
+                    position="top"
+                    withArrow
+                  >
+                    <Button
+                      variant="light"
+                      color="red"
+                      size="xs"
+                      leftSection={<Archive size="1rem" />}
+                      onClick={() => canArchiveFile(file) && handleArchive(file.id)}
+                      disabled={!canArchiveFile(file)}
+                      fullWidth
+                    >
+                      Archive
+                    </Button>
+                  </Tooltip>
+                </Group>
+              </Card>
+            ))}
+      </Stack>
+    );
+  };
+
+  // Desktop table view rendering
+  const renderDesktopView = () => {
+    return (
+      <ScrollArea>
+        {filteredFiles.length > 0 ? (
+          <Table
+            highlightOnHover
+            style={{
+              width: "100%",
+              borderCollapse: "collapse",
+              tableLayout: "fixed",
+              fontSize: "14px",
+              minWidth: "950px",
+            }}
+          >
+            <thead
+              style={{
+                position: "sticky",
+                top: 0,
+                backgroundColor: "#fff",
+                zIndex: 1,
+              }}
+            >
+              <tr style={{ backgroundColor: "#0000" }}>
+                {[
+                  { key: "id", label: "File ID" },
+                  { key: "status", label: "Status" },
+                  { key: "subject", label: "Subject" },
+                  { key: "upload_date", label: "Date" },
+                  { key: "uploader", label: "Created by" },
+                ].map(({ key, label }) => (
+                  <th
+                    key={key}
+                    onClick={() => handleSort(key)}
+                    style={{
+                      cursor: "pointer",
+                      padding: "12px",
+                      width: key === "status" ? "12%" : "17%",
+                      border: "1px solid #0000",
+                      alignItems: "center",
+                      gap: "5px",
+                      height: "36px",
+                    }}
+                  >
+                    {label}
+                    {sortConfig.key === key ? (
+                      sortConfig.direction === "asc" ? (
+                        <CaretUp size={16} />
+                      ) : (
+                        <CaretDown size={16} />
+                      )
+                    ) : (
+                      <ArrowsDownUp size={16} opacity={0.6} />
+                    )}
+                  </th>
+                ))}
+                <th
+                  style={{
+                    padding: "6px",
+                    width: "8.5%",
+                    border: "1px solid #ddd",
+                    height: "36px",
+                  }}
+                >
+                  Archive
+                </th>
+                <th
+                  style={{
+                    padding: "6px",
+                    width: "8.5%",
+                    border: "1px solid #ddd",
+                    height: "36px",
+                  }}
+                >
+                  View File
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredFiles
+                .slice(
+                  (currentPage - 1) * itemsPerPage,
+                  currentPage * itemsPerPage,
+                )
+                .map((file, index) => (
+                  <tr key={index}>
+                    <td
+                      style={{
+                        padding: "13px",
+                        border: "1px solid #ddd",
+                        textAlign: "center",
+                        height: "36px",
+                      }}
+                    >
+                      {generateFileId(file)}
+                    </td>
+
+                    <td
+                      style={{
+                        padding: "6px",
+                        border: "1px solid #ddd",
+                        textAlign: "center",
+                        height: "36px",
+                      }}
+                    >
+                      <Badge color={getStatusColor(file.status)} variant="filled" size="sm">
+                        {normalizeStatus(file.status)}
+                      </Badge>
+                    </td>
+                    <td
+                      style={{
+                        padding: "6px",
+                        border: "1px solid #ddd",
+                        textAlign: "center",
+                        height: "36px",
+                      }}
+                    >
+                      {file.subject}
+                    </td>
+                    <td
+                      style={{
+                        padding: "6px",
+                        border: "1px solid #ddd",
+                        textAlign: "center",
+                        height: "36px",
+                      }}
+                    >
+                      {convertDate(file.created_at || file.received_at || file.upload_date)}
+                    </td>
+                    <td
+                      style={{
+                        padding: "6px",
+                        border: "1px solid #ddd",
+                        textAlign: "center",
+                        height: "36px",
+                      }}
+                    >
+                      {file.created_by || file.uploader}[{file.uploader_designation || "-"}]
+                    </td>
+                    <td
+                      style={{
+                        padding: "6px",
+                        textAlign: "center",
+                        border: "1px solid #ddd",
+                        height: "36px",
+                      }}
+                    >
+                      <Tooltip
+                        label={canArchiveFile(file) ? "Archive File" : "Only file owner can archive closed files"}
+                        position="top"
+                        withArrow
+                      >
+                        <ActionIcon
+                          variant="light"
+                          color="red"
+                          style={{
+                            transition: "background-color 0.3s",
+                            width: "2rem",
+                            height: "2rem",
+                          }}
+                          onClick={() => canArchiveFile(file) && handleArchive(file.id)}
+                          disabled={!canArchiveFile(file)}
+                        >
+                          <Archive size="1rem" />
+                        </ActionIcon>
+                      </Tooltip>
+                    </td>
+                    <td
+                      style={{
+                        padding: "6px",
+                        textAlign: "center",
+                        border: "1px solid #ddd",
+                        height: "36px",
+                      }}
+                    >
+                      <Tooltip label="View File" position="top" withArrow>
+                        <ActionIcon
+                          variant="light"
+                          color="black"
+                          style={{
+                            transition: "background-color 0.3s",
+                            width: "2rem",
+                            height: "2rem",
+                          }}
+                          onClick={() => setSelectedFile(file)}
+                          onMouseEnter={(e) => {
+                            e.target.style.backgroundColor = "#E3F2FD";
+                          }}
+                          onMouseLeave={(e) => {
+                            e.target.style.backgroundColor = "transparent";
+                          }}
+                        >
+                          <Eye size="1rem" />
+                        </ActionIcon>
+                      </Tooltip>
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </Table>
+        ) : (
+          <Center style={{ height: "200px" }}>
+            <Stack align="center" spacing="xs">
+              <Folder size={48} color={theme.colors.gray[5]} />
+              <Text c="dimmed" size="lg">
+                No files found in Outbox!
+              </Text>
+              {searchQuery && (
+                <Button
+                  variant="subtle"
+                  leftSection={<ArrowClockwise size={16} />}
+                  onClick={() => setSearchQuery("")}
+                >
+                  Clear search
+                </Button>
+              )}
+            </Stack>
+          </Center>
+        )}
+      </ScrollArea>
+    );
+  };
+
+  return (
+    <Card
+      shadow="sm"
+      padding="lg"
+      radius="md"
+      withBorder
+      style={{
+        backgroundColor: "#F5F7F8",
+        width: "100%",
+        minHeight: "70vh",
+        maxHeight: "70vh",
+        display: "flex",
+        flexDirection: "column",
+        overflowY: selectedFile ? "hidden" : "auto",
+      }}
+    >
+      {!selectedFile && (
+        <>
+          <Group
+            position="apart"
+            mb="md"
+            align="center"
+            style={{ flexWrap: "wrap" }}
+          >
+            <Title
+              order={2}
+              style={{
+                fontSize: "24px",
+              }}
+            >
+              Outbox (Sent Files)
+            </Title>
+            <TextInput
+              placeholder="Search files..."
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                setCurrentPage(1);
+              }}
+              style={{
+                marginBottom: isMobile ? "10px" : "0",
+                width: isMobile ? "100%" : "auto",
+              }}
+              icon={<MagnifyingGlass size={16} />}
+            />
+          </Group>
+
+          {/* Status Filter Chips */}
+          <Group spacing="xs" mb="md" style={{ flexWrap: "wrap" }}>
+            <Text weight={500} size="sm">
+              Status:
+            </Text>
+            {STATUS_FILTER_OPTIONS.map((option) => (
+              <Chip
+                key={option.value}
+                checked={statusFilter === option.value}
+                onChange={() => {
+                  setStatusFilter(option.value);
+                  setCurrentPage(1);
+                }}
+                color={option.value === "all" ? "blue" : getStatusColor(option.value)}
+                variant="filled"
+                size="sm"
+              >
+                {option.label}
+              </Chip>
+            ))}
+          </Group>
+        </>
+      )}
+
+      {selectedFile ? (
+        <div style={{ height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+          <Title
+            order={3}
+            mb="md"
+            style={{
+              fontSize: isMobile ? "22px" : "26px",
+              textAlign: "center",
+              width: "100%",
+            }}
+          >
+            {selectedFile.subject}
+          </Title>
+          <View
+            onBack={handleBack}
+            fileID={selectedFile.id}
+            updateFiles={fetchAllFiles}
+          />
+        </div>
+      ) : (
+        <Box
+          style={{
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            overflowY: "auto",
+            height: "100%",
+            minHeight: "300px",
+            backgroundColor: "#fff",
+            display: "flex",
+            flexDirection: "column",
+            marginBottom: 0,
+          }}
+        >
+          <div
+            style={{
+              flex: 1,
+              overflowY: "auto",
+              marginBottom: "-1px",
+              padding: isMobile ? "10px" : "0",
+            }}
+          >
+            {isMobile ? renderMobileView() : renderDesktopView()}
+          </div>
+          <Group
+            position="right"
+            style={{
+              backgroundColor: "#fff",
+              padding: "8px 16px",
+              borderTop: "1px solid #ddd",
+              marginTop: "auto",
+              minHeight: "60px",
+              display: "flex",
+              alignItems: "center",
+              height: "35px",
+              gap: "16px",
+              flexWrap: "wrap",
+              justifyContent: isMobile ? "center" : "flex-end",
+            }}
+          >
+            <Text size="sm" color="dimmed">
+              {`Showing ${filteredFiles.length > 0 ? startIndex + 1 : 0}-${endIndex} of ${filteredFiles.length} files`}
+            </Text>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "12px",
+                height: "36px",
+                marginLeft: isMobile ? "0" : "auto",
+                flexWrap: isMobile ? "wrap" : "nowrap",
+                justifyContent: isMobile ? "center" : "flex-start",
+                width: isMobile ? "100%" : "auto",
+              }}
+            >
+              <Tooltip
+                label={`Enter page number (1-${Math.ceil(filteredFiles.length / itemsPerPage)})`}
+                position="top"
+              >
+                <TextInput
+                  placeholder="Page #"
+                  value={pageInput}
+                  onChange={(e) => {
+                    setPageInput(e.target.value.replace(/[^0-9]/g, ""));
+                  }}
+                  onKeyDown={handlePageJump}
+                  style={{
+                    width: "80px",
+                    textAlign: "center",
+                  }}
+                  size="sm"
+                  type="text"
+                  maxLength={3}
+                />
+              </Tooltip>
+              <Pagination
+                total={Math.ceil(filteredFiles.length / itemsPerPage) || 1}
+                value={currentPage}
+                size="sm"
+                onChange={setCurrentPage}
+                boundaries={isMobile ? 0 : 1}
+                siblings={isMobile ? 0 : 1}
+                withEdges={!isMobile}
+              />
+            </div>
+          </Group>
+        </Box>
+      )}
+    </Card>
+  );
+}
diff --git a/src/Modules/FileTracking/components/OutboxEnhanced.jsx b/src/Modules/FileTracking/components/OutboxEnhanced.jsx
new file mode 100644
index 000000000..b5324c342
--- /dev/null
+++ b/src/Modules/FileTracking/components/OutboxEnhanced.jsx
@@ -0,0 +1,800 @@
+import { useState, useEffect } from "react";
+import {
+    Box,
+    Card,
+    Title,
+    Table,
+    ActionIcon,
+    Tooltip,
+    Group,
+    TextInput,
+    Pagination,
+    Text,
+    Badge,
+    Divider,
+    Button,
+    Stack,
+    ScrollArea,
+    useMantineTheme,
+    Center,
+    Chip,
+} from "@mantine/core";
+import {
+    Eye,
+    Archive,
+    CaretUp,
+    CaretDown,
+    ArrowsDownUp,
+    MagnifyingGlass,
+    PaperPlaneTilt,
+} from "@phosphor-icons/react";
+import { useSelector } from "react-redux";
+import { useMediaQuery } from "@mantine/hooks";
+import axios from "axios";
+import { notifications } from "@mantine/notifications";
+import { ArrowClockwise, Folder } from "@phosphor-icons/react";
+import View from "./ViewFile";
+import SendFile from "./SendFile";
+import { newArchiveRoute } from "../../../routes/filetrackingRoutes";
+import { listOutbox, listPending } from "../api";
+import { getApiErrorMessage } from "../utils/apiErrors";
+
+const STATUS_COLORS = {
+    PENDING: "yellow",
+    "IN PROGRESS": "blue",
+    ACCEPTED: "green",
+    REJECTED: "red",
+    CREATED: "gray",
+    SENT: "cyan",
+    FORWARDED: "blue",
+    APPROVED: "green",
+    RETURNED: "orange",
+    CLOSED: "violet",
+    ARCHIVED: "gray",
+};
+
+const STATUS_FILTER_OPTIONS = [
+    { value: "all", label: "All" },
+    { value: "PENDING", label: "Pending" },
+    { value: "IN PROGRESS", label: "In Progress" },
+    { value: "ACCEPTED", label: "Accepted" },
+    { value: "REJECTED", label: "Rejected" },
+];
+
+export default function Outboxfunc() {
+    const [files, setFiles] = useState([]);
+    const [statusFilter, setStatusFilter] = useState("all");
+    const token = localStorage.getItem("authToken");
+    const role = useSelector((state) => state.user.role);
+    const username = useSelector((state) => state.user.roll_no);
+    const accountUsername = useSelector((state) => state.user.username);
+    const loginUsername = useSelector((state) => state.user.loginUsername);
+    const [sortConfig, setSortConfig] = useState({ key: null, direction: "asc" });
+    const [searchQuery, setSearchQuery] = useState("");
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageInput, setPageInput] = useState("");
+    const itemsPerPage = 7;
+    let current_module = useSelector((state) => state.module.current_module);
+    current_module = current_module.split(" ").join("").toLowerCase();
+    const theme = useMantineTheme();
+
+    // Media query for responsive design
+    const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+
+    const convertDate = (date) => {
+        const d = new Date(date);
+        return d.toLocaleString();
+    };
+
+    const [selectedFile, setSelectedFile] = useState(null);
+
+    const fetchAllFiles = async () => {
+        try {
+            const [outboxData, pendingData] = await Promise.all([
+                listOutbox(token),
+                listPending(token),
+            ]);
+
+            // Combine outbox and pending files
+            const combinedFiles = [
+                ...(Array.isArray(outboxData) ? outboxData : []),
+                ...(Array.isArray(pendingData) ? pendingData : []),
+            ];
+
+            // Remove duplicates by ID
+            const uniqueFiles = Array.from(
+                new Map(combinedFiles.map((file) => [file.id, file])).values()
+            );
+
+            setFiles(uniqueFiles);
+            console.log("Combined Outbox + Pending files:", uniqueFiles);
+        } catch (err) {
+            console.error("Error fetching files:", err);
+            notifications.show({
+                title: "Could not load Outbox",
+                message: getApiErrorMessage(err, "Please refresh and try again."),
+                color: "red",
+                position: "top-center",
+            });
+        }
+    };
+
+    useEffect(() => {
+        fetchAllFiles();
+    }, [role, token, username, current_module]);
+
+    const handleBack = () => {
+        setSelectedFile(null);
+    };
+
+    const normalizeIdentifier = (value) => {
+        if (!value) return "";
+        return String(value).split("[")[0].trim().toLowerCase();
+    };
+
+    const userIdentitySet = new Set(
+        [
+            normalizeIdentifier(username),
+            normalizeIdentifier(accountUsername),
+            normalizeIdentifier(loginUsername),
+        ].filter(Boolean),
+    );
+
+    const isCurrentUser = (value) => userIdentitySet.has(normalizeIdentifier(value));
+
+    const canArchiveFile = (file) => {
+        if (typeof file?.can_archive === "boolean") {
+            const isCreatorByIdentity = isCurrentUser(file?.created_by || file?.uploader);
+            return (file.can_archive || isCreatorByIdentity) && file?.status === "CLOSED";
+        }
+
+        return isCurrentUser(file?.created_by || file?.uploader) && file?.status === "CLOSED";
+    };
+
+    const canSendFile = (file) => {
+        if (!file) return false;
+
+        if (typeof file?.can_send === "boolean") {
+            return file.can_send;
+        }
+
+        const isCreator = isCurrentUser(file?.created_by || file?.uploader);
+        const isCreatedStatus = file?.status === "CREATED";
+
+        return isCreator && isCreatedStatus;
+    };
+
+    const getSendRestrictionLabel = (file) => {
+        if (!file) return "File details unavailable";
+        if (file?.status !== "CREATED") {
+            return `File status is ${file?.status || "UNKNOWN"}. Only CREATED files can be sent`;
+        }
+        if (!canSendFile(file)) {
+            return "Only creator can send CREATED files";
+        }
+        return "Send File to Receiver";
+    };
+
+    const getStatusColor = (status) => {
+        return STATUS_COLORS[status] || "gray";
+    };
+
+    const normalizeStatus = (status) => {
+        if (!status) return "PENDING";
+        const normalized = String(status).toUpperCase().trim();
+        // Map common status variations to our filter options
+        if (normalized.includes("PENDING")) return "PENDING";
+        if (normalized.includes("PROGRESS")) return "IN PROGRESS";
+        if (normalized.includes("ACCEPT")) return "ACCEPTED";
+        if (normalized.includes("REJECT")) return "REJECTED";
+        return normalized;
+    };
+
+    const handleArchive = async (fileID) => {
+        try {
+            await axios.post(
+                newArchiveRoute(fileID),
+                { remarks: "Archived from outbox" },
+                {
+                    withCredentials: true,
+                    headers: {
+                        Authorization: `Token ${token}`,
+                        "Content-Type": "application/json",
+                    },
+                },
+            );
+
+            setFiles((prevFiles) => prevFiles.filter((file) => file.id !== fileID));
+        } catch (err) {
+            console.error("Error archiving file:", err);
+            notifications.show({
+                title: "Archive failed",
+                message: getApiErrorMessage(err, "Could not archive file."),
+                color: "red",
+                position: "top-center",
+            });
+        }
+    };
+
+    const sortedFiles = [...files].sort((a, b) => {
+        if (!sortConfig.key) return 0;
+        const direction = sortConfig.direction === "asc" ? 1 : -1;
+        return a[sortConfig.key] > b[sortConfig.key] ? direction : -direction;
+    });
+
+    // Apply status filter
+    const statusFilteredFiles = sortedFiles.filter((file) => {
+        if (statusFilter === "all") return true;
+        const fileStatus = normalizeStatus(file.status);
+        return fileStatus === statusFilter;
+    });
+
+    // Apply search filter
+    const filteredFiles = statusFilteredFiles.filter((file) => {
+        const idString = (file.file_number || "").toLowerCase();
+        const subjectValue = (file.subject || "").toLowerCase();
+        const createdBy = (file.created_by || file.uploader || "").toLowerCase();
+        const statusValue = (file.status || "").toLowerCase();
+        const dateValue = convertDate(file.created_at || file.received_at || file.upload_date).toLowerCase();
+
+        return (
+            idString.includes(searchQuery.toLowerCase()) ||
+            subjectValue.includes(searchQuery.toLowerCase()) ||
+            createdBy.includes(searchQuery.toLowerCase()) ||
+            statusValue.includes(searchQuery.toLowerCase()) ||
+            dateValue.includes(searchQuery.toLowerCase())
+        );
+    });
+
+    const handlePageJump = (e) => {
+        if (e.key === "Enter") {
+            const pageNumber = Number.parseInt(pageInput, 10);
+            const totalPages = Math.ceil(filteredFiles.length / itemsPerPage);
+            if (
+                Number.isNaN(pageNumber) ||
+                pageNumber < 1 ||
+                pageNumber > totalPages
+            ) {
+                setPageInput("");
+                return;
+            }
+            setCurrentPage(pageNumber);
+            setPageInput("");
+        }
+    };
+
+    const handleSort = (key) => {
+        setSortConfig((prev) => ({
+            key,
+            direction: prev.key === key && prev.direction === "asc" ? "desc" : "asc",
+        }));
+        setCurrentPage(1);
+    };
+
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = Math.min(startIndex + itemsPerPage, filteredFiles.length);
+
+    // Helper function to generate file ID
+    const generateFileId = (file) => {
+        if (file?.file_number) return file.file_number;
+        if (!file || !file.upload_date || !file.id) return "Loading...";
+        const date = new Date(file.upload_date);
+        if (Number.isNaN(date.getTime())) return `FTS-#${file.id}`;
+        return `${file.branch || "FTS"}-${date.getFullYear()}-${(date.getMonth() + 1)
+            .toString()
+            .padStart(2, "0")}-#${file.id}`;
+    };
+
+    // Mobile card view rendering
+    const renderMobileView = () => {
+        return (
+            <Stack spacing="md">
+                {filteredFiles.length === 0 && (
+                    <Center style={{ height: "200px" }}>
+                        <Stack align="center" spacing="xs">
+                            <Folder size={48} color={theme.colors.gray[5]} />
+                            <Text c="dimmed" size="lg">
+                                No files found in Outbox!
+                            </Text>
+                            {searchQuery && (
+                                <Button
+                                    variant="subtle"
+                                    leftSection={<ArrowClockwise size={16} />}
+                                    onClick={() => setSearchQuery("")}
+                                >
+                                    Clear search
+                                </Button>
+                            )}
+                        </Stack>
+                    </Center>
+                )}
+                {filteredFiles.length > 0 &&
+                    filteredFiles
+                        .slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
+                        .map((file, index) => (
+                            <Card
+                                key={index}
+                                shadow="sm"
+                                p="md"
+                                radius="md"
+                                withBorder
+                                style={{ position: "relative" }}
+                            >
+                                <Group position="apart" mb="xs">
+                                    <Badge color="blue" variant="light" size="sm">
+                                        {generateFileId(file)}
+                                    </Badge>
+                                    <Badge color={getStatusColor(file.status)} variant="filled" size="sm">
+                                        {normalizeStatus(file.status)}
+                                    </Badge>
+                                </Group>
+
+                                <Text weight={600} size="md" mb={6}>
+                                    {file.subject}
+                                </Text>
+
+                                <Group position="apart" mt="xs" mb="xs">
+                                    <Text size="sm">
+                                        <Text span weight={500}>
+                                            Status:
+                                        </Text>{" "}
+                                        {file.status}
+                                    </Text>
+                                </Group>
+
+                                <Divider my="xs" />
+
+                                <Group position="apart" mt="xs">
+                                    <Text size="sm">
+                                        <Text span weight={500}>
+                                            Created by:
+                                        </Text>{" "}
+                                        {file.uploader}
+                                    </Text>
+                                    <Text size="sm" color="dimmed">
+                                        {convertDate(file.upload_date)}
+                                    </Text>
+                                </Group>
+
+                                <Group position="apart" mt="md">
+                                    <Tooltip label="View File" position="top" withArrow>
+                                        <Button
+                                            variant="light"
+                                            color="blue"
+                                            size="xs"
+                                            leftSection={<Eye size="1rem" />}
+                                            onClick={() => setSelectedFile(file)}
+                                            fullWidth
+                                        >
+                                            View
+                                        </Button>
+                                    </Tooltip>
+
+                                    <Tooltip
+                                        label={canArchiveFile(file) ? "Archive File" : "Only file owner can archive closed files"}
+                                        position="top"
+                                        withArrow
+                                    >
+                                        <Button
+                                            variant="light"
+                                            color="red"
+                                            size="xs"
+                                            leftSection={<Archive size="1rem" />}
+                                            onClick={() => canArchiveFile(file) && handleArchive(file.id)}
+                                            disabled={!canArchiveFile(file)}
+                                            fullWidth
+                                        >
+                                            Archive
+                                        </Button>
+                                    </Tooltip>
+                                </Group>
+                            </Card>
+                        ))}
+            </Stack>
+        );
+    };
+
+    // Desktop table view rendering
+    const renderDesktopView = () => {
+        return (
+            <ScrollArea>
+                {filteredFiles.length > 0 ? (
+                    <Table
+                        highlightOnHover
+                        style={{
+                            width: "100%",
+                            borderCollapse: "collapse",
+                            tableLayout: "fixed",
+                            fontSize: "14px",
+                            minWidth: "950px",
+                        }}
+                    >
+                        <thead
+                            style={{
+                                position: "sticky",
+                                top: 0,
+                                backgroundColor: "#fff",
+                                zIndex: 1,
+                            }}
+                        >
+                            <tr style={{ backgroundColor: "#0000" }}>
+                                {[
+                                    { key: "id", label: "File ID" },
+                                    { key: "status", label: "Status" },
+                                    { key: "subject", label: "Subject" },
+                                    { key: "upload_date", label: "Date" },
+                                    { key: "uploader", label: "Created by" },
+                                ].map(({ key, label }) => (
+                                    <th
+                                        key={key}
+                                        onClick={() => handleSort(key)}
+                                        style={{
+                                            cursor: "pointer",
+                                            padding: "12px",
+                                            width: key === "status" ? "12%" : "17%",
+                                            border: "1px solid #0000",
+                                            alignItems: "center",
+                                            gap: "5px",
+                                            height: "36px",
+                                        }}
+                                    >
+                                        {label}
+                                        {sortConfig.key === key ? (
+                                            sortConfig.direction === "asc" ? (
+                                                <CaretUp size={16} />
+                                            ) : (
+                                                <CaretDown size={16} />
+                                            )
+                                        ) : (
+                                            <ArrowsDownUp size={16} opacity={0.6} />
+                                        )}
+                                    </th>
+                                ))}
+                                <th
+                                    style={{
+                                        padding: "6px",
+                                        width: "8.5%",
+                                        border: "1px solid #ddd",
+                                        height: "36px",
+                                    }}
+                                >
+                                    Archive
+                                </th>
+                                <th
+                                    style={{
+                                        padding: "6px",
+                                        width: "8.5%",
+                                        border: "1px solid #ddd",
+                                        height: "36px",
+                                    }}
+                                >
+                                    View File
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {filteredFiles
+                                .slice(
+                                    (currentPage - 1) * itemsPerPage,
+                                    currentPage * itemsPerPage,
+                                )
+                                .map((file, index) => (
+                                    <tr key={index}>
+                                        <td
+                                            style={{
+                                                padding: "13px",
+                                                border: "1px solid #ddd",
+                                                textAlign: "center",
+                                                height: "36px",
+                                            }}
+                                        >
+                                            {generateFileId(file)}
+                                        </td>
+
+                                        <td
+                                            style={{
+                                                padding: "6px",
+                                                border: "1px solid #ddd",
+                                                textAlign: "center",
+                                                height: "36px",
+                                            }}
+                                        >
+                                            <Badge color={getStatusColor(file.status)} variant="filled" size="sm">
+                                                {normalizeStatus(file.status)}
+                                            </Badge>
+                                        </td>
+                                        <td
+                                            style={{
+                                                padding: "6px",
+                                                border: "1px solid #ddd",
+                                                textAlign: "center",
+                                                height: "36px",
+                                            }}
+                                        >
+                                            {file.subject}
+                                        </td>
+                                        <td
+                                            style={{
+                                                padding: "6px",
+                                                border: "1px solid #ddd",
+                                                textAlign: "center",
+                                                height: "36px",
+                                            }}
+                                        >
+                                            {convertDate(file.created_at || file.received_at || file.upload_date)}
+                                        </td>
+                                        <td
+                                            style={{
+                                                padding: "6px",
+                                                border: "1px solid #ddd",
+                                                textAlign: "center",
+                                                height: "36px",
+                                            }}
+                                        >
+                                            {file.created_by || file.uploader}[{file.uploader_designation || "-"}]
+                                        </td>
+                                        <td
+                                            style={{
+                                                padding: "6px",
+                                                textAlign: "center",
+                                                border: "1px solid #ddd",
+                                                height: "36px",
+                                            }}
+                                        >
+                                            <Tooltip
+                                                label={canArchiveFile(file) ? "Archive File" : "Only file owner can archive closed files"}
+                                                position="top"
+                                                withArrow
+                                            >
+                                                <ActionIcon
+                                                    variant="light"
+                                                    color="red"
+                                                    style={{
+                                                        transition: "background-color 0.3s",
+                                                        width: "2rem",
+                                                        height: "2rem",
+                                                    }}
+                                                    onClick={() => canArchiveFile(file) && handleArchive(file.id)}
+                                                    disabled={!canArchiveFile(file)}
+                                                >
+                                                    <Archive size="1rem" />
+                                                </ActionIcon>
+                                            </Tooltip>
+                                        </td>
+                                        <td
+                                            style={{
+                                                padding: "6px",
+                                                textAlign: "center",
+                                                border: "1px solid #ddd",
+                                                height: "36px",
+                                            }}
+                                        >
+                                            <Tooltip label="View File" position="top" withArrow>
+                                                <ActionIcon
+                                                    variant="light"
+                                                    color="black"
+                                                    style={{
+                                                        transition: "background-color 0.3s",
+                                                        width: "2rem",
+                                                        height: "2rem",
+                                                    }}
+                                                    onClick={() => setSelectedFile(file)}
+                                                    onMouseEnter={(e) => {
+                                                        e.target.style.backgroundColor = "#E3F2FD";
+                                                    }}
+                                                    onMouseLeave={(e) => {
+                                                        e.target.style.backgroundColor = "transparent";
+                                                    }}
+                                                >
+                                                    <Eye size="1rem" />
+                                                </ActionIcon>
+                                            </Tooltip>
+                                        </td>
+                                    </tr>
+                                ))}
+                        </tbody>
+                    </Table>
+                ) : (
+                    <Center style={{ height: "200px" }}>
+                        <Stack align="center" spacing="xs">
+                            <Folder size={48} color={theme.colors.gray[5]} />
+                            <Text c="dimmed" size="lg">
+                                No files found in Outbox!
+                            </Text>
+                            {searchQuery && (
+                                <Button
+                                    variant="subtle"
+                                    leftSection={<ArrowClockwise size={16} />}
+                                    onClick={() => setSearchQuery("")}
+                                >
+                                    Clear search
+                                </Button>
+                            )}
+                        </Stack>
+                    </Center>
+                )}
+            </ScrollArea>
+        );
+    };
+
+    return (
+        <Card
+            shadow="sm"
+            padding="lg"
+            radius="md"
+            withBorder
+            style={{
+                backgroundColor: "#F5F7F8",
+                width: "100%",
+                minHeight: "70vh",
+                maxHeight: "70vh",
+                display: "flex",
+                flexDirection: "column",
+                overflowY: "auto",
+            }}
+        >
+            {!selectedFile && (
+                <>
+                    <Group
+                        position="apart"
+                        mb="md"
+                        align="center"
+                        style={{ flexWrap: "wrap" }}
+                    >
+                        <Title
+                            order={2}
+                            style={{
+                                fontSize: "24px",
+                            }}
+                        >
+                            Outbox (Sent Files)
+                        </Title>
+                        <TextInput
+                            placeholder="Search files..."
+                            value={searchQuery}
+                            onChange={(e) => {
+                                setSearchQuery(e.target.value);
+                                setCurrentPage(1);
+                            }}
+                            style={{
+                                marginBottom: isMobile ? "10px" : "0",
+                                width: isMobile ? "100%" : "auto",
+                            }}
+                            icon={<MagnifyingGlass size={16} />}
+                        />
+                    </Group>
+
+                    {/* Status Filter Chips */}
+                    <Group spacing="xs" mb="md" style={{ flexWrap: "wrap" }}>
+                        <Text weight={500} size="sm">
+                            Status:
+                        </Text>
+                        {STATUS_FILTER_OPTIONS.map((option) => (
+                            <Chip
+                                key={option.value}
+                                checked={statusFilter === option.value}
+                                onChange={() => {
+                                    setStatusFilter(option.value);
+                                    setCurrentPage(1);
+                                }}
+                                color={option.value === "all" ? "blue" : getStatusColor(option.value)}
+                                variant="filled"
+                                size="sm"
+                            >
+                                {option.label}
+                            </Chip>
+                        ))}
+                    </Group>
+                </>
+            )}
+
+            {selectedFile ? (
+                <div style={{ overflowY: "auto", height: "100%" }}>
+                    <Title
+                        order={3}
+                        mb="md"
+                        style={{
+                            fontSize: isMobile ? "22px" : "26px",
+                            textAlign: "center",
+                            width: "100%",
+                        }}
+                    >
+                        {selectedFile.subject}
+                    </Title>
+                    <View
+                        onBack={handleBack}
+                        fileID={selectedFile.id}
+                        updateFiles={fetchAllFiles}
+                    />
+                </div>
+            ) : (
+                <Box
+                    style={{
+                        border: "1px solid #ddd",
+                        borderRadius: "8px",
+                        overflowY: "auto",
+                        height: "100%",
+                        minHeight: "300px",
+                        backgroundColor: "#fff",
+                        display: "flex",
+                        flexDirection: "column",
+                        marginBottom: 0,
+                    }}
+                >
+                    <div
+                        style={{
+                            flex: 1,
+                            overflowY: "auto",
+                            marginBottom: "-1px",
+                            padding: isMobile ? "10px" : "0",
+                        }}
+                    >
+                        {isMobile ? renderMobileView() : renderDesktopView()}
+                    </div>
+                    <Group
+                        position="right"
+                        style={{
+                            backgroundColor: "#fff",
+                            padding: "8px 16px",
+                            borderTop: "1px solid #ddd",
+                            marginTop: "auto",
+                            minHeight: "60px",
+                            display: "flex",
+                            alignItems: "center",
+                            height: "35px",
+                            gap: "16px",
+                            flexWrap: "wrap",
+                            justifyContent: isMobile ? "center" : "flex-end",
+                        }}
+                    >
+                        <Text size="sm" color="dimmed">
+                            {`Showing ${filteredFiles.length > 0 ? startIndex + 1 : 0}-${endIndex} of ${filteredFiles.length} files`}
+                        </Text>
+                        <div
+                            style={{
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "12px",
+                                height: "36px",
+                                marginLeft: isMobile ? "0" : "auto",
+                                flexWrap: isMobile ? "wrap" : "nowrap",
+                                justifyContent: isMobile ? "center" : "flex-start",
+                                width: isMobile ? "100%" : "auto",
+                            }}
+                        >
+                            <Tooltip
+                                label={`Enter page number (1-${Math.ceil(filteredFiles.length / itemsPerPage)})`}
+                                position="top"
+                            >
+                                <TextInput
+                                    placeholder="Page #"
+                                    value={pageInput}
+                                    onChange={(e) => {
+                                        setPageInput(e.target.value.replace(/[^0-9]/g, ""));
+                                    }}
+                                    onKeyDown={handlePageJump}
+                                    style={{
+                                        width: "80px",
+                                        textAlign: "center",
+                                    }}
+                                    size="sm"
+                                    type="text"
+                                    maxLength={3}
+                                />
+                            </Tooltip>
+                            <Pagination
+                                total={Math.ceil(filteredFiles.length / itemsPerPage) || 1}
+                                value={currentPage}
+                                size="sm"
+                                onChange={setCurrentPage}
+                                boundaries={isMobile ? 0 : 1}
+                                siblings={isMobile ? 0 : 1}
+                                withEdges={!isMobile}
+                            />
+                        </div>
+                    </Group>
+                </Box>
+            )}
+        </Card>
+    );
+}
diff --git a/src/Modules/FileTracking/components/Pending.jsx b/src/Modules/FileTracking/components/Pending.jsx
new file mode 100644
index 000000000..486f26bba
--- /dev/null
+++ b/src/Modules/FileTracking/components/Pending.jsx
@@ -0,0 +1,423 @@
+import { useState, useEffect } from "react";
+import {
+    Box,
+    Card,
+    Title,
+    Table,
+    ActionIcon,
+    Tooltip,
+    Group,
+    Text,
+    Button,
+    Pagination,
+    Stack,
+    Badge,
+    Divider,
+    useMantineTheme,
+    Center,
+    TextInput,
+} from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import {
+    Eye,
+    CaretUp,
+    CaretDown,
+    ArrowsDownUp,
+    MagnifyingGlass,
+    ArrowClockwise,
+    Folder,
+} from "@phosphor-icons/react";
+import { useSelector } from "react-redux";
+import axios from "axios";
+import { notifications } from "@mantine/notifications";
+import View from "./ViewFile";
+import { newPendingRoute } from "../../../routes/filetrackingRoutes";
+import { getApiErrorMessage } from "../utils/apiErrors";
+
+export default function Pending() {
+    const [files, setFiles] = useState([]);
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const token = localStorage.getItem("authToken");
+    const role = useSelector((state) => state.user.role);
+    const username = useSelector((state) => state.user.roll_no);
+    const [sortConfig, setSortConfig] = useState({ key: null, direction: "asc" });
+    const [searchQuery, setSearchQuery] = useState("");
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageInput, setPageInput] = useState("");
+    const itemsPerPage = 7;
+    const theme = useMantineTheme();
+    const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+
+    // Helper function to convert dates
+    const convertDate = (date) => {
+        const d = new Date(date);
+        return d.toLocaleString();
+    };
+
+    // Helper function to generate file ID
+    const generateFileId = (file) => {
+        if (file?.file_number) return file.file_number;
+        if (!file || !file.upload_date || !file.id) return "Loading...";
+        return `${file.branch || "FTS"}-${new Date(file.upload_date).getFullYear()}-${(
+            new Date(file.upload_date).getMonth() + 1
+        )
+            .toString()
+            .padStart(2, "0")}-#${file.id}`;
+    };
+
+    // Fetch pending files on component mount
+    useEffect(() => {
+        const getPendingFiles = async () => {
+            setLoading(true);
+            try {
+                const response = await axios.get(`${newPendingRoute}`, {
+                    withCredentials: true,
+                    headers: {
+                        Authorization: `Token ${token}`,
+                    },
+                });
+                setFiles(response.data);
+            } catch (err) {
+                console.error("Error fetching pending files:", err);
+                notifications.show({
+                    title: "Could not load Pending files",
+                    message: getApiErrorMessage(err, "Please refresh and try again."),
+                    color: "red",
+                });
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        getPendingFiles();
+    }, [token]);
+
+    const handleSort = (key) => {
+        setSortConfig((prev) => ({
+            key,
+            direction: prev.key === key && prev.direction === "asc" ? "desc" : "asc",
+        }));
+        setCurrentPage(1);
+    };
+
+    const sortedFiles = [...files].sort((a, b) => {
+        if (!sortConfig.key) return 0;
+        const direction = sortConfig.direction === "asc" ? 1 : -1;
+        return a[sortConfig.key] > b[sortConfig.key] ? direction : -direction;
+    });
+
+    const filteredFiles = sortedFiles.filter((file) => {
+        const idString = generateFileId(file).toLowerCase();
+        const createdBy = (file.created_by || "").toLowerCase();
+        const subjectValue = (file.subject || "").toLowerCase();
+        const priorityValue = (file.priority || "").toLowerCase();
+
+        return (
+            idString.includes(searchQuery.toLowerCase()) ||
+            createdBy.includes(searchQuery.toLowerCase()) ||
+            subjectValue.includes(searchQuery.toLowerCase()) ||
+            priorityValue.includes(searchQuery.toLowerCase())
+        );
+    });
+
+    const handlePageJump = (e) => {
+        if (e.key === "Enter") {
+            const pageNumber = parseInt(pageInput, 10);
+            const totalPages = Math.ceil(filteredFiles.length / itemsPerPage);
+            if (
+                Number.isNaN(pageNumber) ||
+                pageNumber < 1 ||
+                pageNumber > totalPages
+            ) {
+                setPageInput("");
+                return;
+            }
+            setCurrentPage(pageNumber);
+            setPageInput("");
+        }
+    };
+
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = Math.min(startIndex + itemsPerPage, filteredFiles.length);
+
+    const handleViewFile = (file) => {
+        setSelectedFile(file);
+    };
+
+    const handleBack = () => {
+        setSelectedFile(null);
+    };
+
+    if (selectedFile) {
+        return (
+            <View
+                fileID={selectedFile.id}
+                onBack={handleBack}
+                contextSource="pending"
+                updateFiles={() => { }}
+            />
+        );
+    }
+
+    // Mobile card view rendering
+    const renderMobileView = () => {
+        if (loading) {
+            return (
+                <Center style={{ height: "200px" }}>
+                    <Text>Loading pending files...</Text>
+                </Center>
+            );
+        }
+
+        if (filteredFiles.length === 0) {
+            return (
+                <Center style={{ height: "200px" }}>
+                    <Stack align="center" spacing="xs">
+                        <Folder size={48} color={theme.colors.gray[5]} />
+                        <Text c="dimmed" size="lg">
+                            No pending files
+                        </Text>
+                        {searchQuery && (
+                            <Button
+                                variant="subtle"
+                                leftIcon={<ArrowClockwise size={16} />}
+                                onClick={() => setSearchQuery("")}
+                            >
+                                Clear search
+                            </Button>
+                        )}
+                    </Stack>
+                </Center>
+            );
+        }
+
+        return (
+            <Stack spacing="md">
+                {filteredFiles
+                    .slice(startIndex, endIndex)
+                    .map((file, index) => (
+                        <Card
+                            key={index}
+                            shadow="sm"
+                            p="md"
+                            radius="md"
+                            withBorder
+                            style={{ position: "relative" }}
+                        >
+                            <Badge
+                                color="yellow"
+                                variant="light"
+                                size="sm"
+                                style={{ position: "absolute", top: 10, right: 10 }}
+                            >
+                                {file.priority}
+                            </Badge>
+
+                            <Text weight={600} size="md" mb={6}>
+                                {file.subject}
+                            </Text>
+
+                            <Text size="sm" color="dimmed" mb={6}>
+                                {generateFileId(file)}
+                            </Text>
+
+                            <Text size="sm" mb={6}>
+                                <Text span weight={500}>
+                                    From:
+                                </Text>{" "}
+                                {file.created_by}
+                            </Text>
+
+                            <Text size="sm" mb="md">
+                                <Text span weight={500}>
+                                    Received:
+                                </Text>{" "}
+                                {convertDate(file.received_at)}
+                            </Text>
+
+                            <Button
+                                size="xs"
+                                variant="default"
+                                onClick={() => handleViewFile(file)}
+                            >
+                                View & Action
+                            </Button>
+                        </Card>
+                    ))}
+            </Stack>
+        );
+    };
+
+    // Desktop table view rendering
+    return (
+        <Card
+            shadow="sm"
+            padding="lg"
+            radius="md"
+            withBorder
+            style={{
+                backgroundColor: "#FFFFFF",
+                minHeight: "10vh",
+                padding: isMobile ? "1rem" : "2rem",
+            }}
+        >
+            {isMobile ? (
+                renderMobileView()
+            ) : (
+                <div>
+                    <Group position="apart" mb="md">
+                        <Title order={3}>Pending Files for Action</Title>
+                    </Group>
+
+                    <Group position="apart" mb="md">
+                        <TextInput
+                            placeholder="Search by ID, subject, or creator..."
+                            icon={<MagnifyingGlass size={18} />}
+                            value={searchQuery}
+                            onChange={(e) => {
+                                setSearchQuery(e.currentTarget.value);
+                                setCurrentPage(1);
+                            }}
+                            style={{ flex: 1 }}
+                        />
+                    </Group>
+
+                    {loading ? (
+                        <Center style={{ height: "200px" }}>
+                            <Text>Loading pending files...</Text>
+                        </Center>
+                    ) : filteredFiles.length === 0 ? (
+                        <Center style={{ height: "200px" }}>
+                            <Stack align="center" spacing="xs">
+                                <Folder size={48} color={theme.colors.gray[5]} />
+                                <Text c="dimmed" size="lg">
+                                    No pending files
+                                </Text>
+                                {searchQuery && (
+                                    <Button
+                                        variant="subtle"
+                                        leftIcon={<ArrowClockwise size={16} />}
+                                        onClick={() => setSearchQuery("")}
+                                    >
+                                        Clear search
+                                    </Button>
+                                )}
+                            </Stack>
+                        </Center>
+                    ) : (
+                        <>
+                            <Table striped>
+                                <thead>
+                                    <tr>
+                                        <th
+                                            onClick={() => handleSort("file_id")}
+                                            style={{ cursor: "pointer" }}
+                                        >
+                                            <Group spacing="xs">
+                                                <Text size="sm" weight={500}>
+                                                    File ID
+                                                </Text>
+                                                <ArrowsDownUp size={14} />
+                                            </Group>
+                                        </th>
+                                        <th
+                                            onClick={() => handleSort("subject")}
+                                            style={{ cursor: "pointer" }}
+                                        >
+                                            <Group spacing="xs">
+                                                <Text size="sm" weight={500}>
+                                                    Subject
+                                                </Text>
+                                                <ArrowsDownUp size={14} />
+                                            </Group>
+                                        </th>
+                                        <th
+                                            onClick={() => handleSort("created_by")}
+                                            style={{ cursor: "pointer" }}
+                                        >
+                                            <Group spacing="xs">
+                                                <Text size="sm" weight={500}>
+                                                    From
+                                                </Text>
+                                                <ArrowsDownUp size={14} />
+                                            </Group>
+                                        </th>
+                                        <th
+                                            onClick={() => handleSort("priority")}
+                                            style={{ cursor: "pointer" }}
+                                        >
+                                            <Group spacing="xs">
+                                                <Text size="sm" weight={500}>
+                                                    Priority
+                                                </Text>
+                                                <ArrowsDownUp size={14} />
+                                            </Group>
+                                        </th>
+                                        <th>Action</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {filteredFiles
+                                        .slice(startIndex, endIndex)
+                                        .map((file, index) => (
+                                            <tr key={index}>
+                                                <td>{generateFileId(file)}</td>
+                                                <td>{file.subject}</td>
+                                                <td>{file.created_by}</td>
+                                                <td>
+                                                    <Badge
+                                                        color={
+                                                            file.priority === "URGENT"
+                                                                ? "red"
+                                                                : file.priority === "HIGH"
+                                                                    ? "orange"
+                                                                    : "gray"
+                                                        }
+                                                        variant="light"
+                                                    >
+                                                        {file.priority}
+                                                    </Badge>
+                                                </td>
+                                                <td>
+                                                    <Tooltip label="View and take action">
+                                                        <ActionIcon
+                                                            color="blue"
+                                                            onClick={() => handleViewFile(file)}
+                                                        >
+                                                            <Eye size={18} />
+                                                        </ActionIcon>
+                                                    </Tooltip>
+                                                </td>
+                                            </tr>
+                                        ))}
+                                </tbody>
+                            </Table>
+
+                            <Group position="apart" mt="md">
+                                <Text size="sm">
+                                    Showing {startIndex + 1} to {endIndex} of {filteredFiles.length}
+                                </Text>
+                                <Group spacing="xs">
+                                    <TextInput
+                                        placeholder="Go to page"
+                                        type="number"
+                                        value={pageInput}
+                                        onChange={(e) => setPageInput(e.currentTarget.value)}
+                                        onKeyPress={handlePageJump}
+                                        style={{ width: "80px" }}
+                                    />
+                                    <Pagination
+                                        page={currentPage}
+                                        onChange={setCurrentPage}
+                                        total={Math.ceil(filteredFiles.length / itemsPerPage)}
+                                    />
+                                </Group>
+                            </Group>
+                        </>
+                    )}
+                </div>
+            )}
+        </Card>
+    );
+}
diff --git a/src/Modules/FileTracking/components/SectionNavigation.jsx b/src/Modules/FileTracking/components/SectionNavigation.jsx
new file mode 100644
index 000000000..5494f1218
--- /dev/null
+++ b/src/Modules/FileTracking/components/SectionNavigation.jsx
@@ -0,0 +1,174 @@
+import React, { useState } from "react";
+import { Group, Text, Box, Container } from "@mantine/core";
+import { CaretLeft, CaretRight } from "@phosphor-icons/react";
+// eslint-disable-next-line import/no-unresolved
+import { useDispatch, useSelector } from "react-redux";
+import Compose from "./ComposeFile";
+import CreatedFiles from "./CreatedFiles";
+import Outboxfunc from "./Outbox";
+import Inboxfunc from "./Inbox";
+import Draft from "./Drafts";
+import ArchiveFiles from "./Archive";
+import AdminManagement from "./AdminManagement";
+import { setActiveTab_ } from "../../../redux/moduleslice";
+import classes from "../../Dashboard/Dashboard.module.css";
+
+const sectionComponents = {
+  "Compose File": Compose,
+  Drafts: Draft,
+  "Created Files": CreatedFiles,
+  Inbox: Inboxfunc,
+  Outbox: Outboxfunc,
+  Archive: ArchiveFiles,
+  "Admin Console": AdminManagement,
+};
+
+export default function SectionNavigation() {
+  const dispatch = useDispatch();
+  const roles = useSelector((state) => state.user.roles) || [];
+  const role = (useSelector((state) => state.user.role) || "").toLowerCase();
+
+  const hasAdminAccess =
+    role.includes("admin") ||
+    role.includes("dean") ||
+    role.includes("director") ||
+    roles.some((r) => {
+      const name = (r || "").toLowerCase();
+      return (
+        name.includes("admin") ||
+        name.includes("dean") ||
+        name.includes("director")
+      );
+    });
+
+  const sections = hasAdminAccess
+    ? ["Compose File", "Drafts", "Created Files", "Inbox", "Outbox", "Archive", "Admin Console"]
+    : ["Compose File", "Drafts", "Created Files", "Inbox", "Outbox", "Archive"];
+
+  const [activeSection, setActiveSection] = useState("Compose File");
+
+  const handleSelection = (section) => {
+    setActiveSection(section);
+    dispatch(setActiveTab_(section));
+  };
+
+  const navigateLeft = () => {
+    const currentIndex = sections.indexOf(activeSection);
+    const previousIndex =
+      (currentIndex - 1 + sections.length) % sections.length; // Wrap around to the last tab
+    handleSelection(sections[previousIndex]);
+  };
+
+  const navigateRight = () => {
+    const currentIndex = sections.indexOf(activeSection);
+    const nextIndex = (currentIndex + 1) % sections.length; // Wrap around to the first tab
+    handleSelection(sections[nextIndex]);
+  };
+
+  // Get the component for the active section
+  const ActiveComponent = sectionComponents[activeSection];
+
+  return (
+    <Container size="xl" ml="-4" mt="1rem">
+      {/* Section navigation */}
+      <Group
+        spacing={0}
+        style={{
+          display: "flex",
+          overflowY: "auto",
+          overflowX: "auto",
+          padding: "8px",
+          borderBottom: "2px solid #E2E8F0",
+        }}
+      >
+        {/* Left arrow button */}
+        <button
+          onClick={navigateLeft}
+          style={{
+            background: "#E2E8F0",
+            border: "1.5px solid black",
+            cursor: "pointer",
+            padding: "2.5px",
+            borderRadius: "50%",
+            outline: "none",
+            margin: "0 8px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <CaretLeft size={20} background="#FFFFFF" />
+        </button>
+        {sections.map((section) => (
+          <Text
+            key={section}
+            size="sm"
+            className={classes.fusionText}
+            style={{
+              cursor: "pointer",
+              padding: "8px 16px",
+              whiteSpace: "nowrap",
+              margin: "0",
+              background:
+                activeSection === section
+                  ? "rgba(150, 200, 255, 0.3)"
+                  : "transparent",
+              color: activeSection === section ? "#15ABFF" : "#000000",
+              // fontWeight: activeSection === section ? "600" : "normal",
+              borderBottom:
+                activeSection === section
+                  ? "2.5px solid #007ACC"
+                  : "2px solid transparent",
+              transition: "border-bottom 0.3s, color 0.3s",
+            }}
+            onClick={() => handleSelection(section)}
+          >
+            {section}
+          </Text>
+        ))}
+        {/* Right arrow button */}
+        <button
+          onClick={navigateRight}
+          style={{
+            background: "#E2E8F0",
+            border: "1.5px solid black", // Black border added
+            cursor: "pointer",
+            padding: "2.5px",
+            borderRadius: "50%",
+            outline: "none",
+            margin: "0 8px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <CaretRight size={20} background="#FFFFFF" />
+        </button>
+      </Group>
+
+      {/* Render the active section component */}
+      <Box
+        mt="md"
+        style={{
+          color: "#F5F7F8",
+          // border: "2px solid rgba(0, 0, 0, 0.3)",
+          width: "100%",
+          overflow: "auto",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "8px 0",
+          boxSizing: "border-box",
+        }}
+      >
+        {ActiveComponent ? (
+          <Box style={{ width: "100%", height: "100%", overflow: "auto" }}>
+            <ActiveComponent />
+          </Box>
+        ) : (
+          <Text>Content for {activeSection}</Text>
+        )}
+      </Box>
+    </Container>
+  );
+}
diff --git a/src/Modules/FileTracking/components/SendFile.jsx b/src/Modules/FileTracking/components/SendFile.jsx
new file mode 100644
index 000000000..211deb81d
--- /dev/null
+++ b/src/Modules/FileTracking/components/SendFile.jsx
@@ -0,0 +1,335 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable prettier/prettier */
+import React, { useEffect, useState } from "react";
+import {
+    Modal,
+    TextInput,
+    Select,
+    Button,
+    Textarea,
+    Group,
+    Stack,
+    Text,
+    Box,
+    Badge,
+    Autocomplete,
+} from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import axios from "axios";
+import {
+    newSendRoute,
+    designationsRoute,
+    getUsernameRoute,
+} from "../../../routes/filetrackingRoutes";
+
+/**
+ * ✅ SendFile Component
+ * 
+ * Separate dialog for sending files to receivers.
+ * User must:
+ * 1. Select receiver designation
+ * 2. Search and select receiver username
+ * 3. Add sending remarks (minimum 5 characters)
+ * 
+ * This separates Send action from Draft/Create action
+ */
+export default function SendFile({ file, onClose, onSuccess }) {
+    const [designations, setDesignations] = useState([]);
+    const [usernameSuggestions, setUsernameSuggestions] = useState([]);
+    const [selectedDesignation, setSelectedDesignation] = useState("");
+    const [selectedUsername, setSelectedUsername] = useState("");
+    const [requiredDesignations, setRequiredDesignations] = useState([]);
+    const [remarks, setRemarks] = useState("");
+    const [isSending, setIsSending] = useState(false);
+
+    const token = localStorage.getItem("authToken");
+
+    // Fetch available designations for selected receiver username.
+    useEffect(() => {
+        const fetchDesignations = async () => {
+            try {
+                const response = await axios.get(
+                    `${designationsRoute}${selectedUsername}`,
+                    {
+                        params: {
+                            file_id: file?.id,
+                        },
+                        headers: { Authorization: `Token ${token}` },
+                    }
+                );
+                const required = Array.isArray(response.data.required_designations)
+                    ? response.data.required_designations.filter(Boolean)
+                    : (response.data.required_designation ? [response.data.required_designation] : []);
+                setRequiredDesignations(required);
+                const names = [...new Set((response.data.designations || []).filter(Boolean))];
+                setDesignations(names.map((name) => ({ value: name, label: name })));
+                const normalizedRequiredSet = new Set(required.map((name) => name.trim().toLowerCase()));
+                const requiredMatch = names.find(
+                    (name) => normalizedRequiredSet.has(name.trim().toLowerCase())
+                );
+
+                if (requiredMatch) {
+                    setSelectedDesignation(requiredMatch);
+                } else if (names.length === 1) {
+                    setSelectedDesignation(names[0]);
+                }
+            } catch (error) {
+                console.error("Error fetching designations:", error);
+                notifications.show({
+                    title: "Receiver lookup failed",
+                    message: "Could not load receiver designations.",
+                    color: "red",
+                    position: "top-center",
+                });
+            }
+        };
+
+        if (file && token && selectedUsername.trim().length >= 2) {
+            fetchDesignations();
+            return;
+        }
+
+        setDesignations([]);
+        setSelectedDesignation("");
+        setRequiredDesignations([]);
+    }, [file, token, selectedUsername]);
+
+    // Fetch receiver username suggestions as user types.
+    useEffect(() => {
+        const fetchUserSuggestions = async () => {
+            if (!selectedUsername || selectedUsername.length < 2) {
+                setUsernameSuggestions([]);
+                return;
+            }
+
+            try {
+                const response = await axios.post(
+                    getUsernameRoute,
+                    {
+                        value: selectedUsername,
+                        file_id: file?.id,
+                    },
+                    { headers: { Authorization: `Token ${token}` } }
+                );
+                const users = JSON.parse(response.data.users || '[]');
+                if (Array.isArray(users)) {
+                    setUsernameSuggestions(users.map((user) => user.fields.username));
+                }
+            } catch (error) {
+                console.error("Error fetching username suggestions:", error);
+            }
+        };
+
+        fetchUserSuggestions();
+    }, [selectedUsername, token, file]);
+
+    const showIneligibleHint = (
+        selectedUsername.trim().length >= 2
+        && requiredDesignations.length > 0
+        && designations.length === 0
+    );
+
+    const requiredDesignationLabel = requiredDesignations.join(", ");
+
+    // ✅ Validate and send file
+    const handleSend = async () => {
+        if (!selectedUsername.trim()) {
+            notifications.show({
+                title: "Receiver required",
+                message: "Please enter/select a receiver username.",
+                color: "orange",
+                position: "top-center",
+            });
+            return;
+        }
+
+        if (!selectedDesignation.trim()) {
+            notifications.show({
+                title: "Designation required",
+                message: "Please select the receiver designation.",
+                color: "orange",
+                position: "top-center",
+            });
+            return;
+        }
+
+        if (!remarks.trim() || remarks.trim().length < 5) {
+            notifications.show({
+                title: "Remarks required",
+                message: "Please add remarks (minimum 5 characters).",
+                color: "orange",
+                position: "top-center",
+            });
+            return;
+        }
+
+        setIsSending(true);
+
+        try {
+            // ✅ Call Send API endpoint
+            const response = await axios.post(
+                newSendRoute(file.id),
+                {
+                    receiver: selectedUsername.trim(),
+                    receiver_designation: selectedDesignation.trim(),
+                    remarks: remarks.trim(),
+                },
+                {
+                    headers: {
+                        Authorization: `Token ${token}`,
+                        "Content-Type": "application/json",
+                    },
+                }
+            );
+
+            if (response.status === 200) {
+                notifications.show({
+                    title: "File sent successfully",
+                    message: `File sent to ${selectedUsername.trim()} (${selectedDesignation.trim()}).`,
+                    color: "green",
+                    position: "top-center",
+                });
+
+                // Reset form and close modal
+                setSelectedUsername("");
+                setSelectedDesignation("");
+                setRemarks("");
+                onClose();
+
+                // Trigger parent refresh
+                if (onSuccess) {
+                    onSuccess();
+                }
+            }
+        } catch (error) {
+            const errorMsg =
+                error?.response?.data?.error || "Could not send file. Please try again.";
+            notifications.show({
+                title: "Send failed",
+                message: errorMsg,
+                color: "red",
+                position: "top-center",
+            });
+            console.error("Error sending file:", error);
+        } finally {
+            setIsSending(false);
+        }
+    };
+
+    if (!file) return null;
+
+    return (
+        <Modal
+            opened={!!file}
+            onClose={onClose}
+            title="Send File"
+            size="lg"
+            centered
+        >
+            <Stack spacing="lg">
+                {/* File Info - Read Only */}
+                <Box
+                    style={{
+                        backgroundColor: "#f5f5f5",
+                        padding: "1rem",
+                        borderRadius: "0.5rem",
+                    }}
+                >
+                    <Text size="sm" weight={600} mb="xs">
+                        📄 File Details
+                    </Text>
+                    <Group spacing="lg" grow>
+                        <Box>
+                            <Text size="sm" color="dimmed">
+                                File Number
+                            </Text>
+                            <Text weight={600}>{file.file_number || "N/A"}</Text>
+                        </Box>
+                        <Box>
+                            <Text size="sm" color="dimmed">
+                                Subject
+                            </Text>
+                            <Text weight={600} truncate title={file.subject}>
+                                {file.subject}
+                            </Text>
+                        </Box>
+                        <Box>
+                            <Text size="sm" color="dimmed">
+                                Status
+                            </Text>
+                            <Badge size="sm" variant="light">
+                                {file.status}
+                            </Badge>
+                        </Box>
+                    </Group>
+                </Box>
+
+                <Autocomplete
+                    label="Receiver Username *"
+                    placeholder="Type and choose receiver username"
+                    value={selectedUsername}
+                    onChange={(value) => {
+                        setSelectedDesignation("");
+                        setSelectedUsername(value);
+                    }}
+                    data={usernameSuggestions}
+                    required
+                />
+
+                {showIneligibleHint ? (
+                    <Text size="xs" c="orange">
+                        {selectedUsername.trim()} is not eligible for this step. Choose a user with designation {requiredDesignationLabel}.
+                    </Text>
+                ) : null}
+
+                <Select
+                    key={selectedUsername}
+                    label="Receiver Designation *"
+                    placeholder={selectedUsername ? "Select recipient designation" : "Type receiver username first"}
+                    data={designations}
+                    value={selectedDesignation}
+                    onChange={(value) => setSelectedDesignation(value || "")}
+                    searchable
+                    required
+                    disabled={!selectedUsername.trim() || selectedUsername.trim().length < 2}
+                    nothingFoundMessage="No designations found"
+                />
+
+                {requiredDesignations.length > 0 ? (
+                    <Text size="xs" c="dimmed">
+                        Required designation(s) for this routing step: {requiredDesignationLabel}
+                    </Text>
+                ) : null}
+
+                {/* Remarks - Mandatory */}
+                <Textarea
+                    label="Sending Remarks *"
+                    placeholder="Add your remarks or comments (minimum 5 characters)"
+                    value={remarks}
+                    onChange={(e) => setRemarks(e.currentTarget.value)}
+                    minRows={3}
+                    required
+                    error={
+                        remarks && remarks.trim().length < 5 && remarks.length > 0
+                            ? "Minimum 5 characters required"
+                            : null
+                    }
+                />
+
+                {/* Action Buttons */}
+                <Group position="right" spacing="sm">
+                    <Button variant="light" onClick={onClose}>
+                        Cancel
+                    </Button>
+                    <Button
+                        onClick={handleSend}
+                        loading={isSending}
+                        disabled={!selectedDesignation || !selectedUsername || remarks.trim().length < 5}
+                    >
+                        Send File
+                    </Button>
+                </Group>
+            </Stack>
+        </Modal>
+    );
+}
diff --git a/src/Modules/FileTracking/components/ViewFile.jsx b/src/Modules/FileTracking/components/ViewFile.jsx
new file mode 100644
index 000000000..afe530d12
--- /dev/null
+++ b/src/Modules/FileTracking/components/ViewFile.jsx
@@ -0,0 +1,2122 @@
+import { useState, useEffect } from "react";
+import {
+  Card,
+  Textarea,
+  Button,
+  Title,
+  Group,
+  Select,
+  Box,
+  Divider,
+  Grid,
+  Autocomplete,
+  FileInput,
+  Modal,
+  Text,
+  Flex,
+  Paper,
+  Timeline,
+  Badge,
+  ScrollArea,
+  ActionIcon,
+  Collapse,
+  Avatar,
+  Tooltip,
+  Skeleton,
+  useMantineTheme,
+  SegmentedControl,
+  Table,
+  Center,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+import { notifications } from "@mantine/notifications";
+import axios from "axios";
+import {
+  ArrowLeft,
+  DownloadSimple,
+  PaperPlaneTilt,
+  Trash,
+  Upload,
+  CalendarBlank,
+  User,
+  UserCircle,
+  CaretDown,
+  CaretUp,
+  File as FileIcon,
+  Info,
+  ArrowsClockwise,
+  ChatCircleText,
+  ChatCenteredText,
+  ClockCounterClockwise,
+  Table as TableIcon,
+  ListBullets,
+} from "@phosphor-icons/react";
+import { useSelector } from "react-redux";
+import { useMediaQuery } from "@mantine/hooks";
+import {
+  newFileDetailRoute,
+  designationsRoute,
+  getUsernameRoute,
+  newHistoryRoute,
+  newApproveRoute,
+  newForwardRoute,
+  newAmendRoute,
+  newReturnRoute,
+  newCloseRoute,
+} from "../../../routes/filetrackingRoutes";
+import { host } from "../../../routes/globalRoutes";
+import { getApiErrorMessage } from "../utils/apiErrors";
+
+export default function ViewFile({
+  onBack,
+  fileID,
+  updateFiles,
+  isArchived = false,
+  contextSource = "",
+}) {
+  // State management
+  const [file, setFile] = useState({});
+  const [trackingHistory, setTrackingHistory] = useState([]);
+  const [receiver_username, setReceiverUsername] = useState("");
+  const [receiver_designation, setReceiverDesignation] = useState("");
+  const [receiver_designations, setReceiverDesignations] = useState([]);
+  const [current_receiver, setCurrentReceiver] = useState("");
+  const [usernameSuggestions, setUsernameSuggestions] = useState([]);
+  const [files, setFiles] = useState(null);
+  const [remarks, setRemarks] = useState("");
+  const [isForwarding, setIsForwarding] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const [selectedRemarks, setSelectedRemarks] = useState("");
+  const token = localStorage.getItem("authToken");
+  const [showForwardModal, setShowForwardModal] = useState(false);
+  const [selectedForwardFile, setSelectedForwardFile] = useState(null);
+  const [showAmendModal, setShowAmendModal] = useState(false);
+  const [showApproveModal, setShowApproveModal] = useState(false);
+  const [showReturnModal, setShowReturnModal] = useState(false);
+  const [showCloseModal, setShowCloseModal] = useState(false);
+  const [amendAction, setAmendAction] = useState("SAVE");
+  const [amendComment, setAmendComment] = useState("");
+  const [amendFiles, setAmendFiles] = useState(null);
+  const [amendReceiverUsername, setAmendReceiverUsername] = useState("");
+  const [amendReceiverDesignation, setAmendReceiverDesignation] = useState("");
+  const [amendReceiverDesignations, setAmendReceiverDesignations] = useState([]);
+  const [amendUsernameSuggestions, setAmendUsernameSuggestions] = useState([]);
+  const [approveRemarks, setApproveRemarks] = useState("");
+  const [returnRemarks, setReturnRemarks] = useState("");
+  const [closeRemarks, setCloseRemarks] = useState("");
+  const [isAmending, setIsAmending] = useState(false);
+  const [isApproving, setIsApproving] = useState(false);
+  const [isReturning, setIsReturning] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+  const [fileContent, setFileContent] = useState([]);
+  const [remarksOpened, setRemarksOpened] = useState(false);
+  // eslint-disable-next-line no-unused-vars
+  const [descOpened, setDescOpened] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState("");
+  const [historyExpanded, setHistoryExpanded] = useState(true);
+  // New state for view type
+  const [viewType, setViewType] = useState("table");
+
+  // Theme and responsive design
+  const theme = useMantineTheme();
+  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+  // eslint-disable-next-line no-unused-vars
+  const isTablet = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
+
+  const downloadAttachment = (url) => {
+    window.open(`${host}${url}`, "_blank");
+  };
+
+  const previewRemarks = fileContent
+    .slice(0, 3)
+    .map((line) => `• ${line}`)
+    .join("\n");
+  const allRemarks = fileContent.map((line) => `• ${line}`).join("\n");
+
+  const getFileCreatedDate = (fileObj) => fileObj?.upload_date || fileObj?.created_at;
+
+  const getFileCreatorLabel = (fileObj) => {
+    if (!fileObj) return "Not available";
+    if (fileObj.uploader || fileObj.uploader_designation) {
+      const uploaderName = (fileObj.uploader || "").toString().trim();
+      const uploaderDesig = (fileObj.uploader_designation || "").toString().trim();
+      if (uploaderName && uploaderDesig) return `${uploaderName} [${uploaderDesig}]`;
+      if (uploaderName) return uploaderName;
+      if (uploaderDesig) return `[${uploaderDesig}]`;
+    }
+    if (fileObj.created_by) {
+      const createdBy =
+        typeof fileObj.created_by === "string"
+          ? fileObj.created_by
+          : fileObj.created_by?.username || "";
+      const createdDesig = fileObj.created_by?.designation || "";
+      return createdDesig ? `${createdBy} [${createdDesig}]` : createdBy || "Not available";
+    }
+    return "Not available";
+  };
+
+  const getTrackDate = (track) => track?.forward_date || track?.timestamp;
+  const getTrackSender = (track) => track?.current_id || track?.sender || "-";
+  const getTrackSenderDesignation = (track) => track?.sender_designation || "";
+  const getTrackReceiver = (track) => track?.receiver_id || track?.receiver || "-";
+  const getTrackReceiverDesignation = (track) => track?.receive_design || track?.receiver_designation || "";
+  const formatUserWithDesignation = (name, designation) => {
+    if (!designation) return name || "-";
+    return `${name || "-"}[${designation}]`;
+  };
+
+  const getTrackAttachment = (track) => {
+    if (track?.upload_file) return track.upload_file;
+    if (Array.isArray(file?.attachments) && file.attachments.length > 0) {
+      const firstAttachment = file.attachments[0];
+      if (typeof firstAttachment === "string") return firstAttachment;
+      return firstAttachment?.document || firstAttachment?.url || firstAttachment?.file || null;
+    }
+    return file?.upload_file || null;
+  };
+
+  // Generate file ID from file object
+  const generateFileId = (fileObj) => {
+    const createdDate = getFileCreatedDate(fileObj);
+    if (!fileObj || !createdDate) return "Loading...";
+    return `${fileObj.branch || "FTS"}-${new Date(createdDate).getFullYear()}-${(
+      new Date(createdDate).getMonth() + 1
+    )
+      .toString()
+      .padStart(2, "0")}-#${fileObj.id}`;
+  };
+
+  const receiverRoles = Array.isArray(receiver_designations)
+    ? [...new Set(receiver_designations.filter(Boolean))].map((role) => ({
+      value: role,
+      label: role,
+    }))
+    : [];
+
+  const amendReceiverRoles = Array.isArray(amendReceiverDesignations)
+    ? [...new Set(amendReceiverDesignations.filter(Boolean))].map((role) => ({
+      value: role,
+      label: role,
+    }))
+    : [];
+
+  useEffect(() => {
+    setReceiverDesignation("");
+    setReceiverDesignations([]);
+  }, [receiver_username]);
+
+  useEffect(() => {
+    if (receiver_username && receiver_username.trim().length >= 2) {
+      fetchRoles();
+      return;
+    }
+
+    setReceiverDesignations([]);
+    setReceiverDesignation("");
+  }, [receiver_username]);
+
+  useEffect(() => {
+    setAmendReceiverDesignation("");
+    setAmendReceiverDesignations([]);
+  }, [amendReceiverUsername]);
+
+  useEffect(() => {
+    if (amendReceiverUsername && amendReceiverUsername.trim().length >= 2) {
+      fetchAmendRoles();
+      return;
+    }
+
+    setAmendReceiverDesignations([]);
+    setAmendReceiverDesignation("");
+  }, [amendReceiverUsername]);
+
+  const currentUser = useSelector((state) => state.user.roll_no);
+  const currentUsername = useSelector((state) => state.user.username);
+  const currentLoginUsername = useSelector((state) => state.user.loginUsername);
+  const userDesignation = useSelector((state) => state.user.role);
+
+  const normalizeIdentity = (value) => {
+    if (!value) return "";
+
+    if (typeof value === "object") {
+      return normalizeIdentity(
+        value.username || value.user?.username || value.roll_no || value.id || "",
+      );
+    }
+
+    return value.toString().trim().toLowerCase();
+  };
+
+  const currentIdentitySet = new Set([
+    normalizeIdentity(currentUser),
+    normalizeIdentity(currentUsername),
+    normalizeIdentity(currentLoginUsername),
+  ].filter(Boolean));
+
+  const matchesCurrentUser = (value) => currentIdentitySet.has(normalizeIdentity(value));
+
+  const getStatusBadge = () => {
+    const status = (file?.status || "").toString().toUpperCase();
+
+    switch (status) {
+      case "ARCHIVED":
+        return { color: "orange", label: "Archived" };
+      case "CLOSED":
+        return { color: "gray", label: "Closed" };
+      case "APPROVED":
+        return { color: "teal", label: "Approved" };
+      case "REJECTED":
+        return { color: "red", label: "Rejected" };
+      case "FORWARDED":
+        return { color: "blue", label: "In Progress" };
+      case "PENDING":
+        return { color: "yellow", label: "Pending" };
+      case "SUBMITTED":
+        return { color: "yellow", label: "Pending" };
+      case "IN_PROGRESS":
+        return { color: "blue", label: "In Progress" };
+      case "CREATED":
+        return { color: "violet", label: "Created" };
+      default:
+        return {
+          color: isArchived ? "orange" : "blue",
+          label: isArchived ? "Archived" : status ? status.replaceAll("_", " ") : "In Progress",
+        };
+    }
+  };
+
+  const getCreatorUsername = (fileObj) => {
+    if (!fileObj) return "";
+    if (typeof fileObj.created_by === "string") return fileObj.created_by;
+    return fileObj.created_by?.username || fileObj.uploader || "";
+  };
+
+  // Helper function to format dates
+  const convertDate = (date) => {
+    const d = new Date(date);
+    return d.toLocaleString();
+  };
+
+  const removeFile = () => {
+    setFiles(null);
+  };
+
+  const handleOpenRemarksModal = (x) => {
+    setSelectedRemarks(x);
+    setOpened(true);
+  };
+  const fetchData = async () => {
+    setLoading(true);
+    setLoadError("");
+    try {
+      // Fetch file first
+      const fileResponse = await axios.get(`${newFileDetailRoute(fileID)}`, {
+        withCredentials: true,
+        headers: {
+          Authorization: `Token ${token}`,
+        },
+      });
+      setFile(fileResponse.data);
+      setSelectedForwardFile(fileResponse.data);
+
+      // Fetch history after file is fetched
+      const historyResponse = await axios.get(`${newHistoryRoute(fileID)}`, {
+        withCredentials: true,
+        headers: {
+          Authorization: `Token ${token}`,
+        },
+      });
+
+      const rawHistory = historyResponse.data;
+      const trackingData = Array.isArray(rawHistory)
+        ? rawHistory
+        : Array.isArray(rawHistory?.movements)
+          ? rawHistory.movements
+          : [];
+
+      const contentArray = trackingData.map(
+        (track) =>
+          `On ${convertDate(getTrackDate(track))}: ${formatUserWithDesignation(getTrackReceiver(track), getTrackReceiverDesignation(track))} action ${track?.action || ""} remarks: ${track?.remarks || ""}`,
+      );
+
+      if (trackingData.length > 0) {
+        trackingData[0].upload_file = fileResponse.data.upload_file;
+      }
+      setTrackingHistory(trackingData);
+      setCurrentReceiver(
+        getTrackReceiver(trackingData[trackingData.length - 1]) ?? null,
+      );
+      setFileContent(contentArray);
+    } catch (err) {
+      console.error("Error fetching data:", err);
+      const message = getApiErrorMessage(err, "Failed to load file data. Please try again.");
+      setLoadError(message);
+      notifications.show({
+        title: "Could not load file",
+        message,
+        color: "red",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [fileID, token]);
+
+  useEffect(() => {
+    let isMounted = true;
+    const getUsernameSuggestion = async () => {
+      try {
+        const response = await axios.post(
+          `${getUsernameRoute}`,
+          {
+            value: receiver_username,
+            file_id: fileID,
+          },
+          {
+            headers: { Authorization: `Token ${token}` },
+          },
+        );
+        const users = JSON.parse(response.data.users);
+        // Ensure response.data.users is an array before mapping
+        if (response.data && Array.isArray(users)) {
+          const suggestedUsernames = users.map((user) => user.fields.username);
+          if (isMounted) {
+            setUsernameSuggestions(suggestedUsernames);
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching username suggestion:", error);
+      }
+    };
+
+    if (receiver_username) {
+      getUsernameSuggestion();
+    }
+
+    return () => {
+      isMounted = false; // Cleanup to prevent memory leaks
+    };
+  }, [receiver_username, token, fileID]);
+
+  useEffect(() => {
+    let isMounted = true;
+    const getAmendUsernameSuggestion = async () => {
+      try {
+        const response = await axios.post(
+          `${getUsernameRoute}`,
+          {
+            value: amendReceiverUsername,
+            file_id: fileID,
+          },
+          {
+            headers: { Authorization: `Token ${token}` },
+          },
+        );
+        const users = JSON.parse(response.data.users);
+        if (response.data && Array.isArray(users)) {
+          const suggestedUsernames = users.map((user) => user.fields.username);
+          if (isMounted) {
+            setAmendUsernameSuggestions(suggestedUsernames);
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching amend username suggestion:", error);
+      }
+    };
+
+    if (amendReceiverUsername) {
+      getAmendUsernameSuggestion();
+    }
+
+    return () => {
+      isMounted = false;
+    };
+  }, [amendReceiverUsername, token, fileID]);
+
+  // Fetch designations when a user is selected
+  const fetchRoles = async () => {
+    if (!receiver_username || receiver_username === "") return "";
+    try {
+      const response = await axios.get(
+        `${designationsRoute}${receiver_username}`,
+        {
+          params: { file_id: fileID },
+          headers: {
+            Authorization: `Token ${token}`,
+          },
+        },
+      );
+      const nextDesignations = [...new Set([...(response.data.designations || [])].filter(Boolean))];
+      setReceiverDesignations(nextDesignations);
+
+      // Auto-fill designation for smoother forwarding UX.
+      if (nextDesignations.length === 1) {
+        setReceiverDesignation(nextDesignations[0]);
+      } else if (!nextDesignations.includes(receiver_designation)) {
+        setReceiverDesignation("");
+      }
+    } catch (err) {
+      if (err.response && err.response.status === 500) {
+        console.warn("Retrying fetchRoles in 2 seconds...");
+      }
+    }
+  };
+
+  const fetchAmendRoles = async () => {
+    if (!amendReceiverUsername || amendReceiverUsername === "") return "";
+    try {
+      const response = await axios.get(
+        `${designationsRoute}${amendReceiverUsername}`,
+        {
+          params: { file_id: fileID },
+          headers: {
+            Authorization: `Token ${token}`,
+          },
+        },
+      );
+      const nextDesignations = [...new Set([...(response.data.designations || [])].filter(Boolean))];
+      setAmendReceiverDesignations(nextDesignations);
+
+      if (nextDesignations.length === 1) {
+        setAmendReceiverDesignation(nextDesignations[0]);
+      } else if (!nextDesignations.includes(amendReceiverDesignation)) {
+        setAmendReceiverDesignation("");
+      }
+    } catch (err) {
+      if (err.response && err.response.status === 500) {
+        console.warn("Retrying fetchAmendRoles in 2 seconds...");
+      }
+    }
+  };
+
+  // Validate files for supported types and size
+  const validateAttachments = (fileList) => {
+    if (!fileList) return { valid: [], invalid: [] };
+
+    const ALLOWED_EXTENSIONS = ['.pdf', '.jpg', '.jpeg', '.png'];
+    const MAX_SIZE_MB = 10;
+    const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
+
+    const valid = [];
+    const invalid = [];
+
+    const filesArray = Array.isArray(fileList) ? fileList : [fileList];
+
+    filesArray.forEach((file) => {
+      const fileName = file.name || '';
+      const fileExt = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
+      const fileSize = file.size || 0;
+
+      if (!ALLOWED_EXTENSIONS.includes(fileExt)) {
+        invalid.push({
+          file: fileName,
+          reason: `Unsupported attachment type: ${fileName}. Allowed: PDF, JPG, JPEG, PNG`,
+        });
+      } else if (fileSize > MAX_SIZE_BYTES) {
+        invalid.push({
+          file: fileName,
+          reason: `Attachment too large: ${fileName}. Max size is ${MAX_SIZE_MB}MB`,
+        });
+      } else {
+        valid.push(file);
+      }
+    });
+
+    return { valid, invalid };
+  };
+
+  const handleFileChange = (data) => {
+    const { valid, invalid } = validateAttachments(data);
+
+    if (invalid.length > 0) {
+      invalid.forEach((error) => {
+        notifications.show({
+          title: "Invalid file",
+          message: error.reason,
+          color: "red",
+          position: "top-center",
+          autoClose: 4000,
+        });
+      });
+    }
+
+    // Only set valid files
+    setFiles(valid.length > 0 ? valid : null);
+  };
+
+  const handleAmendFileChange = (data) => {
+    const { valid, invalid } = validateAttachments(data);
+
+    if (invalid.length > 0) {
+      invalid.forEach((error) => {
+        notifications.show({
+          title: "Invalid file",
+          message: error.reason,
+          color: "red",
+          position: "top-center",
+          autoClose: 4000,
+        });
+      });
+    }
+
+    // Only set valid files
+    setAmendFiles(valid.length > 0 ? valid : null);
+  };
+
+  // Handle file forwarding
+  const handleForward = async () => {
+    if (!receiver_username || !receiver_designation) {
+      notifications.show({
+        title: "Missing information",
+        message: "Please select both receiver and designation",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    setIsForwarding(true);
+    try {
+      const formData = new FormData();
+      if (Array.isArray(files) && files.length > 0) {
+        files.forEach((fileItem, index) => {
+          const fileAttachment =
+            fileItem instanceof File
+              ? fileItem
+              : new File([fileItem], `uploaded_file_${index}`, {
+                type: "application/octet-stream",
+              });
+          formData.append("files", fileAttachment); // Append each file
+        });
+      } else if (files instanceof File) {
+        formData.append("files", files);
+      }
+      formData.append("receiver", receiver_username);
+      formData.append("receiver_designation", receiver_designation);
+      formData.append("remarks", remarks);
+      formData.append("receiver_department_id", "");
+      const response = await axios.post(
+        `${newForwardRoute(fileID)}`,
+        formData,
+        {
+          headers: {
+            Authorization: `Token ${token}`,
+            "Content-Type": "multipart/form-data",
+          },
+        },
+      );
+      if (response.status === 200 || response.status === 201) {
+        notifications.show({
+          title: "File forwarded successfully",
+          message: "The file has been forwarded successfully.",
+          color: "green",
+          position: "top-center",
+        });
+        setIsForwarding(false);
+        setShowForwardModal(false);
+        setSelectedForwardFile(null);
+        setReceiverDesignation("");
+        setReceiverUsername("");
+        setRemarks("");
+        setFiles(null);
+        updateFiles();
+        onBack();
+      }
+    } catch (err) {
+      console.error("Error forwarding file:", err);
+      notifications.show({
+        title: "Forward failed",
+        message: getApiErrorMessage(err, "Failed to forward file. Please try again."),
+        color: "red",
+        position: "top-center",
+      });
+      setIsForwarding(false);
+    }
+  };
+
+  const handleAmend = async () => {
+    const hasComment = amendComment && amendComment.trim().length > 0;
+    const hasAttachments = Array.isArray(amendFiles) ? amendFiles.length > 0 : amendFiles instanceof File;
+
+    if (!hasComment && !hasAttachments) {
+      notifications.show({
+        title: "Amendment required",
+        message: "Add a comment or attach at least one file.",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    if (amendAction === "FORWARD" && (!amendReceiverUsername || !amendReceiverDesignation)) {
+      notifications.show({
+        title: "Forwarding details required",
+        message: "Select receiver username and designation for amend and forward.",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    setIsAmending(true);
+    try {
+      const formData = new FormData();
+      formData.append("action", amendAction);
+      if (hasComment) {
+        formData.append("comment", amendComment.trim());
+      }
+      if (Array.isArray(amendFiles) && amendFiles.length > 0) {
+        amendFiles.forEach((fileItem) => {
+          formData.append("files", fileItem);
+        });
+      } else if (amendFiles instanceof File) {
+        formData.append("files", amendFiles);
+      }
+      if (amendAction === "FORWARD") {
+        formData.append("receiver", amendReceiverUsername);
+        formData.append("receiver_designation", amendReceiverDesignation);
+      }
+
+      await axios.post(
+        `${newAmendRoute(fileID)}`,
+        formData,
+        {
+          withCredentials: true,
+          headers: {
+            Authorization: `Token ${token}`,
+            "Content-Type": "multipart/form-data",
+          },
+        },
+      );
+
+      notifications.show({
+        title: amendAction === "FORWARD" ? "Amended and forwarded" : "Amendment saved",
+        message: amendAction === "FORWARD"
+          ? "Your amendment was saved and the file was forwarded."
+          : "Your amendment has been saved to file history.",
+        color: "green",
+        position: "top-center",
+      });
+      setShowAmendModal(false);
+      setAmendAction("SAVE");
+      setAmendComment("");
+      setAmendFiles(null);
+      setAmendReceiverUsername("");
+      setAmendReceiverDesignation("");
+      setAmendReceiverDesignations([]);
+      fetchData();
+      updateFiles();
+      if (amendAction === "FORWARD") {
+        onBack();
+      }
+    } catch (err) {
+      notifications.show({
+        title: "Amend failed",
+        message: getApiErrorMessage(err, "Could not amend file."),
+        color: "red",
+        position: "top-center",
+      });
+    } finally {
+      setIsAmending(false);
+    }
+  };
+
+  const handleReturn = async () => {
+    if (!returnRemarks || returnRemarks.trim().length < 5) {
+      notifications.show({
+        title: "Remarks required",
+        message: "Return remarks must be at least 5 characters.",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    setIsReturning(true);
+    try {
+      await axios.post(
+        `${newReturnRoute(fileID)}`,
+        { remarks: returnRemarks.trim() },
+        {
+          withCredentials: true,
+          headers: {
+            Authorization: `Token ${token}`,
+            "Content-Type": "application/json",
+          },
+        },
+      );
+
+      notifications.show({
+        title: "Returned successfully",
+        message: "The file has been returned to originator.",
+        color: "green",
+        position: "top-center",
+      });
+      setShowReturnModal(false);
+      setReturnRemarks("");
+      fetchData();
+      updateFiles();
+      onBack();
+    } catch (err) {
+      notifications.show({
+        title: "Return failed",
+        message: getApiErrorMessage(err, "Could not return file."),
+        color: "red",
+        position: "top-center",
+      });
+    } finally {
+      setIsReturning(false);
+    }
+  };
+
+  const handleApprove = async () => {
+    if (!approveRemarks || approveRemarks.trim().length < 5) {
+      notifications.show({
+        title: "Remarks required",
+        message: "Approval remarks must be at least 5 characters.",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    setIsApproving(true);
+    try {
+      await axios.post(
+        `${newApproveRoute(fileID)}`,
+        { remarks: approveRemarks.trim() },
+        {
+          withCredentials: true,
+          headers: {
+            Authorization: `Token ${token}`,
+            "Content-Type": "application/json",
+          },
+        },
+      );
+
+      notifications.show({
+        title: "Approved successfully",
+        message: "The file has been approved.",
+        color: "green",
+        position: "top-center",
+      });
+      setShowApproveModal(false);
+      setApproveRemarks("");
+      fetchData();
+      updateFiles();
+      onBack();
+    } catch (err) {
+      notifications.show({
+        title: "Approve failed",
+        message: getApiErrorMessage(err, "Could not approve file."),
+        color: "red",
+        position: "top-center",
+      });
+    } finally {
+      setIsApproving(false);
+    }
+  };
+
+  const handleCloseFile = async () => {
+    if (!closeRemarks || closeRemarks.trim().length < 5) {
+      notifications.show({
+        title: "Remarks required",
+        message: "Closure remarks must be at least 5 characters.",
+        color: "red",
+        position: "top-center",
+      });
+      return;
+    }
+
+    setIsClosing(true);
+    try {
+      await axios.post(
+        `${newCloseRoute(fileID)}`,
+        { remarks: closeRemarks.trim() },
+        {
+          withCredentials: true,
+          headers: {
+            Authorization: `Token ${token}`,
+            "Content-Type": "application/json",
+          },
+        },
+      );
+
+      notifications.show({
+        title: "File closed",
+        message: "File marked as closed. It can now be archived.",
+        color: "green",
+        position: "top-center",
+      });
+      setShowCloseModal(false);
+      setCloseRemarks("");
+      fetchData();
+      updateFiles();
+    } catch (err) {
+      notifications.show({
+        title: "Close failed",
+        message: getApiErrorMessage(err, "Could not close file."),
+        color: "red",
+        position: "top-center",
+      });
+    } finally {
+      setIsClosing(false);
+    }
+  };
+
+  // Render timeline view for all device sizes
+  const renderTimelineView = () => {
+    const bulletSize = isMobile ? 24 : 28;
+    const lineWidth = isMobile ? 2 : 3;
+
+    return (
+      <ScrollArea
+        style={{
+          width: "100%",
+          borderCollapse: "collapse",
+          tableLayout: "fixed",
+          fontSize: "12px",
+          minWidth: "700px",
+        }}
+      >
+        <Timeline
+          active={trackingHistory.length - 1}
+          bulletSize={bulletSize}
+          lineWidth={lineWidth}
+          sx={{
+            padding: isMobile ? "0.5rem" : "1rem",
+            "& .mantine-Timeline-item": {
+              marginBottom: isMobile ? "1rem" : "1.5rem",
+            },
+          }}
+        >
+          {trackingHistory.map((track, index) => (
+            <Timeline.Item
+              key={index}
+              bullet={
+                <Avatar
+                  radius="xl"
+                  size={bulletSize}
+                  color={index === trackingHistory.length - 1 ? "blue" : "gray"}
+                >
+                  <ArrowsClockwise size={bulletSize / 2} />
+                </Avatar>
+              }
+              title={
+                <Group spacing="xs" align="center" wrap="nowrap">
+                  <Text weight={600} size={isMobile ? "sm" : "md"}>
+                    {track.current_id}
+                  </Text>
+                  <Badge
+                    size={isMobile ? "sm" : "md"}
+                    color="blue"
+                    variant="light"
+                  >
+                    {getTrackSenderDesignation(track)}
+                  </Badge>
+                </Group>
+              }
+            >
+              <Text
+                color="dimmed"
+                size={isMobile ? "xs" : "sm"}
+                mb={isMobile ? 5 : 8}
+              >
+                {convertDate(getTrackDate(track))}
+              </Text>
+
+              <Paper
+                p="xs"
+                withBorder
+                mb={10}
+                style={{ background: "#f8f9fa" }}
+              >
+                <Group mb={5}>
+                  <Text weight={500} size={isMobile ? "xs" : "sm"}>
+                    To:
+                  </Text>
+                  <Text size={isMobile ? "xs" : "sm"}>
+                    <Text span weight={500}>
+                      {getTrackReceiver(track)}
+                    </Text>{" "}
+                    {getTrackReceiverDesignation(track)
+                      ? `[${getTrackReceiverDesignation(track)}]`
+                      : ""}
+                  </Text>
+                </Group>
+
+                {track.remarks && (
+                  <Box mt={8}>
+                    <Text weight={500} size={isMobile ? "xs" : "sm"} mb={5}>
+                      Remarks:
+                    </Text>
+                    <Paper
+                      p="xs"
+                      withBorder
+                      style={{
+                        backgroundColor: "#fff",
+                        cursor: "pointer",
+                        borderLeft: "3px solid #228be6",
+                      }}
+                      onClick={() => handleOpenRemarksModal(track.remarks)}
+                    >
+                      <Text size={isMobile ? "xs" : "sm"} lineClamp={2}>
+                        {track.remarks}
+                      </Text>
+                      {track.remarks.length > 100 && (
+                        <Text size="xs" color="blue" mt={3}>
+                          Click to read more
+                        </Text>
+                      )}
+                    </Paper>
+                  </Box>
+                )}
+              </Paper>
+
+              {getTrackAttachment(track) && (
+                <Button
+                  variant="light"
+                  size={isMobile ? "xs" : "sm"}
+                  leftSection={<DownloadSimple size={isMobile ? 14 : 16} />}
+                  onClick={() => downloadAttachment(getTrackAttachment(track))}
+                  fullWidth={isMobile}
+                  style={{ maxWidth: isMobile ? "100%" : "200px" }}
+                >
+                  Download Attachment
+                </Button>
+              )}
+            </Timeline.Item>
+          ))}
+        </Timeline>
+      </ScrollArea>
+    );
+  };
+
+  // Render tabular view (only for desktop)
+  const renderTabularView = () => {
+    return (
+      <ScrollArea>
+        <Table
+          highlightOnHover
+          style={{
+            width: "100%",
+            borderCollapse: "collapse",
+            tableLayout: "fixed",
+            fontSize: "12px",
+            minWidth: "700px",
+          }}
+        >
+          <thead>
+            <tr style={{ backgroundColor: "#0000" }}>
+              <th
+                style={{
+                  padding: "8px",
+                  width: "9%",
+                  border: "1px solid #ddd",
+                  textAlign: "center",
+                }}
+              >
+                Date
+              </th>
+              <th
+                style={{
+                  padding: "8px",
+                  width: "13%",
+                  border: "1px solid #ddd",
+                  textAlign: "center",
+                }}
+              >
+                Sender
+              </th>
+              <th
+                style={{
+                  padding: "8px",
+                  width: "13%",
+                  border: "1px solid #ddd",
+                  textAlign: "center",
+                }}
+              >
+                Receiver
+              </th>
+              <th
+                style={{
+                  padding: "8px",
+                  width: "20%",
+                  border: "1px solid #ddd",
+                  textAlign: "center",
+                }}
+              >
+                Remarks
+              </th>
+              <th
+                style={{
+                  padding: "8px",
+                  width: "10%",
+                  border: "1px solid #ddd",
+                  textAlign: "center",
+                }}
+              >
+                Attachment
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {trackingHistory.map((track, index) => (
+              <tr key={index}>
+                <td
+                  style={{
+                    padding: "8px",
+                    textAlign: "center",
+                    border: "1px solid #ddd",
+                    wordWrap: "break-word",
+                  }}
+                >
+                  {convertDate(getTrackDate(track))}
+                </td>
+                <td
+                  style={{
+                    padding: "8px",
+                    textAlign: "center",
+                    border: "1px solid #ddd",
+                    wordWrap: "break-word",
+                  }}
+                >
+                  {formatUserWithDesignation(getTrackSender(track), getTrackSenderDesignation(track))}
+                </td>
+                <td
+                  style={{
+                    padding: "8px",
+                    textAlign: "center",
+                    border: "1px solid #ddd",
+                    wordWrap: "break-word",
+                  }}
+                >
+                  {formatUserWithDesignation(getTrackReceiver(track), getTrackReceiverDesignation(track))}
+                </td>
+                <td
+                  style={{
+                    padding: "8px",
+                    textAlign: "center",
+                    border: "1px solid #ddd",
+                    wordWrap: "break-word",
+                    cursor: "pointer",
+                  }}
+                  onClick={() => handleOpenRemarksModal(track.remarks || "-")}
+                >
+                  {track.remarks && track.remarks.length > 15
+                    ? `${track.remarks.slice(0, 15)}...`
+                    : track.remarks || "-"}
+                </td>
+                <td
+                  style={{
+                    padding: "8px",
+                    textAlign: "center",
+                    border: "1px solid #ddd",
+                  }}
+                >
+                  {getTrackAttachment(track) ? (
+                    <Button
+                      variant="subtle"
+                      size="xs"
+                      leftSection={<DownloadSimple size={16} />}
+                      onClick={() => downloadAttachment(getTrackAttachment(track))}
+                      style={{
+                        display: "inline-block",
+                        padding: "5px 10px",
+                        fontSize: "10px",
+                      }}
+                    >
+                      Download
+                    </Button>
+                  ) : (
+                    "No file found"
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      </ScrollArea>
+    );
+  };
+
+  const isCreator = matchesCurrentUser(getCreatorUsername(file));
+  const isCurrentHolderByIdentity = matchesCurrentUser(file?.current_holder);
+  const isCurrentHolderFromApi =
+    typeof file?.is_current_handler === "boolean"
+      ? file.is_current_handler
+      : typeof file?.isCurrentHandler === "boolean"
+        ? file.isCurrentHandler
+        : null;
+  const isCurrentHolder =
+    isCurrentHolderFromApi !== null
+      ? isCurrentHolderFromApi
+      : isCurrentHolderByIdentity || contextSource === "inbox";
+  const isActiveStatus = !["CLOSED", "ARCHIVED"].includes(file?.status);
+  const isProcessingStatus = ["PENDING", "SUBMITTED", "IN_PROGRESS", "FORWARDED"].includes(file?.status);
+  const isCreatedStatus = file?.status === "CREATED";
+
+  const isViewOnlyFromApi =
+    typeof file?.is_view_only === "boolean"
+      ? file.is_view_only
+      : typeof file?.isViewOnly === "boolean"
+        ? file.isViewOnly
+        : null;
+
+  const canForwardFromApi =
+    typeof file?.can_forward === "boolean"
+      ? file.can_forward
+      : typeof file?.canForward === "boolean"
+        ? file.canForward
+        : null;
+  const canApproveFromApi =
+    typeof file?.can_approve === "boolean"
+      ? file.can_approve
+      : typeof file?.canApprove === "boolean"
+        ? file.canApprove
+        : typeof file?.can_accept === "boolean"
+          ? file.can_accept
+          : typeof file?.canAccept === "boolean"
+            ? file.canAccept
+            : null;
+  const canReturnFromApi =
+    typeof file?.can_return === "boolean"
+      ? file.can_return
+      : typeof file?.canReturn === "boolean"
+        ? file.canReturn
+        : null;
+  const canAmendFromApi =
+    typeof file?.can_amend === "boolean"
+      ? file.can_amend
+      : typeof file?.canAmend === "boolean"
+        ? file.canAmend
+        : null;
+  const canCloseFromApi =
+    typeof file?.can_close === "boolean"
+      ? file.can_close
+      : typeof file?.canClose === "boolean"
+        ? file.canClose
+        : null;
+
+  const canShowReceiverActions =
+    !isArchived
+    && isProcessingStatus
+    && isCurrentHolder
+    && (isViewOnlyFromApi !== true);
+  const shouldShowApproveButton = canApproveFromApi === true || canShowReceiverActions;
+  const shouldShowForwardButton = canForwardFromApi === true || canShowReceiverActions;
+  const shouldShowReturnButton = canReturnFromApi === true || canShowReceiverActions;
+  const canAmendFile = canAmendFromApi === true || canShowReceiverActions;
+
+  // Close remains creator-only.
+  const canCloseFile = canCloseFromApi ?? (!isArchived && isCreator && isActiveStatus && !isCreatedStatus);
+
+  return (
+    <Card
+      shadow="sm"
+      padding={isMobile ? "md" : "lg"}
+      radius="md"
+      withBorder
+      style={{
+        backgroundColor: "#FFFFFF",
+        minHeight: "10vh",
+        padding: isMobile ? "1rem" : "2rem",
+        display: "flex",
+        flexDirection: "column",
+        height: "calc(100vh - 170px)",
+        overflow: "hidden",
+      }}
+    >
+      {/* File Details: ViewFile */}
+      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
+        <div>
+          <div
+            style={{
+              position: "sticky",
+              top: 0,
+              zIndex: 100,
+              backgroundColor: "#FFFFFF",
+              padding: "10px 0",
+              borderBottom: "1px solid #E0E6ED",
+            }}
+          >
+            <Flex align="center" justify="center" mb="lg">
+              <div style={{ position: "absolute", left: 0 }}>
+                <Tooltip label="Go back" position="right">
+                  <Button variant="subtle" onClick={onBack} radius="xl">
+                    <ArrowLeft size={20} />
+                  </Button>
+                </Tooltip>
+              </div>
+              <Title
+                order={3}
+                style={{
+                  fontSize: isMobile ? "20px" : "26px",
+                  textAlign: "center",
+                }}
+              >
+                {loading ? (
+                  <Skeleton height={30} width="80%" radius="xl" />
+                ) : (
+                  generateFileId(file)
+                )}
+              </Title>
+            </Flex>
+          </div>
+
+          <Divider mb="lg" />
+
+          {/* Action Buttons */}
+          <Group
+            position="center"
+            mb="lg"
+            spacing={isMobile ? "md" : "xl"}
+            style={{ flexWrap: "wrap" }}
+          >
+            {shouldShowForwardButton && (
+              <Button
+                leftSection={<PaperPlaneTilt size={20} />}
+                onClick={() => {
+                  setSelectedForwardFile(file);
+                  setShowForwardModal(true);
+                }}
+                disabled={loading}
+                color="blue"
+                radius="md"
+                fullWidth={isMobile}
+              >
+                Forward
+              </Button>
+            )}
+
+            {shouldShowReturnButton && (
+              <Button
+                leftSection={<ArrowLeft size={20} />}
+                onClick={() => setShowReturnModal(true)}
+                disabled={loading}
+                color="orange"
+                radius="md"
+                fullWidth={isMobile}
+              >
+                Return
+              </Button>
+            )}
+
+            {shouldShowApproveButton && (
+              <Button
+                leftSection={<ArrowsClockwise size={20} />}
+                onClick={() => setShowApproveModal(true)}
+                disabled={loading}
+                color="teal"
+                radius="md"
+                fullWidth={isMobile}
+              >
+                Accept
+              </Button>
+            )}
+
+            {canAmendFile && (
+              <Button
+                leftSection={<ChatCircleText size={20} />}
+                onClick={() => setShowAmendModal(true)}
+                disabled={loading}
+                color="teal"
+                radius="md"
+                fullWidth={isMobile}
+              >
+                Amend
+              </Button>
+            )}
+
+            {canCloseFile && (
+              <Button
+                leftSection={<FileIcon size={20} />}
+                onClick={() => setShowCloseModal(true)}
+                disabled={loading}
+                color="grape"
+                radius="md"
+                fullWidth={isMobile}
+              >
+                Close File
+              </Button>
+            )}
+
+            {file?.upload_file && (
+              <Button
+                leftSection={<DownloadSimple size={20} />}
+                onClick={() => {
+                  trackingHistory.forEach((track) => {
+                    if (track.upload_file) {
+                      downloadAttachment(track.upload_file);
+                    }
+                  });
+                }}
+                variant="outline"
+                radius="md"
+                fullWidth={isMobile}
+              >
+                Download All Attachments
+              </Button>
+            )}
+          </Group>
+
+          {!loading && loadError && (
+            <Paper p="md" withBorder mb="lg" style={{ backgroundColor: "#fff5f5", borderColor: "#ffa8a8" }}>
+              <Group position="apart">
+                <Text c="red" size="sm">{loadError}</Text>
+                <Button size="xs" variant="outline" color="red" onClick={fetchData}>
+                  Retry
+                </Button>
+              </Group>
+            </Paper>
+          )}
+
+          {/* File Summary Card */}
+          <Paper
+            p="md"
+            shadow="xs"
+            radius="md"
+            withBorder
+            style={{
+              marginBottom: "1.5rem",
+              backgroundColor: "#f8f9fa",
+            }}
+          >
+            <Flex justify="space-between" align="center" mb="xs" wrap="nowrap">
+              {/* Left section: File icon + subject + ID */}
+              <Group spacing="xs" wrap="nowrap">
+                <Avatar color="blue" radius="xl">
+                  <FileIcon size={20} />
+                </Avatar>
+                <Box>
+                  {loading ? (
+                    <>
+                      <Skeleton height={20} width={150} />
+                      <Skeleton height={16} width={100} mt={6} />
+                    </>
+                  ) : (
+                    <>
+                      <Text weight={700} size={isMobile ? "md" : "lg"}>
+                        {file.subject}
+                      </Text>
+                      <Text size="sm" color="dimmed">
+                        {generateFileId(file)}
+                      </Text>
+                    </>
+                  )}
+                </Box>
+              </Group>
+
+              {/* Right section: Status badge */}
+              {!loading && (
+                (() => {
+                  const { color, label } = getStatusBadge();
+                  return (
+                    <Badge
+                      color={color}
+                      size="lg"
+                      variant="filled"
+                      radius="sm"
+                    >
+                      {label}
+                    </Badge>
+                  );
+                })()
+              )}
+            </Flex>
+
+            <Grid mt="md" gutter="md">
+              <Grid.Col span={{ base: 12, sm: 6 }}>
+                <Group spacing="xs" align="center" wrap="nowrap">
+                  <CalendarBlank size={18} />
+                  <Text weight={500}>Upload Date:</Text>
+                  {loading ? (
+                    <Skeleton height={16} width={120} />
+                  ) : (
+                    <Text>
+                      {file?.upload_date
+                        ? convertDate(file.upload_date)
+                        : file?.created_at
+                          ? convertDate(file.created_at)
+                          : "Not available"}
+                    </Text>
+                  )}
+                </Group>
+              </Grid.Col>
+
+              <Grid.Col span={{ base: 12, sm: 6 }}>
+                <Group spacing="xs" align="center" wrap="nowrap">
+                  <UserCircle size={18} />
+                  <Text weight={500}>Created By:</Text>
+                  {loading ? (
+                    <Skeleton height={16} width={120} />
+                  ) : (
+                    <Text>
+                      {getFileCreatorLabel(file)}
+                    </Text>
+                  )}
+                </Group>
+              </Grid.Col>
+            </Grid>
+
+            <Divider my="md" />
+            <Box>
+              <Group position="apart" mb="xs">
+                <Text weight={500} size="sm">
+                  <Info
+                    size={16}
+                    style={{ marginRight: "5px", verticalAlign: "text-bottom" }}
+                  />
+                  Description
+                </Text>
+                <Tooltip label="View full description">
+                  <ActionIcon
+                    onClick={() => setDescOpened(true)}
+                    size="sm"
+                    radius="xl"
+                    variant="light"
+                    color="blue"
+                  >
+                    <Info size={14} />
+                  </ActionIcon>
+                </Tooltip>
+              </Group>
+
+              {loading ? (
+                <>
+                  <Skeleton height={12} width="90%" radius="xl" mb={8} />
+                  <Skeleton height={12} width="85%" radius="xl" mb={8} />
+                  <Skeleton height={12} width="80%" radius="xl" />
+                </>
+              ) : (
+                <Paper
+                  p="xs"
+                  withBorder
+                  style={{ backgroundColor: "#fff", cursor: "pointer" }}
+                  onClick={() => setDescOpened(true)}
+                >
+                  <Text
+                    size="sm"
+                    style={{ whiteSpace: "pre-wrap" }}
+                    lineClamp={3}
+                  >
+                    {file.description}
+                  </Text>
+                  {file.description.length > 300 && (
+                    <Text
+                      size="xs"
+                      c="blue"
+                      mt={5}
+                      onClick={() => setDescOpened(true)}
+                    >
+                      Click to view full description
+                    </Text>
+                  )}
+                </Paper>
+              )}
+            </Box>
+            <Divider my="md" />
+            <Box>
+              <Group position="apart" mb="xs">
+                <Text weight={500} size="sm">
+                  <ChatCircleText
+                    size={16}
+                    style={{ marginRight: "5px", verticalAlign: "text-bottom" }}
+                  />
+                  File Comments
+                </Text>
+                <Tooltip label="View all comments">
+                  <ActionIcon
+                    onClick={() => setRemarksOpened(true)}
+                    size="sm"
+                    radius="xl"
+                    variant="light"
+                    color="blue"
+                  >
+                    <Info size={14} />
+                  </ActionIcon>
+                </Tooltip>
+              </Group>
+
+              {loading ? (
+                <>
+                  <Skeleton height={12} width="90%" radius="xl" mb={8} />
+                  <Skeleton height={12} width="80%" radius="xl" mb={8} />
+                  <Skeleton height={12} width="85%" radius="xl" />
+                </>
+              ) : (
+                <Paper
+                  p="xs"
+                  withBorder
+                  style={{ backgroundColor: "#fff", cursor: "pointer" }}
+                  onClick={() => setRemarksOpened(true)}
+                >
+                  <Text
+                    size="sm"
+                    style={{ whiteSpace: "pre-wrap" }}
+                    lineClamp={3}
+                  >
+                    {previewRemarks}
+                  </Text>
+                  {fileContent.length > 3 && (
+                    <Text size="xs" c="blue" mt={5}>
+                      Click to view all {fileContent.length} comments
+                    </Text>
+                  )}
+                </Paper>
+              )}
+            </Box>
+          </Paper>
+        </div>
+
+        {/* Tracking History of the File */}
+        <Paper shadow="xs" radius="md" p={0} withBorder mb="lg">
+          <Flex
+            p="md"
+            justify="space-between"
+            align="center"
+            style={{
+              backgroundColor: "#f1f3f5",
+              borderTopLeftRadius: "8px",
+              borderTopRightRadius: "8px",
+              borderBottom: historyExpanded ? "1px solid #dee2e6" : "none",
+            }}
+            onClick={() => setHistoryExpanded(!historyExpanded)}
+            sx={{ cursor: "pointer" }}
+          >
+            <Group>
+              <ClockCounterClockwise size={20} />
+              <Title
+                order={4}
+                style={{ margin: 0, fontSize: isMobile ? "16px" : "18px" }}
+              >
+                Tracking History of {file?.subject || generateFileId(file)}
+              </Title>
+            </Group>
+            <Group>
+              {/* View Type Selector - Only show on desktop */}
+              {!isMobile && historyExpanded && (
+                <SegmentedControl
+                  value={viewType}
+                  onChange={setViewType}
+                  data={[
+                    {
+                      value: "table",
+                      label: (
+                        <Center>
+                          <TableIcon size={16} style={{ marginRight: 8 }} />
+                          <Text size="sm">Table</Text>
+                        </Center>
+                      ),
+                    },
+                    {
+                      value: "timeline",
+                      label: (
+                        <Center>
+                          <ListBullets size={16} style={{ marginRight: 8 }} />
+                          <Text size="sm">Timeline</Text>
+                        </Center>
+                      ),
+                    },
+                  ]}
+                  size="xs"
+                  radius="md"
+                  onClick={(e) => e.stopPropagation()}
+                  style={{ marginRight: 10 }}
+                />
+              )}
+              <ActionIcon variant="subtle">
+                {historyExpanded ? (
+                  <CaretUp size={16} />
+                ) : (
+                  <CaretDown size={16} />
+                )}
+              </ActionIcon>
+            </Group>
+          </Flex>
+
+          <Collapse in={historyExpanded}>
+            <Box p={isMobile ? "xs" : "md"}>
+              {loading ? (
+                <>
+                  <Skeleton height={50} radius="sm" mb={10} />
+                  <Skeleton height={50} radius="sm" mb={10} />
+                  <Skeleton height={50} radius="sm" />
+                </>
+              ) : isMobile ? (
+                // Mobile always shows timeline view
+                renderTimelineView()
+              ) : // Desktop shows selected view type
+                viewType === "timeline" ? (
+                  renderTimelineView()
+                ) : (
+                  renderTabularView()
+                )}
+            </Box>
+          </Collapse>
+        </Paper>
+
+        {/* Modals */}
+
+        {/* Description Modal */}
+        <Modal
+          opened={descOpened}
+          onClose={() => setDescOpened(false)}
+          title={
+            <Text weight={600}>File Description - {generateFileId(file)}</Text>
+          }
+          size="lg"
+        >
+          <ScrollArea style={{ height: "60vh" }}>
+            <Textarea
+              value={file.description}
+              readOnly
+              autosize
+              style={{
+                backgroundColor: "#f8f9fa",
+                padding: "10px",
+                borderRadius: "8px",
+              }}
+            />
+          </ScrollArea>
+        </Modal>
+        {/* Remarks Modal */}
+        <Modal
+          opened={remarksOpened}
+          onClose={() => setRemarksOpened(false)}
+          title={
+            <Text weight={600}>Comments History - {generateFileId(file)}</Text>
+          }
+          size="lg"
+        >
+          <ScrollArea style={{ height: "60vh" }}>
+            <Textarea
+              value={allRemarks}
+              readOnly
+              autosize
+              minRows={Math.max(fileContent.length, 3)}
+              style={{
+                backgroundColor: "#f8f9fa",
+                padding: "10px",
+                borderRadius: "8px",
+              }}
+            />
+          </ScrollArea>
+        </Modal>
+
+        {/* Individual Remark Modal */}
+        <Modal
+          opened={opened}
+          onClose={() => setOpened(false)}
+          title={<Text weight={600}>Full Remarks</Text>}
+          size="lg"
+        >
+          <Paper p="md" withBorder>
+            <Text style={{ whiteSpace: "pre-wrap", wordWrap: "break-word" }}>
+              {selectedRemarks}
+            </Text>
+          </Paper>
+        </Modal>
+
+        {/* Forward Modal */}
+        <Modal
+          opened={showForwardModal}
+          onClose={() => {
+            setShowForwardModal(false);
+            setSelectedForwardFile(null);
+          }}
+          title={<Text weight={600}>Forward File</Text>}
+          centered
+          size={isMobile ? "sm" : "lg"}
+          scrollAreaComponent={ScrollArea}
+        >
+          <Paper p="md" withBorder mb="md" style={{ backgroundColor: "#f8f9fa" }}>
+            <Grid>
+              <Grid.Col span={5}>
+                <Text weight={500}>File ID:</Text>
+              </Grid.Col>
+              <Grid.Col span={7}>
+                <Text>{selectedForwardFile && generateFileId(selectedForwardFile)}</Text>
+              </Grid.Col>
+
+              <Grid.Col span={5}>
+                <Text weight={500}>Subject:</Text>
+              </Grid.Col>
+              <Grid.Col span={7}>
+                <Text>{selectedForwardFile?.subject}</Text>
+              </Grid.Col>
+
+              <Grid.Col span={5}>
+                <Text weight={500}>Created By:</Text>
+              </Grid.Col>
+              <Grid.Col span={7}>
+                <Text>{getFileCreatorLabel(selectedForwardFile || file)}</Text>
+              </Grid.Col>
+            </Grid>
+          </Paper>
+
+          <Grid gutter="md" mb="md" align="flex-end">
+            <Grid.Col span={{ base: 12, sm: 6 }}>
+              <Autocomplete
+                label="Forward To"
+                placeholder="Enter recipient username"
+                value={receiver_username}
+                data={usernameSuggestions}
+                onChange={(value) => {
+                  setReceiverDesignation("");
+                  setReceiverUsername(value);
+                }}
+                icon={<User size={16} />}
+                required
+                size="sm"
+              />
+            </Grid.Col>
+            <Grid.Col span={{ base: 12, sm: 6 }}>
+              <Select
+                key={receiver_username}
+                label="Receiver Designation"
+                placeholder={receiver_username ? "Select designation" : "Enter recipient username first"}
+                value={receiver_designation}
+                data={receiverRoles}
+                onChange={(value) => setReceiverDesignation(value)}
+                searchable
+                nothingFoundMessage="No designations found"
+                icon={<UserCircle size={16} />}
+                required
+                size="sm"
+                disabled={!receiver_username || receiver_username.trim().length < 2}
+              />
+            </Grid.Col>
+          </Grid>
+
+          <Textarea
+            label="Remarks"
+            placeholder="Enter remarks (500 letters maximum)"
+            value={remarks}
+            onChange={(e) => {
+              if (remarks.length < 500) {
+                setRemarks(e.currentTarget.value);
+              }
+            }}
+            mb="xs"
+            minRows={3}
+            required
+            icon={<ChatCenteredText size={16} />}
+          />
+
+          <Text
+            align="right"
+            size="sm"
+            c={remarks.split(/\s+/).length >= 45 ? "red" : "dimmed"}
+          >
+            {remarks.split(/\s+/).length} / 50 words
+          </Text>
+
+          {Array.isArray(file?.attachments) && file.attachments.length > 0 && (
+            <Box mb="md">
+              <Text weight={500} size="sm" mb="xs">
+                📎 Current Attachments (will be forwarded):
+              </Text>
+              <Paper p="xs" withBorder style={{ backgroundColor: "#f0f4f9" }} radius="md">
+                {file.attachments.map((attachment, idx) => (
+                  <Group key={idx} position="apart" spacing="xs" mb={idx < file.attachments.length - 1 ? "xs" : 0}>
+                    <Text size="sm" style={{ wordBreak: "break-word" }}>
+                      {attachment.name || `Attachment ${idx + 1}`}
+                    </Text>
+                    <Button
+                      size="xs"
+                      variant="light"
+                      leftSection={<DownloadSimple size={14} />}
+                      onClick={() => {
+                        const url = attachment.document || attachment.url || attachment.file;
+                        if (url) downloadAttachment(url);
+                      }}
+                    >
+                      Download
+                    </Button>
+                  </Group>
+                ))}
+              </Paper>
+              <Text size="xs" c="dimmed" mt="xs">
+                ✓ These attachments will be retained when forwarding
+              </Text>
+            </Box>
+          )}
+
+          <FileInput
+            label="Attach file (PDF, JPG, PNG) (MAX: 10MB) - OPTIONAL"
+            placeholder="Upload file (optional - existing attachments will be kept)"
+            accept="application/pdf,image/jpeg,image/png"
+            icon={<Upload size={16} />}
+            value={files}
+            onChange={handleFileChange}
+            mb="md"
+            multiple
+          />
+
+          {files && files.length > 0 && (
+            <Group position="left" mb="md">
+              <Button
+                leftSection={<Trash size={16} />}
+                color="red"
+                onClick={removeFile}
+                size="sm"
+                variant="light"
+              >
+                Remove File
+              </Button>
+            </Group>
+          )}
+
+          <Divider my="md" />
+
+          <Group justify="center" gap="xl" style={{ width: "100%" }}>
+            <Button
+              onClick={handleForward}
+              color="blue"
+              loading={isForwarding}
+              disabled={!receiver_designation || !receiver_username || !remarks}
+              style={{ width: isMobile ? "100px" : "120px" }}
+              radius="md"
+            >
+              Forward
+            </Button>
+            <Button
+              onClick={() => {
+                setShowForwardModal(false);
+                setSelectedForwardFile(null);
+              }}
+              variant="outline"
+              style={{ width: isMobile ? "100px" : "120px" }}
+              radius="md"
+            >
+              Cancel
+            </Button>
+          </Group>
+        </Modal>
+
+        <Modal
+          opened={showAmendModal}
+          onClose={() => {
+            setShowAmendModal(false);
+            setAmendAction("SAVE");
+            setAmendComment("");
+            setAmendFiles(null);
+            setAmendReceiverUsername("");
+            setAmendReceiverDesignation("");
+            setAmendReceiverDesignations([]);
+          }}
+          title={<Text weight={600}>Amend File</Text>}
+          centered
+          size={isMobile ? "sm" : "md"}
+        >
+          <SegmentedControl
+            mb="md"
+            value={amendAction}
+            onChange={setAmendAction}
+            data={[
+              { label: "Save Amendment", value: "SAVE" },
+              { label: "Amend and Forward", value: "FORWARD" },
+            ]}
+            fullWidth
+          />
+
+          <Textarea
+            label="Amendment Comment (Optional)"
+            placeholder="Enter amendment comment"
+            value={amendComment}
+            minRows={4}
+            onChange={(e) => setAmendComment(e.currentTarget.value)}
+            mb="md"
+          />
+
+          {/* Existing Attachments for Amend */}
+          {Array.isArray(file?.attachments) && file.attachments.length > 0 && (
+            <Box mb="md">
+              <Text weight={500} size="sm" mb="xs">
+                📎 Current Attachments:
+              </Text>
+              <Paper p="xs" withBorder style={{ backgroundColor: "#f0f4f9" }} radius="md">
+                {file.attachments.map((attachment, idx) => (
+                  <Group key={idx} position="apart" spacing="xs" mb={idx < file.attachments.length - 1 ? "xs" : 0}>
+                    <Text size="sm" style={{ wordBreak: "break-word" }}>
+                      {attachment.name || `Attachment ${idx + 1}`}
+                    </Text>
+                    <Button
+                      size="xs"
+                      variant="light"
+                      leftSection={<DownloadSimple size={14} />}
+                      onClick={() => {
+                        const url = attachment.document || attachment.url || attachment.file;
+                        if (url) downloadAttachment(url);
+                      }}
+                    >
+                      Download
+                    </Button>
+                  </Group>
+                ))}
+              </Paper>
+              <Text size="xs" c="dimmed" mt="xs">
+                ✓ These attachments will be retained after amendment
+              </Text>
+            </Box>
+          )}
+
+          <FileInput
+            label="Attachments (Optional)"
+            placeholder="Upload files (optional - existing attachments will be kept)"
+            accept="application/pdf,image/jpeg,image/png"
+            icon={<Upload size={16} />}
+            value={amendFiles}
+            onChange={handleAmendFileChange}
+            mb="md"
+            multiple
+          />
+
+          {amendAction === "FORWARD" && (
+            <>
+              <Autocomplete
+                label="Forward To"
+                placeholder="Enter recipient username"
+                value={amendReceiverUsername}
+                data={amendUsernameSuggestions}
+                onChange={(value) => {
+                  setAmendReceiverDesignation("");
+                  setAmendReceiverUsername(value);
+                }}
+                icon={<User size={16} />}
+                mb="sm"
+                required
+              />
+              <Select
+                key={amendReceiverUsername}
+                label="Receiver Designation"
+                placeholder={amendReceiverUsername ? "Select designation" : "Enter recipient username first"}
+                value={amendReceiverDesignation}
+                data={amendReceiverRoles}
+                onChange={(value) => setAmendReceiverDesignation(value || "")}
+                searchable
+                nothingFoundMessage="No designations found"
+                icon={<UserCircle size={16} />}
+                mb="md"
+                required
+                disabled={!amendReceiverUsername || amendReceiverUsername.trim().length < 2}
+              />
+            </>
+          )}
+
+          <Group justify="center" gap="xl" style={{ width: "100%" }}>
+            <Button onClick={handleAmend} color="teal" loading={isAmending} radius="md">
+              {amendAction === "FORWARD" ? "Amend and Forward" : "Save Amendment"}
+            </Button>
+            <Button
+              onClick={() => {
+                setShowAmendModal(false);
+                setAmendAction("SAVE");
+                setAmendComment("");
+                setAmendFiles(null);
+                setAmendReceiverUsername("");
+                setAmendReceiverDesignation("");
+                setAmendReceiverDesignations([]);
+              }}
+              variant="outline"
+              radius="md"
+            >
+              Cancel
+            </Button>
+          </Group>
+        </Modal>
+
+        <Modal
+          opened={showApproveModal}
+          onClose={() => setShowApproveModal(false)}
+          title={<Text weight={600}>Approve File</Text>}
+          centered
+          size={isMobile ? "sm" : "md"}
+        >
+          <Textarea
+            label="Approval Remarks"
+            placeholder="Enter approval remarks"
+            value={approveRemarks}
+            minRows={4}
+            onChange={(e) => setApproveRemarks(e.currentTarget.value)}
+            mb="md"
+            required
+          />
+          <Group justify="center" gap="xl" style={{ width: "100%" }}>
+            <Button onClick={handleApprove} color="teal" loading={isApproving} radius="md">
+              Confirm Approve
+            </Button>
+            <Button onClick={() => setShowApproveModal(false)} variant="outline" radius="md">
+              Cancel
+            </Button>
+          </Group>
+        </Modal>
+
+        <Modal
+          opened={showReturnModal}
+          onClose={() => setShowReturnModal(false)}
+          title={<Text weight={600}>Return File</Text>}
+          centered
+          size={isMobile ? "sm" : "md"}
+        >
+          <Textarea
+            label="Return Remarks"
+            placeholder="Enter return reason"
+            value={returnRemarks}
+            minRows={4}
+            onChange={(e) => setReturnRemarks(e.currentTarget.value)}
+            mb="md"
+            required
+          />
+          <Group justify="center" gap="xl" style={{ width: "100%" }}>
+            <Button onClick={handleReturn} color="orange" loading={isReturning} radius="md">
+              Confirm Return
+            </Button>
+            <Button onClick={() => setShowReturnModal(false)} variant="outline" radius="md">
+              Cancel
+            </Button>
+          </Group>
+        </Modal>
+
+        <Modal
+          opened={showCloseModal}
+          onClose={() => setShowCloseModal(false)}
+          title={<Text weight={600}>Close File</Text>}
+          centered
+          size={isMobile ? "sm" : "md"}
+        >
+          <Textarea
+            label="Closure Remarks"
+            placeholder="Enter closure remarks"
+            value={closeRemarks}
+            minRows={4}
+            onChange={(e) => setCloseRemarks(e.currentTarget.value)}
+            mb="md"
+            required
+          />
+          <Group justify="center" gap="xl" style={{ width: "100%" }}>
+            <Button onClick={handleCloseFile} color="grape" loading={isClosing} radius="md">
+              Confirm Close
+            </Button>
+            <Button onClick={() => setShowCloseModal(false)} variant="outline" radius="md">
+              Cancel
+            </Button>
+          </Group>
+        </Modal>
+      </ScrollArea >
+    </Card >
+  );
+}
+
+ViewFile.propTypes = {
+  onBack: PropTypes.func.isRequired,
+  fileID: PropTypes.number.isRequired,
+  updateFiles: PropTypes.func.isRequired,
+  isArchived: PropTypes.bool,
+  contextSource: PropTypes.string,
+};
diff --git a/src/Modules/FileTracking/index.jsx b/src/Modules/FileTracking/index.jsx
new file mode 100644
index 000000000..2d9c13fc9
--- /dev/null
+++ b/src/Modules/FileTracking/index.jsx
@@ -0,0 +1,49 @@
+import React, { useEffect } from "react";
+import { useMantineTheme } from "@mantine/core";
+import { useDispatch } from "react-redux";
+import FeatureOne from "./FeatureOne";
+import FileTrackingErrorBoundary from "./components/FileTrackingErrorBoundary";
+import CustomBreadcrumbs from "../../components/Breadcrumbs";
+import { setActiveTab_, setCurrentModule } from "../../redux/moduleslice";
+
+function FileTracking() {
+  const theme = useMantineTheme();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(setCurrentModule("File Tracking"));
+    dispatch(setActiveTab_("Compose File"));
+  }, [dispatch]);
+
+  return (
+    <>
+      <CustomBreadcrumbs />
+      <FileTrackingErrorBoundary>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            height: "80vh",
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              flex: 7.5,
+              marginRight: theme.spacing.md,
+              height: "100%",
+              overflow: "hidden",
+            }}
+          >
+            <FeatureOne />
+          </div>
+          {/* <div style={{ flex: 2.5, height: "100%", overflow: "hidden" }}>
+        <SideNotifications />
+      </div> */}
+        </div>
+      </FileTrackingErrorBoundary>
+    </>
+  );
+}
+
+export default FileTracking;
diff --git a/src/Modules/FileTracking/utils/apiErrors.js b/src/Modules/FileTracking/utils/apiErrors.js
new file mode 100644
index 000000000..760a08ada
--- /dev/null
+++ b/src/Modules/FileTracking/utils/apiErrors.js
@@ -0,0 +1,40 @@
+export function getApiErrorMessage(error, fallbackMessage = "Something went wrong. Please try again.") {
+    if (error?.code === "ERR_NETWORK") {
+        return "Unable to reach server. Check your connection and try again.";
+    }
+
+    const data = error?.response?.data;
+
+    if (typeof data === "string" && data.trim()) {
+        return data.trim();
+    }
+
+    if (data && typeof data === "object") {
+        if (typeof data.error === "string" && data.error.trim()) {
+            return data.error.trim();
+        }
+
+        if (typeof data.message === "string" && data.message.trim()) {
+            return data.message.trim();
+        }
+
+        if (Array.isArray(data.non_field_errors) && data.non_field_errors.length > 0) {
+            return String(data.non_field_errors[0]);
+        }
+
+        for (const value of Object.values(data)) {
+            if (typeof value === "string" && value.trim()) {
+                return value.trim();
+            }
+            if (Array.isArray(value) && value.length > 0) {
+                return String(value[0]);
+            }
+        }
+    }
+
+    if (typeof error?.message === "string" && error.message.trim()) {
+        return error.message.trim();
+    }
+
+    return fallbackMessage;
+}
diff --git a/src/routes/RSPCRoutes/additional.jsx b/src/routes/RSPCRoutes/additional.jsx
new file mode 100644
index 000000000..5a03b6439
--- /dev/null
+++ b/src/routes/RSPCRoutes/additional.jsx
@@ -0,0 +1,33 @@
+import { host } from "../globalRoutes";
+
+export const filterRoutes = {
+  researchProjects: `${host}/eis/api/projects/filter/`,
+  consultancyProjects: `${host}/eis/api/consultancy_projects/filter/`,
+  patents: `${host}/eis/api/patents/filter/`,
+  pgPhdThesis: `${host}/eis/api/pg_phd_thesis/filter/`,
+  eventsOrganized: `${host}/eis/api/event/filter/`,
+  visits: `${host}/eis/api/visits/filter/`,
+  eventsAttended: `${host}/eis/api/consym/filter/`,
+  books: `${host}/eis/api/fetch_book/filter/`,
+  journalOrConference: `${host}/eis/api/fetch_journal_or_conference/filter/`,
+  achievements: `${host}/eis/api/award/filter/`,
+  expertLectures: `${host}/eis/api/talk/filter/`,
+};
+export const dataTypeToEndpoint = {
+  publications_journal: filterRoutes.journalOrConference,
+  publications_books: filterRoutes.books,
+  publications_conference: filterRoutes.journalOrConference,
+  projects_research: filterRoutes.researchProjects,
+  projects_patents: filterRoutes.patents,
+  projects_consultancy: filterRoutes.consultancyProjects,
+  thesis_pg: filterRoutes.pgPhdThesis,
+  thesis_phd: filterRoutes.pgPhdThesis,
+  events_organized_workshop: filterRoutes.eventsOrganized,
+  visits_foreign: filterRoutes.visits,
+  visits_indian: filterRoutes.visits,
+  events_attended: filterRoutes.eventsAttended,
+  others_achievements: filterRoutes.achievements,
+  others_honors: filterRoutes.achievements,
+  expert_lectures: filterRoutes.expertLectures,
+};
+export const getAllFacultyIdsRoute = `${host}/eis/api/get_id/`;
diff --git a/src/routes/RSPCRoutes/index.jsx b/src/routes/RSPCRoutes/index.jsx
new file mode 100644
index 000000000..e551b21f9
--- /dev/null
+++ b/src/routes/RSPCRoutes/index.jsx
@@ -0,0 +1,19 @@
+import { host } from "../globalRoutes";
+
+export const fetchProjectsRoute = `${host}/research_procedures/api/get-projects/`;
+export const projectFormSubmissionRoute = `${host}/research_procedures/api/add-project/`;
+export const projectRegisterCommencementRoute = `${host}/research_procedures/api/register-commence-project/`;
+export const staffDocumentUploadRoute = `${host}/research_procedures/api/staff-document-upload/`;
+export const staffSelectionReportRoute = `${host}/research_procedures/api/staff-selection-report/`;
+export const advertisementAndCommitteeApprovalFormSubmissionRoute = `${host}/research_procedures/api/add-ad-committee/`;
+export const fetchPIDsRoute = (role) =>
+  `${host}/research_procedures/api/get-PIDs/?role=${role}`;
+export const fetchProfIDsRoute = `${host}/research_procedures/api/get-profIDs/`;
+export const fetchBudgetRoute = (pid) =>
+  `${host}/research_procedures/api/get-budget/?pid=${pid}`;
+export const fetchStaffPositionsRoute = (pid) =>
+  `${host}/research_procedures/api/get-staff-positions/?pid=${pid}`;
+export const fetchStaffRoute = `${host}/research_procedures/api/get-staff/`;
+export const committeeActionRoute = `${host}/research_procedures/api/committee-action/`;
+export const staffDecisionRoute = `${host}/research_procedures/api/staff-decision/`;
+export const projectClosureRoute = `${host}/research_procedures/api/project-closure/`;
diff --git a/src/routes/SPACSRoutes/index.jsx b/src/routes/SPACSRoutes/index.jsx
new file mode 100644
index 000000000..50c38566e
--- /dev/null
+++ b/src/routes/SPACSRoutes/index.jsx
@@ -0,0 +1,24 @@
+import { host } from "../globalRoutes";
+
+export const showAwardRoute = `${host}/spacs/create-award/`;
+export const getPreviousWinnersRoute = `${host}/spacs/get-winners/`;
+export const showDirectorGoldSubmitRoute = `${host}/spacs/directorgold_update/`;
+export const showMcmStatusRoute = `${host}/spacs/mcm_show/`;
+export const showGoldStatusRoute = `${host}/spacs/directorgold_show/`;
+export const showSilverStatusRoute = `${host}/spacs/directorsilver_show/`;
+export const showPdmStatusRoute = `${host}/spacs/proficiencydm_show/`;
+export const submitSilverRoute = `${host}/spacs/directorsilver_update/`;
+export const submitPdmRoute = `${host}/spacs/proficiencydm_update/`;
+export const updateCatalogRoute = `${host}/spacs/award/`;
+export const getDirectorGoldApplicationsRoute = `${host}/spacs/director_gold_list/`;
+export const getDirectorSilverApplicationsRoute = `${host}/spacs/director-silver/`;
+export const getProficiencyDMApplicationsRoute = `${host}/spacs/dm-proficiency-list/`;
+export const getMCMApplicationsRoute = `${host}/spacs/scholarship-details/`;
+export const updateMCMStatusRoute = `${host}/spacs/mcm/status-update/`;
+export const updateDirectorGoldStatusRoute = `${host}/spacs/director-gold/accept-reject/`;
+export const updateDirectorSilverStatusRoute = `${host}/spacs/api/director_silver/decision/`;
+export const updateProficiencyDMStatusRoute = `${host}/spacs/api/dm-proficiency/decsion/`;
+export const inviteApplicationsRoute = `${host}/spacs/release`;
+export const submitMCMApplicationsRoute = `${host}/spacs/mcm_update/`;
+export const scholarshipNotification = `${host}/notifications/api/scholarship_portal_notification/`;
+export const checkApplicationWindow = `${host}/spacs/check-application-window/`;
diff --git a/src/routes/academicRoutes/index.jsx b/src/routes/academicRoutes/index.jsx
index f067a3fd2..cb23e55b6 100644
--- a/src/routes/academicRoutes/index.jsx
+++ b/src/routes/academicRoutes/index.jsx
@@ -1,15 +1,11 @@
 import { host } from "../globalRoutes";
 
 export const calendarRoute = `${host}/aims/api/calendar/`;
-export const editCalendarRoute = `${host}/aims/api/calendar/update/`;
-export const addCalendarRoute = `${host}/aims/api/calendar/add/`;
-export const deleteCalendarRoute = `${host}/aims/api/calendar/delete/`;
-export const clearCalendarRoute = `${host}/aims/api/calendar/clear/`;
-export const exportCalendarRoute = `${host}/aims/api/calendar/export/`;
-export const importCalendarRoute = `${host}/aims/api/calendar/import/`;
-export const studentCalenderRoute = `${host}/academic-procedures/api/stu/calendar/student`;
+export const editCalendarRoute = `${host}/aims/api/update-calendar/`;
+export const addCalendarRoute = `${host}/aims/api/add-calendar/`;
+export const deleteCalendarRoute = `${host}/aims/api/delete-calendar/`;
 export const nextSemCoursesRoute = `${host}/academic-procedures/api/stu/next_sem_courses/`;
-export const currentCourseRegistrationRoute = `${host}/academic-procedures/api/stu/current_courseregistration`;
+export const currentCourseRegistrationRoute = `${host}/academic-procedures/api/stu/current_courseregistration/`;
 export const preCourseRegistrationRoute = `${host}/academic-procedures/api/stu/preregistration/`;
 export const preCourseRegistrationSubmitRoute = `${host}/academic-procedures/api/stu/preregistration/submit/`;
 export const swayamRegistrationRoute = `${host}/academic-procedures/api/stu/swayam_courses/`;
@@ -26,83 +22,9 @@ export const getStudentCourseRoute = `${host}/academic-procedures/api/acad/verif
 export const dropStudentCourseRoute = `${host}/academic-procedures/api/acad/verify_course/drop/`;
 export const addStudentCourseRoute = `${host}/academic-procedures/api/acad/addCourse/`;
 export const generatexlsheet = `${host}/aims/api/generatexlsheet`;
-export const availableCoursesRoute = `${host}/aims/api/available-courses`;
 export const academicProceduresFaculty = `${host}/academic-procedures/api/fac/academic_procedures_faculty`;
 export const getAllCourses = `${host}/academic-procedures/api/acad/get_all_courses`;
 export const generateprereport = `${host}/aims/api/generate_preregistration_report/`;
 export const searchPreRegistrationRoute = `${host}/academic-procedures/api/acad/search_preregistration/`;
 export const deletePreRegistrationRoute = `${host}/academic-procedures/api/acad/delete_preregistration/`;
 export const allotCoursesRoute = `${host}/academic-procedures/api/acad/allot_courses/`;
-export const getCourseSlotsRoute = `${host}/academic-procedures/api/acad/get_add_course_slots/`;
-export const getCoursesRoute = `${host}/academic-procedures/api/acad/get_add_courses/`;
-export const editStudentCourseRoute = "/academic-procedures/api/editcourseadmin/";
-export const getSingleCourseRoute   = "/academic-procedures/api/studentcourse/";
-export const semesterOptionsRoute = `${host}/academic-procedures/api/stu/course_reg/semesters/` 
-
-// HOD
-export const HOD_STUDENTS_URL       = `${host}/academic-procedures/api/hod/students/?role=hod`;
-export const HOD_ASSIGN_MANUAL_URL  = `${host}/academic-procedures/api/hod/assign/`;
-export const HOD_UPLOAD_EXCEL_URL   = `${host}/academic-procedures/api/hod/assign/upload-excel/`;
-export const HOD_PENDING_URL        = `${host}/academic-procedures/api/hod/pending/?role=hod`;
-export const HOD_APPROVED_URL       = `${host}/academic-procedures/api/hod/approved/?role=hod`;
-export const HOD_APPROVE_URL        = id => `${host}/academic-procedures/api/hod/approve/${id}/`;
-
-// Faculty
-export const FAC_ASSIGNMENTS_URL    = `${host}/academic-procedures/api/faculty/assignments/?role=faculty`;
-export const FAC_PENDING_URL        = `${host}/academic-procedures/api/faculty/pending/?role=faculty`;
-export const FAC_APPROVED_URL       = `${host}/academic-procedures/api/faculty/approved/?role=faculty`;
-export const FAC_APPROVE_URL        = id => `${host}/academic-procedures/api/faculty/approve/${id}/`;
-
-// TA
-export const TA_STIPENDS_URL        = `${host}/academic-procedures/api/ta/stipends/?role=ta`;
-
-// Aux
-export const TA_LIST_URL            = `${host}/academic-procedures/api/tas/`;
-export const FACULTY_LIST_URL       = `${host}/academic-procedures/api/faculties/`;
-
-
-
-export const studentRegisteredSlotsRoute = `${host}/academic-procedures/api/stu/registered-slots/`;
-export const studentBatchCreateRoute     = `${host}/academic-procedures/api/stu/batch-create/`;
-export const studentListRequestsRoute    = `${host}/academic-procedures/api/stu/replacement-requests/`;
-
-export const adminListRequestsRoute       = `${host}/academic-procedures/api/acad/replacement-requests/`;
-export const allotReplacementCoursesRoute = `${host}/academic-procedures/api/acad/change-requests/allocate_all/`;
-export const revertReplacementRequestsRoute = `${host}/academic-procedures/api/acad/replacement-requests/revert/`;
-export const deleteReplacementRequestsRoute = `${host}/academic-procedures/api/acad/replacement-requests/delete/`;
-export const adminListDropRequestsRoute   = `${host}/academic-procedures/api/acad/drop-requests/`;
-export const approveDropRequestsRoute     = `${host}/academic-procedures/api/acad/drop-requests/approve/`;
-export const deleteDropRequestsRoute      = `${host}/academic-procedures/api/acad/drop-requests/delete/`;
-
-export const adminListAddRequestsRoute   = `${host}/academic-procedures/api/acad/add-requests/`;
-export const approveAddRequestsRoute     = `${host}/academic-procedures/api/acad/add-requests/approve/`;
-export const deleteAddRequestsRoute      = `${host}/academic-procedures/api/acad/add-requests/delete/`;
-
-export const studentDropRegistrationsRoute = `${host}/academic-procedures/api/stu/registrations_drop/`;
-export const studentDropCourseRoute     = `${host}/academic-procedures/api/stu/drop-course/`;
-export const studentDropRequestsRoute   = `${host}/academic-procedures/api/stu/drop-requests/`;
-export const studentAvailableAddCourseSlotsRoute = `${host}/academic-procedures/api/stu/add_course_slots/`;
-export const studentAvailableAddCoursesRoute = `${host}/academic-procedures/api/stu/add_course_courses/`;
-export const studentAddCourseRoute = `${host}/academic-procedures/api/stu/add_course/`;
-export const studentAddRequestsRoute   = `${host}/academic-procedures/api/stu/add-requests/`;
-
-export const StudentSearchRoute     = `${host}/academic-procedures/api/acad/student-search/`;
-
-export const studentQuestionsRoute = `${host}/academic-procedures/api/stu/feedback_questions/`;
-export const studentSubmitRoute  = `${host}/academic-procedures/api/stu/feedback_submit/`;
-
-export const instCoursesRoute  = `${host}/academic-procedures/api/inst/courses/`;
-export const instAllStatsRoute  = `${host}/academic-procedures/api/inst/stats/all/`;
-
-export const adminCoursesRoute    = `${host}/academic-procedures/api/acad/feedback_courses/`;
-export const adminAllStatsRoute = `${host}/academic-procedures/api/acad/stats/all/`;
-
-export const listBatchesRoute   = `${host}/academic-procedures/api/acad/batch_change/batches/`;
-export const listStudentsRoute  = `${host}/academic-procedures/api/acad/batch_change/students/`;
-export const applyBatchRoute    = `${host}/academic-procedures/api/acad/batch_change/apply/`;
-
-
-export const listStudentsPromoteRoute = `${host}/academic-procedures/api/acad/promote/students/`;
-export const applyPromoteRoute = `${host}/academic-procedures/api/acad/promote/apply/`;
-
-export const courseRegistrationReceiptRoute = `${host}/academic-procedures/course_reg_receipt/`;
\ No newline at end of file
diff --git a/src/routes/courseMgmtRoutes/index.jsx b/src/routes/courseMgmtRoutes/index.jsx
new file mode 100644
index 000000000..38bd7ef73
--- /dev/null
+++ b/src/routes/courseMgmtRoutes/index.jsx
@@ -0,0 +1,15 @@
+import { host } from "../globalRoutes";
+
+export const viewcourses = `${host}/api/ocms/{user}/`;
+export const course = `${host}/api/ocms/{course_code}/`;
+export const uploadAssignment = `${host}/api/ocms//{course_code}/upload_assignment`;
+export const addDocument = `${host}/api/ocms/{course_code}/add_document`;
+export const addAssignment = `${host}/api/ocms/{course_code}/add_assignment`;
+export const submitAttendance = `${host}/api/ocms/{course_code}/submit_attendance`;
+export const viewAttendance = `${host}/api/ocms/{course_code}/view_attendance`;
+export const updateGrade = `${host}/api/ocms/{course_code}/update_grade`;
+
+// above path of the api is incorrect follow below path as /ocms/api/...
+export const createGradingScheme = `${host}/ocms/api/upload-grading-scheme/`;
+export const getAttendance = `${host}/ocms/api/get-attendance/`;
+export const uploadAttendance = `${host}/ocms/api/upload-attendance/`;
diff --git a/src/routes/departmentRoutes/index.jsx b/src/routes/departmentRoutes/index.jsx
new file mode 100644
index 000000000..ee2d78d9f
--- /dev/null
+++ b/src/routes/departmentRoutes/index.jsx
@@ -0,0 +1,8 @@
+import { host } from "../globalRoutes";
+
+export const getAnnouncements = `${host}/dep/api/dep-main/`;
+export const makeAnnouncements = `${host}/dep/api/announcements/`;
+export const getLabs = `${host}/dep/api/labs/`;
+export const editLabs = `${host}/dep/api/labsadd/`;
+export const getInformation = `${host}/dep/api/information/`;
+export const editInformation = `${host}/dep/api/information/update-create/`;
diff --git a/src/routes/filetrackingRoutes/index.jsx b/src/routes/filetrackingRoutes/index.jsx
new file mode 100644
index 000000000..214a4ad69
--- /dev/null
+++ b/src/routes/filetrackingRoutes/index.jsx
@@ -0,0 +1,14 @@
+import { host } from "../globalRoutes";
+
+export const designationsRoute = `${host}/filetracking/api/designations/`;
+export const createDraftRoute = `${host}/filetracking/api/createdraft/`;
+export const getDraftRoute = `${host}/filetracking/api/draft/`;
+export const createFileRoute = `${host}/filetracking/api/file/`;
+export const getFilesRoute = `${host}/filetracking/api/inbox/`;
+export const createArchiveRoute = `${host}/filetracking/api/createarchive/`;
+export const getArchiveRoute = `${host}/filetracking/api/archive/`;
+export const unArchiveRoute = `${host}/filetracking/api/unarchive/`;
+export const forwardFileRoute = `${host}/filetracking/api/forwardfile/`;
+export const outboxRoute = `${host}/filetracking/api/outbox/`;
+export const historyRoute = `${host}/filetracking/api/history/`;
+export const getUsernameRoute = `${host}/filetracking/api/dropdown/`;
diff --git a/src/routes/globalRoutes/index.jsx b/src/routes/globalRoutes/index.jsx
index 2ec9eeb62..bc26f6e5f 100644
--- a/src/routes/globalRoutes/index.jsx
+++ b/src/routes/globalRoutes/index.jsx
@@ -2,3 +2,5 @@ export const host = "http://127.0.0.1:8000";
 export const authRoute = `${host}/api/auth/me`;
 export const loginRoute = `${host}/api/auth/login/`;
 export const mediaRoute = `${host}/media/`;
+export const resetPasswordRoute = `${host}/api/auth/password-reset/`;
+export const changePassowordRoute = `${host}/api/auth/password-reset-confirm/`;
diff --git a/src/routes/health_center/index.jsx b/src/routes/health_center/index.jsx
new file mode 100644
index 000000000..ee6ce9edc
--- /dev/null
+++ b/src/routes/health_center/index.jsx
@@ -0,0 +1,5 @@
+import { host } from "../globalRoutes";
+
+export const compounderRoute = `${host}/healthcenter/api/compounder/`;
+export const studentRoute = `${host}/healthcenter/api/student/`;
+export const GetfileRoute = `${host}/healthcenter/compounder/view_file/`;
diff --git a/src/routes/hostelManagementRoutes/index.jsx b/src/routes/hostelManagementRoutes/index.jsx
new file mode 100644
index 000000000..1c5123ffb
--- /dev/null
+++ b/src/routes/hostelManagementRoutes/index.jsx
@@ -0,0 +1,37 @@
+import { host } from "../globalRoutes";
+
+export const getNotices = `${host}/hostelmanagement/hostel_notices/`;
+export const getCaretakers = `${host}/hostelmanagement/get_caretakers/`;
+export const getWardens = `${host}/hostelmanagement/get_wardens/`;
+export const getBatches = `${host}/hostelmanagement/get_batches/`;
+export const createNotice = `${host}/hostelmanagement/create_notice/`;
+export const deleteNotice = `${host}/hostelmanagement/delete_notice/`;
+export const viewHostel = `${host}/hostelmanagement/admin-hostel-list`;
+export const requestRoom = `${host}/hostelmanagement/book_guest_room/`;
+export const requestLeave = `${host}/hostelmanagement/create_hostel_leave/`;
+export const addHostelRoute = `${host}/hostelmanagement/add-hostel/`;
+export const assignCaretakers = `${host}/hostelmanagement/assign_caretakers/`;
+export const assignWarden = `${host}/hostelmanagement/assign_warden/`;
+export const assignBatch = `${host}/hostelmanagement/assign_batch/`;
+export const getStudentsInfo = `${host}/hostelmanagement/students_get_students_info/`;
+export const request_guest_room = `${host}/hostelmanagement/book_guest_room/`;
+export const getStudentsInfo2 = `${host}/hostelmanagement/caretaker_get_students_info/`;
+export const imposeFineRoute = `${host}/hostelmanagement/impose-fine/`;
+export const show_leave_request = `${host}/hostelmanagement/all_leave_data/`;
+export const update_leave_status = `${host}/hostelmanagement/update_leave_status/`;
+export const fetch_fines_url = `${host}/hostelmanagement/fetch-fine/`;
+export const update_fine_status_url = (fine_id) =>
+  `${host}/hostelmanagement/update-fine-status/${fine_id}/`;
+export const fetch_complaint = `${host}/hostelmanagement/hostel_complaints/`;
+export const fine_show = `${host}/hostelmanagement/fine-show/`;
+export const my_leaves = `${host}/hostelmanagement/my_leaves/`;
+export const show_guestroom_booking_request = `${host}/hostelmanagement/fetching_guest_room_request/`;
+export const update_guest_room = `${host}/hostelmanagement/update_guest_room/`;
+export const get_intender_id = `${host}/hostelmanagement/get_intender_id/`;
+export const get_guestroom_bookings_for_students = `${host}/hostelmanagement/get_guest_room_request_students/`;
+export const upload_attendance = `${host}/hostelmanagement/upload_attendance/`;
+export const view_attendance = `${host}/hostelmanagement/view_attendance/`;
+export const assign_batch = `${host}/hostelmanagement/batch-assign/`;
+export const download_hostel_allotment = `${host}/hostelmanagement/download_hostel_allotment/`;
+export const assign_roomsbywarden = `${host}/hostelmanagement/assign-roomsbywarden/`;
+export const update_student_allotment = `${host}/hostelmanagement/update-student-allotment/`;
diff --git a/src/routes/hr/index.jsx b/src/routes/hr/index.jsx
new file mode 100644
index 000000000..7b8d9e9e7
--- /dev/null
+++ b/src/routes/hr/index.jsx
@@ -0,0 +1,55 @@
+import { host } from "../globalRoutes";
+
+export const get_form_initials = `${host}/hr2/api/get_form_initials`;
+export const get_employee_initials = `${host}/hr2/api/get_employee_initials`;
+export const search_employees = `${host}/hr2/api/search_employees`;
+export const offline_leave_form = `${host}/hr2/api/offline_leave_form`;
+export const get_form_track = (formId) =>
+  `${host}/hr2/api/get_track_file/${formId}`;
+// admin routes
+export const admin_get_all_leave_balances = `${host}/hr2/api/admin_get_all_leave_balances`;
+export const admin_get_leave_requests = `${host}/hr2/api/admin_get_leave_requests`;
+
+export const get_leave_balance = `${host}/hr2/api/get_leave_balance`;
+export const submit_leave_form = `${host}/hr2/api/submit_leave_form`;
+export const get_leave_form_by_id = `${host}/hr2/api/get_leave_form_by_id`;
+export const handle_leave_academic_responsibility = `${host}/hr2/api/handle_leave_academic_responsibility`;
+export const handle_leave_administrative_responsibility = `${host}/hr2/api/handle_leave_administrative_responsibility`;
+export const download_leave_form_pdf = `${host}/hr2/api/download_leave_form_pdf`;
+export const get_leave_inbox = `${host}/hr2/api/get_leave_inbox`;
+export const handle_leave_file = `${host}/hr2/api/handle_leave_file`;
+
+export const search_employee = `${host}/hr2/api/search_employee`;
+export const get_my_details = `${host}/hr2/api/get_my_details`;
+
+export const get_form_id = `${host}/hr2/api/get_form_id`;
+// Leave routes
+export const get_leave_requests = `${host}/hr2/api/get_leave_requests`;
+
+export const get_leave_archive = `${host}/hr2/api/get_leave_archive`;
+
+export const view_leave_form = `${host}/hr2/api/view_leave_form_data`;
+export const leave_edit_handle = `${host}/hr2/api/leave_edit_handle`;
+export const leave_file_handle = `${host}/hr2/api/leave_file_handle`;
+
+// LTC routes
+export const get_ltc_requests = `${host}/hr2/api/get_ltc_requests`;
+export const get_ltc_inbox = `${host}/hr2/api/get_ltc_inbox`;
+export const get_ltc_archive = `${host}/hr2/api/get_ltc_archive`;
+
+// CPDA Advance routes
+export const get_cpda_adv_requests = `${host}/hr2/api/get_cpda_adv_requests`;
+export const get_cpda_adv_inbox = `${host}/hr2/api/get_cpda_adv_inbox`;
+export const get_cpda_adv_archive = `${host}/hr2/api/get_cpda_adv_archive`;
+export const submit_cpda_adv_form = `${host}/hr2/api/submit_cpda_adv_form`;
+export const view_cpda_adv_form = `${host}/hr2/api/view_cpda_adv_form_data`;
+
+// CPDA Claim routes
+export const get_cpda_claim_requests = `${host}/hr2/api/get_cpda_claim_requests`;
+export const get_cpda_claim_inbox = `${host}/hr2/api/get_cpda_claim_inbox`;
+export const get_cpda_claim_archive = `${host}/hr2/api/get_cpda_claim_archive`;
+
+// Appraisal routes
+export const get_appraisal_requests = `${host}/hr2/api/get_appraisal_requests`;
+export const get_appraisal_inbox = `${host}/hr2/api/get_appraisal_inbox`;
+export const get_appraisal_archive = `${host}/hr2/api/get_appraisal_archive`;
diff --git a/src/routes/inventoryRoutes/index.jsx b/src/routes/inventoryRoutes/index.jsx
new file mode 100644
index 000000000..61a3517bd
--- /dev/null
+++ b/src/routes/inventoryRoutes/index.jsx
@@ -0,0 +1,10 @@
+import { host } from "../globalRoutes";
+
+export const InventoryRequest = `${host}/inventory/api/requests/`;
+export const InventoryData = `${host}/inventory/api/item-count/`;
+export const InventorySections = (selectedDepartment) =>
+  `${host}/inventory/api/sections/?section=${selectedDepartment}`;
+export const InventoryDepartments = (selectedDepartment) =>
+  `${host}/inventory/api/departments/?department=${selectedDepartment}`;
+export const InventoryAdd = (val) => `${host}/inventory/api/${val}/`;
+export const InventoryTransfer = `${host}/inventory/api/transfer_product/`;
diff --git a/src/routes/otheracademicRoutes/index.jsx b/src/routes/otheracademicRoutes/index.jsx
new file mode 100644
index 000000000..1959aae32
--- /dev/null
+++ b/src/routes/otheracademicRoutes/index.jsx
@@ -0,0 +1,33 @@
+import { host } from "../globalRoutes";
+
+export const Leave_Form_Submit = `${host}/otheracademic/api/leave-form-submit/`;
+export const Leave_PG_Submit = `${host}/otheracademic/api/leave-pg-submit/`;
+export const Bonafide_Form_Submit = `${host}/otheracademic/api/bonafide-form-submit/`;
+export const Fetch_Pending_Bonafide_Request = `${host}/otheracademic/api/admin-bonafide-requests/`;
+export const Update_Bonafide_Status = `${host}/otheracademic/api/admin-updates/`;
+export const Get_Bonafide_Status = `${host}/otheracademic/api/bonafide-status/`;
+export const Fetch_Pending_Request = `${host}/otheracademic/api/fetch-pending-leaves/`;
+export const Update_Leave_Status = `${host}/otheracademic/api/update-leave-status/`;
+export const Fetch_Pending_Request_TA = `${host}/otheracademic/api/fetch-pending-leaves-ta/`;
+export const Update_Leave_Status_TA = `${host}/otheracademic/api/update-leave-status-ta/`;
+export const Fetch_Pending_Request_Thesis = `${host}/otheracademic/api/fetch-pending-leaves-thesis/`;
+export const Update_Leave_Status_Thesis = `${host}/otheracademic/api/update-leave-status-thesis/`;
+export const Get_Leave_Requests = `${host}/otheracademic/api/get-leave-requests/`;
+export const Get_Leave_Request = `${host}/otheracademic/api/get_leave_requests/`;
+export const Get_PG_Leave_Requests = `${host}/otheracademic/api/get-pg-leave-requests/`;
+export const Assistantship_Form_Submit = `${host}/otheracademic/api/assistantship-form-submit/`;
+export const HOD_Fetch = `${host}/otheracademic/api/deptadmin-pending-requests/`;
+export const HOD_Update = `${host}/otheracademic/api/deptadmin-update-status/`;
+// export const Hod_Fetch_Pending_Assistantship_Requests = `${host}/otheracademic/api/hod_fetch_pending_assistantship_requests/`;
+// export const Hod_Update_Assistantship_Status = `${host}/otheracademic/api/hod_update_assistantship_status/`;
+export const AcadAdmin_Fetch_Pending_Assistantship_Requests = `${host}/otheracademic/api/acadadmin-pending-requests/`;
+export const AcadAdmin_Update_Assistantship_Status = `${host}/otheracademic/api/acadadmin-update-status/`;
+export const TA_Supervisor_assistantship_update = `${host}/otheracademic/api/TA-supervisor-assistantship-update/`;
+export const Ths_Supervisor_assistantship_update = `${host}/otheracademic/api/Ths-supervisor-assistantship-update/`;
+export const Get_Assistantship_Status = `${host}/otheracademic/api/get_assistantship_status/`;
+export const TA_supervisor_pending_requests = `${host}/otheracademic/api/TA-supervisor-pending-requests/`;
+export const Ths_supervisor_pending_requests = `${host}/otheracademic/api/Ths-supervisor-pending-requests/`;
+export const Director_fetch = `${host}/otheracademic/api/director-pending-requests/`;
+export const Director_Update = `${host}/otheracademic/api/director-update-status/`;
+export const Dean_fetch = `${host}/otheracademic/api/dean-pending-requests/`;
+export const Dean_Update = `${host}/otheracademic/api/dean-update-status/`;
diff --git a/src/routes/placementCellRoutes/index.jsx b/src/routes/placementCellRoutes/index.jsx
new file mode 100644
index 000000000..afdcf25bc
--- /dev/null
+++ b/src/routes/placementCellRoutes/index.jsx
@@ -0,0 +1,21 @@
+import { host } from "../globalRoutes";
+
+export const addPlacementEventForm = `${host}/placement/api/placement/`;
+export const fetchApplicationsRoute = `${host}/placement/api/student-applications/`;
+export const handleStatusChangeRoute = `${host}/placement/api/student-applications/`;
+export const downloadExcelRoute = `${host}/placement/api/download-applications/`;
+export const submitNextRoundDetailsRoute = `${host}/placement/api/nextround/`;
+export const downloadCVRoute = `${host}/placement/api/generate-cv/`;
+export const calendarEventsRoute = `${host}/placement/api/calender/`;
+export const fetchPlacementStatsRoute = `${host}/placement/api/statistics/`;
+export const deletePlacementStatsRoute = `${host}/placement/api/delete-statistics/`;
+export const fetchPlacementScheduleRoute = `${host}/placement/api/placement/`;
+export const fetchTimeLineRoute = `${host}/placement/api/timeline/`;
+export const fetchDebaredlistRoute = `${host}/placement/api/debared-students/`;
+export const debarredStatusRoute = `${host}/placement/api/debared-status/`;
+export const fetchFieldsSubmitformRoute = `${host}/placement/api/add-field/`;
+export const fetchRestrictionsRoute = `${host}/placement/api/restrictions/`;
+export const fetchRegistrationRoute = `${host}/placement/api/registration/`;
+export const ApplyForPlacementRoute = `${host}/placement/api/apply-for-placement/`;
+export const fetchFormFieldsRoute = `${host}/placement/api/form-fields/`;
+export const sendNotificationRoute = `${host}/notifications/api/placement_cell_notification/`;
diff --git a/src/routes/purchaseRoutes/index.jsx b/src/routes/purchaseRoutes/index.jsx
new file mode 100644
index 000000000..3a9222000
--- /dev/null
+++ b/src/routes/purchaseRoutes/index.jsx
@@ -0,0 +1,28 @@
+import { host } from "../globalRoutes";
+
+export const viewIndentRoute = `${host}/purchase-and-store/api/view_indent/`;
+export const deleteIndentRoute = `${host}/purchase-and-store/api/delete_indent/`;
+export const viewIndentByUsernameAndRoleRoute = (username, role) =>
+  `${host}/purchase-and-store/api/indentview/${username}?role=${role}`;
+export const viewIndentByUsernameAndRoleRoute2 = (username, role) =>
+  `${host}/purchase-and-store/api/indentview2/${username}?role=${role}`;
+export const archiveViewRoute = (username, role) =>
+  `${host}/purchase-and-store/api/archieveview/${username}?role=${role}`;
+export const forwardIndentRoute = (indentID) =>
+  `${host}/purchase-and-store/api/forward_indent/${indentID}/`;
+export const getDesignationsRoute = (receiverName) =>
+  `${host}/filetracking/getdesignations/${receiverName}`;
+export const createProposalRoute = (role) =>
+  `${host}/purchase-and-store/api/create_proposal/?role=${role}`;
+export const createDraftRoute = () =>
+  `${host}/purchase-and-store/api/create_draft/`;
+export const outboxViewRoute2 = (username, role) =>
+  `${host}/purchase-and-store/api/outboxview2/${username}?role=${role}`;
+export const filedIndentRoute = (username) =>
+  `${host}/purchase-and-store/api/my-indents/${username}`;
+export const draftViewRoute = (username) =>
+  `${host}/purchase-and-store/api/draftview/${username}`;
+export const forwardIndentFileRoute = (indentID) =>
+  `${host}/purchase-and-store/api/indentFile/forward/${indentID}`;
+export const archiveIndentRoute = (role, id) =>
+  `${host}/purchase-and-store/api/archieve_indent/4322/?role=${role}&file_id=${id}`;
diff --git a/src/routes/visitorsHostelRoutes/index.jsx b/src/routes/visitorsHostelRoutes/index.jsx
new file mode 100644
index 000000000..69baec77d
--- /dev/null
+++ b/src/routes/visitorsHostelRoutes/index.jsx
@@ -0,0 +1,18 @@
+// export const host = "http://127.0.0.1:8000";
+import { host } from "../globalRoutes";
+
+export const fetchAvailableRoomsRoute = `${host}/visitorhostel/room_availabity_new/`;
+export const confirmBookingRoute = `${host}/visitorhostel/confirm-booking-new/`;
+export const fetchCompletedBookingsRoute = `${host}/visitorhostel/completed-bookings/`;
+export const fetchCancelledBookingsRoute = `${host}/visitorhostel/get-inactive-bookings/`;
+export const fetchBookingsRoute = `${host}/visitorhostel/get-booking-requests/`;
+export const requestBookingRoute = `${host}/visitorhostel/request-booking/`;
+export const addInventoryRoute = `${host}/visitorhostel/api/inventory_add/`;
+export const getActiveBookingsRoute = `${host}/visitorhostel/get-active-bookings/`;
+export const cancelBookingRoute = `${host}/visitorhostel/cancel-booking/`;
+export const fetchIncomeDataRoute = `${host}/visitorhostel/accounts-income/`;
+export const addItemsRoute = `${host}/visitorhostel/api/inventory_add/`;
+export const fetchInventorydataRoute = `${host}/visitorhostel/api/inventory_list/`;
+export const fetchPartialBookingdataRoute = `${host}/visitorhostel/check-partial-booking/`;
+export const checkInBookingRoute = `${host}/visitorhostel/check-in/`;
+export const checkOutBookingRoute = `${host}/visitorhostel/check-out/`;