From 10fc6285dd165ece583226ca6cea3c1e187a9744 Mon Sep 17 00:00:00 2001
From: kibin <juankibin@gmail.com>
Date: Wed, 1 Apr 2026 07:54:59 +0000
Subject: [PATCH] feat(260): add date range, entity type, action type filters

---
 app/(app)/audit-log/page.tsx | 75 +++++++++++++++++++++++++++++++++---
 1 file changed, 70 insertions(+), 5 deletions(-)

diff --git a/app/(app)/audit-log/page.tsx b/app/(app)/audit-log/page.tsx
index 0316ce1..be8c265 100644
--- a/app/(app)/audit-log/page.tsx
+++ b/app/(app)/audit-log/page.tsx
@@ -11,13 +11,29 @@ import { formatDateTime } from "@/lib/utils";
 import api from "@/lib/api";
 import type { AuditLog, PaginatedResponse } from "@/types";
 
+const ENTITY_TYPES = ["", "CLIENT", "INVOICE", "PAYMENT", "TICKET", "PLAN", "AREA", "USER", "SUBSCRIPTION", "LEAD", "REMITTANCE", "JOURNAL_ENTRY"];
+const ACTION_TYPES = ["", "CREATE", "UPDATE", "DELETE", "LOGIN", "LOGOUT", "ACTIVATE", "DEACTIVATE", "VOID", "RESOLVE", "CLOSE"];
+
 export default function AuditLogPage() {
   const [page, setPage] = useState(1);
+  const [dateFrom, setDateFrom] = useState("");
+  const [dateTo, setDateTo] = useState("");
+  const [entityType, setEntityType] = useState("");
+  const [actionType, setActionType] = useState("");
 
   const { data, isLoading, refetch } = useQuery<PaginatedResponse<AuditLog>>({
-    queryKey: ["audit-logs", page],
+    queryKey: ["audit-logs", page, dateFrom, dateTo, entityType, actionType],
     queryFn: async () => {
-      const res = await api.get<PaginatedResponse<AuditLog>>(`/api/v1/audit-logs?page=${page}&limit=50`);
+      const params = new URLSearchParams({ page: String(page), limit: "50" });
+      if (dateFrom) params.set("dateFrom", new Date(dateFrom).toISOString());
+      if (dateTo) {
+        const end = new Date(dateTo);
+        end.setHours(23, 59, 59, 999);
+        params.set("dateTo", end.toISOString());
+      }
+      if (entityType) params.set("entityType", entityType);
+      if (actionType) params.set("action", actionType);
+      const res = await api.get<PaginatedResponse<AuditLog>>(`/api/v1/audit-logs?${params}`);
       return res.data;
     },
   });
@@ -25,6 +41,16 @@ export default function AuditLogPage() {
   const logs = data?.data ?? [];
   const meta = data?.meta;
 
+  const clearFilters = () => {
+    setDateFrom("");
+    setDateTo("");
+    setEntityType("");
+    setActionType("");
+    setPage(1);
+  };
+
+  const hasFilters = dateFrom || dateTo || entityType || actionType;
+
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
@@ -33,13 +59,52 @@ export default function AuditLogPage() {
           <p className="text-sm text-gray-500">Track all system activity</p>
         </div>
         <Button size="sm" variant="outline" onClick={() => refetch()}>
-          <RefreshCw className="h-4 w-4" />
+          <RefreshCw className="h-4 w-4 mr-1" />
           Refresh
         </Button>
       </div>
 
+      {/* Filters */}
       <Card>
-        <CardHeader><CardTitle>Activity Log</CardTitle></CardHeader>
+        <CardContent className="py-4">
+          <div className="flex flex-wrap gap-3 items-end">
+            <div className="flex flex-col gap-1">
+              <label className="text-xs font-medium text-gray-500">From</label>
+              <input type="date" value={dateFrom}
+                onChange={e => { setDateFrom(e.target.value); setPage(1); }}
+                className="border rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-40" />
+            </div>
+            <div className="flex flex-col gap-1">
+              <label className="text-xs font-medium text-gray-500">To</label>
+              <input type="date" value={dateTo}
+                onChange={e => { setDateTo(e.target.value); setPage(1); }}
+                className="border rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-40" />
+            </div>
+            <div className="flex flex-col gap-1">
+              <label className="text-xs font-medium text-gray-500">Entity Type</label>
+              <select value={entityType}
+                onChange={e => { setEntityType(e.target.value); setPage(1); }}
+                className="border rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                {ENTITY_TYPES.map(e => <option key={e} value={e}>{e || "All Entities"}</option>)}
+              </select>
+            </div>
+            <div className="flex flex-col gap-1">
+              <label className="text-xs font-medium text-gray-500">Action</label>
+              <select value={actionType}
+                onChange={e => { setActionType(e.target.value); setPage(1); }}
+                className="border rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                {ACTION_TYPES.map(a => <option key={a} value={a}>{a || "All Actions"}</option>)}
+              </select>
+            </div>
+            {hasFilters && (
+              <Button size="sm" variant="outline" onClick={clearFilters}>Clear Filters</Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader><CardTitle>Activity Log {meta ? `(${meta.total} entries)` : ""}</CardTitle></CardHeader>
         <CardContent className="p-0">
           <Table>
             <TableHead>
@@ -61,7 +126,7 @@ export default function AuditLogPage() {
                   </TableRow>
                 ))
               ) : logs.length === 0 ? (
-                <EmptyState message="No audit logs yet" />
+                <EmptyState message="No audit logs found" />
               ) : (
                 logs.map((log) => (
                   <TableRow key={log.id}>