review
This commit is contained in:
parent
b173b47925
commit
66bc4c5a45
GPG key ID:
883EDBAA726BD96C
10 changed files with 367 additions and 320 deletions
|
|
@ -1,9 +1,10 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAuth, Permission } from "../auth-context";
|
||||
import { API_URL } from "../config";
|
||||
import { sharedStyles } from "../styles/shared";
|
||||
|
||||
interface CounterRecord {
|
||||
id: number;
|
||||
|
|
@ -33,6 +34,8 @@ interface PaginatedResponse<T> {
|
|||
export default function AuditPage() {
|
||||
const [counterData, setCounterData] = useState<PaginatedResponse<CounterRecord> | null>(null);
|
||||
const [sumData, setSumData] = useState<PaginatedResponse<SumRecord> | null>(null);
|
||||
const [counterError, setCounterError] = useState<string | null>(null);
|
||||
const [sumError, setSumError] = useState<string | null>(null);
|
||||
const [counterPage, setCounterPage] = useState(1);
|
||||
const [sumPage, setSumPage] = useState(1);
|
||||
const { user, isLoading, logout, hasPermission } = useAuth();
|
||||
|
|
@ -50,41 +53,51 @@ export default function AuditPage() {
|
|||
}
|
||||
}, [isLoading, user, router, canViewAudit]);
|
||||
|
||||
const fetchCounterRecords = useCallback(async (page: number) => {
|
||||
setCounterError(null);
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/audit/counter?page=${page}&per_page=10`, {
|
||||
credentials: "include",
|
||||
});
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to load counter records");
|
||||
}
|
||||
const data = await res.json();
|
||||
setCounterData(data);
|
||||
} catch (err) {
|
||||
setCounterData(null);
|
||||
setCounterError(err instanceof Error ? err.message : "Failed to load counter records");
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchSumRecords = useCallback(async (page: number) => {
|
||||
setSumError(null);
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/audit/sum?page=${page}&per_page=10`, {
|
||||
credentials: "include",
|
||||
});
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to load sum records");
|
||||
}
|
||||
const data = await res.json();
|
||||
setSumData(data);
|
||||
} catch (err) {
|
||||
setSumData(null);
|
||||
setSumError(err instanceof Error ? err.message : "Failed to load sum records");
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (user && canViewAudit) {
|
||||
fetchCounterRecords(counterPage);
|
||||
}
|
||||
}, [user, counterPage, canViewAudit]);
|
||||
}, [user, counterPage, canViewAudit, fetchCounterRecords]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user && canViewAudit) {
|
||||
fetchSumRecords(sumPage);
|
||||
}
|
||||
}, [user, sumPage, canViewAudit]);
|
||||
|
||||
const fetchCounterRecords = async (page: number) => {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/audit/counter?page=${page}&per_page=10`, {
|
||||
credentials: "include",
|
||||
});
|
||||
const data = await res.json();
|
||||
setCounterData(data);
|
||||
} catch {
|
||||
setCounterData(null);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchSumRecords = async (page: number) => {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/audit/sum?page=${page}&per_page=10`, {
|
||||
credentials: "include",
|
||||
});
|
||||
const data = await res.json();
|
||||
setSumData(data);
|
||||
} catch {
|
||||
setSumData(null);
|
||||
}
|
||||
};
|
||||
}, [user, sumPage, canViewAudit, fetchSumRecords]);
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout();
|
||||
|
|
@ -142,7 +155,12 @@ export default function AuditPage() {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{counterData?.records.map((record) => (
|
||||
{counterError && (
|
||||
<tr>
|
||||
<td colSpan={4} style={styles.errorRow}>{counterError}</td>
|
||||
</tr>
|
||||
)}
|
||||
{!counterError && counterData?.records.map((record) => (
|
||||
<tr key={record.id} style={styles.tr}>
|
||||
<td style={styles.td}>{record.user_email}</td>
|
||||
<td style={styles.tdNum}>{record.value_before}</td>
|
||||
|
|
@ -150,7 +168,7 @@ export default function AuditPage() {
|
|||
<td style={styles.tdDate}>{formatDate(record.created_at)}</td>
|
||||
</tr>
|
||||
))}
|
||||
{(!counterData || counterData.records.length === 0) && (
|
||||
{!counterError && (!counterData || counterData.records.length === 0) && (
|
||||
<tr>
|
||||
<td colSpan={4} style={styles.emptyRow}>No records yet</td>
|
||||
</tr>
|
||||
|
|
@ -201,7 +219,12 @@ export default function AuditPage() {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sumData?.records.map((record) => (
|
||||
{sumError && (
|
||||
<tr>
|
||||
<td colSpan={5} style={styles.errorRow}>{sumError}</td>
|
||||
</tr>
|
||||
)}
|
||||
{!sumError && sumData?.records.map((record) => (
|
||||
<tr key={record.id} style={styles.tr}>
|
||||
<td style={styles.td}>{record.user_email}</td>
|
||||
<td style={styles.tdNum}>{record.a}</td>
|
||||
|
|
@ -210,7 +233,7 @@ export default function AuditPage() {
|
|||
<td style={styles.tdDate}>{formatDate(record.created_at)}</td>
|
||||
</tr>
|
||||
))}
|
||||
{(!sumData || sumData.records.length === 0) && (
|
||||
{!sumError && (!sumData || sumData.records.length === 0) && (
|
||||
<tr>
|
||||
<td colSpan={5} style={styles.emptyRow}>No records yet</td>
|
||||
</tr>
|
||||
|
|
@ -246,73 +269,8 @@ export default function AuditPage() {
|
|||
);
|
||||
}
|
||||
|
||||
const styles: Record<string, React.CSSProperties> = {
|
||||
main: {
|
||||
minHeight: "100vh",
|
||||
background: "linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #2d1b4e 100%)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
},
|
||||
loader: {
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
color: "rgba(255, 255, 255, 0.5)",
|
||||
fontSize: "1.125rem",
|
||||
},
|
||||
header: {
|
||||
padding: "1.5rem 2rem",
|
||||
borderBottom: "1px solid rgba(255, 255, 255, 0.06)",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
nav: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.75rem",
|
||||
},
|
||||
navLink: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
color: "rgba(255, 255, 255, 0.5)",
|
||||
fontSize: "0.875rem",
|
||||
textDecoration: "none",
|
||||
transition: "color 0.2s",
|
||||
},
|
||||
navDivider: {
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
fontSize: "0.75rem",
|
||||
},
|
||||
navCurrent: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
color: "#a78bfa",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: 600,
|
||||
},
|
||||
userInfo: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "1rem",
|
||||
},
|
||||
userEmail: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
color: "rgba(255, 255, 255, 0.6)",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
logoutBtn: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: 500,
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
borderRadius: "8px",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.2s",
|
||||
},
|
||||
const pageStyles: Record<string, React.CSSProperties> = {
|
||||
// Override content for audit-specific layout
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: "2rem",
|
||||
|
|
@ -401,6 +359,12 @@ const styles: Record<string, React.CSSProperties> = {
|
|||
color: "rgba(255, 255, 255, 0.3)",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
errorRow: {
|
||||
padding: "2rem 1rem",
|
||||
textAlign: "center",
|
||||
color: "#f87171",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
pagination: {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
|
|
@ -428,3 +392,5 @@ const styles: Record<string, React.CSSProperties> = {
|
|||
},
|
||||
};
|
||||
|
||||
const styles = { ...sharedStyles, ...pageStyles };
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue