feat: implement audit logs module with routing, sidebar integration, and API services

src/AppRoutes.tsx

@@ -8,7 +8,7 @@ import RecoveryIncidentsList from './app/recoveryIncidents/components/RecoveryIn
 import RecoveryIncidentTabs from './app/recoveryIncidents/tabs/index'
 import ActionBuilderPage from './app/actionBuilder'
 import MasterDataManagement from './app/masterData'
-
+import AuditLogsList from './app/auditLogs/components/AuditLogsList'
 function AppRoutes() {
   return (
     <Layout>
@@ -22,6 +22,7 @@ function AppRoutes() {
         <Route path="/config" element={<MasterDataManagement />} />
         <Route path="/recovery" element={<RecoveryIncidentsList />} />
         <Route path="/recovery/:id" element={<RecoveryIncidentTabs />} />
+        <Route path="/audit-logs" element={<AuditLogsList />} />
       </Routes>
     </Layout>
   )

src/app/auditLogs/AuditLogsApi.ts

@@ -0,0 +1,19 @@
+import { ApiClient } from '../api/ApiClient';
+import type { AuditLog, AuditLogListResponse, AuditLogFilters } from './AuditLogsTypes';
+
+export function getAuditLogs(filters: AuditLogFilters = {}): Promise<AuditLogListResponse> {
+  const params = new URLSearchParams();
+  if (filters.page)     params.set('page',     String(filters.page));
+  if (filters.limit)    params.set('limit',    String(filters.limit));
+  if (filters.module)   params.set('module',   filters.module);
+  if (filters.action)   params.set('action',   filters.action);
+  if (filters.entityId) params.set('entityId', filters.entityId);
+  if (filters.dateFrom) params.set('dateFrom', filters.dateFrom);
+  if (filters.dateTo)   params.set('dateTo',   filters.dateTo);
+
+  return ApiClient.get<any, AuditLogListResponse>(`/audit-logs?${params.toString()}`);
+}
+
+export function getAuditLog(id: string): Promise<AuditLog> {
+  return ApiClient.get<any, AuditLog>(`/audit-logs/${id}`);
+}

src/app/auditLogs/AuditLogsTypes.ts

@@ -0,0 +1,46 @@
+export interface AuditLog {
+  id: string;
+  tenantId: string;
+  module: string;       // 'policy-engine' | 'recovery-incident' | 'cohort' | 'master-data'
+  action: string;       // 'CREATE' | 'UPDATE' | 'DELETE' | 'STATUS_CHANGE'
+  entityId?: string;
+  entityLabel?: string;
+  before?: Record<string, any>;
+  after?: Record<string, any>;
+  performedBy?: string;
+  ipAddress?: string;
+  userAgent?: string;
+  createdAt: string;
+}
+
+export interface AuditLogListResponse {
+  data: AuditLog[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+export interface AuditLogFilters {
+  page?: number;
+  limit?: number;
+  module?: string;
+  action?: string;
+  entityId?: string;
+  dateFrom?: string;
+  dateTo?: string;
+}
+
+export const AUDIT_MODULE_LABELS: Record<string, string> = {
+  'policy-engine': 'Policy Engine',
+  'recovery-incident': 'Recovery Incident',
+  'cohort': 'Cohort',
+  'master-data': 'Master Data',
+};
+
+export const AUDIT_ACTION_VARIANTS: Record<string, 'success' | 'error' | 'warning' | 'info' | 'neutral'> = {
+  CREATE: 'success',
+  UPDATE: 'info',
+  DELETE: 'error',
+  STATUS_CHANGE: 'warning',
+};

src/app/auditLogs/components/AuditLogDetail.tsx

@@ -0,0 +1,173 @@
+import { X, ClockCounterClockwise } from "@phosphor-icons/react";
+import type { AuditLog } from "../AuditLogsTypes";
+import { AUDIT_MODULE_LABELS, AUDIT_ACTION_VARIANTS } from "../AuditLogsTypes";
+import { CustomStatus } from "../../../components/custom";
+
+interface AuditLogDetailProps {
+  log: AuditLog | null;
+  onClose: () => void;
+}
+
+function JsonDiffRow({
+  label,
+  before,
+  after,
+}: {
+  label: string;
+  before: any;
+  after: any;
+}) {
+  const changed =
+    JSON.stringify(before) !== JSON.stringify(after);
+
+  return (
+    <tr className={changed ? "bg-amber-50" : ""}>
+      <td className="py-2 px-3 text-[12px] font-semibold text-gray-500 w-[140px] align-top border-b border-gray-100">
+        {label}
+      </td>
+      <td className="py-2 px-3 text-[12px] text-red-500 align-top border-b border-gray-100 w-1/2 font-mono break-all">
+        {before !== undefined ? JSON.stringify(before) : <span className="text-gray-300 italic">—</span>}
+      </td>
+      <td className="py-2 px-3 text-[12px] text-[#1B9869] align-top border-b border-gray-100 w-1/2 font-mono break-all">
+        {after !== undefined ? JSON.stringify(after) : <span className="text-gray-300 italic">—</span>}
+      </td>
+    </tr>
+  );
+}
+
+function DiffTable({ before, after }: { before?: Record<string, any>; after?: Record<string, any> }) {
+  const allKeys = Array.from(
+    new Set([
+      ...Object.keys(before ?? {}),
+      ...Object.keys(after ?? {}),
+    ])
+  ).filter((k) => !["tenantId", "createdAt", "updatedAt"].includes(k));
+
+  if (allKeys.length === 0) {
+    return <p className="text-[13px] text-gray-400 italic mt-2">No data to display.</p>;
+  }
+
+  return (
+    <table className="w-full border-collapse mt-3">
+      <thead>
+        <tr className="bg-gray-50">
+          <th className="py-2 px-3 text-left text-[11px] font-bold text-gray-400 uppercase tracking-wider w-[140px]">Field</th>
+          <th className="py-2 px-3 text-left text-[11px] font-bold text-red-400 uppercase tracking-wider w-1/2">Before</th>
+          <th className="py-2 px-3 text-left text-[11px] font-bold text-[#1B9869] uppercase tracking-wider w-1/2">After</th>
+        </tr>
+      </thead>
+      <tbody>
+        {allKeys.map((key) => (
+          <JsonDiffRow
+            key={key}
+            label={key}
+            before={(before ?? {})[key]}
+            after={(after ?? {})[key]}
+          />
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default function AuditLogDetail({ log, onClose }: AuditLogDetailProps) {
+  if (!log) return null;
+
+  const actionVariant = AUDIT_ACTION_VARIANTS[log.action] ?? "neutral";
+  const moduleLabel = AUDIT_MODULE_LABELS[log.module] ?? log.module;
+
+  return (
+    <div className="fixed inset-0 z-50 flex justify-end">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/20 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      {/* Panel */}
+      <div className="relative w-[640px] max-w-full h-full bg-white shadow-2xl flex flex-col overflow-hidden animate-[slideInRight_0.2s_ease-out]">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-[8px] bg-[#F0FDF4] flex items-center justify-center">
+              <ClockCounterClockwise size={16} className="text-[#1B9869]" />
+            </div>
+            <div>
+              <h2 className="text-[15px] font-bold text-gray-900">Audit Entry</h2>
+              <p className="text-[12px] text-gray-400">{log.id}</p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-400 hover:text-gray-700"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Scrollable body */}
+        <div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
+
+          {/* Meta grid */}
+          <div className="bg-[#F9FAFB] rounded-[12px] p-4 grid grid-cols-2 gap-4">
+            <div>
+              <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Module</p>
+              <p className="text-[13px] font-semibold text-gray-800">{moduleLabel}</p>
+            </div>
+            <div>
+              <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Action</p>
+              <CustomStatus status={log.action} variant={actionVariant} />
+            </div>
+            <div>
+              <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Entity</p>
+              <p className="text-[13px] font-semibold text-gray-800">
+                {log.entityLabel ?? "—"}
+              </p>
+              {log.entityId && (
+                <p className="text-[11px] text-gray-400 font-mono mt-0.5">{log.entityId}</p>
+              )}
+            </div>
+            <div>
+              <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Timestamp</p>
+              <p className="text-[13px] font-semibold text-gray-800">
+                {new Date(log.createdAt).toLocaleString()}
+              </p>
+            </div>
+            <div>
+              <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Performed By</p>
+              <p className="text-[13px] font-medium text-gray-700">{log.performedBy ?? "—"}</p>
+            </div>
+            <div>
+              <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">IP Address</p>
+              <p className="text-[13px] font-medium text-gray-700 font-mono">{log.ipAddress ?? "—"}</p>
+            </div>
+          </div>
+
+          {/* Before / After diff */}
+          <div>
+            <h3 className="text-[13px] font-bold text-gray-700 mb-1 flex items-center gap-2">
+              Change Diff
+              {log.action === "CREATE" && (
+                <span className="text-[11px] font-medium text-gray-400">(no before — record was created)</span>
+              )}
+              {log.action === "DELETE" && (
+                <span className="text-[11px] font-medium text-gray-400">(no after — record was deleted)</span>
+              )}
+            </h3>
+            <div className="rounded-[12px] border border-gray-100 overflow-hidden">
+              <DiffTable before={log.before} after={log.after} />
+            </div>
+          </div>
+
+          {/* User agent */}
+          {log.userAgent && (
+            <div>
+              <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">User Agent</p>
+              <p className="text-[11px] text-gray-500 font-mono break-all">{log.userAgent}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/auditLogs/components/AuditLogsList.tsx

@@ -0,0 +1,318 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  MagnifyingGlassIcon
+} from "@phosphor-icons/react";
+import {
+  CustomTable,
+  CustomInput,
+  CustomDropdown,
+  CustomStatus,
+  Skeleton,
+} from "../../../components/custom";
+import type { Column } from "../../../components/custom/CustomTable";
+import type { AuditLog, AuditLogFilters } from "../AuditLogsTypes";
+import {
+  AUDIT_MODULE_LABELS,
+  AUDIT_ACTION_VARIANTS,
+} from "../AuditLogsTypes";
+import { getAuditLogs } from "../AuditLogsApi";
+import AuditLogDetail from "./AuditLogDetail";
+
+const PAGE_SIZE = 20;
+
+function HeaderLabel({ text }: { text: string }) {
+  return (
+    <span className="text-[13px] font-semibold text-[#6C766D] tracking-[0px]">
+      {text}
+    </span>
+  );
+}
+
+function PrimaryText({ text }: { text: string }) {
+  return (
+    <div className="text-[13px] font-semibold text-[#0F172B] leading-[18px]">
+      {text}
+    </div>
+  );
+}
+
+function SecondaryText({ text }: { text: string }) {
+  return (
+    <div className="text-[12px] font-medium text-[#6C766D] leading-[16px] mt-0.5">
+      {text}
+    </div>
+  );
+}
+
+const MODULE_OPTIONS = [
+  { label: "All Modules", value: "" },
+  { label: "Policy Engine", value: "policy-engine" },
+  { label: "Recovery Incident", value: "recovery-incident" },
+  { label: "Cohort", value: "cohort" },
+  { label: "Master Data", value: "master-data" },
+];
+
+const ACTION_OPTIONS = [
+  { label: "All Actions", value: "" },
+  { label: "Create", value: "CREATE" },
+  { label: "Update", value: "UPDATE" },
+  { label: "Delete", value: "DELETE" },
+  { label: "Status Change", value: "STATUS_CHANGE" },
+];
+
+export default function AuditLogsList() {
+  const [logs, setLogs] = useState<AuditLog[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedLog, setSelectedLog] = useState<AuditLog | null>(null);
+
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const [totalPages, setTotalPages] = useState(1);
+
+  // Filters
+  const [search, setSearch] = useState("");
+  const [moduleFilter, setModuleFilter] = useState("");
+  const [actionFilter, setActionFilter] = useState("");
+
+  // ─── Fetch ─────────────────────────────────────────────────────────────────
+
+  const fetchLogs = useCallback(
+    async (page: number) => {
+      setLoading(true);
+      try {
+        const filters: AuditLogFilters = {
+          page,
+          limit: PAGE_SIZE,
+          module: moduleFilter || undefined,
+          action: actionFilter || undefined,
+        };
+
+        const result = await getAuditLogs(filters);
+
+        // Client-side search on entityLabel / entityId
+        const filtered = search
+          ? result.data.filter(
+              (l) =>
+                l.entityLabel?.toLowerCase().includes(search.toLowerCase()) ||
+                l.entityId?.toLowerCase().includes(search.toLowerCase()) ||
+                l.module?.toLowerCase().includes(search.toLowerCase())
+            )
+          : result.data;
+
+        setLogs(filtered);
+        setTotalItems(result.total);
+        setTotalPages(result.totalPages);
+      } catch (err) {
+        console.error("Failed to fetch audit logs", err);
+        setLogs([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [moduleFilter, actionFilter, search]
+  );
+
+  useEffect(() => {
+    fetchLogs(currentPage);
+  }, [currentPage, moduleFilter, actionFilter, fetchLogs]);
+
+  // Reset to page 1 when filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [moduleFilter, actionFilter, search]);
+
+  // ─── Columns ────────────────────────────────────────────────────────────────
+
+  const columns: Column<AuditLog>[] = [
+    {
+      header: <HeaderLabel text="Timestamp" />,
+      accessor: (row) => (
+        <div>
+          <PrimaryText
+            text={new Date(row.createdAt).toLocaleDateString(undefined, {
+              day: "2-digit",
+              month: "short",
+              year: "numeric",
+            })}
+          />
+          <SecondaryText
+            text={new Date(row.createdAt).toLocaleTimeString(undefined, {
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit",
+            })}
+          />
+        </div>
+      ),
+    },
+    {
+      header: <HeaderLabel text="Module" />,
+      accessor: (row) => (
+        <PrimaryText text={AUDIT_MODULE_LABELS[row.module] ?? row.module} />
+      ),
+    },
+    {
+      header: <HeaderLabel text="Action" />,
+      accessor: (row) => (
+        <CustomStatus
+          status={row.action}
+          variant={AUDIT_ACTION_VARIANTS[row.action] ?? "neutral"}
+        />
+      ),
+    },
+    {
+      header: <HeaderLabel text="Entity" />,
+      accessor: (row) => (
+        <div>
+          <PrimaryText text={row.entityLabel ?? "—"} />
+          {row.entityId && (
+            <SecondaryText text={row.entityId.slice(0, 8) + "…"} />
+          )}
+        </div>
+      ),
+    },
+    {
+      header: <HeaderLabel text="Performed By" />,
+      accessor: (row) => (
+        <PrimaryText text={row.performedBy ?? "—"} />
+      ),
+    },
+    {
+      header: <HeaderLabel text="IP" />,
+      accessor: (row) => (
+        <span className="text-[12px] font-mono text-gray-500">
+          {row.ipAddress ?? "—"}
+        </span>
+      ),
+    },
+    {
+      header: <HeaderLabel text="Changes" />,
+      accessor: (row) => {
+        if (!row.before && !row.after) return null;
+        const changedFields = Object.keys({
+          ...row.before,
+          ...row.after,
+        }).filter(
+          (k) =>
+            JSON.stringify((row.before ?? {})[k]) !==
+            JSON.stringify((row.after ?? {})[k])
+        ).length;
+        return (
+          <span className="text-[12px] font-semibold text-gray-500">
+            {row.action === "CREATE"
+              ? "New record"
+              : row.action === "DELETE"
+              ? "Deleted"
+              : `${changedFields} field${changedFields !== 1 ? "s" : ""}`}
+          </span>
+        );
+      },
+    },
+  ];
+
+  // ─── Loading skeleton ───────────────────────────────────────────────────────
+
+  if (loading) {
+    return (
+      <div className="w-full flex flex-col bg-white rounded-[20px] shadow-sm border border-gray-100 overflow-hidden">
+        <div className="flex items-center justify-between p-4 border-b border-gray-100">
+          <Skeleton width={320} height={36} />
+          <div className="flex items-center gap-3">
+            <Skeleton width={160} height={36} />
+            <Skeleton width={160} height={36} />
+          </div>
+        </div>
+        <div className="p-6 flex flex-col gap-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <Skeleton key={i} height={52} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // ─── Render ─────────────────────────────────────────────────────────────────
+
+  const startIndex = totalItems > 0 ? (currentPage - 1) * PAGE_SIZE + 1 : 0;
+  const endIndex = Math.min(currentPage * PAGE_SIZE, totalItems);
+
+  return (
+    <div className="w-full flex flex-col gap-6">
+      {/* Summary strip */}
+      <div className="flex gap-4">
+        {[
+          { label: "Total Events", value: totalItems.toLocaleString(), color: "text-gray-900" },
+          { label: "Creates", value: logs.filter((l) => l.action === "CREATE").length, color: "text-[#1B9869]" },
+          { label: "Updates", value: logs.filter((l) => l.action === "UPDATE").length, color: "text-blue-500" },
+          { label: "Deletes", value: logs.filter((l) => l.action === "DELETE").length, color: "text-red-500" },
+        ].map((s) => (
+          <div
+            key={s.label}
+            className="bg-[#F8F9FA] rounded-[16px] p-5 flex-1 flex flex-col gap-1"
+          >
+            <span className="text-[13px] font-semibold text-gray-500">{s.label}</span>
+            <span className={`text-[28px] font-bold leading-none ${s.color}`}>
+              {s.value}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Table */}
+      <CustomTable<AuditLog>
+        columns={columns}
+        data={logs}
+        leftHeaderActions={
+          <div className="w-[300px]">
+            <CustomInput
+              placeholder="Search entity, module…"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftIcon={<MagnifyingGlassIcon size={16} />}
+              className="!bg-[#F3F6F5] !rounded-[10px] !h-[40px] !border !border-[#E5E7EB]"
+              containerClassName="!gap-0"
+            />
+          </div>
+        }
+        rightHeaderActions={
+          <>
+            <div className="w-[180px]">
+              <CustomDropdown
+                placeholder="All Modules"
+                value={moduleFilter}
+                onChange={(v) => setModuleFilter(v as string)}
+                options={MODULE_OPTIONS}
+              />
+            </div>
+            <div className="w-[160px]">
+              <CustomDropdown
+                placeholder="All Actions"
+                value={actionFilter}
+                onChange={(v) => setActionFilter(v as string)}
+                options={ACTION_OPTIONS}
+              />
+            </div>
+          </>
+        }
+        currentPage={currentPage}
+        totalPages={totalPages}
+        totalItems={totalItems}
+        startIndex={startIndex}
+        endIndex={endIndex}
+        onPageChange={setCurrentPage}
+        itemName="Events"
+        onRowClick={(row) => setSelectedLog(row)}
+        rowClassName={() =>
+          "bg-[#F9FAFB] border-transparent cursor-pointer hover:bg-[#F3F4F6]"
+        }
+      />
+
+      {/* Detail side panel */}
+      <AuditLogDetail
+        log={selectedLog}
+        onClose={() => setSelectedLog(null)}
+      />
+    </div>
+  );
+}

src/layout/AppSidebar.tsx

@@ -23,7 +23,7 @@ const NAV_ITEMS = [
   { label: "Policy Engine", path: "/policy-engine", icon: ShieldCheckIcon },
   { label: "Action Builder", path: "/action-builder", icon: LightningIcon },
   { label: "Configuration", path: "/config", icon: GearIcon },
-  { label: "Audit Logs", path: "/audit", icon: ClockCounterClockwiseIcon },
+  { label: "Audit Logs", path: "/audit-logs", icon: ClockCounterClockwiseIcon },
 ];
 
 interface AppSidebarProps {