app/api/dashboard/audits/mockData.ts

@@ -1,88 +0,0 @@
-import { GridColDef } from "@mui/x-data-grid";
-
-export const AuditColumns: GridColDef[] = [
-  { field: "actionType", headerName: "Action Type", width: 130 },
-  {
-    field: "timeStampOfTheAction",
-    headerName: "Timestamp of the action",
-    width: 130,
-  },
-  { field: "adminUsername", headerName: "Admin username", width: 130 },
-  { field: "adminId", headerName: "Admin ID", width: 130 },
-  { field: "affectedUserId", headerName: "Affected user ID", width: 130 },
-  { field: "adminIPAddress", headerName: "Admin IP address", width: 130 },
-  { field: "reasonNote", headerName: "Reason/Note", width: 130 },
-];
-
-export const AuditData = [
-  {
-    id: "1",
-    actionType: "Create",
-    timeStampOfTheAction: "2023-03-01T12:00:00",
-    adminUsername: "admin1",
-    adminId: "12345",
-    affectedUserId: "67890",
-    adminIPAddress: "192.168.1.1",
-    reasonNote: "New user created",
-  },
-  {
-    id: "2",
-    actionType: "Update",
-    timeStampOfTheAction: "2023-03-02T12:00:00",
-    adminUsername: "admin2",
-    adminId: "54321",
-    affectedUserId: "09876",
-    adminIPAddress: "192.168.2.2",
-    reasonNote: "User details updated",
-  },
-  {
-    id: "3",
-    actionType: "Delete",
-    timeStampOfTheAction: "2023-03-03T12:00:00",
-    adminUsername: "admin3",
-    adminId: "98765",
-    affectedUserId: "45678",
-    adminIPAddress: "192.168.3.3",
-    reasonNote: "User deleted",
-  },
-  {
-    id: "4",
-    actionType: "Create",
-    timeStampOfTheAction: "2023-03-04T12:00:00",
-    adminUsername: "admin4",
-    adminId: "98765",
-    affectedUserId: "45678",
-    adminIPAddress: "192.168.3.3",
-    reasonNote: "New user created",
-  },
-  {
-    id: "5",
-    actionType: "Update",
-    timeStampOfTheAction: "2023-03-05T12:00:00",
-    adminUsername: "admin2",
-    adminId: "98765",
-    affectedUserId: "45678",
-    adminIPAddress: "192.168.3.3",
-    reasonNote: "User details updated",
-  },
-];
-
-export const AuditSearchLabels = [
-  { label: "Action Type", field: "actionType", type: "text" },
-  { label: "Date / Time", field: "dateTime", type: "date" },
-  {
-    label: "affectedUserId",
-    field: "Affected user ID",
-    type: "text",
-  },
-  {
-    label: "Admin ID",
-    field: "adminId",
-    type: "text",
-  },
-  {
-    label: "Admin username",
-    field: "adminUsername",
-    type: "text",
-  },
-];

app/api/dashboard/audits/route.ts

@@ -1,69 +1,80 @@
 import { NextRequest, NextResponse } from "next/server";
-import { AuditColumns, AuditData, AuditSearchLabels } from "./mockData";
+
+const AUDITS_BASE_URL =
+  process.env.AUDITS_BASE_URL ||
+  process.env.BE_BASE_URL ||
+  "http://localhost:8583";
+const COOKIE_NAME = "auth_token";
+
+const DEFAULT_LIMIT = "25";
+const DEFAULT_PAGE = "1";
 
 export async function GET(request: NextRequest) {
-  const { searchParams } = new URL(request.url);
+  try {
+    const { cookies } = await import("next/headers");
+    const cookieStore = await cookies();
+    const token = cookieStore.get(COOKIE_NAME)?.value;
 
-  const actionType = searchParams.get("actionType");
+    if (!token) {
-  const affectedUserId = searchParams.get("affectedUserId");
-  const adminId = searchParams.get("adminId");
-  const adminUsername = searchParams.get("adminUsername");
-
-  const dateTimeStart = searchParams.get("dateTime_start");
-  const dateTimeEnd = searchParams.get("dateTime_end");
-
-  let filteredRows = [...AuditData];
-
-  if (actionType) {
-    filteredRows = filteredRows.filter(
-      tx => tx.actionType.toLocaleLowerCase() === actionType.toLocaleLowerCase()
-    );
-  }
-
-  if (affectedUserId) {
-    filteredRows = filteredRows.filter(
-      tx => tx.affectedUserId.toLowerCase() === affectedUserId.toLowerCase()
-    );
-  }
-
-  if (adminId) {
-    filteredRows = filteredRows.filter(tx => tx.adminId === adminId);
-  }
-  if (adminUsername) {
-    filteredRows = filteredRows.filter(
-      tx => tx.adminUsername === adminUsername
-    );
-  }
-
-  if (dateTimeStart && dateTimeEnd) {
-    const start = new Date(dateTimeStart);
-    const end = new Date(dateTimeEnd);
-
-    // Validate the date range to ensure it’s correct
-    if (isNaN(start.getTime()) || isNaN(end.getTime())) {
       return NextResponse.json(
-        {
+        { message: "Missing Authorization header" },
-          error: "Invalid date range",
+        { status: 401 }
-        },
-        { status: 400 }
       );
     }
 
-    filteredRows = filteredRows.filter(tx => {
+    const { searchParams } = new URL(request.url);
-      const txDate = new Date(tx.timeStampOfTheAction);
+    const proxiedParams = new URLSearchParams();
 
-      // Validate if the timestamp is a valid date
+    // Forward provided params
-      if (isNaN(txDate.getTime())) {
+    searchParams.forEach((value, key) => {
-        return false; // Skip invalid dates
+      if (value == null || value === "") return;
-      }
+      proxiedParams.append(key, value);
-
-      return txDate >= start && txDate <= end;
     });
-  }
 
-  return NextResponse.json({
+    if (!proxiedParams.has("limit")) {
-    tableRows: filteredRows,
+      proxiedParams.set("limit", DEFAULT_LIMIT);
-    tableColumns: AuditColumns,
+    }
-    tableSearchLabels: AuditSearchLabels,
+    if (!proxiedParams.has("page")) {
-  });
+      proxiedParams.set("page", DEFAULT_PAGE);
+    }
+
+    const backendUrl = `${AUDITS_BASE_URL}/api/v1/audit${
+      proxiedParams.size ? `?${proxiedParams.toString()}` : ""
+    }`;
+
+    const response = await fetch(backendUrl, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      cache: "no-store",
+    });
+
+    if (!response.ok) {
+      const errorData = await response
+        .json()
+        .catch(() => ({ message: "Failed to fetch audits" }));
+      return NextResponse.json(
+        {
+          success: false,
+          message: errorData?.message || "Failed to fetch audits",
+        },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    console.log("[AUDITS] data:", data);
+    return NextResponse.json(data, { status: response.status });
+  } catch (err: unknown) {
+    console.log("[AUDITS] error:", err);
+
+    console.error("Proxy GET /api/v1/audits error:", err);
+    const errorMessage = err instanceof Error ? err.message : "Unknown error";
+    return NextResponse.json(
+      { message: "Internal server error", error: errorMessage },
+      { status: 500 }
+    );
+  }
 }

app/api/dashboard/transactions/[id]/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const BE_BASE_URL = process.env.BE_BASE_URL || "http://localhost:5000";
+const COOKIE_NAME = "auth_token";
+
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = await params;
+    const { cookies } = await import("next/headers");
+    const cookieStore = await cookies();
+    const token = cookieStore.get(COOKIE_NAME)?.value;
+
+    if (!token) {
+      return NextResponse.json(
+        { message: "Missing Authorization header" },
+        { status: 401 }
+      );
+    }
+
+    const payload = await request.json();
+
+    const upstream = await fetch(`${BE_BASE_URL}/api/v1/transactions/${id}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify(payload),
+    });
+
+    const data = await upstream.json();
+    console.log("[DEBUG] [TRANSACTIONS] [PUT] Response data:", data);
+    return NextResponse.json(data, { status: upstream.status });
+  } catch (err: unknown) {
+    const errorMessage = err instanceof Error ? err.message : "Unknown error";
+    return NextResponse.json(
+      { message: "Internal server error", error: errorMessage },
+      { status: 500 }
+    );
+  }
+}

app/api/dashboard/transactions/deposits/mockData.ts

@@ -1,264 +0,0 @@
-import { GridColDef } from "@mui/x-data-grid";
-
-export const depositTransactionDummyData = [
-  {
-    id: 1,
-    userId: 17,
-    merchandId: 100987998,
-    transactionId: 1049131973,
-    depositMethod: "Card",
-    status: "Completed",
-    options: [
-      { value: "Pending", label: "Pending" },
-      { value: "Completed", label: "Completed" },
-      { value: "Inprogress", label: "Inprogress" },
-      { value: "Error", label: "Error" },
-    ],
-    amount: 4000,
-    currency: "EUR",
-    dateTime: "2025-06-18 10:10:30",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 2,
-    userId: 17,
-    merchandId: 100987998,
-    transactionId: 1049131973,
-    depositMethod: "Card",
-    status: "Completed",
-    options: [
-      { value: "Pending", label: "Pending" },
-      { value: "Completed", label: "Completed" },
-      { value: "Inprogress", label: "Inprogress" },
-      { value: "Error", label: "Error" },
-    ],
-    amount: 4000,
-    currency: "EUR",
-    dateTime: "2025-06-18 10:10:30",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 3,
-    userId: 17,
-    merchandId: 100987997,
-    transactionId: 1049131973,
-    depositMethod: "Card",
-    status: "Completed",
-    options: [
-      { value: "Pending", label: "Pending" },
-      { value: "Completed", label: "Completed" },
-      { value: "Inprogress", label: "Inprogress" },
-      { value: "Error", label: "Error" },
-    ],
-    amount: 4000,
-    currency: "EUR",
-    dateTime: "2025-06-18 10:10:30",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 4,
-    userId: 19,
-    merchandId: 100987997,
-    transactionId: 1049136973,
-    depositMethod: "Card",
-    status: "Completed",
-    options: [
-      { value: "Pending", label: "Pending" },
-      { value: "Completed", label: "Completed" },
-      { value: "Inprogress", label: "Inprogress" },
-      { value: "Error", label: "Error" },
-    ],
-    amount: 4000,
-    currency: "EUR",
-    dateTime: "2025-06-18 10:10:30",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 5,
-    userId: 19,
-    merchandId: 100987998,
-    transactionId: 1049131973,
-    depositMethod: "Card",
-    status: "Completed",
-    options: [
-      { value: "Pending", label: "Pending" },
-      { value: "Completed", label: "Completed" },
-      { value: "Inprogress", label: "Inprogress" },
-      { value: "Error", label: "Error" },
-    ],
-    amount: 4000,
-    currency: "EUR",
-    dateTime: "2025-06-18 10:10:30",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 6,
-    userId: 27,
-    merchandId: 100987997,
-    transactionId: 1049131973,
-    depositMethod: "Card",
-    status: "Pending",
-    options: [
-      { value: "Pending", label: "Pending" },
-      { value: "Completed", label: "Completed" },
-      { value: "Inprogress", label: "Inprogress" },
-      { value: "Error", label: "Error" },
-    ],
-    amount: 4000,
-    currency: "EUR",
-    dateTime: "2025-06-18 10:10:30",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 7,
-    userId: 175,
-    merchandId: 100987938,
-    transactionId: 1049136973,
-    depositMethod: "Card",
-    status: "Pending",
-    options: [
-      { value: "Pending", label: "Pending" },
-      { value: "Completed", label: "Completed" },
-      { value: "Inprogress", label: "Inprogress" },
-      { value: "Error", label: "Error" },
-    ],
-    amount: 4000,
-    currency: "EUR",
-    dateTime: "2025-06-18 10:10:30",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 8,
-    userId: 172,
-    merchandId: 100987938,
-    transactionId: 1049131973,
-    depositMethod: "Card",
-    status: "Pending",
-    options: [
-      { value: "Pending", label: "Pending" },
-      { value: "Completed", label: "Completed" },
-      { value: "Inprogress", label: "Inprogress" },
-      { value: "Error", label: "Error" },
-    ],
-    amount: 4000,
-    currency: "EUR",
-    dateTime: "2025-06-12 10:10:30",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 9,
-    userId: 174,
-    merchandId: 100987938,
-    transactionId: 1049131973,
-    depositMethod: "Bank Transfer",
-    status: "Inprogress",
-    options: [
-      { value: "Pending", label: "Pending" },
-      { value: "Completed", label: "Completed" },
-      { value: "Inprogress", label: "Inprogress" },
-      { value: "Error", label: "Error" },
-    ],
-    amount: 4000,
-    currency: "EUR",
-    dateTime: "2025-06-17 10:10:30",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 10,
-    userId: 7,
-    merchandId: 100987998,
-    transactionId: 1049131973,
-    depositMethod: "Bank Transfer",
-    status: "Inprogress",
-    options: [
-      { value: "Pending", label: "Pending" },
-      { value: "Completed", label: "Completed" },
-      { value: "Inprogress", label: "Inprogress" },
-      { value: "Error", label: "Error" },
-    ],
-    amount: 4000,
-    currency: "EUR",
-    dateTime: "2025-06-17 10:10:30",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-  {
-    id: 11,
-    userId: 1,
-    merchandId: 100987998,
-    transactionId: 1049131973,
-    depositMethod: "Bank Transfer",
-    status: "Error",
-    options: [
-      { value: "Pending", label: "Pending" },
-      { value: "Completed", label: "Completed" },
-      { value: "Inprogress", label: "Inprogress" },
-      { value: "Error", label: "Error" },
-    ],
-    amount: 4000,
-    currency: "EUR",
-    dateTime: "2025-06-17 10:10:30",
-    errorInfo: "-",
-    fraudScore: "frad score 1234",
-  },
-];
-
-export const depositTransactionsColumns: GridColDef[] = [
-  { field: "userId", headerName: "User ID", width: 130 },
-  { field: "merchandId", headerName: "Merchant ID", width: 130 },
-  { field: "transactionId", headerName: "Transaction ID", width: 130 },
-  { field: "depositMethod", headerName: "Deposit Method", width: 130 },
-  { field: "status", headerName: "Status", width: 130 },
-  { field: "actions", headerName: "Actions", width: 150 },
-  { field: "amount", headerName: "Amount", width: 130 },
-  { field: "currency", headerName: "Currency", width: 130 },
-  { field: "dateTime", headerName: "Date / Time", width: 130 },
-  { field: "errorInfo", headerName: "Error Info", width: 130 },
-  { field: "fraudScore", headerName: "Fraud Score", width: 130 },
-];
-
-export const depositTransactionsExtraColumns: GridColDef[] = [
-  { field: "currency", headerName: "Currency", width: 130 },
-  { field: "errorInfo", headerName: "Error Info", width: 130 },
-  { field: "fraudScore", headerName: "Fraud Score", width: 130 },
-];
-
-// export const extraColumns = ["currency", "errorInfo", "fraudScore"]
-
-export const depositTransactionsSearchLabels = [
-  { label: "User", field: "userId", type: "text" },
-  { label: "Transaction ID", field: "transactionId", type: "text" },
-  {
-    label: "Transaction Reference ID",
-    field: "transactionReferenceId",
-    type: "text",
-  },
-  {
-    label: "Currency",
-    field: "currency",
-    type: "select",
-    options: ["USD", "EUR", "GBP"],
-  },
-  {
-    label: "Status",
-    field: "status",
-    type: "select",
-    options: ["Pending", "Inprogress", "Completed", "Failed"],
-  },
-  {
-    label: "Payment Method",
-    field: "depositMethod",
-    type: "select",
-    options: ["Card", "Bank Transfer"],
-  },
-  { label: "Date / Time", field: "dateTime", type: "date" },
-];

app/api/dashboard/transactions/deposits/route.ts

@@ -1,82 +1,108 @@
 import { NextRequest, NextResponse } from "next/server";
-import {
+const BE_BASE_URL = process.env.BE_BASE_URL || "http://localhost:5000";
-  depositTransactionDummyData,
+const COOKIE_NAME = "auth_token";
-  depositTransactionsColumns,
-  depositTransactionsSearchLabels,
-  // extraColumns
-} from "./mockData";
-// import { formatToDateTimeString } from "@/app/utils/formatDate";
 
-export async function GET(request: NextRequest) {
+type FilterValue =
-  const { searchParams } = new URL(request.url);
+  | string
+  | {
+      operator?: string;
+      value: string;
+    };
 
-  const status = searchParams.get("status");
+export async function POST(request: NextRequest) {
-  const userId = searchParams.get("userId");
+  try {
-  const depositMethod = searchParams.get("depositMethod");
+    const { cookies } = await import("next/headers");
-  const merchandId = searchParams.get("merchandId");
+    const cookieStore = await cookies();
-  const transactionId = searchParams.get("transactionId");
+    const token = cookieStore.get(COOKIE_NAME)?.value;
-  // const dateTime = searchParams.get("dateTime");
 
-  const dateTimeStart = searchParams.get("dateTime_start");
+    if (!token) {
-  const dateTimeEnd = searchParams.get("dateTime_end");
-
-  let filteredTransactions = [...depositTransactionDummyData];
-
-  if (userId) {
-    filteredTransactions = filteredTransactions.filter(
-      tx => tx.userId.toString() === userId
-    );
-  }
-
-  if (status) {
-    filteredTransactions = filteredTransactions.filter(
-      tx => tx.status.toLowerCase() === status.toLowerCase()
-    );
-  }
-
-  if (depositMethod) {
-    filteredTransactions = filteredTransactions.filter(
-      tx => tx.depositMethod.toLowerCase() === depositMethod.toLowerCase()
-    );
-  }
-  if (merchandId) {
-    filteredTransactions = filteredTransactions.filter(
-      tx => tx.merchandId.toString() === merchandId
-    );
-  }
-  if (transactionId) {
-    filteredTransactions = filteredTransactions.filter(
-      tx => tx.transactionId.toString() === transactionId
-    );
-  }
-
-  if (dateTimeStart && dateTimeEnd) {
-    const start = new Date(dateTimeStart);
-    const end = new Date(dateTimeEnd);
-
-    if (isNaN(start.getTime()) || isNaN(end.getTime())) {
       return NextResponse.json(
-        {
+        { message: "Missing Authorization header" },
-          error: "Invalid date range",
+        { status: 401 }
-        },
-        { status: 400 }
       );
     }
 
-    filteredTransactions = filteredTransactions.filter(tx => {
+    const body = await request.json();
-      const txDate = new Date(tx.dateTime);
+    const { filters = {}, pagination = { page: 1, limit: 10 }, sort } = body;
 
-      if (isNaN(txDate.getTime())) {
+    // Force deposits filter while allowing other filters to stack
-        return false;
+    const mergedFilters: Record<string, FilterValue> = {
+      ...filters,
+      Type: {
+        operator: "==",
+        value: "deposit",
+      },
+    };
+
+    const queryParts: string[] = [];
+    queryParts.push(`limit=${pagination.limit}`);
+    queryParts.push(`page=${pagination.page}`);
+
+    if (sort) {
+      queryParts.push(`sort=${sort.field}:${sort.order}`);
+    }
+
+    for (const [key, filterValue] of Object.entries(mergedFilters)) {
+      if (!filterValue) continue;
+
+      let operator: string;
+      let value: string;
+
+      if (typeof filterValue === "string") {
+        operator = "==";
+        value = filterValue;
+      } else {
+        operator = filterValue.operator || "==";
+        value = filterValue.value;
       }
 
-      return txDate >= start && txDate <= end;
+      if (!value) continue;
-    });
-  }
 
-  return NextResponse.json({
+      const encodedValue = encodeURIComponent(value);
-    tableRows: filteredTransactions,
+      const needsEqualsPrefix = /^[A-Za-z]/.test(operator);
-    tableSearchLabels: depositTransactionsSearchLabels,
+      const operatorSegment = needsEqualsPrefix ? `=${operator}` : operator;
-    tableColumns: depositTransactionsColumns,
+
-  });
+      queryParts.push(`${key}${operatorSegment}/${encodedValue}`);
+    }
+
+    const queryString = queryParts.join("&");
+    const backendUrl = `${BE_BASE_URL}/api/v1/transactions${
+      queryString ? `?${queryString}` : ""
+    }`;
+
+    const response = await fetch(backendUrl, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      cache: "no-store",
+    });
+
+    if (!response.ok) {
+      const errorData = await response
+        .json()
+        .catch(() => ({ message: "Failed to fetch deposits" }));
+      return NextResponse.json(
+        {
+          success: false,
+          message: errorData?.message || "Failed to fetch deposits",
+        },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data, { status: response.status });
+  } catch (err: unknown) {
+    console.error(
+      "Proxy POST /api/dashboard/transactions/deposits error:",
+      err
+    );
+    const errorMessage = err instanceof Error ? err.message : "Unknown error";
+    return NextResponse.json(
+      { message: "Internal server error", error: errorMessage },
+      { status: 500 }
+    );
+  }
 }

app/dashboard/audits/page.scss

@@ -0,0 +1,42 @@
+.audits-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+
+  .page-title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  .error-alert {
+    margin-bottom: 8px;
+    padding: 12px 16px;
+    background-color: #fee;
+    color: #c62828;
+    border-radius: 4px;
+    border: 1px solid #ffcdd2;
+  }
+
+  .table-container {
+    width: 100%;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow:
+      0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+      0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+    overflow: hidden;
+
+    .scroll-wrapper {
+      width: 100dvw;
+      overflow-x: auto;
+      overflow-y: hidden;
+
+      .table-inner {
+        min-width: 1200px;
+      }
+    }
+  }
+}

app/dashboard/audits/page.tsx

@@ -1,22 +1,293 @@
-import DataTable from "@/app/features/DataTable/DataTable";
+"use client";
-import { getAudits } from "@/app/services/audits";
 
-export default async function AuditPage({
+import { useEffect, useMemo, useState } from "react";
-  searchParams,
+import {
-}: {
+  DataGrid,
-  searchParams: Promise<Record<string, string | string[] | undefined>>;
+  GridColDef,
-}) {
+  GridPaginationModel,
-  // Await searchParams before processing
+  GridSortModel,
-  const params = await searchParams;
+} from "@mui/x-data-grid";
-  // Create a safe query string by filtering only string values
+import { getAudits } from "@/app/services/audits";
-  const safeParams: Record<string, string> = {};
+import "./page.scss";
-  for (const [key, value] of Object.entries(params)) {
+
-    if (typeof value === "string") {
+type AuditRow = Record<string, unknown> & { id: string | number };
-      safeParams[key] = value;
+
+interface AuditApiResponse {
+  total?: number;
+  limit?: number;
+  page?: number;
+  data?: unknown;
+  items?: unknown[];
+  audits?: unknown[];
+  logs?: unknown[];
+  results?: unknown[];
+  records?: unknown[];
+  meta?: { total?: number };
+  pagination?: { total?: number };
+}
+
+const DEFAULT_PAGE_SIZE = 25;
+
+const FALLBACK_COLUMNS: GridColDef[] = [
+  {
+    field: "placeholder",
+    headerName: "Audit Data",
+    flex: 1,
+    sortable: false,
+    filterable: false,
+  },
+];
+
+const CANDIDATE_ARRAY_KEYS: (keyof AuditApiResponse)[] = [
+  "items",
+  "audits",
+  "logs",
+  "results",
+  "records",
+];
+
+const normalizeValue = (value: unknown): string | number => {
+  if (value === null || value === undefined) {
+    return "";
+  }
+
+  if (typeof value === "string" || typeof value === "number") {
+    return value;
+  }
+
+  if (typeof value === "boolean") {
+    return value ? "true" : "false";
+  }
+
+  return JSON.stringify(value);
+};
+
+const toTitle = (field: string) =>
+  field
+    .replace(/_/g, " ")
+    .replace(/-/g, " ")
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/\s+/g, " ")
+    .trim()
+    .replace(/^\w/g, char => char.toUpperCase());
+
+const deriveColumns = (rows: AuditRow[]): GridColDef[] => {
+  if (!rows.length) return [];
+
+  return Object.keys(rows[0]).map(field => ({
+    field,
+    headerName: toTitle(field),
+    flex: field === "id" ? 0 : 1,
+    minWidth: field === "id" ? 140 : 200,
+    sortable: true,
+  }));
+};
+
+const extractArray = (payload: AuditApiResponse): unknown[] => {
+  if (Array.isArray(payload)) {
+    return payload;
+  }
+
+  for (const key of CANDIDATE_ARRAY_KEYS) {
+    const candidate = payload[key];
+    if (Array.isArray(candidate)) {
+      return candidate;
     }
   }
-  const query = new URLSearchParams(safeParams).toString();
-  const data = await getAudits({ query });
 
-  return <DataTable data={data} />;
+  const dataRecord =
+    payload.data &&
+    typeof payload.data === "object" &&
+    !Array.isArray(payload.data)
+      ? (payload.data as Record<string, unknown>)
+      : null;
+
+  if (dataRecord) {
+    for (const key of CANDIDATE_ARRAY_KEYS) {
+      const candidate = dataRecord[key];
+      if (Array.isArray(candidate)) {
+        return candidate;
+      }
+    }
+  }
+
+  if (Array.isArray(payload.data)) {
+    return payload.data;
+  }
+
+  return [];
+};
+
+const resolveTotal = (payload: AuditApiResponse, fallback: number): number => {
+  const fromPayload = payload.total;
+  const fromMeta = payload.meta?.total;
+  const fromPagination = payload.pagination?.total;
+  const fromData =
+    payload.data &&
+    typeof payload.data === "object" &&
+    !Array.isArray(payload.data)
+      ? (payload.data as { total?: number }).total
+      : undefined;
+
+  return (
+    (typeof fromPayload === "number" && fromPayload) ||
+    (typeof fromMeta === "number" && fromMeta) ||
+    (typeof fromPagination === "number" && fromPagination) ||
+    (typeof fromData === "number" && fromData) ||
+    fallback
+  );
+};
+
+const normalizeRows = (entries: unknown[], page: number): AuditRow[] =>
+  entries.map((entry, index) => {
+    if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
+      return {
+        id: `${page}-${index}`,
+        value: normalizeValue(entry),
+      };
+    }
+
+    const record = entry as Record<string, unknown>;
+
+    const normalized: Record<string, unknown> = {};
+    Object.entries(record).forEach(([key, value]) => {
+      normalized[key] = normalizeValue(value);
+    });
+
+    const identifier =
+      record.id ??
+      record.audit_id ??
+      record.log_id ??
+      record._id ??
+      `${page}-${index}`;
+
+    return {
+      id: (identifier as string | number) ?? `${page}-${index}`,
+      ...normalized,
+    };
+  });
+
+export default function AuditPage() {
+  const [rows, setRows] = useState<AuditRow[]>([]);
+  const [columns, setColumns] = useState<GridColDef[]>([]);
+  const [rowCount, setRowCount] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
+    page: 0,
+    pageSize: DEFAULT_PAGE_SIZE,
+  });
+  const [sortModel, setSortModel] = useState<GridSortModel>([]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    const fetchAudits = async () => {
+      setLoading(true);
+      setError(null);
+
+      const sortParam =
+        sortModel.length && sortModel[0].field && sortModel[0].sort
+          ? `${sortModel[0].field}:${sortModel[0].sort}`
+          : undefined;
+
+      try {
+        const payload = (await getAudits({
+          limit: paginationModel.pageSize,
+          page: paginationModel.page + 1,
+          sort: sortParam,
+          signal: controller.signal,
+        })) as AuditApiResponse;
+
+        const auditEntries = extractArray(payload);
+        const normalized = normalizeRows(auditEntries, paginationModel.page);
+
+        setColumns(prev =>
+          normalized.length
+            ? deriveColumns(normalized)
+            : prev.length
+              ? prev
+              : FALLBACK_COLUMNS
+        );
+
+        setRows(normalized);
+        setRowCount(resolveTotal(payload, normalized.length));
+      } catch (err) {
+        if (controller.signal.aborted) return;
+        const message =
+          err instanceof Error ? err.message : "Failed to load audits";
+        setError(message);
+        setRows([]);
+        setColumns(prev => (prev.length ? prev : FALLBACK_COLUMNS));
+      } finally {
+        if (!controller.signal.aborted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchAudits();
+
+    return () => controller.abort();
+  }, [paginationModel, sortModel]);
+
+  const handlePaginationChange = (model: GridPaginationModel) => {
+    setPaginationModel(model);
+  };
+
+  const handleSortModelChange = (model: GridSortModel) => {
+    setSortModel(model);
+    setPaginationModel(prev => ({ ...prev, page: 0 }));
+  };
+
+  const pageTitle = useMemo(
+    () =>
+      sortModel.length && sortModel[0].field
+        ? `Audit Logs · sorted by ${toTitle(sortModel[0].field)}`
+        : "Audit Logs",
+    [sortModel]
+  );
+
+  return (
+    <div className="audits-page">
+      <h1 className="page-title">{pageTitle}</h1>
+      {error && (
+        <div className="error-alert" role="alert">
+          {error}
+        </div>
+      )}
+      <div className="table-container">
+        <div className="scroll-wrapper">
+          <div
+            className="table-inner"
+            style={{ minWidth: `${columns.length * 200}px` }}
+          >
+            <DataGrid
+              rows={rows}
+              columns={columns.length ? columns : FALLBACK_COLUMNS}
+              loading={loading}
+              paginationMode="server"
+              sortingMode="server"
+              paginationModel={paginationModel}
+              onPaginationModelChange={handlePaginationChange}
+              rowCount={rowCount}
+              sortModel={sortModel}
+              onSortModelChange={handleSortModelChange}
+              pageSizeOptions={[10, 25, 50, 100]}
+              disableRowSelectionOnClick
+              sx={{
+                border: 0,
+                minHeight: 500,
+                "& .MuiDataGrid-cell": {
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                },
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }

app/dashboard/transactions/all/page.tsx

@@ -7,36 +7,10 @@ import {
   selectFilters,
   selectPagination,
   selectSort,
-  selectStatus,
-  selectError,
 } from "@/app/redux/advanedSearch/selectors";
-import { GridColDef } from "@mui/x-data-grid";
-import Spinner from "@/app/components/Spinner/Spinner";
 import { AppDispatch } from "@/app/redux/store";
-import {
+import { setError as setAdvancedSearchError } from "@/app/redux/advanedSearch/advancedSearchSlice";
-  setStatus,
+import { TransactionRow, BackendTransaction } from "../interface";
-  setError as setAdvancedSearchError,
-} from "@/app/redux/advanedSearch/advancedSearchSlice";
-
-import {
-  TABLE_COLUMNS,
-  TABLE_SEARCH_LABELS,
-} from "@/app/features/DataTable/constants";
-
-interface TransactionRow {
-  id: number;
-  userId?: string;
-  transactionId: string;
-  type?: string;
-  currency?: string;
-  amount?: number;
-  status?: string;
-  dateTime?: string;
-  merchantId?: string;
-  pspId?: string;
-  methodId?: string;
-  modified?: string;
-}
 
 export default function AllTransactionPage() {
   const dispatch = useDispatch<AppDispatch>();
@@ -53,7 +27,6 @@ export default function AllTransactionPage() {
   // Fetch data when filters, pagination, or sort changes
   useEffect(() => {
     const fetchData = async () => {
-      dispatch(setStatus("loading"));
       dispatch(setAdvancedSearchError(null));
       try {
         const response = await fetch("/api/dashboard/transactions", {
@@ -71,8 +44,8 @@ export default function AllTransactionPage() {
         const backendData = await response.json();
         const transactions = backendData.transactions || [];
 
-        const rows = transactions.map((tx: any) => ({
+        const rows = transactions.map((tx: BackendTransaction) => ({
-          id: tx.id,
+          id: tx.id || 0,
           userId: tx.customer,
           transactionId: tx.external_id || tx.id,
           type: tx.type,
@@ -87,7 +60,6 @@ export default function AllTransactionPage() {
         }));
 
         setTableRows(rows);
-        dispatch(setStatus("succeeded"));
       } catch (error) {
         dispatch(
           setAdvancedSearchError(

app/dashboard/transactions/deposits/page.tsx

@@ -1,23 +1,93 @@
+"use client";
+
 import DataTable from "@/app/features/DataTable/DataTable";
-import { getTransactions } from "@/app/services/transactions";
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch } from "@/app/redux/store";
+import {
+  selectFilters,
+  selectPagination,
+  selectSort,
+} from "@/app/redux/advanedSearch/selectors";
+import {
+  setStatus,
+  setError as setAdvancedSearchError,
+} from "@/app/redux/advanedSearch/advancedSearchSlice";
+import { useEffect, useMemo, useState } from "react";
+import { TransactionRow, BackendTransaction } from "../interface";
 
-export default async function DepositTransactionPage({
+export default function DepositTransactionPage() {
-  searchParams,
+  const dispatch = useDispatch<AppDispatch>();
-}: {
+  const filters = useSelector(selectFilters);
-  searchParams: Promise<Record<string, string | string[] | undefined>>;
+  const pagination = useSelector(selectPagination);
-}) {
+  const sort = useSelector(selectSort);
-  // Await searchParams before processing
+  const [tableRows, setTableRows] = useState<TransactionRow[]>([]);
-  const params = await searchParams;
-  // Create a safe query string by filtering only string values
-  const safeParams: Record<string, string> = {};
-  for (const [key, value] of Object.entries(params)) {
-    if (typeof value === "string") {
-      safeParams[key] = value;
-    }
-  }
-  const query = new URLSearchParams(safeParams).toString();
-  const transactionType = "deposits";
-  const data = await getTransactions({ transactionType, query });
 
-  return <DataTable data={data} />;
+  const memoizedRows = useMemo(() => tableRows, [tableRows]);
+
+  const depositFilters = useMemo(() => {
+    return {
+      ...filters,
+      Type: {
+        operator: "==",
+        value: "deposit",
+      },
+    };
+  }, [filters]);
+
+  useEffect(() => {
+    const fetchDeposits = async () => {
+      dispatch(setStatus("loading"));
+      dispatch(setAdvancedSearchError(null));
+      try {
+        const response = await fetch("/api/dashboard/transactions/deposits", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            filters: depositFilters,
+            pagination,
+            sort,
+          }),
+        });
+
+        if (!response.ok) {
+          dispatch(setAdvancedSearchError("Failed to fetch deposits"));
+          setTableRows([]);
+          return;
+        }
+
+        const backendData = await response.json();
+        const transactions: BackendTransaction[] =
+          backendData.transactions || [];
+
+        const rows: TransactionRow[] = transactions.map(tx => ({
+          id: tx.id,
+          userId: tx.customer,
+          transactionId: String(tx.external_id ?? tx.id),
+          type: tx.type,
+          currency: tx.currency,
+          amount: tx.amount,
+          status: tx.status,
+          dateTime: tx.created || tx.modified,
+          merchantId: tx.merchant_id,
+          pspId: tx.psp_id,
+          methodId: tx.method_id,
+          modified: tx.modified,
+        }));
+
+        setTableRows(rows);
+        dispatch(setStatus("succeeded"));
+      } catch (error) {
+        dispatch(
+          setAdvancedSearchError(
+            error instanceof Error ? error.message : "Unknown error"
+          )
+        );
+        setTableRows([]);
+      }
+    };
+
+    fetchDeposits();
+  }, [dispatch, depositFilters, pagination, sort]);
+
+  return <DataTable rows={memoizedRows} enableStatusActions />;
 }

app/dashboard/transactions/interface.ts

@@ -0,0 +1,29 @@
+export interface TransactionRow {
+  id: number;
+  userId?: string;
+  transactionId: string;
+  type?: string;
+  currency?: string;
+  amount?: number;
+  status?: string;
+  dateTime?: string;
+  merchantId?: string;
+  pspId?: string;
+  methodId?: string;
+  modified?: string;
+}
+
+export interface BackendTransaction {
+  id: number;
+  customer?: string;
+  external_id?: string;
+  type?: string;
+  currency?: string;
+  amount?: number;
+  status?: string;
+  created?: string;
+  modified?: string;
+  merchant_id?: string;
+  psp_id?: string;
+  method_id?: string;
+}

app/features/DataTable/DataTable.tsx

@@ -1,148 +1,113 @@
 "use client";
 
-import React, { useState, useMemo } from "react";
+import React, { useState, useEffect, useCallback } from "react";
-import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { DataGrid } from "@mui/x-data-grid";
-import { Box, Paper, IconButton, Alert } from "@mui/material";
+import { Box, Paper, Alert } from "@mui/material";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import StatusChangeDialog from "./StatusChangeDialog";
 import DataTableHeader from "./DataTableHeader";
-import { TABLE_COLUMNS } from "./constants";
+import StatusChangeDialog from "./StatusChangeDialog";
 import Spinner from "@/app/components/Spinner/Spinner";
+import { selectStatus, selectError } from "@/app/redux/advanedSearch/selectors";
+import { selectEnhancedColumns } from "./re-selectors";
 import { useSelector } from "react-redux";
-import { selectStatus, selectError } from "@/app/redux/auth/selectors";
+import { DataRowBase } from "./types";
 
-interface IDataTableProps<TRow extends { id: number }> {
+interface DataTableProps<TRow extends DataRowBase> {
   rows: TRow[];
   extraColumns?: string[];
+  enableStatusActions?: boolean;
 }
 
-const DataTable = <TRow extends { id: number }>({
+const DataTable = <TRow extends DataRowBase>({
   rows,
   extraColumns,
-}: IDataTableProps<TRow>) => {
+  enableStatusActions = false,
+}: DataTableProps<TRow>) => {
+  const [showExtraColumns, setShowExtraColumns] = useState(false);
+  const [localRows, setLocalRows] = useState(rows);
   const [modalOpen, setModalOpen] = useState(false);
   const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
-  const [newStatus, setNewStatus] = useState<string>("");
+  const [pendingStatus, setPendingStatus] = useState<string>("");
   const [reason, setReason] = useState<string>("");
-  const [showExtraColumns, setShowExtraColumns] = useState(false);
+  const [statusUpdateError, setStatusUpdateError] = useState<string | null>(
+    null
+  );
+  const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
 
   const status = useSelector(selectStatus);
   const errorMessage = useSelector(selectError);
+  useEffect(() => {
+    setLocalRows(rows);
+  }, [rows]);
 
-  // Open status modal
+  const handleStatusChange = useCallback((rowId: number, newStatus: string) => {
-  const handleStatusChange = (id: number, status: string) => {
+    setSelectedRowId(rowId);
-    setSelectedRowId(id);
+    setPendingStatus(newStatus);
-    setNewStatus(status);
     setModalOpen(true);
-  };
+  }, []);
 
-  const handleStatusSave = () => {
+  const handleStatusSave = async () => {
-    setModalOpen(false);
+    if (!selectedRowId || !pendingStatus) return;
-    setReason("");
+    setStatusUpdateError(null);
-    // rows update should happen in parent component
+    setIsUpdatingStatus(true);
-  };
 
-  // Columns filtered by extraColumns toggle
+    try {
-  const visibleColumns = useMemo(() => {
+      const payload = {
-    if (!extraColumns || extraColumns.length === 0) return TABLE_COLUMNS;
+        data: {
-    return showExtraColumns
+          status: pendingStatus,
-      ? TABLE_COLUMNS
+          notes: reason.trim(),
-      : TABLE_COLUMNS.filter(col => !extraColumns.includes(col.field));
+        },
-  }, [extraColumns, showExtraColumns]);
+        fields: ["Status", "Notes"],
+      };
+
+      const response = await fetch(
+        `/api/dashboard/transactions/${selectedRowId}`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+
+      const result = await response.json();
+
+      if (!response.ok) {
+        throw new Error(
+          result?.message || result?.error || "Failed to update transaction"
+        );
+      }
+
+      setLocalRows(prev =>
+        prev.map(row =>
+          row.id === selectedRowId ? { ...row, status: pendingStatus } : row
+        )
+      );
+      setModalOpen(false);
+      setReason("");
+      setPendingStatus("");
+      setStatusUpdateError(null);
+      setSelectedRowId(null);
+    } catch (err) {
+      setStatusUpdateError(
+        err instanceof Error ? err.message : "Failed to update transaction"
+      );
+    } finally {
+      setIsUpdatingStatus(false);
+    }
+  };
 
   // Columns with custom renderers
-  const enhancedColumns = useMemo<GridColDef[]>(() => {
+  const enhancedColumns = useSelector(state =>
-    return visibleColumns.map(col => {
+    selectEnhancedColumns(
-      if (col.field === "status") {
+      state,
-        return {
+      enableStatusActions,
-          ...col,
+      extraColumns,
-          renderCell: (params: GridRenderCellParams) => {
+      showExtraColumns,
-            const value = params.value?.toLowerCase();
+      localRows,
-            let bgColor = "#e0e0e0";
+      handleStatusChange
-            let textColor = "#000";
+    )
-            switch (value) {
+  );
-              case "completed":
-                bgColor = "#d0f0c0";
-                textColor = "#1b5e20";
-                break;
-              case "pending":
-                bgColor = "#fff4cc";
-                textColor = "#9e7700";
-                break;
-              case "inprogress":
-                bgColor = "#cce5ff";
-                textColor = "#004085";
-                break;
-              case "error":
-                bgColor = "#ffcdd2";
-                textColor = "#c62828";
-                break;
-            }
-            return (
-              <Box
-                sx={{
-                  backgroundColor: bgColor,
-                  color: textColor,
-                  px: 1.5,
-                  py: 0.5,
-                  borderRadius: 1,
-                  fontWeight: 500,
-                  textTransform: "capitalize",
-                  display: "inline-block",
-                  width: "100%",
-                  textAlign: "center",
-                }}
-              >
-                {params.value}
-              </Box>
-            );
-          },
-        };
-      }
-
-      if (col.field === "userId") {
-        return {
-          ...col,
-          headerAlign: "center",
-          align: "center",
-          renderCell: (params: GridRenderCellParams) => (
-            <Box
-              sx={{
-                display: "grid",
-                gridTemplateColumns: "1fr auto",
-                alignItems: "center",
-                width: "100%",
-                px: 1,
-              }}
-              onClick={e => e.stopPropagation()}
-            >
-              <Box
-                sx={{
-                  fontWeight: 500,
-                  fontSize: "0.875rem",
-                  color: "text.primary",
-                }}
-              >
-                {params.value}
-              </Box>
-              <IconButton
-                href={`/users/${params.value}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                size="small"
-                sx={{ p: 0.5, ml: 1 }}
-                onClick={e => e.stopPropagation()}
-              >
-                <OpenInNewIcon fontSize="small" />
-              </IconButton>
-            </Box>
-          ),
-        };
-      }
-
-      return col;
-    });
-  }, [visibleColumns]);
 
   return (
     <>
@@ -163,7 +128,7 @@ const DataTable = <TRow extends { id: number }>({
         <Box sx={{ width: "100%", overflowX: "auto" }}>
           <Box sx={{ minWidth: 1200 }}>
             <DataGrid
-              rows={rows}
+              rows={localRows}
               columns={enhancedColumns}
               pageSizeOptions={[10, 25, 50, 100]}
               sx={{
@@ -187,11 +152,19 @@ const DataTable = <TRow extends { id: number }>({
 
         <StatusChangeDialog
           open={modalOpen}
-          newStatus={newStatus}
+          newStatus={pendingStatus}
           reason={reason}
           setReason={setReason}
-          handleClose={() => setModalOpen(false)}
+          handleClose={() => {
+            setModalOpen(false);
+            setReason("");
+            setPendingStatus("");
+            setStatusUpdateError(null);
+            setSelectedRowId(null);
+          }}
           handleSave={handleStatusSave}
+          isSubmitting={isUpdatingStatus}
+          errorMessage={statusUpdateError}
         />
       </Paper>
     </>

app/features/DataTable/StatusChangeDialog.tsx

@@ -5,6 +5,8 @@ import {
   DialogActions,
   Button,
   TextField,
+  Alert,
+  CircularProgress,
 } from "@mui/material";
 import { useState, useEffect } from "react";
 
@@ -15,6 +17,8 @@ interface StatusChangeDialogProps {
   setReason: React.Dispatch<React.SetStateAction<string>>;
   handleClose: () => void;
   handleSave: () => void;
+  isSubmitting?: boolean;
+  errorMessage?: string | null;
 }
 
 const StatusChangeDialog = ({
@@ -24,17 +28,19 @@ const StatusChangeDialog = ({
   setReason,
   handleClose,
   handleSave,
+  isSubmitting = false,
+  errorMessage,
 }: StatusChangeDialogProps) => {
   const [isValid, setIsValid] = useState(false);
 
   useEffect(() => {
-    const noSpaces = reason.replace(/\s/g, ""); // remove all spaces
+    const noSpaces = reason.replace(/\s/g, "");
     const length = noSpaces.length;
     setIsValid(length >= 12 && length <= 400);
   }, [reason]);
 
   return (
-    <Dialog open={open} onClose={handleClose}>
+    <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
       <DialogTitle>Change Status</DialogTitle>
       <DialogContent>
         You want to change the status to <b>{newStatus}</b>. Please provide a
@@ -50,10 +56,22 @@ const StatusChangeDialog = ({
           helperText="Reason must be between 12 and 400 characters"
           sx={{ mt: 2 }}
         />
+        {errorMessage && (
+          <Alert severity="error" sx={{ mt: 2 }}>
+            {errorMessage}
+          </Alert>
+        )}
       </DialogContent>
       <DialogActions>
-        <Button onClick={handleClose}>Cancel</Button>
+        <Button onClick={handleClose} disabled={isSubmitting}>
-        <Button variant="contained" onClick={handleSave} disabled={!isValid}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          onClick={handleSave}
+          disabled={!isValid || isSubmitting}
+          startIcon={isSubmitting ? <CircularProgress size={18} /> : undefined}
+        >
           Save
         </Button>
       </DialogActions>

app/features/DataTable/re-selectors/index.tsx

@@ -0,0 +1,238 @@
+import { createSelector } from "@reduxjs/toolkit";
+import { Box, IconButton, MenuItem, Select } from "@mui/material";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import { GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { RootState } from "@/app/redux/store";
+import { TABLE_COLUMNS } from "../constants";
+import { selectTransactionStatuses } from "@/app/redux/metadata/selectors";
+import { DataRowBase } from "../types";
+
+const TRANSACTION_STATUS_FALLBACK: string[] = [
+  "pending",
+  "completed",
+  "failed",
+  "inprogress",
+  "error",
+];
+
+type StatusChangeHandler = (rowId: number, newStatus: string) => void;
+
+const selectEnableStatusActions = (
+  _state: RootState,
+  enableStatusActions: boolean
+) => enableStatusActions;
+
+const selectExtraColumns = (
+  _state: RootState,
+  _enableStatusActions: boolean,
+  extraColumns?: string[] | null
+) => extraColumns ?? null;
+
+const selectShowExtraColumns = (
+  _state: RootState,
+  _enableStatusActions: boolean,
+  _extraColumns?: string[] | null,
+  showExtraColumns = false
+) => showExtraColumns;
+
+const selectLocalRows = (
+  _state: RootState,
+  _enableStatusActions: boolean,
+  _extraColumns?: string[] | null,
+  _showExtraColumns?: boolean,
+  localRows?: DataRowBase[]
+) => localRows ?? [];
+
+const noopStatusChangeHandler: StatusChangeHandler = () => {};
+
+const selectStatusChangeHandler = (
+  _state: RootState,
+  _enableStatusActions: boolean,
+  _extraColumns?: string[] | null,
+  _showExtraColumns?: boolean,
+  _localRows?: DataRowBase[],
+  handleStatusChange?: StatusChangeHandler
+) => handleStatusChange ?? noopStatusChangeHandler;
+
+export const selectBaseColumns = createSelector(
+  [selectEnableStatusActions],
+  enableStatusActions => {
+    if (!enableStatusActions) {
+      return TABLE_COLUMNS;
+    }
+
+    return [
+      ...TABLE_COLUMNS,
+      {
+        field: "actions",
+        headerName: "Actions",
+        width: 160,
+        sortable: false,
+        filterable: false,
+      } as GridColDef,
+    ];
+  }
+);
+
+export const selectVisibleColumns = createSelector(
+  [selectBaseColumns, selectExtraColumns, selectShowExtraColumns],
+  (baseColumns, extraColumns, showExtraColumns) => {
+    if (!extraColumns || extraColumns.length === 0) {
+      return baseColumns;
+    }
+
+    return showExtraColumns
+      ? baseColumns
+      : baseColumns.filter(col => !extraColumns.includes(col.field));
+  }
+);
+
+export const selectResolvedTransactionStatuses = createSelector(
+  [selectTransactionStatuses],
+  statuses => (statuses.length > 0 ? statuses : TRANSACTION_STATUS_FALLBACK)
+);
+
+export const selectEnhancedColumns = createSelector(
+  [
+    selectVisibleColumns,
+    selectLocalRows,
+    selectStatusChangeHandler,
+    selectResolvedTransactionStatuses,
+  ],
+  (
+    visibleColumns,
+    localRows,
+    handleStatusChange,
+    resolvedStatusOptions
+  ): GridColDef[] => {
+    return visibleColumns.map(col => {
+      if (col.field === "status") {
+        return {
+          ...col,
+          renderCell: (params: GridRenderCellParams) => {
+            const value = params.value?.toLowerCase();
+            let bgColor = "#e0e0e0";
+            let textColor = "#000";
+            switch (value) {
+              case "completed":
+                bgColor = "#d0f0c0";
+                textColor = "#1b5e20";
+                break;
+              case "pending":
+                bgColor = "#fff4cc";
+                textColor = "#9e7700";
+                break;
+              case "inprogress":
+                bgColor = "#cce5ff";
+                textColor = "#004085";
+                break;
+              case "error":
+                bgColor = "#ffcdd2";
+                textColor = "#c62828";
+                break;
+            }
+            return (
+              <Box
+                sx={{
+                  backgroundColor: bgColor,
+                  color: textColor,
+                  px: 1.5,
+                  py: 0.5,
+                  borderRadius: 1,
+                  fontWeight: 500,
+                  textTransform: "capitalize",
+                  display: "inline-block",
+                  width: "100%",
+                  textAlign: "center",
+                }}
+              >
+                {params.value}
+              </Box>
+            );
+          },
+        };
+      }
+
+      if (col.field === "userId") {
+        return {
+          ...col,
+          headerAlign: "center",
+          align: "center",
+          renderCell: (params: GridRenderCellParams) => (
+            <Box
+              sx={{
+                display: "grid",
+                gridTemplateColumns: "1fr auto",
+                alignItems: "center",
+                width: "100%",
+                px: 1,
+              }}
+              onClick={e => e.stopPropagation()}
+            >
+              <Box
+                sx={{
+                  fontWeight: 500,
+                  fontSize: "0.875rem",
+                  color: "text.primary",
+                }}
+              >
+                {params.value}
+              </Box>
+              <IconButton
+                href={`/users/${params.value}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                size="small"
+                sx={{ p: 0.5, ml: 1 }}
+                onClick={e => e.stopPropagation()}
+              >
+                <OpenInNewIcon fontSize="small" />
+              </IconButton>
+            </Box>
+          ),
+        };
+      }
+
+      if (col.field === "actions") {
+        return {
+          ...col,
+          renderCell: (params: GridRenderCellParams) => {
+            const currentRow = localRows.find(row => row.id === params.id);
+            const options =
+              currentRow?.options?.map(option => option.value) ??
+              resolvedStatusOptions;
+            const uniqueOptions: string[] = Array.from(new Set(options));
+
+            return (
+              <Select<string>
+                value={currentRow?.status ?? ""}
+                onChange={e =>
+                  handleStatusChange(
+                    params.id as number,
+                    e.target.value as string
+                  )
+                }
+                size="small"
+                fullWidth
+                displayEmpty
+                sx={{
+                  "& .MuiOutlinedInput-notchedOutline": { border: "none" },
+                  "& .MuiSelect-select": { py: 0.5 },
+                }}
+                onClick={e => e.stopPropagation()}
+              >
+                {uniqueOptions.map(option => (
+                  <MenuItem key={option} value={option}>
+                    {option}
+                  </MenuItem>
+                ))}
+              </Select>
+            );
+          },
+        };
+      }
+
+      return col;
+    }) as GridColDef[];
+  }
+);

app/features/DataTable/types.ts

@@ -11,3 +11,9 @@ export interface IDataTable<TRow, TColumn> {
   tableSearchLabels: ISearchLabel[];
   extraColumns: string[];
 }
+
+export interface DataRowBase {
+  id: number;
+  status?: string;
+  options?: { value: string; label: string }[];
+}

app/features/dashboard/header/dropDown/DropDown.tsx

@@ -7,7 +7,6 @@ import {
   SelectChangeEvent,
 } from "@mui/material";
 import PageLinks from "../../../../components/PageLinks/PageLinks";
-import { SidebarItem } from "@/app/redux/metadata/metadataSlice";
 import { useSelector } from "react-redux";
 import { selectNavigationSidebar } from "@/app/redux/metadata/selectors";
 import "./DropDown.scss";

app/features/dashboard/sidebar/Sidebar.tsx

@@ -9,7 +9,7 @@ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { selectNavigationSidebar } from "@/app/redux/metadata/selectors";
-import { SidebarItem } from "@/app/redux/metadata/metadataSlice";
+import { SidebarLink } from "@/app/redux/metadata/metadataSlice";
 import { resolveIcon } from "@/app/utils/iconMap";
 import "./sideBar.scss";
 
@@ -20,7 +20,7 @@ interface SidebarProps {
 
 const SideBar = ({ isOpen = true, onClose }: SidebarProps) => {
   const [openMenus, setOpenMenus] = useState<Record<string, boolean>>({});
-  const sidebar = useSelector(selectNavigationSidebar)?.links;
+  const sidebar = useSelector(selectNavigationSidebar);
   const toggleMenu = (title: string) => {
     setOpenMenus(prev => ({ ...prev, [title]: !prev[title] }));
   };
@@ -32,12 +32,12 @@ const SideBar = ({ isOpen = true, onClose }: SidebarProps) => {
       </button>
       <div className="sidebar__header">
         <span>
-          Betrise cashier
+          Cashier
           <DashboardIcon fontSize="small" className="sidebar__icon-spacing" />
         </span>
       </div>
 
-      {sidebar?.map((link: SidebarItem) => {
+      {sidebar?.map((link: SidebarLink) => {
         if (link.children) {
           const Icon = resolveIcon(link.icon as string);
           return (

app/features/dashboard/sidebar/sideBar.scss

@@ -10,13 +10,22 @@
   flex-direction: column;
   padding: 16px;
   z-index: 1100;
-  border-right: 1px solid #333;
+  border-right: 1px solid #835454;
   transition: transform 0.3s ease-in-out;
   overflow: hidden;
 
+  .sidebar__submenu {
+    overflow: hidden;
+    max-height: 200px;
+    transition: max-height 0.3s ease-in-out;
+    overflow-y: auto;
+    &:hover {
+      max-height: 300px;
+    }
+  }
+
   &--collapsed {
     transform: translateX(-210px); // Hide 90% (210px out of 240px)
-
     .sidebar__header,
     .sidebar__dropdown-button,
     .sidebar__submenu,
@@ -153,3 +162,9 @@
     display: none;
   }
 }
+
+/* Track (background behind the thumb) */
+.scrollable-div::-webkit-scrollbar-track {
+  background: #f0f0f0;
+  border-radius: 5px;
+}

app/redux/metadata/metadataSlice.ts

@@ -1,21 +1,30 @@
 import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
 
-export interface SidebarItem {
+export interface SidebarLink {
   id?: string;
   title: string;
   path: string;
-  icon?: string; // icon name from backend; map client-side if needed
+  icon?: string;
-  permissions?: string[]; // required permissions for visibility
+  groups?: string[];
-  children?: SidebarItem[];
+  children?: SidebarLink[];
 }
 
+export interface SidebarPayload {
+  links: SidebarLink[];
+}
+
+export type FieldGroupMap = Record<string, Record<string, string>>;
+
 export interface AppMetadata {
-  groups?: string[];
-  job_titles?: string[];
-  merchants?: string[];
-  message?: string;
-  sidebar?: SidebarItem[];
   success: boolean;
+  message?: string;
+  field_names?: FieldGroupMap;
+  job_titles?: string[];
+  groups?: string[];
+  merchants?: string[];
+  countries?: string[];
+  sidebar?: SidebarPayload;
+  transaction_status?: string[];
 }
 
 interface MetadataState {

app/redux/metadata/selectors.ts

@@ -1,7 +1,35 @@
 import { RootState } from "../store";
+import { FieldGroupMap, SidebarLink } from "./metadataSlice";
 
-// Selectors
 export const selectMetadataState = (state: RootState) => state.metadata;
-export const selectAppMetadata = (state: RootState) => state.metadata.data;
+
-export const selectNavigationSidebar = (state: RootState) =>
+export const selectMetadataStatus = (state: RootState) =>
-  state.metadata.data?.sidebar || [];
+  state.metadata?.status;
+
+export const selectMetadataError = (state: RootState) => state.metadata?.error;
+
+export const selectAppMetadata = (state: RootState) => state.metadata?.data;
+
+export const selectFieldNames = (state: RootState): FieldGroupMap | undefined =>
+  state.metadata.data?.field_names;
+
+export const selectSidebarLinks = (state: RootState): SidebarLink[] =>
+  state.metadata.data?.sidebar?.links ?? [];
+
+export const selectJobTitles = (state: RootState): string[] =>
+  state.metadata.data?.job_titles ?? [];
+
+export const selectGroups = (state: RootState): string[] =>
+  state.metadata.data?.groups ?? [];
+
+export const selectMerchants = (state: RootState): string[] =>
+  state.metadata.data?.merchants ?? [];
+
+export const selectCountries = (state: RootState): string[] =>
+  state.metadata.data?.countries ?? [];
+
+export const selectTransactionStatuses = (state: RootState): string[] =>
+  state.metadata.data?.transaction_status ?? [];
+
+export const selectNavigationSidebar = (state: RootState): SidebarLink[] =>
+  state.metadata.data?.sidebar?.links ?? [];

app/services/audits.ts

@@ -1,18 +1,41 @@
-export async function getAudits({ query }: { query: string }) {
+interface GetAuditsParams {
-  const res = await fetch(
+  limit?: number;
-    `http://localhost:4000/api/dashboard/audits?${query}`,
+  page?: number;
+  sort?: string;
+  filter?: string;
+  signal?: AbortSignal;
+}
+
+export async function getAudits({
+  limit,
+  page,
+  sort,
+  filter,
+  signal,
+}: GetAuditsParams = {}) {
+  const params = new URLSearchParams();
+
+  if (limit) params.set("limit", String(limit));
+  if (page) params.set("page", String(page));
+  if (sort) params.set("sort", sort);
+  if (filter) params.set("filter", filter);
+
+  const queryString = params.toString();
+  const response = await fetch(
+    `/api/dashboard/audits${queryString ? `?${queryString}` : ""}`,
     {
+      method: "GET",
       cache: "no-store",
+      signal,
     }
   );
 
-  if (!res.ok) {
+  if (!response.ok) {
-    // Handle error from the API
+    const errorData = await response
-    const errorData = await res
       .json()
       .catch(() => ({ message: "Unknown error" }));
-    throw new Error(errorData.message || `HTTP error! status: ${res.status}`);
+    throw new Error(errorData.message || "Failed to fetch audits");
   }
 
-  return res.json();
+  return response.json();
 }

app/utils/iconMap.ts

@@ -18,9 +18,16 @@ import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import HistoryIcon from "@mui/icons-material/History";
 import FactCheckIcon from "@mui/icons-material/FactCheck";
 import WidgetsIcon from "@mui/icons-material/Widgets"; // fallback
+import GroupIcon from "@mui/icons-material/Group";
+import SecurityIcon from "@mui/icons-material/Security";
+import TimerIcon from "@mui/icons-material/Timer";
+import StoreIcon from "@mui/icons-material/Store";
+import AccountBalanceIcon from "@mui/icons-material/AccountBalance";
+import PaymentIcon from "@mui/icons-material/Payment";
+import CurrencyExchangeIcon from "@mui/icons-material/CurrencyExchange";
+import ViewSidebarIcon from "@mui/icons-material/ViewSidebar";
 
-// Map string keys from backend to actual Icon components
+const IconMap = {
-const iconRegistry: Record<string, ElementType> = {
   HomeIcon,
   AccountBalanceWalletIcon,
   CheckCircleIcon,
@@ -37,6 +44,21 @@ const iconRegistry: Record<string, ElementType> = {
   ArrowUpwardIcon,
   HistoryIcon,
   FactCheckIcon,
+  WidgetsIcon,
+  GroupIcon,
+  SecurityIcon,
+  TimerIcon,
+  StoreIcon,
+  AccountBalanceIcon,
+  PaymentIcon,
+  CurrencyExchangeIcon,
+  ViewSidebarIcon,
+};
+
+export default IconMap;
+// Map string keys from backend to actual Icon components
+const iconRegistry: Record<string, ElementType> = {
+  ...IconMap,
 };
 
 export function resolveIcon(