reset admin dashboard
This commit is contained in:
chark1es
parent
b643ae531e
commit
aeda1094b5
2 changed files with 1 additions and 2785 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -1,254 +0,0 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { Authentication } from "../../../scripts/pocketbase/Authentication";
|
||||
import { Get } from "../../../scripts/pocketbase/Get";
|
||||
import { Collections } from "../../../schemas/pocketbase";
|
||||
import type { Log, User } from "../../../schemas/pocketbase";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
// Extend the Log type to include expand property
|
||||
interface ExtendedLog extends Log {
|
||||
expand?: {
|
||||
user?: User;
|
||||
};
|
||||
}
|
||||
|
||||
interface AdminSystemActivityProps {
|
||||
limit?: number;
|
||||
autoRefresh?: boolean;
|
||||
refreshInterval?: number;
|
||||
}
|
||||
|
||||
export default function AdminSystemActivity({
|
||||
limit = 10,
|
||||
autoRefresh = true,
|
||||
refreshInterval = 30000, // 30 seconds
|
||||
}: AdminSystemActivityProps) {
|
||||
const [logs, setLogs] = useState<ExtendedLog[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchLogs = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const auth = Authentication.getInstance();
|
||||
const get = Get.getInstance();
|
||||
|
||||
if (!auth.isAuthenticated()) {
|
||||
setError("Not authenticated");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`Fetching logs from collection: ${Collections.LOGS} with limit: ${limit}`);
|
||||
|
||||
// Fetch logs with user expansion
|
||||
const logsResponse = await get.getList<ExtendedLog>(
|
||||
Collections.LOGS,
|
||||
1,
|
||||
limit,
|
||||
"",
|
||||
"-created",
|
||||
{ expand: "user" }
|
||||
);
|
||||
|
||||
console.log(`Logs fetched: ${logsResponse.items.length} of ${logsResponse.totalItems} total`);
|
||||
|
||||
if (logsResponse.items.length === 0) {
|
||||
console.log("No logs found in the response");
|
||||
} else {
|
||||
console.log("First log:", JSON.stringify(logsResponse.items[0], null, 2));
|
||||
}
|
||||
|
||||
setLogs(logsResponse.items);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error("Error fetching logs:", err);
|
||||
setError(`Failed to load system logs: ${err instanceof Error ? err.message : String(err)}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Expose the refresh function to the window object
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
(window as any).refreshAdminSystemActivity = fetchLogs;
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
delete (window as any).refreshAdminSystemActivity;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Initial fetch
|
||||
console.log("AdminSystemActivity mounted, fetching logs...");
|
||||
fetchLogs();
|
||||
|
||||
// Set up auto-refresh if enabled
|
||||
let intervalId: number | undefined;
|
||||
if (autoRefresh && typeof window !== 'undefined') {
|
||||
intervalId = window.setInterval(fetchLogs, refreshInterval);
|
||||
}
|
||||
|
||||
// Cleanup interval on unmount
|
||||
return () => {
|
||||
if (intervalId !== undefined && typeof window !== 'undefined') {
|
||||
window.clearInterval(intervalId);
|
||||
}
|
||||
};
|
||||
}, [limit, autoRefresh, refreshInterval]);
|
||||
|
||||
// Format date to a readable format
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
|
||||
// Check if the date is today
|
||||
const today = new Date();
|
||||
const isToday = date.toDateString() === today.toDateString();
|
||||
|
||||
if (isToday) {
|
||||
// If today, show time only
|
||||
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
} else {
|
||||
// Otherwise show date and time
|
||||
return date.toLocaleString([], {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Get appropriate icon for log type
|
||||
const getLogTypeIcon = (type: string) => {
|
||||
switch (type.toLowerCase()) {
|
||||
case "login":
|
||||
return "heroicons:login";
|
||||
case "logout":
|
||||
return "heroicons:logout";
|
||||
case "create":
|
||||
return "heroicons:plus-circle";
|
||||
case "update":
|
||||
return "heroicons:pencil";
|
||||
case "delete":
|
||||
return "heroicons:trash";
|
||||
case "error":
|
||||
return "heroicons:exclamation-circle";
|
||||
default:
|
||||
return "heroicons:information-circle";
|
||||
}
|
||||
};
|
||||
|
||||
// Get appropriate color for log type
|
||||
const getLogTypeColor = (type: string) => {
|
||||
switch (type.toLowerCase()) {
|
||||
case "login":
|
||||
return "text-success";
|
||||
case "logout":
|
||||
return "text-info";
|
||||
case "create":
|
||||
return "text-primary";
|
||||
case "update":
|
||||
return "text-secondary";
|
||||
case "delete":
|
||||
return "text-error";
|
||||
case "error":
|
||||
return "text-error";
|
||||
default:
|
||||
return "text-base-content";
|
||||
}
|
||||
};
|
||||
|
||||
if (loading && logs.length === 0) {
|
||||
return (
|
||||
<div className="flex justify-center items-center p-4">
|
||||
<div className="loading loading-spinner loading-md"></div>
|
||||
<span className="ml-2">Loading system logs...</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="alert alert-error">
|
||||
<Icon icon="heroicons:exclamation-circle" className="h-5 w-5" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (logs.length === 0) {
|
||||
return (
|
||||
<div className="alert alert-info">
|
||||
<Icon icon="heroicons:information-circle" className="h-5 w-5" />
|
||||
<span>No system logs found. This could be because no logs have been created yet or because you don't have permission to view logs.</span>
|
||||
<button
|
||||
className="btn btn-sm btn-ghost ml-2"
|
||||
onClick={fetchLogs}
|
||||
>
|
||||
<Icon icon="heroicons:arrow-path" className="h-4 w-4 mr-1" />
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table table-zebra w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>User</th>
|
||||
<th>Action</th>
|
||||
<th>Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{logs.map((log) => (
|
||||
<tr key={log.id} className="hover:bg-base-200 transition-colors">
|
||||
<td className="text-sm whitespace-nowrap">
|
||||
{formatDate(log.created)}
|
||||
</td>
|
||||
<td>
|
||||
{log.expand?.user?.name || "System"}
|
||||
</td>
|
||||
<td>
|
||||
<div className="flex items-center gap-1">
|
||||
<Icon
|
||||
icon={getLogTypeIcon(log.type)}
|
||||
className={`h-4 w-4 ${getLogTypeColor(log.type)}`}
|
||||
/>
|
||||
<span className="capitalize">{log.type}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="max-w-md truncate">{log.message}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{loading && logs.length > 0 && (
|
||||
<div className="flex justify-center items-center p-2 text-sm text-base-content/70">
|
||||
<div className="loading loading-spinner loading-xs"></div>
|
||||
<span className="ml-2">Refreshing...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end mt-4">
|
||||
<button
|
||||
className="btn btn-sm btn-ghost"
|
||||
onClick={fetchLogs}
|
||||
disabled={loading}
|
||||
>
|
||||
<Icon icon="heroicons:arrow-path" className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue