Replace SVGs with icons, restructure the table for CRUD operations across the project, standardize the application's display, and build a new template for the table's action buttons.
This commit is contained in:
m7amedez5511
@@ -1,25 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useReducer, useState } from "react";
|
||||
import { Alert, Spinner } from "@/src/Components/UI";
|
||||
import { Alert } from "@/src/Components/UI";
|
||||
import { getStoredToken } from "@/src/lib/auth";
|
||||
import { get } from "@/src/services/api";
|
||||
import Header from "@/src/Components/UI/Header";
|
||||
import { AuditTable } from "@/src/Components/audit/AuditTable";
|
||||
import { AuditDetailModal } from "@/src/Components/audit/AuditDetailsModel";
|
||||
import { AuditLog } from "@/src/types/audit";
|
||||
|
||||
// ── Types ──────────────────────────────────────────────────────────────────
|
||||
|
||||
interface AuditLog {
|
||||
id: string;
|
||||
action: string;
|
||||
module?: string | null;
|
||||
entityId?: string | null;
|
||||
userId?: string | null;
|
||||
userName?: string | null;
|
||||
ipAddress?: string | null;
|
||||
userAgent?: string | null;
|
||||
metadata?: Record<string, unknown> | null;
|
||||
createdAt: string;
|
||||
}
|
||||
// (AuditLog itself now lives in @/src/types/audit so AuditTable and
|
||||
// AuditDetailModal can both import it — same pattern as Driver/Order.)
|
||||
|
||||
// ── State / Reducer ────────────────────────────────────────────────────────
|
||||
|
||||
@@ -58,44 +50,6 @@ function reducer(s: State, a: Action): State {
|
||||
}
|
||||
}
|
||||
|
||||
// ── Action badge ───────────────────────────────────────────────────────────
|
||||
|
||||
const ACTION_COLORS: Record<
|
||||
string,
|
||||
{ bg: string; color: string; border: string }
|
||||
> = {
|
||||
CREATE: { bg: "#DCFCE7", color: "#166534", border: "#BBF7D0" },
|
||||
UPDATE: { bg: "#EFF6FF", color: "#1D4ED8", border: "#BFDBFE" },
|
||||
DELETE: { bg: "#FEF2F2", color: "#DC2626", border: "#FECACA" },
|
||||
LOGIN: { bg: "#F5F3FF", color: "#5B21B6", border: "#DDD6FE" },
|
||||
LOGOUT: { bg: "#F1F5F9", color: "#475569", border: "#E2E8F0" },
|
||||
};
|
||||
|
||||
function ActionBadge({ action }: { action: string }) {
|
||||
const upper = action?.toUpperCase() ?? "";
|
||||
const key =
|
||||
Object.keys(ACTION_COLORS).find((k) => upper.includes(k)) ?? "CREATE";
|
||||
const cfg = ACTION_COLORS[key];
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
borderRadius: "var(--radius-full)",
|
||||
border: `1px solid ${cfg.border}`,
|
||||
background: cfg.bg,
|
||||
padding: "0.2rem 0.625rem",
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
color: cfg.color,
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{action}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Page ───────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function AuditPage() {
|
||||
@@ -109,12 +63,18 @@ export default function AuditPage() {
|
||||
const [page, setPage] = useState(1);
|
||||
const [search, setSearch] = useState("");
|
||||
const [module, setModule] = useState("");
|
||||
const [selectedLog, setSelectedLog] = useState<AuditLog | null>(null);
|
||||
|
||||
const loadLogs = useCallback(async (p: number, q: string, mod: string) => {
|
||||
const loadLogs = useCallback(async (q: string, mod: string) => {
|
||||
dispatch({ type: "LOAD_START" });
|
||||
try {
|
||||
const token = getStoredToken();
|
||||
const params = new URLSearchParams({ page: String(p), limit: "15" });
|
||||
// Show ALL matching logs at once instead of paginating — a high
|
||||
// limit stands in for "no limit" against an endpoint that still
|
||||
// expects page/limit params. If the backend enforces its own hard
|
||||
// cap below this number, ask it to expose an explicit "all" mode
|
||||
// instead of relying on this number being high enough.
|
||||
const params = new URLSearchParams({ page: "1", limit: "1000" });
|
||||
if (q) params.set("search", q);
|
||||
if (mod) params.set("module", mod);
|
||||
const res = await get<{
|
||||
@@ -148,32 +108,14 @@ export default function AuditPage() {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadLogs(page, search, module);
|
||||
}, [page, search, module, loadLogs]);
|
||||
|
||||
const cardStyle: React.CSSProperties = {
|
||||
borderRadius: "var(--radius-xl)",
|
||||
border: "1px solid var(--color-border)",
|
||||
background: "var(--color-surface)",
|
||||
overflow: "hidden",
|
||||
boxShadow: "var(--shadow-card)",
|
||||
};
|
||||
|
||||
const thStyle: React.CSSProperties = {
|
||||
padding: "0.75rem 1.5rem",
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.2em",
|
||||
color: "var(--color-text-muted)",
|
||||
background: "var(--color-surface-muted)",
|
||||
borderBottom: "1px solid var(--color-border)",
|
||||
};
|
||||
loadLogs(search, module);
|
||||
}, [search, module, loadLogs]);
|
||||
|
||||
return (
|
||||
<section
|
||||
style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}
|
||||
>
|
||||
<>
|
||||
<section
|
||||
style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}
|
||||
>
|
||||
{/* Header */}
|
||||
<Header
|
||||
state={state}
|
||||
@@ -197,168 +139,23 @@ export default function AuditPage() {
|
||||
)}
|
||||
|
||||
{/* Table */}
|
||||
<div style={cardStyle}>
|
||||
<div
|
||||
dir="rtl"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1.5fr 1fr 1fr 1.5fr 1fr",
|
||||
...thStyle,
|
||||
}}
|
||||
>
|
||||
<span>الإجراء</span>
|
||||
<span>الوحدة</span>
|
||||
<span>المستخدم</span>
|
||||
<span>عنوان IP</span>
|
||||
<span style={{ textAlign: "center" }}>الوقت</span>
|
||||
</div>
|
||||
|
||||
{state.loading ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 12,
|
||||
padding: "4rem 0",
|
||||
color: "var(--color-text-muted)",
|
||||
}}
|
||||
>
|
||||
<Spinner size="sm" className="text-blue-600" />
|
||||
<span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
|
||||
</div>
|
||||
) : state.logs.length === 0 ? (
|
||||
<p
|
||||
style={{
|
||||
textAlign: "center",
|
||||
padding: "4rem 0",
|
||||
fontSize: 13,
|
||||
color: "var(--color-text-muted)",
|
||||
}}
|
||||
>
|
||||
لا توجد سجلات مطابقة
|
||||
</p>
|
||||
) : (
|
||||
<ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
|
||||
{state.logs.map((log, i) => (
|
||||
<li
|
||||
key={log.id}
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1.5fr 1fr 1fr 1.5fr 1fr",
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
padding: "0.875rem 1.5rem",
|
||||
borderBottom: "1px solid var(--color-border)",
|
||||
background:
|
||||
i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent",
|
||||
fontSize: 13,
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<ActionBadge action={log.action} />
|
||||
{log.entityId && (
|
||||
<p
|
||||
style={{
|
||||
marginTop: 2,
|
||||
fontFamily: "var(--font-mono)",
|
||||
fontSize: 10,
|
||||
color: "var(--color-text-muted)",
|
||||
}}
|
||||
>
|
||||
{log.entityId.slice(0, 12)}…
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span style={{ color: "var(--color-text-secondary)" }}>
|
||||
{log.module ?? "—"}
|
||||
</span>
|
||||
<span style={{ color: "var(--color-text-secondary)" }}>
|
||||
{log.userName ?? log.userId ?? "—"}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "var(--font-mono)",
|
||||
fontSize: 12,
|
||||
color: "var(--color-text-muted)",
|
||||
}}
|
||||
>
|
||||
{log.ipAddress ?? "—"}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
textAlign: "center",
|
||||
fontSize: 11,
|
||||
color: "var(--color-text-muted)",
|
||||
}}
|
||||
>
|
||||
{new Date(log.createdAt).toLocaleString("ar-SA", {
|
||||
dateStyle: "short",
|
||||
timeStyle: "short",
|
||||
})}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{state.pages > 1 && (
|
||||
<div
|
||||
dir="rtl"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
borderTop: "1px solid var(--color-border)",
|
||||
padding: "0.875rem 1.5rem",
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
|
||||
صفحة{" "}
|
||||
<strong style={{ color: "var(--color-text-primary)" }}>
|
||||
{page}
|
||||
</strong>{" "}
|
||||
من{" "}
|
||||
<strong style={{ color: "var(--color-text-primary)" }}>
|
||||
{state.pages}
|
||||
</strong>
|
||||
</span>
|
||||
<div style={{ display: "flex", gap: "0.5rem" }}>
|
||||
{[
|
||||
{
|
||||
label: "السابق",
|
||||
action: () => setPage((p) => Math.max(1, p - 1)),
|
||||
disabled: page === 1,
|
||||
},
|
||||
{
|
||||
label: "التالي",
|
||||
action: () => setPage((p) => Math.min(state.pages, p + 1)),
|
||||
disabled: page === state.pages,
|
||||
},
|
||||
].map((btn) => (
|
||||
<button
|
||||
key={btn.label}
|
||||
onClick={btn.action}
|
||||
disabled={btn.disabled}
|
||||
style={{
|
||||
borderRadius: "var(--radius-lg)",
|
||||
border: "1px solid var(--color-border)",
|
||||
background: "var(--color-surface-muted)",
|
||||
padding: "0.375rem 0.875rem",
|
||||
fontSize: 12,
|
||||
color: "var(--color-text-secondary)",
|
||||
cursor: btn.disabled ? "not-allowed" : "pointer",
|
||||
opacity: btn.disabled ? 0.4 : 1,
|
||||
fontFamily: "var(--font-sans)",
|
||||
}}
|
||||
>
|
||||
{btn.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<AuditTable
|
||||
logs={state.logs}
|
||||
loading={state.loading}
|
||||
search={search}
|
||||
page={page}
|
||||
pages={state.pages}
|
||||
onPageChange={setPage}
|
||||
onRowClick={(log) => setSelectedLog(log)}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{selectedLog && (
|
||||
<AuditDetailModal
|
||||
log={selectedLog}
|
||||
onClose={() => setSelectedLog(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user