diff --git a/.husky/pre-commit b/.husky/pre-commit
index 589d19328..41071e5be 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,10 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-# Run Prettier formatting only on staged files (using lint-staged)
+# Run checks only on staged files.
 npx lint-staged || exit 1
-
-# Run lint, if it fails, the commit will be aborted
-npm run lint || exit 1
-
-git add .
diff --git a/package.json b/package.json
index 236751ab4..ba201fc2e 100644
--- a/package.json
+++ b/package.json
@@ -62,8 +62,7 @@
   "lint-staged": {
     "*.{js,jsx}": [
       "prettier --write",
-      "eslint --fix",
-      "git add"
+      "eslint --fix"
     ]
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
index 99d55a675..48fdf09c7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,6 +15,7 @@ import InactivityHandler from "./helper/inactivityhandler";
 import Examination from "./Modules/Examination/examination";
 import Database from "./Modules/Database/database";
 import ProgrammeCurriculumRoutes from "./Modules/Program_curriculum/programmCurriculum";
+import ComplaintManagementModule from "./Modules/ComplaintManagement";
 import NotFoundPage from "./components/NotFoundPage";
 
 const theme = createTheme({
@@ -82,6 +83,14 @@ export default function App() {
         <Route path="/reset-password" element={<ForgotPassword />} />
         <Route path="/examination/*" element={<Examination />} />
         <Route path="/database/*" element={<Database />} />
+        <Route
+          path="/complaint/*"
+          element={
+            <Layout>
+              <ComplaintManagementModule />
+            </Layout>
+          }
+        />
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </MantineProvider>
diff --git a/src/Modules/ComplaintManagement.zip b/src/Modules/ComplaintManagement.zip
new file mode 100644
index 000000000..6061bec0e
Binary files /dev/null and b/src/Modules/ComplaintManagement.zip differ
diff --git a/src/Modules/ComplaintManagement/ComplaintCreate.jsx b/src/Modules/ComplaintManagement/ComplaintCreate.jsx
new file mode 100644
index 000000000..f338f3c68
--- /dev/null
+++ b/src/Modules/ComplaintManagement/ComplaintCreate.jsx
@@ -0,0 +1,6 @@
+import ComplaintManager from "./components/ComplaintManager";
+
+// Thin view that composes micro-components through ComplaintManager.
+export default function ComplaintCreate() {
+  return <ComplaintManager defaultMode="create" />;
+}
diff --git a/src/Modules/ComplaintManagement/ComplaintList.jsx b/src/Modules/ComplaintManagement/ComplaintList.jsx
new file mode 100644
index 000000000..0f0e923a9
--- /dev/null
+++ b/src/Modules/ComplaintManagement/ComplaintList.jsx
@@ -0,0 +1,5 @@
+import ComplaintManager from "./components/ComplaintManager";
+
+export default function ComplaintList() {
+  return <ComplaintManager defaultMode="list" />;
+}
diff --git a/src/Modules/ComplaintManagement/ComplaintManagement.module.css b/src/Modules/ComplaintManagement/ComplaintManagement.module.css
new file mode 100644
index 000000000..81bbbfb04
--- /dev/null
+++ b/src/Modules/ComplaintManagement/ComplaintManagement.module.css
@@ -0,0 +1,254 @@
+/* ──────────────────────────────────────────────────────────
+   Complaint Management – Module Styles
+   Aligned with the Fusion design system (#15abff accent, #F5F7F8 canvas)
+   ────────────────────────────────────────────────────────── */
+
+.page {
+  background: #ffffff;
+  border: 1px solid #e8eef3;
+  border-radius: 8px;
+  padding: 1.25rem 1.5rem;
+}
+
+/* ── Global Mantine overrides (scoped to .page) ───────── */
+
+.page :global(.mantine-Button-root) {
+  border-radius: 6px;
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.15s ease;
+}
+
+.page :global(.mantine-Button-root):hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(21, 171, 255, 0.18);
+}
+
+.page :global(.mantine-Input-input),
+.page :global(.mantine-Select-input),
+.page :global(.mantine-Textarea-input) {
+  border-radius: 6px;
+  border: 1px solid #d5dce4;
+  background: #ffffff;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.page :global(.mantine-Input-input):focus,
+.page :global(.mantine-Select-input):focus,
+.page :global(.mantine-Textarea-input):focus {
+  border-color: #15abff;
+  box-shadow: 0 0 0 3px rgba(21, 171, 255, 0.12);
+}
+
+/* ── Page header ──────────────────────────────────────── */
+
+.headerBlock {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1.25rem;
+}
+
+.title {
+  color: #1a1a2e;
+  font-weight: 600;
+  font-size: 1.35rem;
+  letter-spacing: -0.01em;
+}
+
+.subtitle {
+  color: #6b7a8d;
+  font-weight: 400;
+  font-size: 0.875rem;
+  margin-top: 2px;
+}
+
+.actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.statusNote {
+  color: #94a3b8;
+  font-size: 0.8rem;
+  margin-top: 0.35rem;
+}
+
+/* ── Card & panel surfaces ────────────────────────────── */
+
+.tablePanel,
+.oversightHeader,
+.reportHeader,
+.notificationPanel,
+.moduleCard {
+  background: #ffffff;
+  border: 1px solid #e8eef3;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  padding: 1rem;
+}
+
+/* ── Summary stat cards ───────────────────────────────── */
+
+.summaryCard {
+  background: #ffffff;
+  border: 1px solid #e8eef3;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  padding: 1rem 1.25rem;
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.summaryCard::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #15abff, #6dc8ff);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.summaryCard:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(21, 171, 255, 0.1);
+  border-color: #c4e2f5;
+}
+
+.summaryCard:hover::before {
+  opacity: 1;
+}
+
+/* ── Toolbars ─────────────────────────────────────────── */
+
+.notificationToolbar,
+.reportToolbar {
+  background: #F5F7F8;
+  border: 1px solid #e8eef3;
+  border-radius: 6px;
+  padding: 0.875rem;
+}
+
+/* ── Notification cards ───────────────────────────────── */
+
+.notificationEmpty {
+  background: #F5F7F8;
+  border: 1px dashed #cbd5e1;
+  border-radius: 8px;
+  padding: 2rem 1rem;
+  text-align: center;
+  color: #6b7a8d;
+}
+
+.notificationCardUnread {
+  background: #f0f9ff;
+  border-left: 3px solid #15abff;
+  transition: background 0.15s ease;
+}
+
+.notificationCardRead {
+  background: #ffffff;
+  border-left: 3px solid #d5dce4;
+  transition: background 0.15s ease;
+}
+
+.notificationCardUnread:hover {
+  background: #e6f4ff;
+}
+
+.notificationCardRead:hover {
+  background: #F5F7F8;
+}
+
+/* ── Data tables ──────────────────────────────────────── */
+
+.tableSurface {
+  border: 1px solid #e8eef3;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.tableClean :global(thead th) {
+  background: #F5F7F8;
+  color: #3d4f5f;
+  font-weight: 600;
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  border-bottom: 1px solid #e8eef3;
+  padding: 0.75rem 1rem;
+}
+
+.tableClean :global(tbody td) {
+  vertical-align: middle;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #f1f5f8;
+  color: #3d4f5f;
+  font-size: 0.875rem;
+}
+
+.tableClean :global(tbody tr) {
+  transition: background 0.1s ease;
+}
+
+.tableClean :global(tbody tr:hover) {
+  background: #f8fbff;
+}
+
+/* ── Utilities ────────────────────────────────────────── */
+
+.cellClamp {
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.monoRef {
+  font-family: 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
+  color: #3d4f5f;
+  font-size: 0.8rem;
+  font-weight: 500;
+  background: #F5F7F8;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid #e8eef3;
+}
+
+.statusBadge {
+  font-weight: 600;
+  font-size: 0.75rem;
+  padding: 3px 10px;
+  border-radius: 999px;
+}
+
+.pillInfo {
+  background: #15abff12;
+  border: 1px solid #15abff30;
+  color: #0d8ddb;
+  border-radius: 999px;
+  padding: 3px 10px;
+  font-size: 0.78rem;
+  font-weight: 500;
+  display: inline-block;
+}
+
+/* ── Responsive ───────────────────────────────────────── */
+
+@media (max-width: 768px) {
+  .headerBlock {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .cellClamp {
+    max-width: 140px;
+  }
+}
diff --git a/src/Modules/ComplaintManagement/api.js b/src/Modules/ComplaintManagement/api.js
new file mode 100644
index 000000000..f2ef6d4f1
--- /dev/null
+++ b/src/Modules/ComplaintManagement/api.js
@@ -0,0 +1,16 @@
+import axios from "axios";
+import { COMPLAINT_API_BASE } from "../../routes/complaintRoutes";
+
+const complaintApi = axios.create({
+  baseURL: COMPLAINT_API_BASE,
+});
+
+complaintApi.interceptors.request.use((config) => {
+  const token = localStorage.getItem("authToken");
+  if (token) {
+    config.headers.Authorization = `Token ${token}`;
+  }
+  return config;
+});
+
+export default complaintApi;
diff --git a/src/Modules/ComplaintManagement/components/ComplaintBulkActionModal.jsx b/src/Modules/ComplaintManagement/components/ComplaintBulkActionModal.jsx
new file mode 100644
index 000000000..9b8da3a89
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ComplaintBulkActionModal.jsx
@@ -0,0 +1,231 @@
+import PropTypes from "prop-types";
+import { useEffect, useMemo, useState } from "react";
+import {
+  Alert,
+  Button,
+  Group,
+  Modal,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { IconAlertCircle } from "@tabler/icons-react";
+
+const STATUS_OPTIONS = [
+  { value: "1", label: "In Progress" },
+  { value: "2", label: "Resolved" },
+];
+
+const initialForm = {
+  assigned_to: "",
+  assigned_team: "",
+  remarks: "",
+  status: "1",
+  progress_notes: "",
+  estimated_resolution_time: "",
+};
+
+export default function ComplaintBulkActionModal({
+  opened,
+  mode,
+  selectedCount,
+  workers,
+  onClose,
+  onSubmit,
+  isLoading = false,
+}) {
+  const [form, setForm] = useState(initialForm);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (opened) {
+      setForm(initialForm);
+      setError("");
+    }
+  }, [opened, mode]);
+
+  const workerOptions = useMemo(
+    () =>
+      workers.map((worker) => ({
+        value: String(worker.id),
+        label: `${worker.name || `Worker ${worker.id}`} (${worker.worker_type || "general"})`,
+      })),
+    [workers],
+  );
+
+  const handleChange = (field, value) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+    if (error) {
+      setError("");
+    }
+  };
+
+  const handleSubmit = () => {
+    if (mode === "reassign") {
+      if (!form.assigned_to) {
+        setError("Select a worker to reassign the complaint batch.");
+        return;
+      }
+      onSubmit({
+        assigned_to: form.assigned_to,
+        assigned_team: form.assigned_team,
+        remarks: form.remarks,
+      });
+      return;
+    }
+
+    if (!form.status) {
+      setError("Select the intervention status.");
+      return;
+    }
+
+    if (!form.remarks.trim()) {
+      setError("Remarks are required for intervention actions.");
+      return;
+    }
+
+    onSubmit({
+      status: Number(form.status),
+      remarks: form.remarks,
+      progress_notes: form.progress_notes || form.remarks,
+      estimated_resolution_time: form.estimated_resolution_time || null,
+    });
+  };
+
+  let title = "Bulk Intervention";
+  if (mode === "reassign") {
+    title = "Bulk Reassign Complaints";
+  }
+  const helperText =
+    mode === "reassign"
+      ? "Assign the selected complaints to a new worker and optionally add a team note."
+      : "Move the selected complaints forward with one status update and shared remarks.";
+
+  return (
+    <Modal opened={opened} onClose={onClose} title={title} centered size="md">
+      <Stack gap="md">
+        <Alert
+          icon={<IconAlertCircle size={16} />}
+          color="blue"
+          variant="light"
+        >
+          {selectedCount} complaint{selectedCount === 1 ? "" : "s"} selected.
+        </Alert>
+
+        <Text size="sm" c="dimmed">
+          {helperText}
+        </Text>
+
+        {mode === "reassign" ? (
+          <>
+            <Select
+              label="Assign to Worker"
+              placeholder="Select a worker"
+              data={workerOptions}
+              value={form.assigned_to}
+              onChange={(value) => handleChange("assigned_to", value || "")}
+              searchable
+              clearable
+              error={error}
+            />
+            <TextInput
+              label="Assigned Team"
+              placeholder="Optional team or group name"
+              value={form.assigned_team}
+              onChange={(event) =>
+                handleChange("assigned_team", event.currentTarget.value)
+              }
+            />
+            <Textarea
+              label="Internal Note"
+              placeholder="Optional note for the reassignment"
+              minRows={3}
+              value={form.remarks}
+              onChange={(event) =>
+                handleChange("remarks", event.currentTarget.value)
+              }
+            />
+          </>
+        ) : (
+          <>
+            <Select
+              label="Intervention Status"
+              data={STATUS_OPTIONS}
+              value={form.status}
+              onChange={(value) => handleChange("status", value || "")}
+              error={error && !form.status ? error : undefined}
+            />
+            <Textarea
+              label="Remarks"
+              placeholder="Shared remarks for the selected complaints"
+              minRows={3}
+              value={form.remarks}
+              onChange={(event) =>
+                handleChange("remarks", event.currentTarget.value)
+              }
+              error={error && !form.remarks.trim() ? error : undefined}
+            />
+            <Textarea
+              label="Progress Notes"
+              placeholder="Optional more detailed progress notes"
+              minRows={3}
+              value={form.progress_notes}
+              onChange={(event) =>
+                handleChange("progress_notes", event.currentTarget.value)
+              }
+            />
+            <TextInput
+              type="datetime-local"
+              label="Estimated Resolution Time"
+              value={form.estimated_resolution_time}
+              onChange={(event) =>
+                handleChange(
+                  "estimated_resolution_time",
+                  event.currentTarget.value,
+                )
+              }
+            />
+          </>
+        )}
+
+        {error && (
+          <Text size="sm" c="red">
+            {error}
+          </Text>
+        )}
+
+        <Group justify="flex-end">
+          <Button variant="default" onClick={onClose} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} loading={isLoading}>
+            {mode === "reassign" ? "Reassign Complaints" : "Apply Intervention"}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+ComplaintBulkActionModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  mode: PropTypes.oneOf(["reassign", "intervene"]).isRequired,
+  selectedCount: PropTypes.number.isRequired,
+  workers: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+      name: PropTypes.string,
+      worker_type: PropTypes.string,
+    }),
+  ),
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool,
+};
+
+ComplaintBulkActionModal.defaultProps = {
+  workers: [],
+  isLoading: false,
+};
diff --git a/src/Modules/ComplaintManagement/components/ComplaintDetailModal.jsx b/src/Modules/ComplaintManagement/components/ComplaintDetailModal.jsx
new file mode 100644
index 000000000..bb4ca1caa
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ComplaintDetailModal.jsx
@@ -0,0 +1,575 @@
+import PropTypes from "prop-types";
+import {
+  Alert,
+  Modal,
+  Stack,
+  Text,
+  Button,
+  Group,
+  Badge,
+  Card,
+  Divider,
+  Grid,
+  List,
+} from "@mantine/core";
+
+const STATUS_LABELS = new Map([
+  [0, "Pending"],
+  [1, "In Progress"],
+  [2, "Resolved"],
+  [3, "Closed"],
+  [4, "Escalated"],
+  [5, "Reopened"],
+]);
+
+const STATUS_COLORS = new Map([
+  [0, "gray"],
+  [1, "yellow"],
+  [2, "green"],
+  [3, "blue"],
+  [4, "orange"],
+  [5, "teal"],
+]);
+
+const ACTION_LABELS = new Map([
+  ["created", "Created"],
+  ["status_updated", "Status Updated"],
+  ["escalated", "Escalated"],
+  ["auto_escalated", "Auto Escalated"],
+  ["caretaker_progress_update", "Progress Updated"],
+  ["reopen_requested", "Reopen Requested"],
+  ["reopen_approved", "Reopen Approved"],
+  ["verified_and_closed", "Verified and Closed"],
+  ["verification_rejected", "Verification Rejected"],
+]);
+
+const getStatusLabel = (status) =>
+  STATUS_LABELS.get(Number(status)) || status || "-";
+
+const getSlaStatus = (deadline) => {
+  if (!deadline) {
+    return { label: "Unknown", color: "gray" };
+  }
+
+  const diffHours =
+    (new Date(deadline).getTime() - Date.now()) / (1000 * 60 * 60);
+  if (diffHours < 0) return { label: "Breached", color: "red" };
+  if (diffHours <= 2) return { label: "Approaching", color: "orange" };
+  return { label: "Safe", color: "green" };
+};
+
+const complaintDetailsShape = PropTypes.shape({
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  complaint_ref: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  complaint_type: PropTypes.string,
+  status: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  is_escalated: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  escalation_reason: PropTypes.string,
+  escalated_date: PropTypes.string,
+  location: PropTypes.string,
+  specific_location: PropTypes.string,
+  priority: PropTypes.string,
+  sla_deadline: PropTypes.string,
+  verification_source: PropTypes.string,
+  verification_status_label: PropTypes.string,
+  verification_status: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]),
+  resolved_at: PropTypes.string,
+  closed_at: PropTypes.string,
+  reopen_requested: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+  reopen_reason: PropTypes.string,
+  reopen_allowed_until: PropTypes.string,
+  reopen_window_open: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+  updated_at: PropTypes.string,
+  details: PropTypes.string,
+  remarks: PropTypes.string,
+  feedback: PropTypes.string,
+  events: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      action: PropTypes.string,
+      actor_name: PropTypes.string,
+      created_at: PropTypes.string,
+      from_status: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      to_status: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      note: PropTypes.string,
+      metadata: PropTypes.shape({
+        source: PropTypes.string,
+      }),
+    }),
+  ),
+});
+
+export default function ComplaintDetailModal({
+  opened,
+  onClose,
+  detail,
+  canResolve = false,
+  canManageEscalated = false,
+  canVerify = false,
+  canRequestReopen = false,
+  canSubmitFeedback = false,
+  onResolve = () => {},
+  onEscalate = () => {},
+  onVerifyApprove = () => {},
+  onVerifyReject = () => {},
+  onRequestReopen = () => {},
+  onSubmitFeedback = () => {},
+}) {
+  const handleResolveClick = () => {
+    onResolve(detail?.complaint_details);
+  };
+
+  const handleEscalateClick = () => {
+    onEscalate(detail?.complaint_details);
+  };
+
+  const status = Number(detail?.complaint_details?.status);
+  const statusLabel = STATUS_LABELS.get(status) || "Unknown";
+  const statusColor = STATUS_COLORS.get(status) || "gray";
+  const sla = getSlaStatus(detail?.complaint_details?.sla_deadline);
+  const isEscalated = status === 4;
+  const assignedWorker =
+    detail?.assigned_worker_details?.name ||
+    detail?.worker_details?.name ||
+    "Not assigned";
+  const timeline =
+    detail?.status_timeline || detail?.complaint_details?.events || [];
+  const reopenDeadline = detail?.complaint_details?.reopen_allowed_until;
+  const verificationStatus =
+    detail?.complaint_details?.verification_status_label ||
+    detail?.complaint_details?.verification_status;
+  const canShowResolutionActions =
+    canResolve || (canManageEscalated && isEscalated);
+  const canShowVerificationActions = canVerify && status === 2;
+  const canShowReopenAction =
+    canRequestReopen &&
+    [2, 3].includes(status) &&
+    detail?.complaint_details?.reopen_window_open;
+  const canShowFeedbackAction =
+    canSubmitFeedback &&
+    status === 3 &&
+    !String(detail?.complaint_details?.feedback || "").trim();
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Complaint Details"
+      centered
+      size="lg"
+    >
+      {!detail ? (
+        <Text c="dimmed">No detail loaded.</Text>
+      ) : (
+        <Stack gap="lg">
+          {/* Header Card with Status */}
+          <Card withBorder p="md" radius="md" bg="blue.0">
+            <Group justify="space-between" mb="xs">
+              <div>
+                <Text fw={600} size="lg">
+                  Complaint{" "}
+                  {detail.complaint_details?.complaint_ref ||
+                    `#${detail.complaint_details?.id}`}
+                </Text>
+                <Text size="sm" c="dimmed">
+                  {detail.complaint_details?.complaint_type}
+                </Text>
+              </div>
+              <Badge size="lg" color={statusColor} variant="filled">
+                {statusLabel}
+              </Badge>
+            </Group>
+          </Card>
+
+          {/* Escalation Status Card */}
+          {detail.complaint_details?.is_escalated === 1 && (
+            <Card
+              withBorder
+              p="md"
+              radius="md"
+              bg="orange.1"
+              style={{ borderColor: "#ff922b" }}
+            >
+              <Group>
+                <Badge color="orange" variant="filled">
+                  Escalated to Supervisor
+                </Badge>
+              </Group>
+              {detail.complaint_details?.escalation_reason && (
+                <Text size="sm" mt="xs" c="dimmed">
+                  <strong>Reason:</strong>{" "}
+                  {detail.complaint_details?.escalation_reason}
+                </Text>
+              )}
+              {detail.complaint_details?.escalated_date && (
+                <Text size="sm" c="dimmed">
+                  <strong>Escalated on:</strong>{" "}
+                  {new Date(
+                    detail.complaint_details?.escalated_date,
+                  ).toLocaleString()}
+                </Text>
+              )}
+            </Card>
+          )}
+
+          {/* Main Details Grid */}
+          <Grid gutter="md">
+            <Grid.Col span={{ base: 12, sm: 6 }}>
+              <Card withBorder p="md" radius="md">
+                <Stack gap="xs">
+                  <div>
+                    <Text size="sm" c="dimmed" fw={500}>
+                      Location
+                    </Text>
+                    <Text fw={600}>{detail.complaint_details?.location}</Text>
+                  </div>
+                  <div>
+                    <Text size="sm" c="dimmed" fw={500}>
+                      Priority
+                    </Text>
+                    <Text fw={600}>
+                      {detail.complaint_details?.priority || "Standard"}
+                    </Text>
+                  </div>
+                  <div>
+                    <Text size="sm" c="dimmed" fw={500}>
+                      SLA
+                    </Text>
+                    <Group gap="xs">
+                      <Text fw={600}>
+                        {detail.complaint_details?.sla_deadline
+                          ? new Date(
+                              detail.complaint_details.sla_deadline,
+                            ).toLocaleString()
+                          : "Not set"}
+                      </Text>
+                      <Badge size="sm" color={sla.color} variant="filled">
+                        {sla.label}
+                      </Badge>
+                    </Group>
+                  </div>
+                  {detail.complaint_details?.specific_location && (
+                    <div>
+                      <Text size="sm" c="dimmed" fw={500}>
+                        Specific Location
+                      </Text>
+                      <Text fw={600}>
+                        {detail.complaint_details?.specific_location}
+                      </Text>
+                    </div>
+                  )}
+                </Stack>
+              </Card>
+            </Grid.Col>
+
+            <Grid.Col span={{ base: 12, sm: 6 }}>
+              <Card withBorder p="md" radius="md">
+                <Stack gap="xs">
+                  <div>
+                    <Text size="sm" c="dimmed" fw={500}>
+                      Complainer
+                    </Text>
+                    <Text fw={600}>{detail.complainer?.username}</Text>
+                  </div>
+                  <div>
+                    <Text size="sm" c="dimmed" fw={500}>
+                      Assigned Worker
+                    </Text>
+                    <Text fw={600}>{assignedWorker}</Text>
+                  </div>
+                </Stack>
+              </Card>
+            </Grid.Col>
+          </Grid>
+
+          <Card withBorder p="md" radius="md">
+            <Stack gap="xs">
+              <Text size="sm" c="dimmed" fw={500}>
+                Complaint Reference
+              </Text>
+              <Text fw={600}>
+                {detail.complaint_details?.complaint_ref ||
+                  detail.complaint_details?.id}
+              </Text>
+              {detail.complaint_details?.updated_at && (
+                <Text size="sm" c="dimmed">
+                  Last updated:{" "}
+                  {new Date(
+                    detail.complaint_details.updated_at,
+                  ).toLocaleString()}
+                </Text>
+              )}
+              {detail.complaint_details?.verification_source && (
+                <Text size="sm" c="dimmed">
+                  Verified by: {detail.complaint_details.verification_source}
+                </Text>
+              )}
+              {verificationStatus && (
+                <Text size="sm" c="dimmed">
+                  Verification status: {verificationStatus}
+                </Text>
+              )}
+              {detail.complaint_details?.resolved_at && (
+                <Text size="sm" c="dimmed">
+                  Resolved on:{" "}
+                  {new Date(
+                    detail.complaint_details.resolved_at,
+                  ).toLocaleString()}
+                </Text>
+              )}
+              {detail.complaint_details?.closed_at && (
+                <Text size="sm" c="dimmed">
+                  Closed on:{" "}
+                  {new Date(
+                    detail.complaint_details.closed_at,
+                  ).toLocaleString()}
+                </Text>
+              )}
+              {detail.complaint_details?.reopen_requested && (
+                <Text size="sm" c="dimmed">
+                  Reopen requested:{" "}
+                  {detail.complaint_details.reopen_reason || "Yes"}
+                </Text>
+              )}
+              {reopenDeadline && (
+                <Text size="sm" c="dimmed">
+                  Reopen window until:{" "}
+                  {new Date(reopenDeadline).toLocaleString()}
+                </Text>
+              )}
+            </Stack>
+          </Card>
+
+          {/* Description */}
+          <Card withBorder p="md" radius="md">
+            <Stack gap="xs">
+              <div>
+                <Text size="sm" c="dimmed" fw={500}>
+                  Issue Description
+                </Text>
+                <Text>{detail.complaint_details?.details}</Text>
+              </div>
+
+              <Divider />
+
+              <div>
+                <Text size="sm" c="dimmed" fw={500}>
+                  Current Remarks
+                </Text>
+                <Text
+                  c={detail.complaint_details?.remarks ? "black" : "dimmed"}
+                >
+                  {detail.complaint_details?.remarks || "No remarks yet"}
+                </Text>
+              </div>
+
+              {detail.complaint_details?.feedback && (
+                <>
+                  <Divider />
+                  <div>
+                    <Text size="sm" c="dimmed" fw={500}>
+                      Feedback
+                    </Text>
+                    <Text>{detail.complaint_details?.feedback}</Text>
+                  </div>
+                </>
+              )}
+            </Stack>
+          </Card>
+
+          <Card withBorder p="md" radius="md">
+            <Stack gap="xs">
+              <Text fw={600}>Status Timeline</Text>
+              {timeline.length === 0 ? (
+                <Text size="sm" c="dimmed">
+                  No history recorded yet.
+                </Text>
+              ) : (
+                <List spacing="xs" size="sm">
+                  {timeline.map((event) => (
+                    <List.Item key={event.id}>
+                      <Text fw={500}>
+                        {ACTION_LABELS.get(event.action) || event.action}
+                      </Text>
+                      <Text size="xs" c="dimmed">
+                        By: {event.actor_name || "System"}
+                      </Text>
+                      <Text size="xs" c="dimmed">
+                        {event.created_at
+                          ? new Date(event.created_at).toLocaleString()
+                          : "Unknown time"}
+                      </Text>
+                      <Text size="sm">
+                        {getStatusLabel(event.from_status)} →{" "}
+                        {getStatusLabel(event.to_status)}
+                      </Text>
+                      {event.note && (
+                        <Text size="sm" c="dimmed">
+                          {event.note}
+                        </Text>
+                      )}
+                      {event.metadata?.source && (
+                        <Text size="xs" c="dimmed">
+                          Source: {event.metadata.source}
+                        </Text>
+                      )}
+                    </List.Item>
+                  ))}
+                </List>
+              )}
+            </Stack>
+          </Card>
+
+          {/* Action Buttons */}
+          {canShowResolutionActions && (
+            <Group
+              justify="flex-end"
+              mt="md"
+              pt="md"
+              style={{ borderTop: "1px solid #e0e0e0" }}
+            >
+              <Button variant="default" onClick={onClose}>
+                Close
+              </Button>
+              {canResolve && !isEscalated && (
+                <Button
+                  variant="outline"
+                  color="blue"
+                  onClick={handleEscalateClick}
+                >
+                  Escalate Issue
+                </Button>
+              )}
+              <Button color="blue" onClick={handleResolveClick}>
+                {canManageEscalated && isEscalated
+                  ? "Resolve Escalated Complaint"
+                  : "Update Status"}
+              </Button>
+            </Group>
+          )}
+
+          {canShowVerificationActions && (
+            <Group
+              justify="flex-end"
+              mt="md"
+              pt="md"
+              style={{ borderTop: "1px solid #e0e0e0" }}
+            >
+              <Button variant="default" onClick={onClose}>
+                Close
+              </Button>
+              <Button variant="outline" color="red" onClick={onVerifyReject}>
+                Reject Resolution
+              </Button>
+              <Button color="green" onClick={onVerifyApprove}>
+                Verify and Close
+              </Button>
+            </Group>
+          )}
+
+          {canShowReopenAction && (
+            <Group
+              justify="flex-end"
+              mt="md"
+              pt="md"
+              style={{ borderTop: "1px solid #e0e0e0" }}
+            >
+              <Button variant="default" onClick={onClose}>
+                Close
+              </Button>
+              <Button color="orange" onClick={onRequestReopen}>
+                Request Reopen
+              </Button>
+            </Group>
+          )}
+
+          {canShowFeedbackAction && (
+            <Alert color="teal" title="Feedback requested">
+              This complaint is closed. Please submit feedback so the service
+              team can complete the workflow and analyze the resolution.
+            </Alert>
+          )}
+
+          {canShowFeedbackAction && (
+            <Group
+              justify="flex-end"
+              mt="md"
+              pt="md"
+              style={{ borderTop: "1px solid #e0e0e0" }}
+            >
+              <Button variant="default" onClick={onClose}>
+                Close
+              </Button>
+              <Button
+                color="teal"
+                onClick={() => onSubmitFeedback(detail?.complaint_details)}
+              >
+                Submit Feedback
+              </Button>
+            </Group>
+          )}
+        </Stack>
+      )}
+    </Modal>
+  );
+}
+
+ComplaintDetailModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  detail: PropTypes.shape({
+    complaint_details: complaintDetailsShape,
+    complainer: PropTypes.shape({
+      username: PropTypes.string,
+    }),
+    assigned_worker_details: PropTypes.shape({
+      name: PropTypes.string,
+    }),
+    worker_details: PropTypes.shape({
+      name: PropTypes.string,
+    }),
+    status_timeline: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        action: PropTypes.string,
+        actor_name: PropTypes.string,
+        created_at: PropTypes.string,
+        from_status: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        to_status: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        note: PropTypes.string,
+        metadata: PropTypes.shape({
+          source: PropTypes.string,
+        }),
+      }),
+    ),
+  }),
+  canResolve: PropTypes.bool,
+  canManageEscalated: PropTypes.bool,
+  canVerify: PropTypes.bool,
+  canRequestReopen: PropTypes.bool,
+  canSubmitFeedback: PropTypes.bool,
+  onResolve: PropTypes.func,
+  onEscalate: PropTypes.func,
+  onVerifyApprove: PropTypes.func,
+  onVerifyReject: PropTypes.func,
+  onRequestReopen: PropTypes.func,
+  onSubmitFeedback: PropTypes.func,
+};
+
+ComplaintDetailModal.defaultProps = {
+  detail: null,
+  canResolve: false,
+  canManageEscalated: false,
+  canVerify: false,
+  canRequestReopen: false,
+  canSubmitFeedback: false,
+  onResolve: () => {},
+  onEscalate: () => {},
+  onVerifyApprove: () => {},
+  onVerifyReject: () => {},
+  onRequestReopen: () => {},
+  onSubmitFeedback: () => {},
+};
diff --git a/src/Modules/ComplaintManagement/components/ComplaintFeedbackModal.jsx b/src/Modules/ComplaintManagement/components/ComplaintFeedbackModal.jsx
new file mode 100644
index 000000000..82edd12c0
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ComplaintFeedbackModal.jsx
@@ -0,0 +1,120 @@
+import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
+import {
+  Button,
+  Group,
+  Modal,
+  Select,
+  Stack,
+  Text,
+  Textarea,
+} from "@mantine/core";
+
+const ratingOptions = [1, 2, 3, 4, 5].map((value) => ({
+  value: String(value),
+  label: `${value} / 5`,
+}));
+
+export default function ComplaintFeedbackModal({
+  opened,
+  onClose,
+  complaint,
+  onSubmit,
+  loading = false,
+}) {
+  const [feedback, setFeedback] = useState("");
+  const [rating, setRating] = useState("5");
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (opened) {
+      setFeedback("");
+      setRating("5");
+      setError("");
+    }
+  }, [opened]);
+
+  const handleSubmit = async () => {
+    const trimmed = feedback.trim();
+    if (!trimmed) {
+      setError("Feedback is required.");
+      return;
+    }
+
+    setError("");
+    await onSubmit({
+      feedback: trimmed,
+      rating: Number(rating),
+    });
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Submit Feedback"
+      centered
+      size="md"
+    >
+      <Stack gap="md">
+        <Text size="sm" c="dimmed">
+          Share how your complaint was handled. This helps improve service
+          quality.
+        </Text>
+
+        {complaint?.id && (
+          <Text size="sm" c="dimmed">
+            Complaint #{complaint.id}
+          </Text>
+        )}
+
+        <Select
+          label="Rating"
+          value={rating}
+          onChange={(value) => setRating(value || "5")}
+          data={ratingOptions}
+          disabled={loading}
+        />
+
+        <Textarea
+          label="Feedback"
+          value={feedback}
+          onChange={(event) => setFeedback(event.currentTarget.value)}
+          minRows={4}
+          maxLength={500}
+          placeholder="Describe your experience..."
+          error={error}
+          disabled={loading}
+        />
+
+        <Text size="xs" c="dimmed">
+          {feedback.trim().length}/500 characters
+        </Text>
+
+        <Group justify="flex-end">
+          <Button variant="default" onClick={onClose} disabled={loading}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} loading={loading}>
+            Submit Feedback
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+ComplaintFeedbackModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  complaint: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  }),
+  onSubmit: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
+};
+
+ComplaintFeedbackModal.defaultProps = {
+  complaint: null,
+  loading: false,
+};
diff --git a/src/Modules/ComplaintManagement/components/ComplaintFormModal.jsx b/src/Modules/ComplaintManagement/components/ComplaintFormModal.jsx
new file mode 100644
index 000000000..fd645eafc
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ComplaintFormModal.jsx
@@ -0,0 +1,327 @@
+import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
+import {
+  Button,
+  Group,
+  Modal,
+  NumberInput,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+
+const complaintTypeOptions = [
+  "Electricity",
+  "carpenter",
+  "plumber",
+  "garbage",
+  "dustbin",
+  "internet",
+  "other",
+].map((value) => ({ value, label: value }));
+
+const areaOptions = [
+  "hall-1",
+  "hall-3",
+  "hall-4",
+  "library",
+  "computer center",
+  "core_lab",
+  "LHTC",
+  "NR2",
+  "NR3",
+  "Admin building",
+  "Rewa_Residency",
+  "Maa Saraswati Hostel",
+  "Nagarjun Hostel",
+  "Panini Hostel",
+].map((value) => ({ value, label: value }));
+
+const priorityOptions = ["Urgent", "Standard", "Low"].map((value) => ({
+  value,
+  label: value,
+}));
+
+const ALLOWED_ATTACHMENT_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "application/pdf",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+];
+
+const MAX_ATTACHMENT_SIZE = 5 * 1024 * 1024;
+
+const initialForm = {
+  complaint_type: "internet",
+  location: "hall-3",
+  specific_location: "",
+  details: "",
+  status: 0,
+  remarks: "",
+  priority: "Standard",
+};
+
+export default function ComplaintFormModal({
+  opened,
+  mode,
+  initialData,
+  canChangeStatus,
+  onClose,
+  onSubmit,
+  onSaveDraft,
+  loading,
+}) {
+  const [form, setForm] = useState(initialForm);
+  const [attachment, setAttachment] = useState(null);
+  const [errors, setErrors] = useState({});
+
+  useEffect(() => {
+    if (initialData) {
+      setForm({
+        ...initialForm,
+        ...initialData,
+      });
+      setAttachment(null);
+      setErrors({});
+      return;
+    }
+    setForm(initialForm);
+    setAttachment(null);
+    setErrors({});
+  }, [initialData, opened]);
+
+  const validateField = (field, value) => {
+    if (field === "complaint_type" && !String(value || "").trim()) {
+      return "Complaint type is required.";
+    }
+    if (field === "location" && !String(value || "").trim()) {
+      return "Location is required.";
+    }
+    if (field === "details" && !String(value || "").trim()) {
+      return "Description is required.";
+    }
+    if (field === "priority" && !String(value || "").trim()) {
+      return "Priority is required.";
+    }
+    return undefined;
+  };
+
+  const handleChange = (field, value) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+    setErrors((prev) => ({ ...prev, [field]: validateField(field, value) }));
+  };
+
+  const handleBlur = (field) => {
+    setErrors((prev) => ({
+      ...prev,
+      [field]: validateField(field, form[field]),
+    }));
+  };
+
+  const handleAttachmentChange = (event) => {
+    const file = event.currentTarget.files?.[0] || null;
+    if (!file) {
+      setAttachment(null);
+      return;
+    }
+
+    if (!ALLOWED_ATTACHMENT_TYPES.includes(file.type)) {
+      setErrors((prev) => ({
+        ...prev,
+        upload_complaint: "Only JPG, PNG, PDF, and DOCX files are allowed.",
+      }));
+      event.currentTarget.value = "";
+      return;
+    }
+
+    if (file.size > MAX_ATTACHMENT_SIZE) {
+      setErrors((prev) => ({
+        ...prev,
+        upload_complaint: "Attachment must be 5 MB or smaller.",
+      }));
+      event.currentTarget.value = "";
+      return;
+    }
+
+    setErrors((prev) => ({ ...prev, upload_complaint: undefined }));
+    setAttachment(file);
+  };
+
+  const handleSubmit = () => {
+    const nextErrors = {};
+    ["complaint_type", "location", "details", "priority"].forEach((field) => {
+      const message = validateField(field, form[field]);
+      if (message) {
+        nextErrors[field] = message;
+      }
+    });
+
+    if (Object.keys(nextErrors).length > 0) {
+      setErrors((prev) => ({ ...prev, ...nextErrors }));
+      return;
+    }
+
+    onSubmit({
+      complaint_type: form.complaint_type,
+      location: form.location,
+      specific_location: form.specific_location || "",
+      details: form.details,
+      priority: form.priority,
+      remarks: form.remarks || "",
+      ...(mode === "edit" && canChangeStatus ? { status: form.status } : {}),
+      upload_complaint: attachment,
+    });
+  };
+
+  const handleSaveDraft = () => {
+    onSaveDraft({
+      complaint_type: form.complaint_type,
+      location: form.location,
+      specific_location: form.specific_location || "",
+      details: form.details,
+      priority: form.priority,
+      remarks: form.remarks || "",
+      is_draft: true,
+      upload_complaint: attachment,
+    });
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={mode === "create" ? "Create Complaint" : "Edit Complaint"}
+      centered
+    >
+      <Stack>
+        <Select
+          label="Complaint Type"
+          data={complaintTypeOptions}
+          value={form.complaint_type}
+          onChange={(value) => handleChange("complaint_type", value)}
+          onBlur={() => handleBlur("complaint_type")}
+          required
+          error={errors.complaint_type}
+        />
+        <Select
+          label="Location"
+          data={areaOptions}
+          value={form.location}
+          onChange={(value) => handleChange("location", value)}
+          onBlur={() => handleBlur("location")}
+          required
+          error={errors.location}
+        />
+        <Select
+          label="Priority"
+          data={priorityOptions}
+          value={form.priority}
+          onChange={(value) => handleChange("priority", value)}
+          onBlur={() => handleBlur("priority")}
+          required
+          error={errors.priority}
+        />
+        <TextInput
+          label="Specific Location"
+          value={form.specific_location}
+          onChange={(event) =>
+            handleChange("specific_location", event.currentTarget.value)
+          }
+        />
+        <Textarea
+          label="Details"
+          value={form.details}
+          onChange={(event) =>
+            handleChange("details", event.currentTarget.value)
+          }
+          onBlur={() => handleBlur("details")}
+          required
+          minRows={3}
+          error={errors.details}
+        />
+        {mode === "edit" && canChangeStatus && (
+          <Textarea
+            label="Remarks"
+            value={form.remarks || ""}
+            onChange={(event) =>
+              handleChange("remarks", event.currentTarget.value)
+            }
+            minRows={2}
+          />
+        )}
+        <div>
+          <Text size="sm" fw={500} mb={4}>
+            Attachment
+          </Text>
+          <input
+            type="file"
+            accept=".jpg,.jpeg,.png,.pdf,.docx"
+            onChange={handleAttachmentChange}
+          />
+          {errors.upload_complaint && (
+            <Text size="xs" c="red" mt={4}>
+              {errors.upload_complaint}
+            </Text>
+          )}
+          {attachment && (
+            <Text size="xs" c="dimmed" mt={4}>
+              Selected: {attachment.name}
+            </Text>
+          )}
+        </div>
+        {mode === "edit" && canChangeStatus && (
+          <NumberInput
+            label="Status"
+            value={form.status}
+            onChange={(value) => handleChange("status", value || 0)}
+            min={0}
+            max={2}
+          />
+        )}
+        <Group justify="flex-end">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          {mode === "create" && (
+            <Button variant="light" loading={loading} onClick={handleSaveDraft}>
+              Save Draft
+            </Button>
+          )}
+          <Button loading={loading} onClick={handleSubmit}>
+            {mode === "create" ? "Create" : "Save"}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+ComplaintFormModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  mode: PropTypes.oneOf(["create", "edit"]).isRequired,
+  initialData: PropTypes.shape({
+    complaint_type: PropTypes.string,
+    location: PropTypes.string,
+    specific_location: PropTypes.string,
+    details: PropTypes.string,
+    status: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    remarks: PropTypes.string,
+    reason: PropTypes.string,
+    comment: PropTypes.string,
+    priority: PropTypes.string,
+  }),
+  canChangeStatus: PropTypes.bool,
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onSaveDraft: PropTypes.func,
+  loading: PropTypes.bool,
+};
+
+ComplaintFormModal.defaultProps = {
+  initialData: null,
+  canChangeStatus: false,
+  onSaveDraft: () => {},
+  loading: false,
+};
diff --git a/src/Modules/ComplaintManagement/components/ComplaintManager.jsx b/src/Modules/ComplaintManagement/components/ComplaintManager.jsx
new file mode 100644
index 000000000..4865d4c88
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ComplaintManager.jsx
@@ -0,0 +1,752 @@
+import { useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
+import { Alert, Button, Container, Paper, Text, Title } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import ComplaintTableSectioned from "./ComplaintTableSectioned";
+import ComplaintFormModal from "./ComplaintFormModal";
+import ComplaintDetailModal from "./ComplaintDetailModal";
+import ResolutionModal from "./ResolutionModal";
+import EscalationModal from "./EscalationModal";
+import ResolutionVerificationModal from "./ResolutionVerificationModal";
+import ReopenRequestModal from "./ReopenRequestModal";
+import ComplaintFeedbackModal from "./ComplaintFeedbackModal";
+import ComplaintNotificationsPanel from "./ComplaintNotificationsPanel";
+import ComplaintOversightPanel from "./ComplaintOversightPanel";
+import ComplaintReportingPanel from "./ComplaintReportingPanel";
+import ComplaintMasterDataPanel from "./ComplaintMasterDataPanel";
+import { fetchComplaintDetail, fetchComplaints } from "../selectors";
+import {
+  createComplaint,
+  caretakerAction,
+  deleteComplaint,
+  reopenComplaint,
+  submitComplaintFeedback,
+  submitDraftComplaint,
+  verifyComplaint,
+  updateComplaint,
+  escalateComplaint,
+} from "../services";
+import CustomBreadcrumbs from "../../../components/Breadcrumbs";
+import ModuleTabs from "../../../components/moduleTabs";
+import classes from "../ComplaintManagement.module.css";
+
+const getApiErrorMessage = (error) => {
+  if (error?.response?.data?.message) {
+    return error.response.data.message;
+  }
+
+  if (error?.response?.data) {
+    return JSON.stringify(error.response.data);
+  }
+
+  return error?.message || "Something went wrong";
+};
+
+export default function ComplaintManager({ defaultMode }) {
+  const location = useLocation();
+  const queryTab = new URLSearchParams(location.search).get("tab");
+  const role = useSelector((state) => state.user.role || "");
+  const normalizedRole = String(role).toLowerCase();
+  const canSeeOversight =
+    normalizedRole.includes("supervisor") ||
+    normalizedRole.includes("admin") ||
+    normalizedRole.includes("convener") ||
+    normalizedRole.includes("superuser");
+  const canSeeMasterData =
+    normalizedRole.includes("caretaker") ||
+    normalizedRole.includes("supervisor") ||
+    normalizedRole.includes("admin") ||
+    normalizedRole.includes("superuser") ||
+    normalizedRole.includes("convener");
+  const tabItems = useMemo(
+    () => [
+      { key: "complaints", title: "Complaints" },
+      { key: "create", title: "Create Complaint" },
+      { key: "notifications", title: "Notifications" },
+      ...(canSeeOversight
+        ? [
+            { key: "oversight", title: "Oversight" },
+            { key: "reports", title: "Reports" },
+          ]
+        : []),
+      ...(canSeeMasterData
+        ? [{ key: "master-data", title: "Master Data" }]
+        : []),
+    ],
+    [canSeeMasterData, canSeeOversight],
+  );
+  const tabKeys = useMemo(() => tabItems.map((tab) => tab.key), [tabItems]);
+  const getTabIndex = useMemo(
+    () => (key) => String(Math.max(tabKeys.indexOf(key), 0)),
+    [tabKeys],
+  );
+  const initialTab =
+    queryTab && tabKeys.includes(queryTab)
+      ? getTabIndex(queryTab)
+      : defaultMode === "create"
+        ? getTabIndex("create")
+        : getTabIndex("complaints");
+  const [complaints, setComplaints] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [formOpen, setFormOpen] = useState(defaultMode === "create");
+  const [formMode, setFormMode] = useState(defaultMode);
+  const [selected, setSelected] = useState(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [detailData, setDetailData] = useState(null);
+  const [resolutionOpen, setResolutionOpen] = useState(false);
+  const [resolutionTarget, setResolutionTarget] = useState(null);
+  const [escalationOpen, setEscalationOpen] = useState(false);
+  const [escalationTarget, setEscalationTarget] = useState(null);
+  const [verificationOpen, setVerificationOpen] = useState(false);
+  const [verificationTarget, setVerificationTarget] = useState(null);
+  const [verificationDecision, setVerificationDecision] = useState("approve");
+  const [reopenOpen, setReopenOpen] = useState(false);
+  const [reopenTarget, setReopenTarget] = useState(null);
+  const [feedbackOpen, setFeedbackOpen] = useState(false);
+  const [feedbackTarget, setFeedbackTarget] = useState(null);
+  const [activeTab, setActiveTab] = useState(initialTab);
+  const [lastRefreshedAt, setLastRefreshedAt] = useState(null);
+  const complaintsTabIndex = getTabIndex("complaints");
+  const createTabIndex = getTabIndex("create");
+  const notificationsTabIndex = getTabIndex("notifications");
+  const oversightTabIndex = getTabIndex("oversight");
+  const reportsTabIndex = getTabIndex("reports");
+  const masterDataTabIndex = getTabIndex("master-data");
+  const canChangeStatus =
+    normalizedRole.includes("caretaker") ||
+    normalizedRole.includes("supervisor") ||
+    normalizedRole.includes("convener") ||
+    normalizedRole.includes("admin");
+  const isCaretakerRole = normalizedRole.includes("caretaker");
+  const isSupervisorRole = normalizedRole.includes("supervisor");
+  const canReviewResolution =
+    normalizedRole.includes("student") ||
+    normalizedRole.includes("faculty") ||
+    normalizedRole.includes("staff") ||
+    normalizedRole.includes("supervisor") ||
+    normalizedRole.includes("convener") ||
+    normalizedRole.includes("admin");
+  const canSubmitComplaint =
+    normalizedRole.includes("student") ||
+    normalizedRole.includes("faculty") ||
+    normalizedRole.includes("staff");
+  const isComplainantReadOnly = canSubmitComplaint;
+  const canSubmitFeedback =
+    normalizedRole.includes("student") ||
+    normalizedRole.includes("faculty") ||
+    normalizedRole.includes("staff");
+  const slaReminderWindowHours = 4;
+  const reminderQueue = useMemo(
+    () =>
+      complaints.filter((complaint) => {
+        if (!complaint?.sla_deadline) {
+          return false;
+        }
+
+        const deadline = new Date(complaint.sla_deadline).getTime();
+        if (!Number.isFinite(deadline)) {
+          return false;
+        }
+
+        const hoursRemaining = (deadline - Date.now()) / (1000 * 60 * 60);
+        const isActive = ![2, 3].includes(Number(complaint.status));
+        return (
+          isActive &&
+          hoursRemaining > 0 &&
+          hoursRemaining <= slaReminderWindowHours
+        );
+      }),
+    [complaints],
+  );
+  const overdueComplaints = useMemo(
+    () =>
+      complaints.filter((complaint) => {
+        if (!complaint?.sla_deadline) {
+          return false;
+        }
+
+        const deadline = new Date(complaint.sla_deadline).getTime();
+        return (
+          Number.isFinite(deadline) &&
+          deadline < Date.now() &&
+          ![2, 3].includes(Number(complaint.status))
+        );
+      }),
+    [complaints],
+  );
+
+  const filteredComplaints = useMemo(() => {
+    if (normalizedRole.includes("supervisor")) {
+      const types = [
+        "electricity",
+        "carpenter",
+        "plumber",
+        "garbage",
+        "dustbin",
+        "internet",
+        "other",
+      ];
+      const activeType = types.find((t) => normalizedRole.includes(t));
+      if (activeType) {
+        return complaints.filter(
+          (c) => c.complaint_type?.toLowerCase() === activeType,
+        );
+      }
+    }
+    return complaints;
+  }, [complaints, normalizedRole]);
+
+  const loadComplaints = async () => {
+    setLoading(true);
+    try {
+      const data = await fetchComplaints();
+      setComplaints(data);
+      setLastRefreshedAt(new Date().toISOString());
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Failed to load complaints",
+        message: getApiErrorMessage(error),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadComplaints();
+
+    const pollId = setInterval(() => {
+      loadComplaints();
+    }, 30000);
+
+    return () => clearInterval(pollId);
+  }, []);
+
+  useEffect(() => {
+    if (queryTab && tabKeys.includes(queryTab)) {
+      setActiveTab(getTabIndex(queryTab));
+    }
+  }, [getTabIndex, queryTab, tabKeys]);
+
+  useEffect(() => {
+    if (activeTab === createTabIndex) {
+      if (!canSubmitComplaint) {
+        notifications.show({
+          color: "yellow",
+          title: "Submission access restricted",
+          message:
+            "Complaint submission is available only for student/faculty/staff complainant roles.",
+        });
+        setActiveTab(complaintsTabIndex);
+        return;
+      }
+      setSelected(null);
+      setFormMode("create");
+      setFormOpen(true);
+    }
+  }, [activeTab, canSubmitComplaint, complaintsTabIndex, createTabIndex]);
+
+  const openCreate = () => {
+    if (!canSubmitComplaint) {
+      notifications.show({
+        color: "yellow",
+        title: "Submission access restricted",
+        message: "You do not have access to create complaints from this panel.",
+      });
+      return;
+    }
+    setSelected(null);
+    setFormMode("create");
+    setFormOpen(true);
+    setActiveTab(createTabIndex);
+  };
+
+  const openEdit = (item) => {
+    setSelected(item);
+    setFormMode("edit");
+    setFormOpen(true);
+    setActiveTab("0");
+  };
+
+  const handleView = async (id) => {
+    try {
+      const detail = await fetchComplaintDetail(id);
+      setDetailData(detail);
+      setDetailOpen(true);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Failed to fetch detail",
+        message: getApiErrorMessage(error),
+      });
+    }
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      await deleteComplaint(id);
+      notifications.show({
+        color: "green",
+        title: "Deleted",
+        message: `Complaint ${id} deleted`,
+      });
+      await loadComplaints();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Delete failed",
+        message: getApiErrorMessage(error),
+      });
+    }
+  };
+
+  const handleResolve = async (payload) => {
+    setLoading(true);
+    try {
+      await caretakerAction(resolutionTarget.id, {
+        status: payload.status,
+        remarks: payload.remarks,
+        progress_notes: payload.progress_notes,
+        estimated_resolution_time: payload.estimated_resolution_time,
+        progress_attachment: payload.progress_attachment,
+      });
+      notifications.show({
+        color: "green",
+        title: "Success",
+        message: `Complaint status updated to ${["Pending", "In Progress", "Resolved", "Closed"][payload.status] || payload.status}`,
+      });
+      setResolutionOpen(false);
+      setResolutionTarget(null);
+      setDetailOpen(false);
+      await loadComplaints();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Resolution failed",
+        message: getApiErrorMessage(error),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleEscalate = async (payload) => {
+    setLoading(true);
+    try {
+      await escalateComplaint(escalationTarget.id, payload.escalation_reason);
+      notifications.show({
+        color: "green",
+        title: "Success",
+        message: "Complaint escalated to supervisor",
+      });
+      setEscalationOpen(false);
+      setEscalationTarget(null);
+      setDetailOpen(false);
+      await loadComplaints();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Escalation failed",
+        message: getApiErrorMessage(error),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleVerify = async (payload) => {
+    setLoading(true);
+    try {
+      await verifyComplaint(verificationTarget.id, payload);
+      const isApproved = payload.verification_decision === "approve";
+      notifications.show({
+        color: "green",
+        title: isApproved ? "Verified" : "Rejected",
+        message: isApproved
+          ? "Complaint verified and closed"
+          : "Complaint resolution rejected and reopened",
+      });
+      setVerificationOpen(false);
+      setVerificationTarget(null);
+      setDetailOpen(false);
+      await loadComplaints();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Verification failed",
+        message: getApiErrorMessage(error),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleReopen = async (payload) => {
+    setLoading(true);
+    try {
+      await reopenComplaint(reopenTarget.id, payload);
+      notifications.show({
+        color: "green",
+        title: "Reopen requested",
+        message: "Your reopen request was submitted",
+      });
+      setReopenOpen(false);
+      setReopenTarget(null);
+      setDetailOpen(false);
+      await loadComplaints();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Reopen request failed",
+        message: getApiErrorMessage(error),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (payload) => {
+    setLoading(true);
+    try {
+      const safePayload = { ...payload };
+      if (!canChangeStatus) {
+        delete safePayload.status;
+      }
+
+      if (formMode === "create") {
+        const createdComplaint = await createComplaint(safePayload);
+        notifications.show({
+          color: "green",
+          title: "Created",
+          message: `Complaint created${createdComplaint?.complaint_ref ? `: ${createdComplaint.complaint_ref}` : ""}`,
+        });
+      } else {
+        await updateComplaint(selected.id, { ...selected, ...safePayload });
+        notifications.show({
+          color: "green",
+          title: "Updated",
+          message: "Complaint updated",
+        });
+      }
+      setFormOpen(false);
+      setSelected(null);
+      setActiveTab(complaintsTabIndex);
+      await loadComplaints();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Save failed",
+        message: getApiErrorMessage(error),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSaveDraft = async (payload) => {
+    setLoading(true);
+    try {
+      const savedDraft = await createComplaint(payload);
+      notifications.show({
+        color: "blue",
+        title: "Draft saved",
+        message: savedDraft?.id
+          ? `Draft #${savedDraft.id} saved successfully`
+          : "Complaint draft saved successfully",
+      });
+      setFormOpen(false);
+      setSelected(null);
+      setActiveTab(complaintsTabIndex);
+      await loadComplaints();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Draft save failed",
+        message: getApiErrorMessage(error),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmitDraft = async (item) => {
+    setLoading(true);
+    try {
+      await submitDraftComplaint(item.id);
+      notifications.show({
+        color: "green",
+        title: "Draft submitted",
+        message: "Draft moved to active complaint workflow",
+      });
+      await loadComplaints();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Submit draft failed",
+        message: getApiErrorMessage(error),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmitFeedback = async (payload) => {
+    setLoading(true);
+    try {
+      await submitComplaintFeedback(feedbackTarget.id, payload);
+      notifications.show({
+        color: "green",
+        title: "Feedback submitted",
+        message: "Thank you for your feedback.",
+      });
+      setFeedbackOpen(false);
+      setFeedbackTarget(null);
+      await loadComplaints();
+      if (detailData?.complaint_details?.id) {
+        const refreshed = await fetchComplaintDetail(
+          detailData.complaint_details.id,
+        );
+        setDetailData(refreshed);
+      }
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Feedback submit failed",
+        message: getApiErrorMessage(error),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <CustomBreadcrumbs />
+      <Container fluid px="lg" py="md" className={classes.page}>
+        <ModuleTabs
+          tabs={tabItems}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+        />
+        {activeTab === complaintsTabIndex && (
+          <>
+            <div className={classes.headerBlock}>
+              <div>
+                <Title order={3} className={classes.title}>
+                  Complaint Management
+                </Title>
+                <Text size="sm" className={classes.subtitle}>
+                  Track, manage, and resolve complaints across the campus.
+                </Text>
+                {lastRefreshedAt && (
+                  <Text className={classes.statusNote} mt={4}>
+                    Last refreshed: {new Date(lastRefreshedAt).toLocaleString()}
+                  </Text>
+                )}
+              </div>
+              <div className={classes.actions}>
+                <Button
+                  variant="default"
+                  size="sm"
+                  onClick={loadComplaints}
+                  loading={loading}
+                >
+                  Refresh
+                </Button>
+                {canSubmitComplaint && (
+                  <Button size="sm" onClick={openCreate}>
+                    New Complaint
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {(reminderQueue.length > 0 || overdueComplaints.length > 0) && (
+              <Alert
+                color={overdueComplaints.length > 0 ? "red" : "yellow"}
+                title="SLA attention needed"
+                mb="md"
+              >
+                {overdueComplaints.length > 0 && (
+                  <Text size="sm">
+                    {`${overdueComplaints.length} complaint${overdueComplaints.length === 1 ? " is" : "s are"} already past SLA and may require immediate intervention.`}
+                  </Text>
+                )}
+                {reminderQueue.length > 0 && (
+                  <Text size="sm">
+                    {`${reminderQueue.length} complaint${reminderQueue.length === 1 ? " is" : "s are"} approaching the SLA reminder window.`}
+                  </Text>
+                )}
+              </Alert>
+            )}
+
+            <Paper
+              className={`${classes.tablePanel} ${classes.moduleCard}`}
+              withBorder
+            >
+              <ComplaintTableSectioned
+                complaints={filteredComplaints}
+                onView={handleView}
+                onEdit={openEdit}
+                onDelete={handleDelete}
+                onSubmitDraft={handleSubmitDraft}
+                isCaretaker={canChangeStatus}
+                readOnly={isComplainantReadOnly}
+              />
+            </Paper>
+          </>
+        )}
+
+        {activeTab === notificationsTabIndex && (
+          <ComplaintNotificationsPanel role={role} />
+        )}
+
+        {activeTab === oversightTabIndex && canSeeOversight && (
+          <ComplaintOversightPanel
+            complaints={filteredComplaints}
+            onView={handleView}
+            onRefresh={loadComplaints}
+          />
+        )}
+
+        {activeTab === reportsTabIndex && canSeeOversight && (
+          <ComplaintReportingPanel
+            complaints={filteredComplaints}
+            onView={handleView}
+            normalizedRole={normalizedRole}
+          />
+        )}
+
+        {activeTab === masterDataTabIndex && canSeeMasterData && (
+          <ComplaintMasterDataPanel normalizedRole={normalizedRole} />
+        )}
+
+        <ComplaintFormModal
+          opened={formOpen}
+          mode={formMode}
+          initialData={selected}
+          canChangeStatus={canChangeStatus}
+          onClose={() => {
+            setFormOpen(false);
+            setActiveTab(complaintsTabIndex);
+          }}
+          onSubmit={handleSubmit}
+          onSaveDraft={handleSaveDraft}
+          loading={loading}
+        />
+
+        <ComplaintDetailModal
+          opened={detailOpen}
+          onClose={() => setDetailOpen(false)}
+          detail={detailData}
+          canResolve={isCaretakerRole}
+          canManageEscalated={isSupervisorRole}
+          canVerify={canReviewResolution}
+          canRequestReopen={canReviewResolution}
+          canSubmitFeedback={canSubmitFeedback}
+          onResolve={(complaint) => {
+            setResolutionTarget(complaint);
+            setResolutionOpen(true);
+          }}
+          onEscalate={(complaint) => {
+            setEscalationTarget(complaint);
+            setEscalationOpen(true);
+          }}
+          onVerifyApprove={(complaint) => {
+            setVerificationTarget(detailData?.complaint_details || complaint);
+            setVerificationDecision("approve");
+            setVerificationOpen(true);
+          }}
+          onVerifyReject={(complaint) => {
+            setVerificationTarget(detailData?.complaint_details || complaint);
+            setVerificationDecision("reject");
+            setVerificationOpen(true);
+          }}
+          onRequestReopen={(complaint) => {
+            setReopenTarget(detailData?.complaint_details || complaint);
+            setReopenOpen(true);
+          }}
+          onSubmitFeedback={(complaint) => {
+            setFeedbackTarget(detailData?.complaint_details || complaint);
+            setFeedbackOpen(true);
+          }}
+        />
+
+        <ResolutionModal
+          opened={resolutionOpen}
+          onClose={() => {
+            setResolutionOpen(false);
+            setResolutionTarget(null);
+          }}
+          complaint={resolutionTarget}
+          onResolve={handleResolve}
+          isLoading={loading}
+        />
+
+        <EscalationModal
+          opened={escalationOpen}
+          onClose={() => {
+            setEscalationOpen(false);
+            setEscalationTarget(null);
+          }}
+          complaint={escalationTarget}
+          onEscalate={handleEscalate}
+          isLoading={loading}
+        />
+
+        <ResolutionVerificationModal
+          opened={verificationOpen}
+          onClose={() => {
+            setVerificationOpen(false);
+            setVerificationTarget(null);
+          }}
+          complaint={verificationTarget}
+          defaultDecision={verificationDecision}
+          verificationSource={
+            normalizedRole.includes("supervisor") ||
+            normalizedRole.includes("convener") ||
+            normalizedRole.includes("admin")
+              ? "supervisor"
+              : "complainant"
+          }
+          onVerify={handleVerify}
+          isLoading={loading}
+        />
+
+        <ReopenRequestModal
+          opened={reopenOpen}
+          onClose={() => {
+            setReopenOpen(false);
+            setReopenTarget(null);
+          }}
+          complaint={reopenTarget}
+          reopenDeadline={reopenTarget?.reopen_allowed_until || ""}
+          onRequestReopen={handleReopen}
+          isLoading={loading}
+        />
+
+        <ComplaintFeedbackModal
+          opened={feedbackOpen}
+          onClose={() => {
+            setFeedbackOpen(false);
+            setFeedbackTarget(null);
+          }}
+          complaint={feedbackTarget}
+          onSubmit={handleSubmitFeedback}
+          loading={loading}
+        />
+      </Container>
+    </>
+  );
+}
+
+ComplaintManager.propTypes = {
+  defaultMode: PropTypes.oneOf(["create", "list"]),
+};
+
+ComplaintManager.defaultProps = {
+  defaultMode: "list",
+};
diff --git a/src/Modules/ComplaintManagement/components/ComplaintMasterDataPanel.jsx b/src/Modules/ComplaintManagement/components/ComplaintMasterDataPanel.jsx
new file mode 100644
index 000000000..51167663f
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ComplaintMasterDataPanel.jsx
@@ -0,0 +1,682 @@
+import { useEffect, useMemo, useState } from "react";
+import PropTypes from "prop-types";
+import {
+  Badge,
+  Button,
+  Group,
+  Modal,
+  NumberInput,
+  Paper,
+  ScrollArea,
+  Select,
+  Stack,
+  Table,
+  Tabs,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import {
+  createCaretaker,
+  createSupervisor,
+  createWorker,
+  deleteCaretaker,
+  deleteSupervisor,
+  deleteWorker,
+  fetchCaretakers,
+  fetchSupervisors,
+  fetchWorkers,
+  updateCaretaker,
+  updateSupervisor,
+  updateWorker,
+} from "../services";
+import classes from "../ComplaintManagement.module.css";
+
+const AREA_OPTIONS = [
+  "hall-1",
+  "hall-3",
+  "hall-4",
+  "library",
+  "computer center",
+  "core_lab",
+  "LHTC",
+  "NR2",
+  "NR3",
+  "Admin building",
+  "Rewa_Residency",
+  "Maa Saraswati Hostel",
+  "Nagarjun Hostel",
+  "Panini Hostel",
+].map((value) => ({ value, label: value }));
+
+const TYPE_OPTIONS = [
+  "Electricity",
+  "carpenter",
+  "plumber",
+  "garbage",
+  "dustbin",
+  "internet",
+  "other",
+].map((value) => ({ value, label: value }));
+
+const getApiErrorMessage = (error, fallback) => {
+  if (error?.response?.data?.message) {
+    return error.response.data.message;
+  }
+
+  if (error?.response?.data) {
+    return JSON.stringify(error.response.data);
+  }
+
+  return error?.message || fallback;
+};
+
+const toNullableInt = (value) => {
+  if (value === null || value === undefined || value === "") {
+    return null;
+  }
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+const toNullableNumber = (value) => {
+  if (value === null || value === undefined || value === "") {
+    return null;
+  }
+  return Number(value);
+};
+
+export default function ComplaintMasterDataPanel({ normalizedRole }) {
+  const [workers, setWorkers] = useState([]);
+  const [caretakers, setCaretakers] = useState([]);
+  const [supervisors, setSupervisors] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const [activeEntity, setActiveEntity] = useState("workers");
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editorMode, setEditorMode] = useState("create");
+  const [selectedRecord, setSelectedRecord] = useState(null);
+
+  const [form, setForm] = useState({});
+
+  const canManageWorkers =
+    normalizedRole.includes("caretaker") ||
+    normalizedRole.includes("admin") ||
+    normalizedRole.includes("superuser");
+  const canManageCaretakers =
+    normalizedRole.includes("supervisor") ||
+    normalizedRole.includes("admin") ||
+    normalizedRole.includes("superuser") ||
+    normalizedRole.includes("convener");
+  const canManageSupervisors =
+    normalizedRole.includes("admin") || normalizedRole.includes("superuser");
+
+  const capabilityLabel = useMemo(() => {
+    if (activeEntity === "workers") {
+      return canManageWorkers;
+    }
+    if (activeEntity === "caretakers") {
+      return canManageCaretakers;
+    }
+    return canManageSupervisors;
+  }, [
+    activeEntity,
+    canManageCaretakers,
+    canManageSupervisors,
+    canManageWorkers,
+  ]);
+
+  const loadMasterData = async () => {
+    setLoading(true);
+    try {
+      const [workersData, caretakersData, supervisorsData] = await Promise.all([
+        fetchWorkers(),
+        fetchCaretakers(),
+        fetchSupervisors(),
+      ]);
+      setWorkers(workersData);
+      setCaretakers(caretakersData);
+      setSupervisors(supervisorsData);
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Failed to load master data",
+        message: getApiErrorMessage(
+          error,
+          "Could not load workers/caretakers/supervisors.",
+        ),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadMasterData();
+  }, []);
+
+  const openCreate = (entity) => {
+    setActiveEntity(entity);
+    setEditorMode("create");
+    setSelectedRecord(null);
+
+    if (entity === "workers") {
+      setForm({
+        secincharge_id: "",
+        name: "",
+        age: "",
+        phone: "",
+        worker_type: "internet",
+      });
+    } else if (entity === "caretakers") {
+      setForm({ staff_id: "", area: "hall-3", rating: 0, myfeedback: "" });
+    } else {
+      setForm({ sup_id: "", type: "Electricity", area: "" });
+    }
+
+    setEditorOpen(true);
+  };
+
+  const openEdit = (entity, record) => {
+    setActiveEntity(entity);
+    setEditorMode("edit");
+    setSelectedRecord(record);
+
+    if (entity === "workers") {
+      setForm({
+        secincharge_id: record.secincharge_id ?? "",
+        name: record.name ?? "",
+        age: record.age ?? "",
+        phone: record.phone ?? "",
+        worker_type: record.worker_type ?? "internet",
+      });
+    } else if (entity === "caretakers") {
+      setForm({
+        staff_id: record.staff_id ?? "",
+        area: record.area ?? "hall-3",
+        rating: record.rating ?? 0,
+        myfeedback: record.myfeedback ?? "",
+      });
+    } else {
+      setForm({
+        sup_id: record.sup_id ?? "",
+        type: record.type ?? "Electricity",
+        area: record.area ?? "",
+      });
+    }
+
+    setEditorOpen(true);
+  };
+
+  const handleDelete = async (entity, id) => {
+    try {
+      if (entity === "workers") {
+        await deleteWorker(id);
+      } else if (entity === "caretakers") {
+        await deleteCaretaker(id);
+      } else {
+        await deleteSupervisor(id);
+      }
+
+      notifications.show({
+        color: "green",
+        title: "Deleted",
+        message: `${entity.slice(0, -1)} ${id} deleted successfully`,
+      });
+      await loadMasterData();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Delete failed",
+        message: getApiErrorMessage(error, "Could not delete this record."),
+      });
+    }
+  };
+
+  const handleSave = async () => {
+    try {
+      if (activeEntity === "workers") {
+        const payload = {
+          secincharge_id: toNullableInt(form.secincharge_id),
+          name: String(form.name || "").trim(),
+          age: String(form.age || "").trim(),
+          phone: toNullableNumber(form.phone),
+          worker_type: form.worker_type,
+        };
+
+        if (editorMode === "create") {
+          await createWorker(payload);
+        } else {
+          await updateWorker(selectedRecord.id, payload);
+        }
+      }
+
+      if (activeEntity === "caretakers") {
+        const payload = {
+          staff_id: toNullableInt(form.staff_id),
+          area: form.area,
+          rating: toNullableInt(form.rating) ?? 0,
+          myfeedback: String(form.myfeedback || ""),
+        };
+
+        if (editorMode === "create") {
+          await createCaretaker(payload);
+        } else {
+          await updateCaretaker(selectedRecord.id, payload);
+        }
+      }
+
+      if (activeEntity === "supervisors") {
+        const payload = {
+          sup_id: toNullableInt(form.sup_id),
+          type: form.type,
+          area: String(form.area || ""),
+        };
+
+        if (editorMode === "create") {
+          await createSupervisor(payload);
+        } else {
+          await updateSupervisor(selectedRecord.id, payload);
+        }
+      }
+
+      notifications.show({
+        color: "green",
+        title: editorMode === "create" ? "Created" : "Updated",
+        message: `${activeEntity.slice(0, -1)} record saved successfully`,
+      });
+      setEditorOpen(false);
+      setSelectedRecord(null);
+      await loadMasterData();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Save failed",
+        message: getApiErrorMessage(error, "Could not save this record."),
+      });
+    }
+  };
+
+  return (
+    <Stack gap="md">
+      <Paper className={classes.oversightHeader} withBorder>
+        <Group justify="space-between" align="center" wrap="wrap">
+          <div>
+            <Text fw={600} size="lg">
+              Master Data
+            </Text>
+            <Text size="sm" className={classes.subtitle}>
+              Manage workers, caretakers, and supervisor assignments.
+            </Text>
+          </div>
+          <Group gap="xs">
+            <Button
+              variant="default"
+              size="sm"
+              onClick={loadMasterData}
+              loading={loading}
+            >
+              Refresh
+            </Button>
+            <Badge
+              color={capabilityLabel ? "green" : "yellow"}
+              variant="light"
+              size="sm"
+            >
+              {capabilityLabel ? "Can manage" : "Read-only"}
+            </Badge>
+          </Group>
+        </Group>
+      </Paper>
+
+      <Paper withBorder p="md" className={classes.moduleCard}>
+        <Tabs
+          value={activeEntity}
+          onChange={(value) => setActiveEntity(value || "workers")}
+        >
+          <Tabs.List>
+            <Tabs.Tab value="workers">Workers ({workers.length})</Tabs.Tab>
+            <Tabs.Tab value="caretakers">
+              Caretakers ({caretakers.length})
+            </Tabs.Tab>
+            <Tabs.Tab value="supervisors">
+              Supervisors ({supervisors.length})
+            </Tabs.Tab>
+          </Tabs.List>
+
+          <Tabs.Panel value="workers" pt="md">
+            <Group justify="space-between" mb="sm">
+              <Text fw={600}>Workers</Text>
+              <Button
+                size="xs"
+                onClick={() => openCreate("workers")}
+                disabled={!canManageWorkers}
+              >
+                Add Worker
+              </Button>
+            </Group>
+            <ScrollArea>
+              <Table
+                withTableBorder
+                withColumnBorders
+                className={classes.tableClean}
+              >
+                <Table.Thead>
+                  <Table.Tr>
+                    <Table.Th>ID</Table.Th>
+                    <Table.Th>Name</Table.Th>
+                    <Table.Th>Type</Table.Th>
+                    <Table.Th>Age</Table.Th>
+                    <Table.Th>Phone</Table.Th>
+                    <Table.Th>Section Incharge</Table.Th>
+                    <Table.Th>Actions</Table.Th>
+                  </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                  {workers.map((worker) => (
+                    <Table.Tr key={worker.id}>
+                      <Table.Td>{worker.id}</Table.Td>
+                      <Table.Td>{worker.name}</Table.Td>
+                      <Table.Td>{worker.worker_type}</Table.Td>
+                      <Table.Td>{worker.age}</Table.Td>
+                      <Table.Td>{worker.phone}</Table.Td>
+                      <Table.Td>{worker.secincharge_id}</Table.Td>
+                      <Table.Td>
+                        <Group gap="xs">
+                          <Button
+                            size="xs"
+                            variant="light"
+                            onClick={() => openEdit("workers", worker)}
+                            disabled={!canManageWorkers}
+                          >
+                            Edit
+                          </Button>
+                          <Button
+                            size="xs"
+                            color="red"
+                            variant="light"
+                            onClick={() => handleDelete("workers", worker.id)}
+                            disabled={!canManageWorkers}
+                          >
+                            Delete
+                          </Button>
+                        </Group>
+                      </Table.Td>
+                    </Table.Tr>
+                  ))}
+                </Table.Tbody>
+              </Table>
+            </ScrollArea>
+          </Tabs.Panel>
+
+          <Tabs.Panel value="caretakers" pt="md">
+            <Group justify="space-between" mb="sm">
+              <Text fw={600}>Caretakers</Text>
+              <Button
+                size="xs"
+                onClick={() => openCreate("caretakers")}
+                disabled={!canManageCaretakers}
+              >
+                Add Caretaker
+              </Button>
+            </Group>
+            <ScrollArea>
+              <Table
+                withTableBorder
+                withColumnBorders
+                className={classes.tableClean}
+              >
+                <Table.Thead>
+                  <Table.Tr>
+                    <Table.Th>ID</Table.Th>
+                    <Table.Th>Staff ID</Table.Th>
+                    <Table.Th>Area</Table.Th>
+                    <Table.Th>Rating</Table.Th>
+                    <Table.Th>Feedback</Table.Th>
+                    <Table.Th>Actions</Table.Th>
+                  </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                  {caretakers.map((caretaker) => (
+                    <Table.Tr key={caretaker.id}>
+                      <Table.Td>{caretaker.id}</Table.Td>
+                      <Table.Td>{caretaker.staff_id}</Table.Td>
+                      <Table.Td>{caretaker.area}</Table.Td>
+                      <Table.Td>{caretaker.rating}</Table.Td>
+                      <Table.Td>{caretaker.myfeedback}</Table.Td>
+                      <Table.Td>
+                        <Group gap="xs">
+                          <Button
+                            size="xs"
+                            variant="light"
+                            onClick={() => openEdit("caretakers", caretaker)}
+                            disabled={!canManageCaretakers}
+                          >
+                            Edit
+                          </Button>
+                          <Button
+                            size="xs"
+                            color="red"
+                            variant="light"
+                            onClick={() =>
+                              handleDelete("caretakers", caretaker.id)
+                            }
+                            disabled={!canManageCaretakers}
+                          >
+                            Delete
+                          </Button>
+                        </Group>
+                      </Table.Td>
+                    </Table.Tr>
+                  ))}
+                </Table.Tbody>
+              </Table>
+            </ScrollArea>
+          </Tabs.Panel>
+
+          <Tabs.Panel value="supervisors" pt="md">
+            <Group justify="space-between" mb="sm">
+              <Text fw={600}>Supervisors</Text>
+              <Button
+                size="xs"
+                onClick={() => openCreate("supervisors")}
+                disabled={!canManageSupervisors}
+              >
+                Add Supervisor
+              </Button>
+            </Group>
+            <ScrollArea>
+              <Table
+                withTableBorder
+                withColumnBorders
+                className={classes.tableClean}
+              >
+                <Table.Thead>
+                  <Table.Tr>
+                    <Table.Th>ID</Table.Th>
+                    <Table.Th>Supervisor ID</Table.Th>
+                    <Table.Th>Type</Table.Th>
+                    <Table.Th>Area</Table.Th>
+                    <Table.Th>Actions</Table.Th>
+                  </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                  {supervisors.map((supervisor) => (
+                    <Table.Tr key={supervisor.id}>
+                      <Table.Td>{supervisor.id}</Table.Td>
+                      <Table.Td>{supervisor.sup_id}</Table.Td>
+                      <Table.Td>{supervisor.type}</Table.Td>
+                      <Table.Td>{supervisor.area || "all-areas"}</Table.Td>
+                      <Table.Td>
+                        <Group gap="xs">
+                          <Button
+                            size="xs"
+                            variant="light"
+                            onClick={() => openEdit("supervisors", supervisor)}
+                            disabled={!canManageSupervisors}
+                          >
+                            Edit
+                          </Button>
+                          <Button
+                            size="xs"
+                            color="red"
+                            variant="light"
+                            onClick={() =>
+                              handleDelete("supervisors", supervisor.id)
+                            }
+                            disabled={!canManageSupervisors}
+                          >
+                            Delete
+                          </Button>
+                        </Group>
+                      </Table.Td>
+                    </Table.Tr>
+                  ))}
+                </Table.Tbody>
+              </Table>
+            </ScrollArea>
+          </Tabs.Panel>
+        </Tabs>
+      </Paper>
+
+      <Modal
+        opened={editorOpen}
+        onClose={() => setEditorOpen(false)}
+        title={`${editorMode === "create" ? "Create" : "Edit"} ${activeEntity.slice(0, -1)}`}
+        centered
+      >
+        <Stack>
+          {activeEntity === "workers" && (
+            <>
+              <NumberInput
+                label="Section Incharge ID"
+                value={form.secincharge_id}
+                onChange={(value) =>
+                  setForm((prev) => ({ ...prev, secincharge_id: value || "" }))
+                }
+              />
+              <TextInput
+                label="Name"
+                value={form.name || ""}
+                onChange={(event) =>
+                  setForm((prev) => ({
+                    ...prev,
+                    name: event.currentTarget.value,
+                  }))
+                }
+              />
+              <TextInput
+                label="Age"
+                value={form.age || ""}
+                onChange={(event) =>
+                  setForm((prev) => ({
+                    ...prev,
+                    age: event.currentTarget.value,
+                  }))
+                }
+              />
+              <NumberInput
+                label="Phone"
+                value={form.phone}
+                onChange={(value) =>
+                  setForm((prev) => ({ ...prev, phone: value || "" }))
+                }
+              />
+              <Select
+                label="Worker Type"
+                data={TYPE_OPTIONS}
+                value={form.worker_type || "internet"}
+                onChange={(value) =>
+                  setForm((prev) => ({
+                    ...prev,
+                    worker_type: value || "internet",
+                  }))
+                }
+              />
+            </>
+          )}
+
+          {activeEntity === "caretakers" && (
+            <>
+              <NumberInput
+                label="Staff ID"
+                value={form.staff_id}
+                onChange={(value) =>
+                  setForm((prev) => ({ ...prev, staff_id: value || "" }))
+                }
+              />
+              <Select
+                label="Area"
+                data={AREA_OPTIONS}
+                value={form.area || "hall-3"}
+                onChange={(value) =>
+                  setForm((prev) => ({ ...prev, area: value || "hall-3" }))
+                }
+              />
+              <NumberInput
+                label="Rating"
+                value={form.rating}
+                min={0}
+                onChange={(value) =>
+                  setForm((prev) => ({ ...prev, rating: value || 0 }))
+                }
+              />
+              <TextInput
+                label="Feedback"
+                value={form.myfeedback || ""}
+                onChange={(event) =>
+                  setForm((prev) => ({
+                    ...prev,
+                    myfeedback: event.currentTarget.value,
+                  }))
+                }
+              />
+            </>
+          )}
+
+          {activeEntity === "supervisors" && (
+            <>
+              <NumberInput
+                label="Supervisor ID"
+                value={form.sup_id}
+                onChange={(value) =>
+                  setForm((prev) => ({ ...prev, sup_id: value || "" }))
+                }
+              />
+              <Select
+                label="Complaint Type"
+                data={TYPE_OPTIONS}
+                value={form.type || "Electricity"}
+                onChange={(value) =>
+                  setForm((prev) => ({ ...prev, type: value || "Electricity" }))
+                }
+              />
+              <Select
+                label="Area (optional)"
+                data={[{ value: "", label: "All Areas" }, ...AREA_OPTIONS]}
+                value={form.area ?? ""}
+                onChange={(value) =>
+                  setForm((prev) => ({ ...prev, area: value ?? "" }))
+                }
+                clearable
+              />
+            </>
+          )}
+
+          <Group justify="flex-end">
+            <Button variant="default" onClick={() => setEditorOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSave}>
+              {editorMode === "create" ? "Create" : "Save"}
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Stack>
+  );
+}
+
+ComplaintMasterDataPanel.propTypes = {
+  normalizedRole: PropTypes.string.isRequired,
+};
diff --git a/src/Modules/ComplaintManagement/components/ComplaintNotificationsPanel.jsx b/src/Modules/ComplaintManagement/components/ComplaintNotificationsPanel.jsx
new file mode 100644
index 000000000..d7e9f8c9b
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ComplaintNotificationsPanel.jsx
@@ -0,0 +1,394 @@
+import PropTypes from "prop-types";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  Badge,
+  Button,
+  Card,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import {
+  ArrowClockwise,
+  ArrowSquareOut,
+  BellSlash,
+  CheckCircle,
+  MagnifyingGlass,
+  Trash,
+} from "@phosphor-icons/react";
+import { notifications } from "@mantine/notifications";
+import {
+  deleteNotification,
+  fetchNotifications,
+  markNotificationRead,
+  markNotificationUnread,
+  markVisibleNotificationsRead,
+} from "../../NotificationCenter/services";
+import {
+  formatNotificationTimestamp,
+  getNotificationCategory,
+  getRoleFeedLabel,
+  resolveNotificationRoute,
+} from "../../NotificationCenter/utils";
+import classes from "../ComplaintManagement.module.css";
+
+const VIEW_FILTERS = [
+  { value: "complaints", label: "Complaint Alerts" },
+  { value: "unread", label: "Unread" },
+  { value: "role", label: "Role Feed" },
+  { value: "all", label: "All" },
+  { value: "announcements", label: "Announcements" },
+];
+
+const getMessage = (error, fallback) => {
+  if (error?.response?.data?.message) {
+    return error.response.data.message;
+  }
+  if (error?.response?.data) {
+    return JSON.stringify(error.response.data);
+  }
+  return error?.message || fallback;
+};
+
+export default function ComplaintNotificationsPanel({ role }) {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const [selectedFilter, setSelectedFilter] = useState("complaints");
+  const [search, setSearch] = useState("");
+  const [items, setItems] = useState([]);
+
+  const roleFeedLabel = getRoleFeedLabel(role);
+
+  const loadNotifications = async () => {
+    setLoading(true);
+    try {
+      const list = await fetchNotifications();
+      setItems(list.filter((item) => !item.deleted));
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Failed to load notifications",
+        message: getMessage(error, "Could not fetch notifications."),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadNotifications();
+    const pollId = setInterval(() => {
+      loadNotifications();
+    }, 45000);
+    return () => clearInterval(pollId);
+  }, []);
+
+  const counts = useMemo(
+    () => ({
+      all: items.length,
+      unread: items.filter((item) => item.unread).length,
+      complaints: items.filter(
+        (item) => getNotificationCategory(item, role) === "complaints",
+      ).length,
+      role: items.filter(
+        (item) => getNotificationCategory(item, role) === "role",
+      ).length,
+      announcements: items.filter(
+        (item) => getNotificationCategory(item, role) === "announcements",
+      ).length,
+    }),
+    [items, role],
+  );
+
+  const displayed = useMemo(() => {
+    const q = search.trim().toLowerCase();
+
+    return items
+      .filter((item) => {
+        const category = getNotificationCategory(item, role);
+        const moduleName = String(item?.data?.module || "").toLowerCase();
+        const verb = String(item?.verb || "").toLowerCase();
+        const description = String(item?.description || "").toLowerCase();
+        const matchSearch =
+          !q ||
+          moduleName.includes(q) ||
+          verb.includes(q) ||
+          description.includes(q);
+        if (!matchSearch) {
+          return false;
+        }
+
+        if (selectedFilter === "unread") {
+          return item.unread;
+        }
+        if (selectedFilter === "all") {
+          return true;
+        }
+        return category === selectedFilter;
+      })
+      .sort((a, b) => {
+        if (a.unread !== b.unread) {
+          return a.unread ? -1 : 1;
+        }
+        return new Date(b.timestamp || 0) - new Date(a.timestamp || 0);
+      });
+  }, [items, role, search, selectedFilter]);
+
+  const handleToggleRead = async (item) => {
+    try {
+      if (item.unread) {
+        await markNotificationRead(item.id);
+      } else {
+        await markNotificationUnread(item.id);
+      }
+
+      setItems((prev) =>
+        prev.map((entry) =>
+          entry.id === item.id ? { ...entry, unread: !entry.unread } : entry,
+        ),
+      );
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Update failed",
+        message: getMessage(error, "Could not update notification status."),
+      });
+    }
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      await deleteNotification(id);
+      setItems((prev) => prev.filter((entry) => entry.id !== id));
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Delete failed",
+        message: getMessage(error, "Could not delete notification."),
+      });
+    }
+  };
+
+  const handleOpen = async (item) => {
+    try {
+      const route = resolveNotificationRoute(item);
+      if (item.unread) {
+        await markNotificationRead(item.id);
+        setItems((prev) =>
+          prev.map((entry) =>
+            entry.id === item.id ? { ...entry, unread: false } : entry,
+          ),
+        );
+      }
+      if (route) {
+        navigate(route);
+      }
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Open failed",
+        message: getMessage(error, "Could not open notification route."),
+      });
+    }
+  };
+
+  const handleMarkVisibleRead = async () => {
+    const targets = displayed.filter((item) => item.unread);
+    if (targets.length === 0) {
+      return;
+    }
+
+    try {
+      await markVisibleNotificationsRead(targets);
+      const targetIds = new Set(targets.map((item) => item.id));
+      setItems((prev) =>
+        prev.map((entry) =>
+          targetIds.has(entry.id) ? { ...entry, unread: false } : entry,
+        ),
+      );
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Bulk action failed",
+        message: getMessage(
+          error,
+          "Could not mark visible notifications as read.",
+        ),
+      });
+    }
+  };
+
+  return (
+    <Stack gap="md">
+      <Paper className={classes.notificationPanel} withBorder>
+        <Group justify="space-between" align="flex-start" wrap="wrap">
+          <div>
+            <Group gap="xs" mb={4}>
+              <Text fw={600} size="lg">
+                Notifications
+              </Text>
+              <Badge variant="light" color="blue" size="sm">
+                {roleFeedLabel}
+              </Badge>
+            </Group>
+            <Text size="sm" className={classes.subtitle}>
+              Stay on top of complaint updates, status changes, and alerts.
+            </Text>
+          </div>
+          <Group gap="xs">
+            <Button
+              variant="default"
+              size="sm"
+              leftSection={<ArrowClockwise size={14} />}
+              loading={loading}
+              onClick={loadNotifications}
+            >
+              Refresh
+            </Button>
+            <Button
+              size="sm"
+              leftSection={<CheckCircle size={14} />}
+              onClick={handleMarkVisibleRead}
+              disabled={displayed.every((item) => !item.unread)}
+            >
+              Mark visible read
+            </Button>
+          </Group>
+        </Group>
+      </Paper>
+
+      <Paper className={classes.notificationToolbar} withBorder>
+        <Group justify="space-between" align="center" wrap="wrap">
+          <TextInput
+            leftSection={<MagnifyingGlass size={14} />}
+            placeholder="Search notifications"
+            value={search}
+            onChange={(event) => setSearch(event.currentTarget.value)}
+            w={{ base: "100%", sm: 320 }}
+          />
+          <Select
+            data={VIEW_FILTERS.map((entry) => ({
+              value: entry.value,
+              label:
+                entry.value === "role"
+                  ? roleFeedLabel
+                  : `${entry.label} (${counts[entry.value] || 0})`,
+            }))}
+            value={selectedFilter}
+            onChange={(value) => setSelectedFilter(value || "all")}
+            w={{ base: "100%", sm: 280 }}
+          />
+        </Group>
+      </Paper>
+
+      {displayed.length === 0 ? (
+        <Paper
+          className={`${classes.notificationEmpty} ${classes.moduleCard}`}
+          withBorder
+        >
+          <Stack align="center" py="xl" gap="xs">
+            <BellSlash size={28} color="#7f8ea5" />
+            <Text fw={700}>No notifications in this view</Text>
+            <Text size="sm" c="dimmed">
+              Try changing the filter or clearing search.
+            </Text>
+          </Stack>
+        </Paper>
+      ) : (
+        <Stack gap="sm">
+          {displayed.map((item) => {
+            const route = resolveNotificationRoute(item);
+            const category =
+              String(item?.data?.flag).toLowerCase() === "announcement"
+                ? "Announcement"
+                : item?.data?.module || "General";
+
+            return (
+              <Card
+                key={item.id}
+                withBorder
+                padding="sm"
+                className={
+                  item.unread
+                    ? `${classes.notificationCardUnread} ${classes.moduleCard}`
+                    : `${classes.notificationCardRead} ${classes.moduleCard}`
+                }
+              >
+                <Group justify="space-between" align="flex-start" wrap="nowrap">
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <Group gap={6} mb={4}>
+                      <Badge
+                        color={item.unread ? "blue" : "gray"}
+                        variant="light"
+                        size="xs"
+                      >
+                        {item.unread ? "Unread" : "Read"}
+                      </Badge>
+                      <Badge
+                        variant="light"
+                        size="xs"
+                        color={category === "Announcement" ? "orange" : "teal"}
+                      >
+                        {category}
+                      </Badge>
+                      <Text size="xs" c="dimmed">
+                        {formatNotificationTimestamp(item.timestamp)}
+                      </Text>
+                    </Group>
+                    <Text fw={600} size="sm">
+                      {item.verb || "Notification"}
+                    </Text>
+                    <Text size="xs" c="dimmed" lineClamp={2}>
+                      {item.description || "No description available."}
+                    </Text>
+                  </div>
+                  <Group gap={6} wrap="nowrap">
+                    {route && (
+                      <Button
+                        variant="light"
+                        color="blue"
+                        size="xs"
+                        leftSection={<ArrowSquareOut size={12} />}
+                        onClick={() => handleOpen(item)}
+                      >
+                        Open
+                      </Button>
+                    )}
+                    <Button
+                      variant="light"
+                      color={item.unread ? "blue" : "gray"}
+                      size="xs"
+                      onClick={() => handleToggleRead(item)}
+                    >
+                      {item.unread ? "Read" : "Unread"}
+                    </Button>
+                    <Button
+                      variant="subtle"
+                      color="red"
+                      size="xs"
+                      onClick={() => handleDelete(item.id)}
+                    >
+                      <Trash size={14} />
+                    </Button>
+                  </Group>
+                </Group>
+              </Card>
+            );
+          })}
+        </Stack>
+      )}
+    </Stack>
+  );
+}
+
+ComplaintNotificationsPanel.propTypes = {
+  role: PropTypes.string,
+};
+
+ComplaintNotificationsPanel.defaultProps = {
+  role: "",
+};
diff --git a/src/Modules/ComplaintManagement/components/ComplaintOversightPanel.jsx b/src/Modules/ComplaintManagement/components/ComplaintOversightPanel.jsx
new file mode 100644
index 000000000..1444a31e0
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ComplaintOversightPanel.jsx
@@ -0,0 +1,479 @@
+import PropTypes from "prop-types";
+import { useEffect, useMemo, useState } from "react";
+import {
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  Group,
+  Paper,
+  Select,
+  ScrollArea,
+  Stack,
+  Table,
+  Text,
+} from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { ArrowClockwise, ArrowSquareOut } from "@phosphor-icons/react";
+import ComplaintBulkActionModal from "./ComplaintBulkActionModal";
+import { bulkComplaintAction, fetchWorkers } from "../services";
+import classes from "../ComplaintManagement.module.css";
+
+const STATUS_LABELS = new Map([
+  [0, "Pending"],
+  [1, "In Progress"],
+  [2, "Resolved"],
+  [3, "Closed"],
+  [4, "Escalated"],
+  [5, "Reopened"],
+]);
+
+const FILTER_OPTIONS = [
+  { value: "all", label: "All Critical" },
+  { value: "overdue", label: "Overdue" },
+  { value: "escalated", label: "Escalated" },
+  { value: "stalled", label: "Stalled" },
+  { value: "unassigned", label: "Unassigned" },
+];
+
+const getMessage = (error, fallback) => {
+  if (error?.response?.data?.message) {
+    return error.response.data.message;
+  }
+  if (error?.response?.data) {
+    return JSON.stringify(error.response.data);
+  }
+  return error?.message || fallback;
+};
+
+const isOverdue = (complaint) => {
+  if (!complaint?.sla_deadline) {
+    return false;
+  }
+  const deadline = new Date(complaint.sla_deadline).getTime();
+  return (
+    Number.isFinite(deadline) &&
+    deadline < Date.now() &&
+    ![3, 2].includes(Number(complaint.status))
+  );
+};
+
+const isEscalated = (complaint) =>
+  Number(complaint.is_escalated) === 1 || Number(complaint.status) === 4;
+
+const isStalled = (complaint) => {
+  const timestamp = complaint.updated_at || complaint.complaint_date;
+  if (!timestamp) {
+    return false;
+  }
+  const hoursSinceUpdate =
+    (Date.now() - new Date(timestamp).getTime()) / (1000 * 60 * 60);
+  return hoursSinceUpdate >= 72 && ![2, 3].includes(Number(complaint.status));
+};
+
+const isUnassigned = (complaint) =>
+  !complaint.assigned_to && !complaint.assigned_to_name && !complaint.worker_id;
+
+export default function ComplaintOversightPanel({
+  complaints,
+  onView,
+  onRefresh,
+}) {
+  const [selectedFilter, setSelectedFilter] = useState("all");
+  const [selectedIds, setSelectedIds] = useState([]);
+  const [workers, setWorkers] = useState([]);
+  const [loadingWorkers, setLoadingWorkers] = useState(false);
+  const [loadingAction, setLoadingAction] = useState(false);
+  const [modalMode, setModalMode] = useState(null);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  useEffect(() => {
+    const loadWorkers = async () => {
+      setLoadingWorkers(true);
+      try {
+        const list = await fetchWorkers();
+        setWorkers(list);
+      } catch (error) {
+        notifications.show({
+          color: "red",
+          title: "Failed to load workers",
+          message: getMessage(
+            error,
+            "Could not fetch workers for reassignment.",
+          ),
+        });
+      } finally {
+        setLoadingWorkers(false);
+      }
+    };
+
+    loadWorkers();
+  }, []);
+
+  const derived = useMemo(() => {
+    const next = complaints.map((complaint) => ({
+      complaint,
+      overdue: isOverdue(complaint),
+      escalated: isEscalated(complaint),
+      stalled: isStalled(complaint),
+      unassigned: isUnassigned(complaint),
+    }));
+
+    return {
+      all: next,
+      overdue: next.filter((item) => item.overdue),
+      escalated: next.filter((item) => item.escalated),
+      stalled: next.filter((item) => item.stalled),
+      unassigned: next.filter((item) => item.unassigned),
+    };
+  }, [complaints]);
+
+  const visibleComplaints = useMemo(() => {
+    if (selectedFilter === "all") {
+      return derived.overdue
+        .concat(derived.escalated, derived.stalled)
+        .filter(
+          (item, index, array) =>
+            array.findIndex(
+              (entry) => entry.complaint.id === item.complaint.id,
+            ) === index,
+        );
+    }
+    return derived[selectedFilter] || [];
+  }, [derived, selectedFilter]);
+
+  useEffect(() => {
+    setSelectedIds((current) =>
+      current.filter((id) =>
+        visibleComplaints.some(
+          (item) => String(item.complaint.id) === String(id),
+        ),
+      ),
+    );
+  }, [visibleComplaints]);
+
+  const metrics = useMemo(
+    () => ({
+      overdue: derived.overdue.length,
+      escalated: derived.escalated.length,
+      stalled: derived.stalled.length,
+      unassigned: derived.unassigned.length,
+    }),
+    [derived],
+  );
+
+  const selectedComplaints = visibleComplaints.filter((item) =>
+    selectedIds.includes(String(item.complaint.id)),
+  );
+
+  const openModal = (mode) => {
+    if (selectedIds.length === 0) {
+      notifications.show({
+        color: "yellow",
+        title: "Nothing selected",
+        message: "Select one or more complaints first.",
+      });
+      return;
+    }
+
+    setModalMode(mode);
+    setModalOpen(true);
+  };
+
+  const handleSubmit = async (payload) => {
+    setLoadingAction(true);
+    try {
+      await bulkComplaintAction({
+        action: modalMode,
+        complaint_ids: selectedComplaints.map((item) => item.complaint.id),
+        ...payload,
+      });
+      notifications.show({
+        color: "green",
+        title: "Bulk action complete",
+        message: `${selectedComplaints.length} complaint${selectedComplaints.length === 1 ? "" : "s"} updated successfully.`,
+      });
+      setSelectedIds([]);
+      setModalOpen(false);
+      setModalMode(null);
+      await onRefresh();
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Bulk action failed",
+        message: getMessage(error, "Could not complete the bulk action."),
+      });
+    } finally {
+      setLoadingAction(false);
+    }
+  };
+
+  const allVisibleSelected =
+    visibleComplaints.length > 0 &&
+    visibleComplaints.every((item) =>
+      selectedIds.includes(String(item.complaint.id)),
+    );
+
+  const toggleVisibleSelection = (checked) => {
+    if (checked) {
+      setSelectedIds(
+        visibleComplaints.map((item) => String(item.complaint.id)),
+      );
+      return;
+    }
+    setSelectedIds([]);
+  };
+
+  const toggleRowSelection = (complaintId, checked) => {
+    const normalizedId = String(complaintId);
+    setSelectedIds((current) =>
+      checked
+        ? Array.from(new Set([...current, normalizedId]))
+        : current.filter((id) => id !== normalizedId),
+    );
+  };
+
+  return (
+    <Stack gap="md">
+      <Paper className={classes.oversightHeader} withBorder>
+        <Group justify="space-between" align="flex-start" wrap="wrap">
+          <div>
+            <Text fw={600} size="lg">
+              Oversight Dashboard
+            </Text>
+            <Text size="sm" className={classes.subtitle}>
+              Track overdue, escalated, stalled, and unassigned complaints.
+            </Text>
+          </div>
+          <Group gap="xs">
+            <Button
+              variant="default"
+              size="sm"
+              leftSection={<ArrowClockwise size={14} />}
+              onClick={onRefresh}
+            >
+              Refresh
+            </Button>
+            <Button
+              variant="light"
+              size="sm"
+              onClick={() => toggleVisibleSelection(!allVisibleSelected)}
+            >
+              {allVisibleSelected ? "Clear visible" : "Select visible"}
+            </Button>
+            <Button
+              size="sm"
+              onClick={() => openModal("reassign")}
+              disabled={selectedIds.length === 0 || loadingWorkers}
+            >
+              Bulk Reassign
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => openModal("intervene")}
+              disabled={selectedIds.length === 0}
+            >
+              Bulk Intervene
+            </Button>
+          </Group>
+        </Group>
+      </Paper>
+
+      <Group grow align="stretch">
+        <Card withBorder className={classes.summaryCard}>
+          <Text size="xs" c="dimmed">
+            Overdue
+          </Text>
+          <Text fw={700} size="xl" c="red">
+            {metrics.overdue}
+          </Text>
+        </Card>
+        <Card withBorder className={classes.summaryCard}>
+          <Text size="xs" c="dimmed">
+            Escalated
+          </Text>
+          <Text fw={700} size="xl" c="orange">
+            {metrics.escalated}
+          </Text>
+        </Card>
+        <Card withBorder className={classes.summaryCard}>
+          <Text size="xs" c="dimmed">
+            Stalled
+          </Text>
+          <Text fw={700} size="xl" c="blue">
+            {metrics.stalled}
+          </Text>
+        </Card>
+        <Card withBorder className={classes.summaryCard}>
+          <Text size="xs" c="dimmed">
+            Unassigned
+          </Text>
+          <Text fw={700} size="xl" c="gray">
+            {metrics.unassigned}
+          </Text>
+        </Card>
+      </Group>
+
+      <Paper className={classes.reportToolbar} withBorder>
+        <Group justify="space-between" align="center" wrap="wrap">
+          <Select
+            data={FILTER_OPTIONS.map((entry) => ({
+              ...entry,
+              label: `${entry.label} (${
+                entry.value === "all"
+                  ? visibleComplaints.length
+                  : derived[entry.value]?.length || 0
+              })`,
+            }))}
+            value={selectedFilter}
+            onChange={(value) => setSelectedFilter(value || "all")}
+            w={{ base: "100%", sm: 260 }}
+          />
+          <Text size="sm" c="dimmed">
+            Selected: {selectedIds.length}
+          </Text>
+        </Group>
+      </Paper>
+
+      <Paper
+        className={`${classes.tablePanel} ${classes.moduleCard}`}
+        withBorder
+      >
+        <ScrollArea className={classes.tableSurface}>
+          <Table
+            striped
+            highlightOnHover
+            withTableBorder
+            withColumnBorders
+            className={classes.tableClean}
+            verticalSpacing="sm"
+          >
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>
+                  <Checkbox
+                    checked={allVisibleSelected}
+                    indeterminate={
+                      selectedIds.length > 0 && !allVisibleSelected
+                    }
+                    onChange={(event) =>
+                      toggleVisibleSelection(event.currentTarget.checked)
+                    }
+                  />
+                </Table.Th>
+                <Table.Th>Reference</Table.Th>
+                <Table.Th>Type</Table.Th>
+                <Table.Th>Location</Table.Th>
+                <Table.Th>Status</Table.Th>
+                <Table.Th>SLA</Table.Th>
+                <Table.Th>Assigned</Table.Th>
+                <Table.Th>Issue</Table.Th>
+                <Table.Th>Action</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {visibleComplaints.length === 0 && (
+                <Table.Tr>
+                  <Table.Td colSpan={9}>
+                    <Text ta="center" c="dimmed">
+                      No complaints match this oversight filter.
+                    </Text>
+                  </Table.Td>
+                </Table.Tr>
+              )}
+              {visibleComplaints.map(({ complaint }) => (
+                <Table.Tr key={complaint.id}>
+                  <Table.Td>
+                    <Checkbox
+                      checked={selectedIds.includes(String(complaint.id))}
+                      onChange={(event) =>
+                        toggleRowSelection(
+                          complaint.id,
+                          event.currentTarget.checked,
+                        )
+                      }
+                    />
+                  </Table.Td>
+                  <Table.Td>
+                    <Text className={classes.monoRef}>
+                      {complaint.complaint_ref || `#${complaint.id}`}
+                    </Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text className={classes.cellClamp}>
+                      {complaint.complaint_type}
+                    </Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text className={classes.cellClamp}>
+                      {complaint.location}
+                    </Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge
+                      variant="light"
+                      color={isEscalated(complaint) ? "orange" : "blue"}
+                      className={classes.statusBadge}
+                    >
+                      {STATUS_LABELS.get(Number(complaint.status)) ||
+                        complaint.status}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge
+                      variant="light"
+                      color={isOverdue(complaint) ? "red" : "green"}
+                      className={classes.statusBadge}
+                    >
+                      {isOverdue(complaint) ? "Overdue" : "Within SLA"}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text className={classes.cellClamp}>
+                      {complaint.assigned_to_name || complaint.worker_id || "-"}
+                    </Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text className={classes.cellClamp}>
+                      {complaint.details}
+                    </Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Button
+                      size="xs"
+                      variant="light"
+                      leftSection={<ArrowSquareOut size={14} />}
+                      onClick={() => onView(complaint.id)}
+                    >
+                      Open
+                    </Button>
+                  </Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </ScrollArea>
+      </Paper>
+
+      <ComplaintBulkActionModal
+        opened={modalOpen}
+        mode={modalMode || "reassign"}
+        selectedCount={selectedIds.length}
+        workers={workers}
+        onClose={() => {
+          setModalOpen(false);
+          setModalMode(null);
+        }}
+        onSubmit={handleSubmit}
+        isLoading={loadingAction || loadingWorkers}
+      />
+    </Stack>
+  );
+}
+
+ComplaintOversightPanel.propTypes = {
+  complaints: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  onView: PropTypes.func.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+};
diff --git a/src/Modules/ComplaintManagement/components/ComplaintReportingPanel.jsx b/src/Modules/ComplaintManagement/components/ComplaintReportingPanel.jsx
new file mode 100644
index 000000000..c81bb2776
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ComplaintReportingPanel.jsx
@@ -0,0 +1,698 @@
+import PropTypes from "prop-types";
+import { useMemo, useState } from "react";
+import JsPDF from "jspdf";
+import autoTable from "jspdf-autotable";
+import * as XLSX from "xlsx";
+import {
+  Badge,
+  Button,
+  Card,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Loader,
+} from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import ComplaintTable from "./ComplaintTable";
+import { fetchComplaintAnalyticsReport } from "../services";
+import classes from "../ComplaintManagement.module.css";
+
+const STATUS_LABELS = new Map([
+  [0, "Pending"],
+  [1, "In Progress"],
+  [2, "Resolved"],
+  [3, "Closed"],
+  [4, "Escalated"],
+  [5, "Reopened"],
+]);
+
+const STATUS_OPTIONS = [
+  { value: "all", label: "All statuses" },
+  { value: "0", label: "Pending" },
+  { value: "1", label: "In Progress" },
+  { value: "2", label: "Resolved" },
+  { value: "3", label: "Closed" },
+  { value: "4", label: "Escalated" },
+  { value: "5", label: "Reopened" },
+];
+
+const buildCsvValue = (value) => {
+  const next = String(value ?? "").replace(/"/g, '""');
+  return `"${next}"`;
+};
+
+const getApiErrorMessage = (error) => {
+  if (error?.response?.data?.message) {
+    return error.response.data.message;
+  }
+  if (error?.response?.data) {
+    return JSON.stringify(error.response.data);
+  }
+  return error?.message || "Failed to generate report";
+};
+
+export default function ComplaintReportingPanel({
+  complaints,
+  onView,
+  normalizedRole = "",
+}) {
+  const [dateFrom, setDateFrom] = useState("");
+  const [dateTo, setDateTo] = useState("");
+  const [category, setCategory] = useState("all");
+  const [location, setLocation] = useState("all");
+  const [status, setStatus] = useState("all");
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [reportRequested, setReportRequested] = useState(false);
+  const [reportData, setReportData] = useState({
+    complaints,
+    status_logs: [],
+    totals: {
+      complaint_count: complaints.length,
+      total_matched_count: complaints.length,
+      is_truncated: false,
+      resolved_count: 0,
+      feedback_count: 0,
+    },
+    kpis: {
+      avg_resolution_time_hours: 0,
+      sla_compliance_rate: 0,
+      reopen_rate: 0,
+      feedback_response_rate: 0,
+    },
+    analytics: {
+      category_hotspots: [],
+      location_hotspots: [],
+      recurring_issue_clusters: [],
+      time_series: [],
+    },
+  });
+
+  const categoryOptions = useMemo(() => {
+    const values = Array.from(
+      new Set(complaints.map((item) => item.complaint_type).filter(Boolean)),
+    );
+    return [
+      { value: "all", label: "All categories" },
+      ...values.map((value) => ({ value, label: value })),
+    ];
+  }, [complaints]);
+
+  const locationOptions = useMemo(() => {
+    const values = Array.from(
+      new Set(complaints.map((item) => item.location).filter(Boolean)),
+    );
+    return [
+      { value: "all", label: "All locations" },
+      ...values.map((value) => ({ value, label: value })),
+    ];
+  }, [complaints]);
+
+  const filteredComplaints = useMemo(() => {
+    const source = reportData.complaints || complaints;
+    return source.filter((item) => {
+      if (category !== "all" && item.complaint_type !== category) {
+        return false;
+      }
+      if (location !== "all" && item.location !== location) {
+        return false;
+      }
+      if (status !== "all" && String(item.status) !== status) {
+        return false;
+      }
+      return true;
+    });
+  }, [category, complaints, location, reportData.complaints, status]);
+
+  const stats = useMemo(() => {
+    const computed = {
+      total: filteredComplaints.length,
+      open: filteredComplaints.reduce(
+        (count, item) =>
+          count + (![2, 3].includes(Number(item.status)) ? 1 : 0),
+        0,
+      ),
+      escalated: filteredComplaints.reduce(
+        (count, item) => count + (Number(item.status) === 4 ? 1 : 0),
+        0,
+      ),
+      closed: filteredComplaints.reduce(
+        (count, item) => count + (Number(item.status) === 3 ? 1 : 0),
+        0,
+      ),
+    };
+    return computed;
+  }, [filteredComplaints]);
+
+  const exportRows = filteredComplaints.map((item) => ({
+    ref: item.complaint_ref || item.id,
+    type: item.complaint_type || "",
+    location: item.location || "",
+    priority: item.priority || "Standard",
+    status: STATUS_LABELS.get(Number(item.status)) || item.status,
+    assigned: item.assigned_to_name || item.worker_id || "",
+    created: item.complaint_date || "",
+    sla: item.sla_deadline || "",
+    remarks: item.remarks || "",
+  }));
+
+  const handleExcelExport = () => {
+    const rows = exportRows.map((row) => ({
+      Reference: row.ref,
+      Category: row.type,
+      Location: row.location,
+      Priority: row.priority,
+      Status: row.status,
+      "Assigned To": row.assigned,
+      "Created At": row.created,
+      "SLA Deadline": row.sla,
+      Remarks: row.remarks,
+    }));
+
+    const workbook = XLSX.utils.book_new();
+    const worksheet = XLSX.utils.json_to_sheet(rows);
+    XLSX.utils.book_append_sheet(workbook, worksheet, "Complaint Report");
+    XLSX.writeFile(workbook, "complaint-report.xlsx");
+  };
+
+  const handleCsvExport = () => {
+    const header = [
+      "Reference",
+      "Category",
+      "Location",
+      "Priority",
+      "Status",
+      "Assigned To",
+      "Created At",
+      "SLA Deadline",
+      "Remarks",
+    ];
+
+    const rows = exportRows.map((row) => [
+      row.ref,
+      row.type,
+      row.location,
+      row.priority,
+      row.status,
+      row.assigned,
+      row.created,
+      row.sla,
+      row.remarks,
+    ]);
+
+    const csv = [header, ...rows]
+      .map((row) => row.map(buildCsvValue).join(","))
+      .join("\n");
+
+    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "complaint-report.csv";
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleGenerateReport = async () => {
+    if (dateFrom && dateTo && new Date(dateFrom) > new Date(dateTo)) {
+      notifications.show({
+        color: "red",
+        title: "Invalid date range",
+        message: "From date cannot be after To date.",
+      });
+      return;
+    }
+
+    setIsGenerating(true);
+    try {
+      let enforcedCategory = category === "all" ? "" : category;
+      if (
+        category === "all" &&
+        normalizedRole.includes("supervisor") &&
+        complaints.length > 0
+      ) {
+        enforcedCategory = complaints[0].complaint_type;
+      }
+
+      const payload = {
+        date_from: dateFrom,
+        date_to: dateTo,
+        category: enforcedCategory,
+        location: location === "all" ? "" : location,
+      };
+      const response = await fetchComplaintAnalyticsReport(payload);
+      setReportData({
+        complaints: response?.complaints || [],
+        status_logs: response?.status_logs || [],
+        totals: response?.totals || {
+          complaint_count: 0,
+          total_matched_count: 0,
+          is_truncated: false,
+          resolved_count: 0,
+          feedback_count: 0,
+        },
+        kpis: response?.kpis || {
+          avg_resolution_time_hours: 0,
+          sla_compliance_rate: 0,
+          reopen_rate: 0,
+          feedback_response_rate: 0,
+        },
+        analytics: response?.analytics || {
+          category_hotspots: [],
+          location_hotspots: [],
+          recurring_issue_clusters: [],
+          time_series: [],
+        },
+      });
+      setReportRequested(true);
+      notifications.show({
+        color: "green",
+        title: "Report generated",
+        message: "Dataset prepared and KPI insights computed.",
+      });
+    } catch (error) {
+      notifications.show({
+        color: "red",
+        title: "Report generation failed",
+        message: getApiErrorMessage(error),
+      });
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handlePdfExport = () => {
+    const doc = new JsPDF({ orientation: "landscape" });
+    doc.setFontSize(16);
+    doc.text("Complaint Report", 14, 16);
+    doc.setFontSize(10);
+    doc.text(
+      `Filters: ${category === "all" ? "All categories" : category} | ${
+        location === "all" ? "All locations" : location
+      } | ${status === "all" ? "All statuses" : STATUS_LABELS.get(Number(status)) || status}`,
+      14,
+      24,
+    );
+
+    autoTable(doc, {
+      startY: 30,
+      head: [
+        [
+          "Reference",
+          "Category",
+          "Location",
+          "Priority",
+          "Status",
+          "Assigned To",
+          "Created At",
+          "SLA Deadline",
+          "Remarks",
+        ],
+      ],
+      body: exportRows.map((row) => [
+        row.ref,
+        row.type,
+        row.location,
+        row.priority,
+        row.status,
+        row.assigned,
+        row.created,
+        row.sla,
+        row.remarks,
+      ]),
+      styles: { fontSize: 8, cellPadding: 2 },
+      headStyles: { fillColor: [46, 95, 170] },
+    });
+
+    doc.save("complaint-report.pdf");
+  };
+
+  return (
+    <Stack gap="md">
+      <Paper className={classes.reportHeader} withBorder>
+        <Group justify="space-between" align="flex-start" wrap="wrap">
+          <div>
+            <Text fw={600} size="lg">
+              Reporting &amp; Analytics
+            </Text>
+            <Text size="sm" className={classes.subtitle}>
+              Generate analytics, filter by date range, and export reports.
+            </Text>
+          </div>
+          <Group gap="xs">
+            <Button
+              size="sm"
+              onClick={handleGenerateReport}
+              loading={isGenerating}
+            >
+              Generate Report
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              onClick={handleCsvExport}
+              disabled={filteredComplaints.length === 0 || !reportRequested}
+            >
+              CSV
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              onClick={handleExcelExport}
+              disabled={filteredComplaints.length === 0 || !reportRequested}
+            >
+              Excel
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              onClick={handlePdfExport}
+              disabled={filteredComplaints.length === 0 || !reportRequested}
+            >
+              PDF
+            </Button>
+          </Group>
+        </Group>
+      </Paper>
+
+      <Group grow align="stretch">
+        <Card
+          withBorder
+          className={`${classes.summaryCard} ${classes.moduleCard}`}
+        >
+          <Text size="xs" c="dimmed">
+            Matching Complaints
+          </Text>
+          <Text fw={700} size="xl">
+            {stats.total}
+          </Text>
+        </Card>
+        <Card
+          withBorder
+          className={`${classes.summaryCard} ${classes.moduleCard}`}
+        >
+          <Text size="xs" c="dimmed">
+            Avg Resolution (hrs)
+          </Text>
+          <Text fw={700} size="xl" c="blue">
+            {reportData.kpis?.avg_resolution_time_hours ?? 0}
+          </Text>
+        </Card>
+        <Card
+          withBorder
+          className={`${classes.summaryCard} ${classes.moduleCard}`}
+        >
+          <Text size="xs" c="dimmed">
+            SLA Compliance
+          </Text>
+          <Text fw={700} size="xl" c="teal">
+            {reportData.kpis?.sla_compliance_rate ?? 0}%
+          </Text>
+        </Card>
+        <Card
+          withBorder
+          className={`${classes.summaryCard} ${classes.moduleCard}`}
+        >
+          <Text size="xs" c="dimmed">
+            Reopen Rate
+          </Text>
+          <Text fw={700} size="xl" c="orange">
+            {reportData.kpis?.reopen_rate ?? 0}%
+          </Text>
+        </Card>
+        <Card
+          withBorder
+          className={`${classes.summaryCard} ${classes.moduleCard}`}
+        >
+          <Text size="xs" c="dimmed">
+            Feedback Response
+          </Text>
+          <Text fw={700} size="xl" c="grape">
+            {reportData.kpis?.feedback_response_rate ?? 0}%
+          </Text>
+        </Card>
+        <Card
+          withBorder
+          className={`${classes.summaryCard} ${classes.moduleCard}`}
+        >
+          <Text size="xs" c="dimmed">
+            Open
+          </Text>
+          <Text fw={700} size="xl" c="blue">
+            {stats.open}
+          </Text>
+        </Card>
+        <Card
+          withBorder
+          className={`${classes.summaryCard} ${classes.moduleCard}`}
+        >
+          <Text size="xs" c="dimmed">
+            Escalated
+          </Text>
+          <Text fw={700} size="xl" c="orange">
+            {stats.escalated}
+          </Text>
+        </Card>
+        <Card
+          withBorder
+          className={`${classes.summaryCard} ${classes.moduleCard}`}
+        >
+          <Text size="xs" c="dimmed">
+            Closed
+          </Text>
+          <Text fw={700} size="xl" c="green">
+            {stats.closed}
+          </Text>
+        </Card>
+      </Group>
+
+      <Paper className={classes.reportToolbar} withBorder>
+        <Group grow align="flex-end" wrap="wrap">
+          <TextInput
+            type="date"
+            label="From"
+            value={dateFrom}
+            onChange={(event) => setDateFrom(event.currentTarget.value)}
+          />
+          <TextInput
+            type="date"
+            label="To"
+            value={dateTo}
+            onChange={(event) => setDateTo(event.currentTarget.value)}
+          />
+          <Select
+            label="Category"
+            data={categoryOptions}
+            value={category}
+            onChange={(value) => setCategory(value || "all")}
+          />
+          <Select
+            label="Location"
+            data={locationOptions}
+            value={location}
+            onChange={(value) => setLocation(value || "all")}
+          />
+          <Select
+            label="Status"
+            data={STATUS_OPTIONS}
+            value={status}
+            onChange={(value) => setStatus(value || "all")}
+          />
+        </Group>
+        <Group justify="space-between" mt="md" wrap="wrap">
+          <Badge variant="light">
+            {filteredComplaints.length} complaint
+            {filteredComplaints.length === 1 ? "" : "s"} in report
+          </Badge>
+          <Text size="sm" c="dimmed">
+            Generate report after selecting filters to refresh analytics.
+          </Text>
+        </Group>
+      </Paper>
+
+      <Paper className={classes.reportToolbar} withBorder>
+        <Group justify="space-between" align="center" wrap="wrap">
+          <Text fw={600}>Status Log Summary</Text>
+          {isGenerating && <Loader size="sm" />}
+        </Group>
+        <Group gap="xs" mt="sm">
+          {(reportData.status_logs || []).length === 0 && (
+            <Text size="sm" c="dimmed">
+              No status logs available for the selected filters.
+            </Text>
+          )}
+          {(reportData.status_logs || []).map((entry) => (
+            <Badge key={`${entry.action}-${entry.count}`} variant="light">
+              {entry.action}: {entry.count}
+            </Badge>
+          ))}
+        </Group>
+        <Group justify="space-between" mt="md" wrap="wrap">
+          <Text size="sm" c="dimmed">
+            Matched records: {reportData.totals?.total_matched_count ?? 0}
+          </Text>
+          {reportData.totals?.is_truncated && (
+            <Badge color="yellow" variant="light">
+              Report capped to 1000 rows for stability
+            </Badge>
+          )}
+        </Group>
+      </Paper>
+
+      <Paper className={classes.reportToolbar} withBorder>
+        <Text fw={600} mb="sm">
+          Category Hotspots
+        </Text>
+        <Group gap="xs">
+          {(reportData.analytics?.category_hotspots || []).length === 0 && (
+            <Text size="sm" c="dimmed">
+              No category hotspot data.
+            </Text>
+          )}
+          {(reportData.analytics?.category_hotspots || []).map((item) => (
+            <Badge key={`${item.category}-${item.count}`} variant="light">
+              {item.category}: {item.count}
+            </Badge>
+          ))}
+        </Group>
+      </Paper>
+
+      <Paper className={classes.reportToolbar} withBorder>
+        <Text fw={600} mb="sm">
+          Location Hotspots
+        </Text>
+        <Group gap="xs">
+          {(reportData.analytics?.location_hotspots || []).length === 0 && (
+            <Text size="sm" c="dimmed">
+              No location hotspot data.
+            </Text>
+          )}
+          {(reportData.analytics?.location_hotspots || []).map((item) => (
+            <Badge key={`${item.location}-${item.count}`} variant="light">
+              {item.location}: {item.count}
+            </Badge>
+          ))}
+        </Group>
+      </Paper>
+
+      <Paper className={classes.reportToolbar} withBorder>
+        <Text fw={600} mb="sm">
+          Recurring Issue Clusters
+        </Text>
+        <Stack gap="xs">
+          {(reportData.analytics?.recurring_issue_clusters || []).length ===
+            0 && (
+            <Text size="sm" c="dimmed">
+              No recurring cluster detected.
+            </Text>
+          )}
+          {(reportData.analytics?.recurring_issue_clusters || []).map(
+            (item) => (
+              <Text
+                key={`${item.complaint_type}-${item.location}-${item.count}`}
+                size="sm"
+              >
+                {item.complaint_type} at {item.location}: {item.count}{" "}
+                complaints
+              </Text>
+            ),
+          )}
+        </Stack>
+      </Paper>
+
+      <Paper className={classes.reportToolbar} withBorder>
+        <Text fw={600} mb="sm">
+          Time-series Trend
+        </Text>
+        {(reportData.analytics?.time_series || []).length > 0 && (
+          <div style={{ width: "100%", height: 260 }}>
+            <ResponsiveContainer>
+              <LineChart
+                data={(reportData.analytics?.time_series || []).slice(-30)}
+              >
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="date" />
+                <YAxis allowDecimals={false} />
+                <Tooltip />
+                <Legend />
+                <Line
+                  type="monotone"
+                  dataKey="created"
+                  stroke="#2e5faa"
+                  strokeWidth={2}
+                  dot={false}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="resolved"
+                  stroke="#2f9e44"
+                  strokeWidth={2}
+                  dot={false}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="closed"
+                  stroke="#12b886"
+                  strokeWidth={2}
+                  dot={false}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="escalated"
+                  stroke="#f08c00"
+                  strokeWidth={2}
+                  dot={false}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+        <Stack gap="xs">
+          {(reportData.analytics?.time_series || []).length === 0 && (
+            <Text size="sm" c="dimmed">
+              No trend data in this range.
+            </Text>
+          )}
+          {(reportData.analytics?.time_series || []).slice(-10).map((item) => (
+            <Text key={item.date} size="sm">
+              {item.date}: created {item.created}, resolved {item.resolved},
+              closed {item.closed}, escalated {item.escalated}
+            </Text>
+          ))}
+        </Stack>
+      </Paper>
+
+      <ComplaintTable
+        complaints={filteredComplaints}
+        onView={onView}
+        onEdit={() => {}}
+        onDelete={() => {}}
+        readOnly
+      />
+    </Stack>
+  );
+}
+
+ComplaintReportingPanel.propTypes = {
+  complaints: PropTypes.arrayOf(
+    PropTypes.shape({
+      complaint_type: PropTypes.string,
+    }),
+  ).isRequired,
+  onView: PropTypes.func.isRequired,
+  normalizedRole: PropTypes.string,
+};
diff --git a/src/Modules/ComplaintManagement/components/ComplaintTable.jsx b/src/Modules/ComplaintManagement/components/ComplaintTable.jsx
new file mode 100644
index 000000000..af5212142
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ComplaintTable.jsx
@@ -0,0 +1,200 @@
+import PropTypes from "prop-types";
+import {
+  Badge,
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Table,
+  Text,
+} from "@mantine/core";
+import classes from "../ComplaintManagement.module.css";
+
+const STATUS_LABELS = new Map([
+  [0, "Pending"],
+  [1, "In Progress"],
+  [2, "Resolved"],
+  [3, "Closed"],
+  [4, "Escalated"],
+  [5, "Reopened"],
+]);
+
+export default function ComplaintTable({
+  complaints,
+  onView,
+  onEdit = () => {},
+  onDelete = () => {},
+  onSubmitDraft = () => {},
+  isCaretaker = false,
+  readOnly = false,
+}) {
+  return (
+    <Paper p="md" withBorder radius="md" className={classes.moduleCard}>
+      <ScrollArea className={classes.tableSurface}>
+        <Table
+          striped
+          highlightOnHover
+          withTableBorder
+          withColumnBorders
+          className={classes.tableClean}
+          verticalSpacing="sm"
+        >
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>ID</Table.Th>
+              <Table.Th>Reference</Table.Th>
+              <Table.Th>Type</Table.Th>
+              <Table.Th>Priority</Table.Th>
+              <Table.Th>Location</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>SLA</Table.Th>
+              <Table.Th>Assigned</Table.Th>
+              <Table.Th>Remarks</Table.Th>
+              <Table.Th>Details</Table.Th>
+              <Table.Th>Actions</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {complaints.length === 0 && (
+              <Table.Tr>
+                <Table.Td colSpan={11}>
+                  <Text ta="center" c="dimmed">
+                    No complaints found.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+            {complaints.map((item) => (
+              <Table.Tr key={item.id}>
+                <Table.Td>{item.id}</Table.Td>
+                <Table.Td>
+                  <Text className={classes.monoRef}>
+                    {item.complaint_ref || "-"}
+                  </Text>
+                </Table.Td>
+                <Table.Td>
+                  <Text className={classes.cellClamp}>
+                    {item.complaint_type || "-"}
+                  </Text>
+                </Table.Td>
+                <Table.Td>
+                  <Badge variant="light" className={classes.statusBadge}>
+                    {item.priority || "Standard"}
+                  </Badge>
+                </Table.Td>
+                <Table.Td>
+                  <Text className={classes.cellClamp}>
+                    {item.location || "-"}
+                  </Text>
+                </Table.Td>
+                <Table.Td>
+                  <Badge variant="light" className={classes.statusBadge}>
+                    {item.is_draft
+                      ? "Draft"
+                      : item.status_label ||
+                        STATUS_LABELS.get(Number(item.status)) ||
+                        item.status}
+                  </Badge>
+                </Table.Td>
+                <Table.Td>
+                  <Text className={classes.cellClamp}>
+                    {item.sla_deadline
+                      ? new Date(item.sla_deadline).toLocaleString()
+                      : "-"}
+                  </Text>
+                </Table.Td>
+                <Table.Td>
+                  <Text className={classes.cellClamp}>
+                    {item.assigned_to_name ||
+                      item.assigned_to ||
+                      item.worker_id ||
+                      "-"}
+                  </Text>
+                </Table.Td>
+                <Table.Td>
+                  <Text className={classes.cellClamp}>
+                    {item.remarks || "-"}
+                  </Text>
+                </Table.Td>
+                <Table.Td>
+                  <Text className={classes.cellClamp}>
+                    {item.details || "-"}
+                  </Text>
+                </Table.Td>
+                <Table.Td>
+                  <Group gap="xs" wrap="nowrap">
+                    <Button
+                      size="xs"
+                      variant="light"
+                      onClick={() => onView(item.id)}
+                    >
+                      View
+                    </Button>
+                    {!isCaretaker && !readOnly && (
+                      <>
+                        {item.is_draft && (
+                          <Button
+                            size="xs"
+                            color="teal"
+                            variant="light"
+                            onClick={() => onSubmitDraft(item)}
+                          >
+                            Submit Draft
+                          </Button>
+                        )}
+                        <Button
+                          size="xs"
+                          variant="default"
+                          onClick={() => onEdit(item)}
+                        >
+                          Edit
+                        </Button>
+                        <Button
+                          size="xs"
+                          color="red"
+                          variant="light"
+                          onClick={() => onDelete(item.id)}
+                        >
+                          Delete
+                        </Button>
+                      </>
+                    )}
+                  </Group>
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+ComplaintTable.propTypes = {
+  complaints: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+      complaint_ref: PropTypes.string,
+      complaint_type: PropTypes.string,
+      priority: PropTypes.string,
+      location: PropTypes.string,
+      status: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      sla_deadline: PropTypes.string,
+      assigned_to: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      worker_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      remarks: PropTypes.string,
+      details: PropTypes.string,
+    }),
+  ).isRequired,
+  onView: PropTypes.func.isRequired,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  onSubmitDraft: PropTypes.func,
+  isCaretaker: PropTypes.bool,
+  readOnly: PropTypes.bool,
+};
+
+ComplaintTable.defaultProps = {
+  isCaretaker: false,
+  readOnly: false,
+};
diff --git a/src/Modules/ComplaintManagement/components/ComplaintTableSectioned.jsx b/src/Modules/ComplaintManagement/components/ComplaintTableSectioned.jsx
new file mode 100644
index 000000000..f65efaafa
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ComplaintTableSectioned.jsx
@@ -0,0 +1,327 @@
+import { useMemo } from "react";
+import {
+  Accordion,
+  Badge,
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Stack,
+  Table,
+  Text,
+} from "@mantine/core";
+import PropTypes from "prop-types";
+import classes from "../ComplaintManagement.module.css";
+
+const STATUS_LABELS = new Map([
+  [0, "Pending"],
+  [1, "In Progress"],
+  [2, "Resolved"],
+  [3, "Closed"],
+  [4, "Escalated"],
+  [5, "Reopened"],
+]);
+
+const STATUS_COLORS = new Map([
+  [0, "yellow"], // Pending
+  [1, "blue"], // In Progress
+  [2, "green"], // Resolved
+  [3, "gray"], // Closed
+  [4, "red"], // Escalated
+  [5, "orange"], // Reopened
+]);
+
+const complaintItemShape = PropTypes.shape({
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  complaint_ref: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  complaint_type: PropTypes.string,
+  priority: PropTypes.string,
+  location: PropTypes.string,
+  status: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  is_draft: PropTypes.bool,
+  status_label: PropTypes.string,
+  sla_deadline: PropTypes.string,
+  assigned_to_name: PropTypes.string,
+  assigned_to: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  worker_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  remarks: PropTypes.string,
+  details: PropTypes.string,
+});
+
+function ComplaintTableRows({
+  items,
+  onView,
+  onEdit,
+  onDelete,
+  onSubmitDraft,
+  isCaretaker,
+  readOnly,
+}) {
+  if (items.length === 0) {
+    return (
+      <Table.Tr>
+        <Table.Td colSpan={11}>
+          <Text ta="center" c="dimmed">
+            No complaints in this section.
+          </Text>
+        </Table.Td>
+      </Table.Tr>
+    );
+  }
+
+  return items.map((item) => (
+    <Table.Tr key={item.id}>
+      <Table.Td>{item.id}</Table.Td>
+      <Table.Td>
+        <Text className={classes.monoRef}>{item.complaint_ref || "-"}</Text>
+      </Table.Td>
+      <Table.Td>
+        <Text className={classes.cellClamp}>{item.complaint_type || "-"}</Text>
+      </Table.Td>
+      <Table.Td>
+        <Badge variant="light" className={classes.statusBadge}>
+          {item.priority || "Standard"}
+        </Badge>
+      </Table.Td>
+      <Table.Td>
+        <Text className={classes.cellClamp}>{item.location || "-"}</Text>
+      </Table.Td>
+      <Table.Td>
+        <Badge
+          color={STATUS_COLORS.get(Number(item.status)) || "gray"}
+          variant="light"
+          className={classes.statusBadge}
+        >
+          {item.is_draft
+            ? "Draft"
+            : item.status_label ||
+              STATUS_LABELS.get(Number(item.status)) ||
+              item.status}
+        </Badge>
+      </Table.Td>
+      <Table.Td>
+        <Text className={classes.cellClamp}>
+          {item.sla_deadline
+            ? new Date(item.sla_deadline).toLocaleString()
+            : "-"}
+        </Text>
+      </Table.Td>
+      <Table.Td>
+        <Text className={classes.cellClamp}>
+          {item.assigned_to_name || item.assigned_to || item.worker_id || "-"}
+        </Text>
+      </Table.Td>
+      <Table.Td>
+        <Text className={classes.cellClamp}>{item.remarks || "-"}</Text>
+      </Table.Td>
+      <Table.Td>
+        <Text className={classes.cellClamp}>{item.details || "-"}</Text>
+      </Table.Td>
+      <Table.Td>
+        <Group gap="xs" wrap="nowrap">
+          <Button size="xs" variant="light" onClick={() => onView(item.id)}>
+            View
+          </Button>
+          {!isCaretaker && !readOnly && (
+            <Group gap="xs" wrap="nowrap">
+              {item.is_draft && (
+                <Button
+                  size="xs"
+                  variant="light"
+                  onClick={() => onSubmitDraft(item.id)}
+                >
+                  Submit
+                </Button>
+              )}
+              {!item.is_draft && (
+                <>
+                  <Button
+                    size="xs"
+                    variant="light"
+                    onClick={() => onEdit(item)}
+                  >
+                    Edit
+                  </Button>
+                  <Button
+                    size="xs"
+                    color="red"
+                    variant="light"
+                    onClick={() => onDelete(item.id)}
+                  >
+                    Delete
+                  </Button>
+                </>
+              )}
+            </Group>
+          )}
+        </Group>
+      </Table.Td>
+    </Table.Tr>
+  ));
+}
+
+ComplaintTableRows.propTypes = {
+  items: PropTypes.arrayOf(complaintItemShape).isRequired,
+  onView: PropTypes.func.isRequired,
+  onEdit: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onSubmitDraft: PropTypes.func.isRequired,
+  isCaretaker: PropTypes.bool.isRequired,
+  readOnly: PropTypes.bool.isRequired,
+};
+
+export default function ComplaintTableSectioned({
+  complaints,
+  onView,
+  onEdit = () => {},
+  onDelete = () => {},
+  onSubmitDraft = () => {},
+  isCaretaker = false,
+  readOnly = false,
+}) {
+  // Group complaints by status
+  const groupedComplaints = useMemo(() => {
+    const groups = {
+      pending: [],
+      escalated: [],
+      resolved: [],
+      other: [],
+    };
+
+    complaints.forEach((complaint) => {
+      if (complaint.is_draft) {
+        groups.other.push(complaint);
+      } else if (complaint.status === 0) {
+        // Pending
+        groups.pending.push(complaint);
+      } else if (complaint.status === 4) {
+        // Escalated
+        groups.escalated.push(complaint);
+      } else if (complaint.status === 2 || complaint.status === 3) {
+        // Resolved or Closed
+        groups.resolved.push(complaint);
+      } else {
+        groups.other.push(complaint);
+      }
+    });
+
+    return groups;
+  }, [complaints]);
+
+  const sections = [
+    {
+      key: "pending",
+      label: `Pending (${groupedComplaints.pending.length})`,
+      data: groupedComplaints.pending,
+      icon: "",
+      color: "yellow",
+    },
+    {
+      key: "escalated",
+      label: `Escalated (${groupedComplaints.escalated.length})`,
+      data: groupedComplaints.escalated,
+      icon: "",
+      color: "red",
+    },
+    {
+      key: "resolved",
+      label: `Resolved & Closed (${groupedComplaints.resolved.length})`,
+      data: groupedComplaints.resolved,
+      icon: "",
+      color: "green",
+    },
+    {
+      key: "In progress",
+      label: `In progress (${groupedComplaints.other.length})`,
+      data: groupedComplaints.other,
+      icon: "",
+      color: "blue",
+    },
+  ];
+
+  return (
+    <Paper p="md" withBorder radius="md" className={classes.moduleCard}>
+      <Stack gap="md">
+        <Group justify="space-between" align="center" wrap="wrap">
+          <Text fw={600}>Complaint Lifecycle Sections</Text>
+          <Text className={classes.statusNote}>
+            Sorted for faster triage and action.
+          </Text>
+        </Group>
+        {sections.filter((s) => s.data.length > 0).length === 0 ? (
+          <Text ta="center" c="dimmed" py="xl">
+            No complaints found.
+          </Text>
+        ) : (
+          <Accordion variant="contained">
+            {sections.map((section) => (
+              <Accordion.Item
+                key={section.key}
+                value={section.key}
+                defaultChecked={["pending", "escalated"].includes(section.key)}
+              >
+                <Accordion.Control>
+                  <Group gap="sm">
+                    <Text size="lg">{section.icon}</Text>
+                    <Badge color={section.color} size="lg" variant="light">
+                      {section.label}
+                    </Badge>
+                  </Group>
+                </Accordion.Control>
+                <Accordion.Panel>
+                  <ScrollArea className={classes.tableSurface}>
+                    <Table
+                      striped
+                      highlightOnHover
+                      withTableBorder
+                      withColumnBorders
+                      className={classes.tableClean}
+                      verticalSpacing="sm"
+                    >
+                      <Table.Thead>
+                        <Table.Tr>
+                          <Table.Th>ID</Table.Th>
+                          <Table.Th>Reference</Table.Th>
+                          <Table.Th>Type</Table.Th>
+                          <Table.Th>Priority</Table.Th>
+                          <Table.Th>Location</Table.Th>
+                          <Table.Th>Status</Table.Th>
+                          <Table.Th>SLA</Table.Th>
+                          <Table.Th>Assigned</Table.Th>
+                          <Table.Th>Remarks</Table.Th>
+                          <Table.Th>Details</Table.Th>
+                          <Table.Th>Actions</Table.Th>
+                        </Table.Tr>
+                      </Table.Thead>
+                      <Table.Tbody>
+                        <ComplaintTableRows
+                          items={section.data}
+                          onView={onView}
+                          onEdit={onEdit}
+                          onDelete={onDelete}
+                          onSubmitDraft={onSubmitDraft}
+                          isCaretaker={isCaretaker}
+                          readOnly={readOnly}
+                        />
+                      </Table.Tbody>
+                    </Table>
+                  </ScrollArea>
+                </Accordion.Panel>
+              </Accordion.Item>
+            ))}
+          </Accordion>
+        )}
+      </Stack>
+    </Paper>
+  );
+}
+
+ComplaintTableSectioned.propTypes = {
+  complaints: PropTypes.arrayOf(complaintItemShape).isRequired,
+  onView: PropTypes.func.isRequired,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  onSubmitDraft: PropTypes.func,
+  isCaretaker: PropTypes.bool,
+  readOnly: PropTypes.bool,
+};
diff --git a/src/Modules/ComplaintManagement/components/EscalationModal.jsx b/src/Modules/ComplaintManagement/components/EscalationModal.jsx
new file mode 100644
index 000000000..7c78c5ba4
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/EscalationModal.jsx
@@ -0,0 +1,141 @@
+import PropTypes from "prop-types";
+import {
+  Modal,
+  Button,
+  Textarea,
+  Stack,
+  Group,
+  Text,
+  Alert,
+  Divider,
+} from "@mantine/core";
+import { IconAlertCircle } from "@tabler/icons-react";
+import { useState } from "react";
+
+const ESCALATION_REASONS = [
+  "Complaint not resolved within expected timeframe",
+  "Requires supervisor expertise",
+  "Recurring issue with same location",
+  "Complex issue needing higher authority",
+  "Complaint related to multiple departments",
+];
+
+export default function EscalationModal({
+  opened,
+  onClose,
+  complaint,
+  onEscalate,
+  isLoading = false,
+}) {
+  const [reason, setReason] = useState("");
+  const [error, setError] = useState("");
+
+  const handleEscalate = async () => {
+    const trimmedReason = reason.trim();
+    if (!trimmedReason) {
+      setError("Escalation justification is required.");
+      return;
+    }
+
+    setError("");
+    await onEscalate({ escalation_reason: trimmedReason });
+    setReason("");
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Escalate Complaint to Supervisor"
+      centered
+      size="md"
+    >
+      <Stack gap="md">
+        {complaint && (
+          <Alert
+            icon={<IconAlertCircle size={16} />}
+            color="orange"
+            title="Escalation Details"
+          >
+            Complaint #{complaint.id} - {complaint.complaint_type}
+          </Alert>
+        )}
+
+        <div>
+          <Text fw={500} mb="xs" size="sm">
+            Reason for Escalation
+          </Text>
+          <Textarea
+            placeholder="Explain why this needs supervisor approval..."
+            minRows={3}
+            maxRows={5}
+            value={reason}
+            onChange={(e) => {
+              setReason(e.currentTarget.value);
+              if (error && e.currentTarget.value.trim()) {
+                setError("");
+              }
+            }}
+            maxLength={300}
+            disabled={isLoading}
+            error={error}
+          />
+          <Text size="xs" c="dimmed" mt="xs">
+            {reason.trim().length}/300 characters. Justification is required.
+          </Text>
+        </div>
+
+        <Divider label="Quick reasons" labelPosition="center" />
+
+        <div>
+          <Stack gap="xs">
+            {ESCALATION_REASONS.map((r, idx) => (
+              <Button
+                key={idx}
+                variant="outline"
+                size="sm"
+                onClick={() => setReason(r)}
+                disabled={isLoading}
+                fullWidth
+                justify="flex-start"
+                style={{ textAlign: "left", fontSize: "0.85rem" }}
+              >
+                {r}
+              </Button>
+            ))}
+          </Stack>
+        </div>
+
+        <Group justify="flex-end" mt="lg">
+          <Button variant="default" onClick={onClose} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button
+            color="blue"
+            onClick={handleEscalate}
+            loading={isLoading}
+            disabled={isLoading || !reason.trim()}
+          >
+            Escalate to Supervisor
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+EscalationModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  complaint: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    complaint_type: PropTypes.string,
+  }),
+  onEscalate: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool,
+};
+
+EscalationModal.defaultProps = {
+  complaint: null,
+  isLoading: false,
+};
diff --git a/src/Modules/ComplaintManagement/components/ReopenRequestModal.jsx b/src/Modules/ComplaintManagement/components/ReopenRequestModal.jsx
new file mode 100644
index 000000000..691788970
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ReopenRequestModal.jsx
@@ -0,0 +1,121 @@
+import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
+import {
+  Alert,
+  Button,
+  Group,
+  Modal,
+  Stack,
+  Text,
+  Textarea,
+} from "@mantine/core";
+import { IconAlertCircle } from "@tabler/icons-react";
+
+export default function ReopenRequestModal({
+  opened,
+  onClose,
+  complaint,
+  reopenDeadline = "",
+  onRequestReopen,
+  isLoading = false,
+}) {
+  const [reason, setReason] = useState("");
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (opened) {
+      setReason("");
+      setError("");
+    }
+  }, [opened]);
+
+  const handleSubmit = async () => {
+    const trimmedReason = reason.trim();
+    if (!trimmedReason) {
+      setError("A justification is required to request reopen.");
+      return;
+    }
+
+    setError("");
+    await onRequestReopen({ reopen_reason: trimmedReason });
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Request Reopen"
+      centered
+      size="md"
+    >
+      <Stack gap="md">
+        {complaint && (
+          <Alert
+            icon={<IconAlertCircle size={16} />}
+            color="orange"
+            title="Reopen Request"
+          >
+            Complaint #{complaint.id} - {complaint.complaint_type}
+          </Alert>
+        )}
+
+        {reopenDeadline && (
+          <Text size="sm" c="dimmed">
+            Reopen window closes on {new Date(reopenDeadline).toLocaleString()}.
+          </Text>
+        )}
+
+        <div>
+          <Text fw={500} mb="xs" size="sm">
+            Justification
+          </Text>
+          <Textarea
+            placeholder="Explain why this complaint should be reopened..."
+            minRows={4}
+            maxRows={6}
+            value={reason}
+            onChange={(event) => {
+              setReason(event.currentTarget.value);
+              if (error && event.currentTarget.value.trim()) {
+                setError("");
+              }
+            }}
+            maxLength={300}
+            disabled={isLoading}
+            error={error}
+          />
+          <Text size="xs" c="dimmed" mt="xs">
+            {reason.trim().length}/300 characters
+          </Text>
+        </div>
+
+        <Group justify="flex-end" mt="lg">
+          <Button variant="default" onClick={onClose} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button color="orange" onClick={handleSubmit} loading={isLoading}>
+            Submit Reopen Request
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+ReopenRequestModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  complaint: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    complaint_type: PropTypes.string,
+  }),
+  reopenDeadline: PropTypes.string,
+  onRequestReopen: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool,
+};
+
+ReopenRequestModal.defaultProps = {
+  complaint: null,
+  reopenDeadline: "",
+  isLoading: false,
+};
diff --git a/src/Modules/ComplaintManagement/components/ResolutionModal.jsx b/src/Modules/ComplaintManagement/components/ResolutionModal.jsx
new file mode 100644
index 000000000..57485891a
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ResolutionModal.jsx
@@ -0,0 +1,177 @@
+import PropTypes from "prop-types";
+import { useState } from "react";
+import {
+  Modal,
+  Stack,
+  Textarea,
+  Button,
+  Group,
+  Text,
+  Select,
+  Alert,
+  Divider,
+  TextInput,
+} from "@mantine/core";
+import { IconAlertCircle } from "@tabler/icons-react";
+
+const STATUS_OPTIONS = [
+  { value: "0", label: "Pending" },
+  { value: "1", label: "In Progress" },
+  { value: "2", label: "Resolved" },
+];
+
+export default function ResolutionModal({
+  opened,
+  onClose,
+  complaint,
+  onResolve,
+  isLoading = false,
+}) {
+  const [newStatus, setNewStatus] = useState(null);
+  const [remarks, setRemarks] = useState("");
+  const [estimatedResolutionTime, setEstimatedResolutionTime] = useState("");
+  const [progressAttachment, setProgressAttachment] = useState(null);
+
+  const handleResolve = () => {
+    onResolve({
+      status: Number(newStatus),
+      remarks,
+      progress_notes: remarks,
+      estimated_resolution_time: estimatedResolutionTime || null,
+      progress_attachment: progressAttachment,
+    });
+    setNewStatus(null);
+    setRemarks("");
+    setEstimatedResolutionTime("");
+    setProgressAttachment(null);
+  };
+
+  const handleClose = () => {
+    setNewStatus(null);
+    setRemarks("");
+    setEstimatedResolutionTime("");
+    setProgressAttachment(null);
+    onClose();
+  };
+
+  const currentStatusLabel =
+    STATUS_OPTIONS.find((s) => s.value === String(complaint?.status))?.label ||
+    "Unknown";
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={handleClose}
+      title="Update Complaint Status"
+      centered
+      size="md"
+    >
+      <Stack gap="md">
+        {complaint && (
+          <Alert
+            icon={<IconAlertCircle size={16} />}
+            color="blue"
+            title="Current Status"
+          >
+            Complaint #{complaint.id} - <strong>{currentStatusLabel}</strong>
+          </Alert>
+        )}
+
+        <div>
+          <Text fw={500} mb="xs" size="sm">
+            Select New Status
+          </Text>
+          <Select
+            placeholder="Choose status..."
+            data={STATUS_OPTIONS}
+            value={newStatus}
+            onChange={setNewStatus}
+            searchable
+            clearable
+            disabled={isLoading}
+          />
+        </div>
+
+        <Divider />
+
+        <div>
+          <Text fw={500} mb="xs" size="sm">
+            Remarks
+          </Text>
+          <Textarea
+            placeholder="Add your remarks here..."
+            minRows={3}
+            maxRows={5}
+            value={remarks}
+            onChange={(e) => setRemarks(e.currentTarget.value)}
+            maxLength={300}
+            disabled={isLoading}
+          />
+          <Text size="xs" c="dimmed" mt="xs">
+            {remarks.length}/300 characters
+          </Text>
+        </div>
+
+        <div>
+          <Text fw={500} mb="xs" size="sm">
+            Estimated Resolution Time (optional)
+          </Text>
+          <TextInput
+            type="datetime-local"
+            value={estimatedResolutionTime}
+            onChange={(e) => setEstimatedResolutionTime(e.currentTarget.value)}
+            disabled={isLoading}
+          />
+        </div>
+
+        <div>
+          <Text fw={500} mb="xs" size="sm">
+            Progress Attachment (optional)
+          </Text>
+          <input
+            type="file"
+            onChange={(e) =>
+              setProgressAttachment(e.currentTarget.files?.[0] || null)
+            }
+            disabled={isLoading}
+          />
+          {progressAttachment && (
+            <Text size="xs" c="dimmed" mt="xs">
+              Selected: {progressAttachment.name}
+            </Text>
+          )}
+        </div>
+
+        <Group justify="flex-end" mt="lg">
+          <Button variant="default" onClick={handleClose} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button
+            color="blue"
+            onClick={handleResolve}
+            loading={isLoading}
+            disabled={!newStatus || !remarks.trim()}
+          >
+            Save Progress Update
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+ResolutionModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  complaint: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    status: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  }),
+  onResolve: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool,
+};
+
+ResolutionModal.defaultProps = {
+  complaint: null,
+  isLoading: false,
+};
diff --git a/src/Modules/ComplaintManagement/components/ResolutionVerificationModal.jsx b/src/Modules/ComplaintManagement/components/ResolutionVerificationModal.jsx
new file mode 100644
index 000000000..9d0949f57
--- /dev/null
+++ b/src/Modules/ComplaintManagement/components/ResolutionVerificationModal.jsx
@@ -0,0 +1,143 @@
+import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
+import {
+  Alert,
+  Button,
+  Group,
+  Modal,
+  Select,
+  Stack,
+  Text,
+  Textarea,
+} from "@mantine/core";
+import { IconAlertCircle } from "@tabler/icons-react";
+
+const DECISION_OPTIONS = [
+  { value: "approve", label: "Verify and Close" },
+  { value: "reject", label: "Reject Resolution" },
+];
+
+export default function ResolutionVerificationModal({
+  opened,
+  onClose,
+  complaint,
+  defaultDecision = "approve",
+  verificationSource = "complainant",
+  onVerify,
+  isLoading = false,
+}) {
+  const [decision, setDecision] = useState(defaultDecision);
+  const [notes, setNotes] = useState("");
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (opened) {
+      setDecision(defaultDecision);
+      setNotes("");
+      setError("");
+    }
+  }, [opened, defaultDecision]);
+
+  const handleSubmit = async () => {
+    const trimmedNotes = notes.trim();
+    if (decision === "reject" && !trimmedNotes) {
+      setError("A reason is required when rejecting the resolution.");
+      return;
+    }
+
+    setError("");
+    await onVerify({
+      verification_source: verificationSource,
+      verification_decision: decision,
+      verification_notes: trimmedNotes,
+    });
+    setNotes("");
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Resolution Verification"
+      centered
+      size="md"
+    >
+      <Stack gap="md">
+        {complaint && (
+          <Alert
+            icon={<IconAlertCircle size={16} />}
+            color="green"
+            title="Verify the resolved complaint"
+          >
+            Complaint #{complaint.id} - {complaint.complaint_type}
+          </Alert>
+        )}
+
+        <div>
+          <Text fw={500} mb="xs" size="sm">
+            Decision
+          </Text>
+          <Select
+            data={DECISION_OPTIONS}
+            value={decision}
+            onChange={(value) => setDecision(value || "approve")}
+            disabled={isLoading}
+          />
+        </div>
+
+        <div>
+          <Text fw={500} mb="xs" size="sm">
+            Comment or reason
+          </Text>
+          <Textarea
+            placeholder="Add context for your decision..."
+            minRows={3}
+            maxRows={5}
+            value={notes}
+            onChange={(event) => {
+              setNotes(event.currentTarget.value);
+              if (error && event.currentTarget.value.trim()) {
+                setError("");
+              }
+            }}
+            maxLength={300}
+            disabled={isLoading}
+            error={error}
+          />
+          <Text size="xs" c="dimmed" mt="xs">
+            {notes.trim().length}/300 characters
+          </Text>
+        </div>
+
+        <Group justify="flex-end" mt="lg">
+          <Button variant="default" onClick={onClose} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button color="green" onClick={handleSubmit} loading={isLoading}>
+            Submit Decision
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+ResolutionVerificationModal.propTypes = {
+  opened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  complaint: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    complaint_type: PropTypes.string,
+  }),
+  defaultDecision: PropTypes.oneOf(["approve", "reject"]),
+  verificationSource: PropTypes.oneOf(["complainant", "supervisor"]),
+  onVerify: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool,
+};
+
+ResolutionVerificationModal.defaultProps = {
+  complaint: null,
+  defaultDecision: "approve",
+  verificationSource: "complainant",
+  isLoading: false,
+};
diff --git a/src/Modules/ComplaintManagement/index.jsx b/src/Modules/ComplaintManagement/index.jsx
new file mode 100644
index 000000000..fa3a97fdf
--- /dev/null
+++ b/src/Modules/ComplaintManagement/index.jsx
@@ -0,0 +1,13 @@
+import { Navigate, Route, Routes } from "react-router-dom";
+import ComplaintList from "./ComplaintList";
+import ComplaintCreate from "./ComplaintCreate";
+
+export default function ComplaintManagementModule() {
+  return (
+    <Routes>
+      <Route path="/" element={<ComplaintList />} />
+      <Route path="/new" element={<ComplaintCreate />} />
+      <Route path="*" element={<Navigate to="/complaint" replace />} />
+    </Routes>
+  );
+}
diff --git a/src/Modules/ComplaintManagement/selectors.js b/src/Modules/ComplaintManagement/selectors.js
new file mode 100644
index 000000000..5e76bc33e
--- /dev/null
+++ b/src/Modules/ComplaintManagement/selectors.js
@@ -0,0 +1,11 @@
+import complaintApi from "./api";
+
+export const fetchComplaints = async () => {
+  const response = await complaintApi.get("/studentcomplain");
+  return response.data?.student_complain || [];
+};
+
+export const fetchComplaintDetail = async (id) => {
+  const response = await complaintApi.get(`/user/detail/${id}/`);
+  return response.data;
+};
diff --git a/src/Modules/ComplaintManagement/services.js b/src/Modules/ComplaintManagement/services.js
new file mode 100644
index 000000000..34bebfcd0
--- /dev/null
+++ b/src/Modules/ComplaintManagement/services.js
@@ -0,0 +1,178 @@
+import complaintApi from "./api";
+
+export const fetchWorkers = async () => {
+  const response = await complaintApi.get("/workers");
+  return response.data?.workers || [];
+};
+
+export const createWorker = async (payload) => {
+  const response = await complaintApi.post("/addworker", payload);
+  return response.data;
+};
+
+export const updateWorker = async (id, payload) => {
+  const response = await complaintApi.put(`/updateworker/${id}`, payload);
+  return response.data;
+};
+
+export const deleteWorker = async (id) => {
+  const response = await complaintApi.delete(`/removeworker/${id}`);
+  return response.data;
+};
+
+export const fetchCaretakers = async () => {
+  const response = await complaintApi.get("/caretakers");
+  return response.data?.caretakers || [];
+};
+
+export const createCaretaker = async (payload) => {
+  const response = await complaintApi.post("/addcaretaker", payload);
+  return response.data;
+};
+
+export const updateCaretaker = async (id, payload) => {
+  const response = await complaintApi.put(`/updatecaretaker/${id}`, payload);
+  return response.data;
+};
+
+export const deleteCaretaker = async (id) => {
+  const response = await complaintApi.delete(`/removecaretaker/${id}`);
+  return response.data;
+};
+
+export const fetchSupervisors = async () => {
+  const response = await complaintApi.get("/supervisors");
+  return response.data?.supervisors || [];
+};
+
+export const createSupervisor = async (payload) => {
+  const response = await complaintApi.post("/addsupervisor", payload);
+  return response.data;
+};
+
+export const updateSupervisor = async (id, payload) => {
+  const response = await complaintApi.put(`/updatesupervisor/${id}`, payload);
+  return response.data;
+};
+
+export const deleteSupervisor = async (id) => {
+  const response = await complaintApi.delete(`/removesupervisor/${id}`);
+  return response.data;
+};
+
+const buildComplaintFormData = (payload) => {
+  const formData = new FormData();
+  const fields = [
+    "complaint_type",
+    "location",
+    "specific_location",
+    "details",
+    "status",
+    "remarks",
+    "reason",
+    "comment",
+    "priority",
+    "verification_source",
+    "reopen_reason",
+    "reopen_requested",
+    "progress_notes",
+    "estimated_resolution_time",
+    "is_draft",
+  ];
+
+  fields.forEach((field) => {
+    if (payload[field] !== undefined && payload[field] !== null) {
+      formData.append(field, payload[field]);
+    }
+  });
+
+  if (payload.assigned_to !== undefined && payload.assigned_to !== null) {
+    formData.append("assigned_to", payload.assigned_to);
+  }
+
+  if (payload.upload_complaint instanceof File) {
+    formData.append("upload_complaint", payload.upload_complaint);
+  }
+
+  if (payload.progress_attachment instanceof File) {
+    formData.append("progress_attachment", payload.progress_attachment);
+  }
+
+  return formData;
+};
+
+export const createComplaint = async (payload) => {
+  const response = await complaintApi.post(
+    "/newcomplain",
+    buildComplaintFormData(payload),
+  );
+  return response.data;
+};
+
+export const submitDraftComplaint = async (id, payload = {}) => {
+  const response = await complaintApi.post(
+    `/submitdraft/${id}`,
+    buildComplaintFormData(payload),
+  );
+  return response.data;
+};
+
+export const updateComplaint = async (id, payload) => {
+  const response = await complaintApi.put(
+    `/updatecomplain/${id}`,
+    buildComplaintFormData(payload),
+  );
+  return response.data;
+};
+
+export const deleteComplaint = async (id) => {
+  const response = await complaintApi.delete(`/removecomplain/${id}`);
+  return response.data;
+};
+
+export const escalateComplaint = async (id, reason) => {
+  const response = await complaintApi.post(`/escalate/${id}`, {
+    escalation_reason: reason,
+  });
+  return response.data;
+};
+
+export const verifyComplaint = async (id, payload) => {
+  const response = await complaintApi.post(`/verify/${id}`, payload);
+  return response.data;
+};
+
+export const submitComplaintFeedback = async (id, payload) => {
+  const response = await complaintApi.post(`/feedback/${id}`, payload);
+  return response.data;
+};
+
+export const reopenComplaint = async (id, payload) => {
+  const response = await complaintApi.post(`/reopen/${id}`, payload);
+  return response.data;
+};
+
+export const caretakerAction = async (id, payload) => {
+  const response = await complaintApi.post(
+    `/caretaker-action/${id}`,
+    buildComplaintFormData(payload),
+  );
+  return response.data;
+};
+
+export const bulkComplaintAction = async (payload) => {
+  const response = await complaintApi.post("/bulk-action", payload);
+  return response.data;
+};
+
+export const fetchComplaintAnalyticsReport = async (filters = {}) => {
+  const response = await complaintApi.get("/report-analytics", {
+    params: {
+      date_from: filters.date_from || "",
+      date_to: filters.date_to || "",
+      category: filters.category || "",
+      location: filters.location || "",
+    },
+  });
+  return response.data;
+};
diff --git a/src/Modules/NotificationCenter/NotificationCenter.jsx b/src/Modules/NotificationCenter/NotificationCenter.jsx
new file mode 100644
index 000000000..fdb6475bf
--- /dev/null
+++ b/src/Modules/NotificationCenter/NotificationCenter.jsx
@@ -0,0 +1,610 @@
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Container,
+  Divider,
+  Flex,
+  Group,
+  Loader,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Tabs,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import {
+  Bell,
+  BellSlash,
+  ArrowClockwise,
+  MagnifyingGlass,
+  ArrowSquareOut,
+  CheckCircle,
+  Trash,
+} from "@phosphor-icons/react";
+import { notifications } from "@mantine/notifications";
+import CustomBreadcrumbs from "../../components/Breadcrumbs";
+import classes from "./notificationCenter.module.css";
+import {
+  deleteNotification,
+  fetchNotifications,
+  markNotificationRead,
+  markNotificationUnread,
+  markVisibleNotificationsRead,
+} from "./services";
+import {
+  formatNotificationTimestamp,
+  getNotificationCategory,
+  getRoleFeedLabel,
+  resolveNotificationRoute,
+} from "./utils";
+
+const FILTERS = [
+  { value: "all", label: "All" },
+  { value: "unread", label: "Unread" },
+  { value: "complaints", label: "Complaints" },
+  { value: "role", label: "Role Feed" },
+  { value: "announcements", label: "Announcements" },
+];
+
+const getRoleSummary = (role = "") => {
+  const normalizedRole = String(role).toLowerCase();
+  if (normalizedRole.includes("caretaker"))
+    return "Operations and complaint progress notifications";
+  if (
+    normalizedRole.includes("supervisor") ||
+    normalizedRole.includes("convener") ||
+    normalizedRole.includes("admin")
+  ) {
+    return "Escalations, verification decisions, and workflow updates";
+  }
+  if (normalizedRole.includes("faculty"))
+    return "Academic, complaint, and review updates";
+  if (normalizedRole.includes("staff"))
+    return "Administrative and complaint updates";
+  if (normalizedRole.includes("student"))
+    return "Your personal, academic, and complaint alerts";
+  return "All notifications available to your selected role";
+};
+
+const getCategoryCounts = (items, role) => {
+  const counts = {
+    all: items.length,
+    unread: items.filter((item) => item.unread && !item.deleted).length,
+    complaints: items.filter(
+      (item) => getNotificationCategory(item, role) === "complaints",
+    ).length,
+    role: items.filter((item) => getNotificationCategory(item, role) === "role")
+      .length,
+    announcements: items.filter(
+      (item) => getNotificationCategory(item, role) === "announcements",
+    ).length,
+  };
+
+  return counts;
+};
+
+const getSummaryStats = (items) => ({
+  total: items.length,
+  unread: items.filter((item) => item.unread && !item.deleted).length,
+  read: items.filter((item) => !item.unread && !item.deleted).length,
+  complaints: items.filter((item) => item.data?.module === "Complaint System")
+    .length,
+});
+
+function NotificationCard({ notification, onOpen, onToggleRead, onDelete }) {
+  const route = resolveNotificationRoute(notification);
+  const isUnread = Boolean(notification.unread);
+  const category =
+    String(notification.data?.flag).toLowerCase() === "announcement"
+      ? "Announcement"
+      : notification.data?.module || "System";
+
+  return (
+    <Card
+      withBorder
+      shadow="sm"
+      p="lg"
+      className={`${classes.notificationCard} ${isUnread ? classes.unreadCard : classes.readCard}`}
+    >
+      <Stack gap="sm">
+        <Group justify="space-between" align="flex-start" wrap="nowrap">
+          <Stack gap={4} style={{ flex: 1 }}>
+            <Group gap="xs" wrap="wrap">
+              <Badge color={isUnread ? "blue" : "gray"} variant="light">
+                {isUnread ? "Unread" : "Read"}
+              </Badge>
+              <Badge
+                color={category === "Announcement" ? "orange" : "teal"}
+                variant="light"
+              >
+                {category}
+              </Badge>
+            </Group>
+            <Text fw={700} size="lg" c="dark">
+              {notification.verb || notification.description || "Notification"}
+            </Text>
+            <Text size="sm" c="dimmed">
+              {notification.description ||
+                "No additional details were provided for this notification."}
+            </Text>
+          </Stack>
+
+          <Button
+            variant="subtle"
+            color="gray"
+            leftSection={<Trash size={16} />}
+            onClick={() => onDelete(notification.id)}
+          >
+            Delete
+          </Button>
+        </Group>
+
+        <Divider />
+
+        <Flex justify="space-between" align="center" wrap="wrap" gap="sm">
+          <Stack gap={2}>
+            <Text size="xs" c="dimmed" tt="uppercase" fw={700}>
+              Source module
+            </Text>
+            <Text size="sm" fw={600}>
+              {notification.data?.module || "General"}
+            </Text>
+          </Stack>
+          <Stack gap={2} align="flex-end">
+            <Text size="xs" c="dimmed" tt="uppercase" fw={700}>
+              Received
+            </Text>
+            <Text size="sm" fw={600}>
+              {formatNotificationTimestamp(notification.timestamp)}
+            </Text>
+          </Stack>
+        </Flex>
+
+        <Group justify="space-between" align="center" wrap="wrap">
+          <Group gap="xs" wrap="wrap">
+            {notification.data?.url && (
+              <Badge variant="outline" color="blue">
+                Route: {notification.data.url}
+              </Badge>
+            )}
+            {notification.data?.flag === "announcement" && (
+              <Badge variant="outline" color="orange">
+                Announcement
+              </Badge>
+            )}
+          </Group>
+
+          <Group gap="xs" wrap="wrap">
+            {route && (
+              <Button
+                variant="light"
+                color="blue"
+                leftSection={<ArrowSquareOut size={16} />}
+                onClick={() => onOpen(notification, route)}
+              >
+                Open
+              </Button>
+            )}
+            <Button
+              variant="light"
+              color={isUnread ? "blue" : "gray"}
+              leftSection={
+                isUnread ? <CheckCircle size={16} /> : <BellSlash size={16} />
+              }
+              onClick={() => onToggleRead(notification)}
+            >
+              {isUnread ? "Mark as read" : "Mark unread"}
+            </Button>
+          </Group>
+        </Group>
+      </Stack>
+    </Card>
+  );
+}
+
+NotificationCard.propTypes = {
+  notification: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    unread: PropTypes.bool,
+    deleted: PropTypes.bool,
+    verb: PropTypes.string,
+    description: PropTypes.string,
+    timestamp: PropTypes.string,
+    data: PropTypes.shape({
+      module: PropTypes.string,
+      flag: PropTypes.string,
+      url: PropTypes.string,
+    }),
+  }).isRequired,
+  onOpen: PropTypes.func.isRequired,
+  onToggleRead: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+};
+
+export default function NotificationCenter() {
+  const role = useSelector((state) => state.user.role || "");
+  const navigate = useNavigate();
+  const [notificationsList, setNotificationsList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [activeFilter, setActiveFilter] = useState("all");
+  const [search, setSearch] = useState("");
+
+  const roleFeedLabel = getRoleFeedLabel(role);
+  const roleSummary = getRoleSummary(role);
+
+  const loadNotifications = async () => {
+    setLoading(true);
+    try {
+      const items = await fetchNotifications();
+      setNotificationsList(items.filter((item) => !item.deleted));
+    } catch (error) {
+      notifications.show({
+        title: "Failed to load notifications",
+        message:
+          error?.response?.data?.message ||
+          error?.message ||
+          "Unable to fetch notifications.",
+        color: "red",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadNotifications();
+    const intervalId = setInterval(() => {
+      loadNotifications();
+    }, 45000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  const summary = useMemo(
+    () => getSummaryStats(notificationsList),
+    [notificationsList],
+  );
+  const categoryCounts = useMemo(
+    () => getCategoryCounts(notificationsList, role),
+    [notificationsList, role],
+  );
+
+  const filters = useMemo(
+    () =>
+      FILTERS.map((filter) => ({
+        ...filter,
+        label: filter.value === "role" ? roleFeedLabel : filter.label,
+      })),
+    [roleFeedLabel],
+  );
+
+  const visibleNotifications = useMemo(() => {
+    const searchTerm = search.trim().toLowerCase();
+
+    const filtered = notificationsList.filter((notification) => {
+      const category = getNotificationCategory(notification, role);
+      const moduleName = String(notification.data?.module || "").toLowerCase();
+      const verb = String(notification.verb || "").toLowerCase();
+      const description = String(notification.description || "").toLowerCase();
+
+      const matchesSearch =
+        !searchTerm ||
+        verb.includes(searchTerm) ||
+        description.includes(searchTerm) ||
+        moduleName.includes(searchTerm);
+
+      if (!matchesSearch) {
+        return false;
+      }
+
+      switch (activeFilter) {
+        case "unread":
+          return notification.unread;
+        case "complaints":
+          return category === "complaints";
+        case "role":
+          return category === "role";
+        case "announcements":
+          return category === "announcements";
+        default:
+          return true;
+      }
+    });
+
+    return [...filtered].sort((a, b) => {
+      if (a.unread !== b.unread) {
+        return a.unread ? -1 : 1;
+      }
+
+      return new Date(b.timestamp || 0) - new Date(a.timestamp || 0);
+    });
+  }, [activeFilter, notificationsList, role, search]);
+
+  const handleToggleRead = async (notification) => {
+    try {
+      if (notification.unread) {
+        await markNotificationRead(notification.id);
+      } else {
+        await markNotificationUnread(notification.id);
+      }
+
+      setNotificationsList((prev) =>
+        prev.map((item) =>
+          item.id === notification.id
+            ? { ...item, unread: !item.unread }
+            : item,
+        ),
+      );
+    } catch (error) {
+      notifications.show({
+        title: "Notification update failed",
+        message:
+          error?.response?.data?.message ||
+          error?.message ||
+          "Could not update the notification.",
+        color: "red",
+      });
+    }
+  };
+
+  const handleDelete = async (notificationId) => {
+    try {
+      await deleteNotification(notificationId);
+      setNotificationsList((prev) =>
+        prev.filter((item) => item.id !== notificationId),
+      );
+    } catch (error) {
+      notifications.show({
+        title: "Delete failed",
+        message:
+          error?.response?.data?.message ||
+          error?.message ||
+          "Could not delete the notification.",
+        color: "red",
+      });
+    }
+  };
+
+  const handleOpen = async (notification, route) => {
+    try {
+      if (notification.unread) {
+        await markNotificationRead(notification.id);
+        setNotificationsList((prev) =>
+          prev.map((item) =>
+            item.id === notification.id ? { ...item, unread: false } : item,
+          ),
+        );
+      }
+
+      navigate(route);
+    } catch (error) {
+      notifications.show({
+        title: "Could not open notification",
+        message:
+          error?.response?.data?.message ||
+          error?.message ||
+          "Unable to navigate to the related page.",
+        color: "red",
+      });
+    }
+  };
+
+  const handleMarkAllVisible = async () => {
+    const targetNotifications = visibleNotifications.filter(
+      (item) => item.unread,
+    );
+    if (targetNotifications.length === 0) {
+      return;
+    }
+
+    try {
+      await markVisibleNotificationsRead(targetNotifications);
+      const unreadIds = new Set(targetNotifications.map((item) => item.id));
+      setNotificationsList((prev) =>
+        prev.map((item) =>
+          unreadIds.has(item.id) ? { ...item, unread: false } : item,
+        ),
+      );
+    } catch (error) {
+      notifications.show({
+        title: "Bulk read failed",
+        message:
+          error?.response?.data?.message ||
+          error?.message ||
+          "Could not mark notifications as read.",
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <>
+      <CustomBreadcrumbs />
+      <Container fluid px="lg" py="md" className={classes.page}>
+        <Paper p="xl" className={classes.hero} mb="lg" withBorder={false}>
+          <Stack gap="lg" className={classes.heroContent}>
+            <Group justify="space-between" align="flex-start" wrap="wrap">
+              <div>
+                <Group gap="sm" mb="xs">
+                  <Bell size={24} weight="fill" />
+                  <Badge color="cyan" variant="filled">
+                    Notification Centre
+                  </Badge>
+                </Group>
+                <Title order={1} className={classes.heroTitle}>
+                  Your notification stream, organized by role.
+                </Title>
+                <Text size="lg" className={classes.heroSubtext} mt="sm">
+                  {roleSummary}
+                </Text>
+              </div>
+
+              <Stack gap="xs" align="flex-end">
+                <Badge color="blue" variant="light" size="lg">
+                  {String(role || "unknown role").toUpperCase()}
+                </Badge>
+                <Text size="sm" c="gray.2">
+                  Auto-refreshes every 45 seconds
+                </Text>
+              </Stack>
+            </Group>
+
+            <SimpleGrid cols={{ base: 1, xs: 2, md: 4 }} spacing="md">
+              <Card className={classes.summaryCard} withBorder>
+                <Stack gap={6}>
+                  <Text size="sm" c="dimmed" fw={700} tt="uppercase">
+                    Total
+                  </Text>
+                  <Text size="2rem" fw={800}>
+                    {summary.total}
+                  </Text>
+                </Stack>
+              </Card>
+              <Card className={classes.summaryCard} withBorder>
+                <Stack gap={6}>
+                  <Text size="sm" c="dimmed" fw={700} tt="uppercase">
+                    Unread
+                  </Text>
+                  <Text size="2rem" fw={800} c="blue">
+                    {summary.unread}
+                  </Text>
+                </Stack>
+              </Card>
+              <Card className={classes.summaryCard} withBorder>
+                <Stack gap={6}>
+                  <Text size="sm" c="dimmed" fw={700} tt="uppercase">
+                    Complaint alerts
+                  </Text>
+                  <Text size="2rem" fw={800} c="teal">
+                    {summary.complaints}
+                  </Text>
+                </Stack>
+              </Card>
+              <Card className={classes.summaryCard} withBorder>
+                <Stack gap={6}>
+                  <Text size="sm" c="dimmed" fw={700} tt="uppercase">
+                    Read
+                  </Text>
+                  <Text size="2rem" fw={800} c="gray">
+                    {summary.read}
+                  </Text>
+                </Stack>
+              </Card>
+            </SimpleGrid>
+          </Stack>
+        </Paper>
+
+        <Paper p="md" className={classes.toolbar} withBorder mb="lg">
+          <Stack gap="md">
+            <Group justify="space-between" align="flex-end" wrap="wrap">
+              <TextInput
+                leftSection={<MagnifyingGlass size={16} />}
+                placeholder="Search by title, module, or description"
+                value={search}
+                onChange={(event) => setSearch(event.currentTarget.value)}
+                w={{ base: "100%", sm: 420 }}
+              />
+
+              <Group gap="sm" wrap="wrap">
+                <Button
+                  variant="default"
+                  leftSection={<ArrowClockwise size={16} />}
+                  onClick={loadNotifications}
+                  loading={loading}
+                >
+                  Refresh
+                </Button>
+                <Button
+                  leftSection={<CheckCircle size={16} />}
+                  onClick={handleMarkAllVisible}
+                  disabled={visibleNotifications.every((item) => !item.unread)}
+                >
+                  Mark visible read
+                </Button>
+              </Group>
+            </Group>
+
+            <Tabs value={activeFilter} onChange={setActiveFilter}>
+              <Tabs.List className={classes.filterTabList}>
+                {filters.map((filter) => {
+                  const count = categoryCounts[filter.value] || 0;
+                  return (
+                    <Tabs.Tab
+                      key={filter.value}
+                      value={filter.value}
+                      className={`${classes.filterTab} ${activeFilter === filter.value ? classes.filterTabActive : ""}`}
+                    >
+                      <Group gap="xs">
+                        <Text fw={600}>{filter.label}</Text>
+                        <Badge size="sm" variant="light">
+                          {count}
+                        </Badge>
+                      </Group>
+                    </Tabs.Tab>
+                  );
+                })}
+              </Tabs.List>
+            </Tabs>
+          </Stack>
+        </Paper>
+
+        {loading && notificationsList.length === 0 ? (
+          <Paper p="xl" className={classes.emptyShell} withBorder>
+            <Stack align="center" py="xl" gap="md">
+              <Loader size="lg" />
+              <Text fw={700} size="lg">
+                Loading notifications
+              </Text>
+            </Stack>
+          </Paper>
+        ) : visibleNotifications.length === 0 ? (
+          <Paper p="xl" className={classes.emptyShell} withBorder>
+            <Stack align="center" py="xl" gap="md">
+              <BellSlash size={42} color="#64748b" />
+              <Text fw={700} size="lg">
+                No notifications match this view
+              </Text>
+              <Text c="dimmed" ta="center" maw={520}>
+                Try a different filter, clear the search box, or refresh the
+                inbox.
+              </Text>
+            </Stack>
+          </Paper>
+        ) : (
+          <Stack gap="md">
+            <Alert color="blue" variant="light" radius="lg">
+              <Group justify="space-between" wrap="wrap">
+                <Text fw={600}>
+                  {roleFeedLabel} highlights notifications most relevant to your
+                  current role.
+                </Text>
+                <Text size="sm" c="dimmed">
+                  Use Open to jump to supported modules or mark items read
+                  directly here.
+                </Text>
+              </Group>
+            </Alert>
+
+            {visibleNotifications.map((notification) => (
+              <NotificationCard
+                key={notification.id}
+                notification={notification}
+                onOpen={handleOpen}
+                onToggleRead={handleToggleRead}
+                onDelete={handleDelete}
+              />
+            ))}
+          </Stack>
+        )}
+      </Container>
+    </>
+  );
+}
diff --git a/src/Modules/NotificationCenter/notificationCenter.module.css b/src/Modules/NotificationCenter/notificationCenter.module.css
new file mode 100644
index 000000000..402d7758b
--- /dev/null
+++ b/src/Modules/NotificationCenter/notificationCenter.module.css
@@ -0,0 +1,113 @@
+.page {
+  position: relative;
+  overflow: hidden;
+}
+
+.hero {
+  position: relative;
+  border-radius: 24px;
+  background: linear-gradient(135deg, #0f172a 0%, #173b63 45%, #0f766e 100%);
+  color: #f8fafc;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
+  overflow: hidden;
+}
+
+.hero::before,
+.hero::after {
+  content: "";
+  position: absolute;
+  border-radius: 999px;
+  filter: blur(20px);
+  opacity: 0.5;
+}
+
+.hero::before {
+  width: 220px;
+  height: 220px;
+  top: -80px;
+  right: -40px;
+  background: rgba(56, 189, 248, 0.35);
+}
+
+.hero::after {
+  width: 180px;
+  height: 180px;
+  left: -60px;
+  bottom: -70px;
+  background: rgba(45, 212, 191, 0.28);
+}
+
+.heroContent {
+  position: relative;
+  z-index: 1;
+}
+
+.heroTitle {
+  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+}
+
+.heroSubtext {
+  max-width: 56rem;
+  color: rgba(226, 232, 240, 0.84);
+}
+
+.summaryCard {
+  min-height: 122px;
+  border-radius: 20px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%);
+  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
+}
+
+.toolbar {
+  border-radius: 22px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(12px);
+}
+
+.filterTabList {
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.filterTab {
+  border-radius: 999px;
+  min-width: fit-content;
+}
+
+.filterTabActive {
+  background: #15abff14;
+  color: #0c6fc1;
+  font-weight: 700;
+}
+
+.notificationCard {
+  border-radius: 22px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.notificationCard:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
+}
+
+.unreadCard {
+  background: linear-gradient(180deg, rgba(21, 171, 255, 0.08), rgba(255, 255, 255, 0.98));
+  border-left: 5px solid #15abff;
+}
+
+.readCard {
+  background: rgba(255, 255, 255, 0.96);
+  border-left: 5px solid rgba(148, 163, 184, 0.35);
+}
+
+.emptyShell {
+  border-radius: 24px;
+  border: 1px dashed rgba(148, 163, 184, 0.28);
+  background: rgba(255, 255, 255, 0.92);
+}
diff --git a/src/Modules/NotificationCenter/services.js b/src/Modules/NotificationCenter/services.js
new file mode 100644
index 000000000..d26084984
--- /dev/null
+++ b/src/Modules/NotificationCenter/services.js
@@ -0,0 +1,59 @@
+import axios from "axios";
+import {
+  getNotificationsRoute,
+  notificationDeleteRoute,
+  notificationReadRoute,
+  notificationUnreadRoute,
+} from "../../routes/dashboardRoutes";
+import { normalizeNotification } from "./utils";
+
+const authHeaders = () => {
+  const token = localStorage.getItem("authToken");
+  return {
+    headers: {
+      Authorization: `Token ${token}`,
+    },
+  };
+};
+
+export const fetchNotifications = async () => {
+  const { data } = await axios.get(getNotificationsRoute, authHeaders());
+  const notifications = data?.notifications || [];
+  return notifications.map(normalizeNotification);
+};
+
+export const markNotificationRead = async (notificationId) => {
+  const response = await axios.post(
+    notificationReadRoute,
+    { id: notificationId },
+    authHeaders(),
+  );
+  return response.data;
+};
+
+export const markNotificationUnread = async (notificationId) => {
+  const response = await axios.post(
+    notificationUnreadRoute,
+    { id: notificationId },
+    authHeaders(),
+  );
+  return response.data;
+};
+
+export const deleteNotification = async (notificationId) => {
+  const response = await axios.post(
+    notificationDeleteRoute,
+    { id: notificationId },
+    authHeaders(),
+  );
+  return response.data;
+};
+
+export const markVisibleNotificationsRead = async (notifications) => {
+  const unreadIds = notifications
+    .filter((notification) => notification.unread && !notification.deleted)
+    .map((notification) => notification.id);
+
+  await Promise.all(unreadIds.map((id) => markNotificationRead(id)));
+  return unreadIds.length;
+};
diff --git a/src/Modules/NotificationCenter/utils.js b/src/Modules/NotificationCenter/utils.js
new file mode 100644
index 000000000..1b21c41fb
--- /dev/null
+++ b/src/Modules/NotificationCenter/utils.js
@@ -0,0 +1,133 @@
+const ROLE_FOCUS_MODULES = {
+  student: [
+    "Complaint System",
+    "Academic's Module",
+    "Examination",
+    "Scholarship Portal",
+    "Leave Module",
+  ],
+  faculty: [
+    "Complaint System",
+    "Academic's Module",
+    "Examination",
+    "Office Module",
+    "Research Procedures",
+  ],
+  staff: [
+    "Complaint System",
+    "File Tracking",
+    "Office Module",
+    "Leave Module",
+    "Department Portal",
+  ],
+  caretaker: ["Complaint System", "File Tracking", "Office Module"],
+  supervisor: ["Complaint System", "Office Module", "Department Portal"],
+  convener: [
+    "Complaint System",
+    "Academic's Module",
+    "Examination",
+    "Office Module",
+  ],
+  admin: [
+    "Complaint System",
+    "Office Module",
+    "File Tracking",
+    "Leave Module",
+    "Department Portal",
+  ],
+};
+
+const MODULE_ROUTE_MAP = {
+  "Complaint System": "/complaint",
+  "Academic's Module": "/academics",
+  "Academics Module": "/academics",
+  Examination: "/examination",
+  Profile: "/profile",
+  Dashboard: "/dashboard",
+  Home: "/dashboard",
+  "Notification Centre": "/notifications",
+};
+
+export const parseNotificationData = (rawData) => {
+  if (!rawData) {
+    return {};
+  }
+
+  if (typeof rawData === "object") {
+    return rawData;
+  }
+
+  if (typeof rawData !== "string") {
+    return { raw: String(rawData) };
+  }
+
+  try {
+    return JSON.parse(rawData);
+  } catch (error) {
+    try {
+      return JSON.parse(rawData.replace(/'/g, '"'));
+    } catch (parseError) {
+      return { raw: rawData };
+    }
+  }
+};
+
+export const normalizeNotification = (item) => ({
+  ...item,
+  data: parseNotificationData(item?.data),
+});
+
+export const getRoleFeedLabel = (role = "") => {
+  const normalizedRole = String(role).toLowerCase();
+  if (normalizedRole.includes("caretaker")) return "Operations Feed";
+  if (
+    normalizedRole.includes("supervisor") ||
+    normalizedRole.includes("convener") ||
+    normalizedRole.includes("admin")
+  )
+    return "Review Feed";
+  if (normalizedRole.includes("faculty")) return "Faculty Feed";
+  if (normalizedRole.includes("staff")) return "Staff Feed";
+  if (normalizedRole.includes("student")) return "Student Feed";
+  return "Role Feed";
+};
+
+export const getRoleFocusModules = (role = "") => {
+  const normalizedRole = String(role).toLowerCase();
+  const roleKey = Object.keys(ROLE_FOCUS_MODULES).find((key) =>
+    normalizedRole.includes(key),
+  );
+  return roleKey ? ROLE_FOCUS_MODULES[roleKey] : [];
+};
+
+export const getNotificationCategory = (notification, role = "") => {
+  const moduleName =
+    notification?.data?.module || notification?.data?.flag || "";
+  if (String(notification?.data?.flag).toLowerCase() === "announcement") {
+    return "announcements";
+  }
+
+  if (moduleName === "Complaint System") {
+    return "complaints";
+  }
+
+  const roleModules = getRoleFocusModules(role);
+  if (roleModules.includes(moduleName)) {
+    return "role";
+  }
+
+  return "all";
+};
+
+export const resolveNotificationRoute = (notification) => {
+  const moduleName = notification?.data?.module || "";
+  return MODULE_ROUTE_MAP[moduleName] || null;
+};
+
+export const formatNotificationTimestamp = (timestamp) => {
+  if (!timestamp) {
+    return "Unknown time";
+  }
+
+  return new Date(timestamp).toLocaleString();
+};
diff --git a/src/Modules/facultyProfessionalProfile/facultyProfessionalProfile.jsx b/src/Modules/facultyProfessionalProfile/facultyProfessionalProfile.jsx
index d9a53ea8b..afa890646 100644
--- a/src/Modules/facultyProfessionalProfile/facultyProfessionalProfile.jsx
+++ b/src/Modules/facultyProfessionalProfile/facultyProfessionalProfile.jsx
@@ -1,15 +1,38 @@
-// import { Text } from "@mantine/core";
-// import ProfileButtons from "./components/ProfileButtons";
+import { useSelector } from "react-redux";
+import { Container, Title, Text, Button, Center } from "@mantine/core";
+import { useNavigate } from "react-router-dom";
 import App from "./App";
 
 function FacultyProfessionalProfile() {
-  return (
-    <>
-      {/* <CustomBreadcrumbs /> */}
-      {/* <Text>facultyProfessionalProfile Page</Text> */}
-      <App />
-    </>
-  );
+  const role = useSelector((state) => state.user.role || "");
+  const normalizedRole = String(role).toLowerCase();
+  const navigate = useNavigate();
+
+  if (normalizedRole === "student") {
+    return (
+      <Container style={{ marginTop: "100px", textAlign: "center" }}>
+        <Title order={1} style={{ color: "#e03131", marginBottom: "20px" }}>
+          403 - Unauthorized Access
+        </Title>
+        <Text size="lg" style={{ marginBottom: "30px" }}>
+          You do not have permission to access the Faculty Professional Profile
+          module. This area is strictly restricted to faculty members and
+          authorized personnel.
+        </Text>
+        <Center>
+          <Button
+            onClick={() => navigate("/dashboard")}
+            variant="outline"
+            color="blue"
+          >
+            Return to Dashboard
+          </Button>
+        </Center>
+      </Container>
+    );
+  }
+
+  return <App />;
 }
 
 export default FacultyProfessionalProfile;
diff --git a/src/components/header.jsx b/src/components/header.jsx
index b2ed336ce..3a5b8d77d 100644
--- a/src/components/header.jsx
+++ b/src/components/header.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { User, SignOut, Bell, UserSwitch } from "@phosphor-icons/react";
 import { useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
@@ -24,10 +24,17 @@ import classes from "../Modules/Dashboard/Dashboard.module.css";
 import avatarImage from "../assets/avatar.png";
 import { setPfNo } from "../redux/pfNoSlice";
 
-import { logoutRoute, updateRoleRoute } from "../routes/dashboardRoutes";
+import {
+  logoutRoute,
+  updateRoleRoute,
+  getNotificationsRoute,
+} from "../routes/dashboardRoutes";
+import { complaintModuleRoute } from "../routes/globalRoutes";
+import { normalizeNotification } from "../Modules/NotificationCenter/utils";
 
 function Header({ opened, toggleSidebar }) {
   const [popoverOpened, setPopoverOpened] = useState(false);
+  const [unreadNotificationCount, setUnreadNotificationCount] = useState(0);
   const username = useSelector((state) => state.user.username);
   const roles = useSelector((state) => state.user.roles);
   const role = useSelector((state) => state.user.role);
@@ -65,7 +72,7 @@ function Header({ opened, toggleSidebar }) {
       console.log(response.data.message);
       dispatch(setRole(newRole));
       dispatch(setCurrentAccessibleModules());
-      navigate('/dashboard')
+      navigate("/dashboard");
     } catch (error) {
       console.error("Error updating last selected role:", error.response.data);
     }
@@ -98,6 +105,45 @@ function Header({ opened, toggleSidebar }) {
     }
   };
 
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadNotificationCount = async () => {
+      const token = localStorage.getItem("authToken");
+      if (!token) {
+        return;
+      }
+
+      try {
+        const { data } = await axios.get(getNotificationsRoute, {
+          headers: { Authorization: `Token ${token}` },
+        });
+
+        const count = (data?.notifications || [])
+          .map(normalizeNotification)
+          .filter(
+            (notification) => !notification.deleted && notification.unread,
+          ).length;
+
+        if (isMounted) {
+          setUnreadNotificationCount(count);
+        }
+      } catch (error) {
+        if (isMounted) {
+          setUnreadNotificationCount(0);
+        }
+      }
+    };
+
+    loadNotificationCount();
+    const intervalId = setInterval(loadNotificationCount, 60000);
+
+    return () => {
+      isMounted = false;
+      clearInterval(intervalId);
+    };
+  }, [role]);
+
   return (
     <Flex
       bg="#F5F7F8"
@@ -141,8 +187,20 @@ function Header({ opened, toggleSidebar }) {
             onChange={handleRoleChange}
             placeholder="Role"
           />
-          <Indicator>
-            <Bell color="orange" size="32px" cursor="pointer" />
+          <Indicator
+            label={unreadNotificationCount > 0 ? unreadNotificationCount : null}
+            size={16}
+            color="red"
+            disabled={unreadNotificationCount <= 0}
+          >
+            <Bell
+              color="orange"
+              size="32px"
+              cursor="pointer"
+              onClick={() =>
+                navigate(`${complaintModuleRoute}?tab=notifications`)
+              }
+            />
           </Indicator>
           <Popover
             opened={popoverOpened}
diff --git a/src/components/sidebarContent.jsx b/src/components/sidebarContent.jsx
index b77581b39..9343a751c 100644
--- a/src/components/sidebarContent.jsx
+++ b/src/components/sidebarContent.jsx
@@ -102,7 +102,7 @@ function SidebarContent({ isCollapsed, toggleSidebar }) {
       label: "Complaint System",
       id: "complaint_management",
       icon: <ComplaintIcon size={18} />,
-      url: "/",
+      url: "/complaint",
     },
     {
       label: "Placement Cell",
@@ -140,7 +140,7 @@ function SidebarContent({ isCollapsed, toggleSidebar }) {
       icon: <ExamIcon size={18} />,
       url: "/examination",
     },
-        {
+    {
       label: "Database",
       id: "database",
       icon: <DatabaseIcon size={18} />,
@@ -194,7 +194,10 @@ function SidebarContent({ isCollapsed, toggleSidebar }) {
 
   useEffect(() => {
     const filterModules = Modules.filter(
-      (module) => accessibleModules[module.id] || module.id === "home",
+      (module) =>
+        accessibleModules[module.id] ||
+        module.id === "home" ||
+        module.id === "complaint_management",
     );
     setFilteredModules(filterModules);
   }, [accessibleModules]);
diff --git a/src/routes/complaintRoutes/index.jsx b/src/routes/complaintRoutes/index.jsx
new file mode 100644
index 000000000..8ccd40492
--- /dev/null
+++ b/src/routes/complaintRoutes/index.jsx
@@ -0,0 +1,15 @@
+import { host } from "../globalRoutes";
+
+export const COMPLAINT_FRONTEND_BASE = "/complaint";
+export const COMPLAINT_API_BASE = `${host}/complaint/api`;
+
+export const complaintApiRoutes = {
+  list: `${COMPLAINT_API_BASE}/studentcomplain`,
+  create: `${COMPLAINT_API_BASE}/newcomplain`,
+  detail: (id) => `${COMPLAINT_API_BASE}/user/detail/${id}/`,
+  update: (id) => `${COMPLAINT_API_BASE}/updatecomplain/${id}`,
+  remove: (id) => `${COMPLAINT_API_BASE}/removecomplain/${id}`,
+  history: (id) => `${COMPLAINT_API_BASE}/history/${id}/`,
+  verify: (id) => `${COMPLAINT_API_BASE}/verify/${id}/`,
+  reopen: (id) => `${COMPLAINT_API_BASE}/reopen/${id}/`,
+};
diff --git a/src/routes/globalRoutes/index.jsx b/src/routes/globalRoutes/index.jsx
index 2ec9eeb62..331d91700 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 complaintModuleRoute = "/complaint";
+export const complaintApiBase = `${host}/complaint/api`;