diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 3e1becc9..3556e2f5 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -20,7 +20,7 @@ const AdminUsers = lazy(() => import("@/pages/Admin/Users"));
const AdminInvites = lazy(() => import("@/pages/Admin/Invitations"));
const AdminWorkspaces = lazy(() => import("@/pages/Admin/Workspaces"));
const AdminSystem = lazy(() => import("@/pages/Admin/System"));
-const AdminLogs = lazy(() => import("@/pages/Admin/Logs"));
+const AdminLogs = lazy(() => import("@/pages/Admin/Logging"));
const GeneralChats = lazy(() => import("@/pages/GeneralSettings/Chats"));
const GeneralAppearance = lazy(
() => import("@/pages/GeneralSettings/Appearance")
diff --git a/frontend/src/pages/Admin/Logging/LogRow/index.jsx b/frontend/src/pages/Admin/Logging/LogRow/index.jsx
new file mode 100644
index 00000000..cb7a9d33
--- /dev/null
+++ b/frontend/src/pages/Admin/Logging/LogRow/index.jsx
@@ -0,0 +1,62 @@
+import { CaretDown } from "@phosphor-icons/react";
+import { useState } from "react";
+
+export default function LogRow({ log }) {
+ const [expanded, setExpanded] = useState(false);
+
+ const handleRowClick = () => {
+ if (log.metadata !== "{}") {
+ setExpanded(!expanded);
+ }
+ };
+
+ return (
+ <>
+
+
+ {log.id}
+ |
+
+
+ {log.event}
+
+ |
+
+ {log.user.username}
+ |
+
+ {log.occurredAt}
+ |
+ {log.metadata !== "{}" && (
+
+
+ |
+ )}
+
+ {expanded && (
+
+
+ Event Metadata
+ |
+
+
+
+ {JSON.stringify(JSON.parse(log.metadata), null, 2)}
+
+
+ |
+
+ )}
+ >
+ );
+}
diff --git a/frontend/src/pages/Admin/Logging/index.jsx b/frontend/src/pages/Admin/Logging/index.jsx
new file mode 100644
index 00000000..ad9ed06b
--- /dev/null
+++ b/frontend/src/pages/Admin/Logging/index.jsx
@@ -0,0 +1,119 @@
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import useQuery from "@/hooks/useQuery";
+import System from "@/models/system";
+import { useEffect, useState } from "react";
+import { isMobile } from "react-device-detect";
+import * as Skeleton from "react-loading-skeleton";
+import LogRow from "./LogRow";
+
+export default function AdminLogs() {
+ return (
+
+ {!isMobile &&
}
+
+ {isMobile &&
}
+
+
+
+
+ View all logs and events happening on this instance.
+
+
+
+
+
+
+ );
+}
+
+function ChatsContainer() {
+ const query = useQuery();
+ const [loading, setLoading] = useState(true);
+ // const [chats, setChats] = useState([]);
+ const [logs, setLogs] = useState([]);
+ const [offset, setOffset] = useState(Number(query.get("offset") || 0));
+ const [canNext, setCanNext] = useState(false);
+
+ const handlePrevious = () => {
+ setOffset(Math.max(offset - 1, 0));
+ };
+ const handleNext = () => {
+ setOffset(offset + 1);
+ };
+
+ useEffect(() => {
+ async function fetchLogs() {
+ const { logs: _logs, hasPages = false } = await System.logs(offset);
+ console.log(_logs);
+ setLogs(_logs);
+ setCanNext(hasPages);
+ setLoading(false);
+ }
+ fetchLogs();
+ }, [offset]);
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ return (
+ <>
+
+
+
+
+ Id
+ |
+
+ Event Type
+ |
+
+ User
+ |
+
+ Occurred At
+ |
+
+ {" "}
+ |
+
+
+
+ {!!logs && logs.map((log) => )}
+
+
+
+
+
+
+ >
+ );
+}