feat(logs): add workspace activity log page
This commit is contained in:
4
.gitignore
vendored
4
.gitignore
vendored
@@ -1,5 +1,7 @@
|
|||||||
# Logs
|
# Logs
|
||||||
logs
|
logs
|
||||||
|
!src/components/logs/
|
||||||
|
!src/components/logs/**
|
||||||
*.log
|
*.log
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
@@ -23,4 +25,4 @@ dist-ssr
|
|||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
|
|
||||||
.env
|
.env
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ import ProjectEdit from "./pages/ProjectEdit"
|
|||||||
import Tags from "./pages/Tags"
|
import Tags from "./pages/Tags"
|
||||||
import Reports from "./pages/Reports"
|
import Reports from "./pages/Reports"
|
||||||
import Timesheet from "./pages/Timesheet"
|
import Timesheet from "./pages/Timesheet"
|
||||||
|
import Logs from "./pages/Logs"
|
||||||
|
|
||||||
const MainLayout = () => {
|
const MainLayout = () => {
|
||||||
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
|
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
|
||||||
@@ -65,6 +66,7 @@ const router = createBrowserRouter([
|
|||||||
{ path: "/profile", element: <Profile /> },
|
{ path: "/profile", element: <Profile /> },
|
||||||
{ path: "/timesheet", element: <Timesheet /> },
|
{ path: "/timesheet", element: <Timesheet /> },
|
||||||
{ path: "/reports", element: <Reports /> },
|
{ path: "/reports", element: <Reports /> },
|
||||||
|
{ path: "/logs", element: <Logs /> },
|
||||||
{ path: "/tags", element: <Tags /> },
|
{ path: "/tags", element: <Tags /> },
|
||||||
{ path: "/workspaces", element: <Workspaces /> },
|
{ path: "/workspaces", element: <Workspaces /> },
|
||||||
{ path: "/workspaces/create", element: <CreateWorkspace /> },
|
{ path: "/workspaces/create", element: <CreateWorkspace /> },
|
||||||
|
|||||||
140
src/api/logs.ts
Normal file
140
src/api/logs.ts
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
import { authFetch } from "./client";
|
||||||
|
|
||||||
|
export type WorkspaceLogSection =
|
||||||
|
| "workspace"
|
||||||
|
| "workspace_members"
|
||||||
|
| "clients"
|
||||||
|
| "projects"
|
||||||
|
| "project_members"
|
||||||
|
| "tags"
|
||||||
|
| "time_entries"
|
||||||
|
| "rates"
|
||||||
|
| "report_exports";
|
||||||
|
|
||||||
|
export type WorkspaceLogEvent =
|
||||||
|
| "create"
|
||||||
|
| "update"
|
||||||
|
| "delete"
|
||||||
|
| "restore"
|
||||||
|
| "archive"
|
||||||
|
| "unarchive"
|
||||||
|
| "activate"
|
||||||
|
| "deactivate";
|
||||||
|
|
||||||
|
export interface WorkspaceLogActor {
|
||||||
|
id: string;
|
||||||
|
full_name: string;
|
||||||
|
mobile?: string | null;
|
||||||
|
profile_picture?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkspaceLogTarget {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
section: WorkspaceLogSection;
|
||||||
|
workspace_id: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkspaceLogPreviewChange {
|
||||||
|
field: string;
|
||||||
|
label: string;
|
||||||
|
summary: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkspaceLogItem {
|
||||||
|
id: number;
|
||||||
|
timestamp: string;
|
||||||
|
section: WorkspaceLogSection;
|
||||||
|
model: string | null;
|
||||||
|
event: WorkspaceLogEvent;
|
||||||
|
audit_action: string;
|
||||||
|
actor: WorkspaceLogActor | null;
|
||||||
|
target: WorkspaceLogTarget;
|
||||||
|
changed_fields: string[];
|
||||||
|
preview_changes: WorkspaceLogPreviewChange[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkspaceLogChangeRow {
|
||||||
|
field: string;
|
||||||
|
label: string;
|
||||||
|
change_type: "field" | "m2m";
|
||||||
|
operation: string;
|
||||||
|
old_value: string | null;
|
||||||
|
new_value: string | null;
|
||||||
|
summary: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkspaceLogDetail extends WorkspaceLogItem {
|
||||||
|
remote_addr?: string | null;
|
||||||
|
changes: WorkspaceLogChangeRow[];
|
||||||
|
raw_changes: Record<string, unknown>;
|
||||||
|
serialized_snapshot?: unknown;
|
||||||
|
additional_data: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WorkspaceLogFilters {
|
||||||
|
workspace: string;
|
||||||
|
section?: WorkspaceLogSection | "";
|
||||||
|
actor?: string;
|
||||||
|
event?: WorkspaceLogEvent | "";
|
||||||
|
search?: string;
|
||||||
|
from?: string;
|
||||||
|
to?: string;
|
||||||
|
ordering?: "-timestamp" | "timestamp";
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PaginatedResponse<T> {
|
||||||
|
count: number;
|
||||||
|
next: string | null;
|
||||||
|
previous: string | null;
|
||||||
|
results: T[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const toQueryString = (params: Record<string, string | number | undefined>) => {
|
||||||
|
const query = new URLSearchParams();
|
||||||
|
Object.entries(params).forEach(([key, value]) => {
|
||||||
|
if (value !== undefined && value !== null && value !== "") {
|
||||||
|
query.set(key, String(value));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return query.toString();
|
||||||
|
};
|
||||||
|
|
||||||
|
export const listWorkspaceLogs = async (
|
||||||
|
filters: WorkspaceLogFilters,
|
||||||
|
pagination?: { limit?: number; offset?: number },
|
||||||
|
): Promise<PaginatedResponse<WorkspaceLogItem>> => {
|
||||||
|
const query = toQueryString({
|
||||||
|
workspace: filters.workspace,
|
||||||
|
section: filters.section || undefined,
|
||||||
|
actor: filters.actor || undefined,
|
||||||
|
event: filters.event || undefined,
|
||||||
|
search: filters.search || undefined,
|
||||||
|
from: filters.from || undefined,
|
||||||
|
to: filters.to || undefined,
|
||||||
|
ordering: filters.ordering || "-timestamp",
|
||||||
|
limit: pagination?.limit,
|
||||||
|
offset: pagination?.offset,
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await authFetch(`/api/logs/${query ? `?${query}` : ""}`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Failed to fetch workspace logs.");
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
return {
|
||||||
|
count: data.count || 0,
|
||||||
|
next: data.next || null,
|
||||||
|
previous: data.previous || null,
|
||||||
|
results: data.results || [],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getWorkspaceLogDetail = async (id: number): Promise<WorkspaceLogDetail> => {
|
||||||
|
const response = await authFetch(`/api/logs/${id}/`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Failed to fetch workspace log detail.");
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
};
|
||||||
@@ -11,9 +11,12 @@ import {
|
|||||||
Briefcase,
|
Briefcase,
|
||||||
ChartColumn,
|
ChartColumn,
|
||||||
Clock3,
|
Clock3,
|
||||||
|
History,
|
||||||
Tags,
|
Tags,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
import { useWorkspace } from '../context/WorkspaceContext';
|
||||||
import { useTranslation } from '../hooks/useTranslation';
|
import { useTranslation } from '../hooks/useTranslation';
|
||||||
|
import { canWorkspace, WORKSPACE_LOGS_VIEW } from '../lib/permissions';
|
||||||
|
|
||||||
type SidebarProps = {
|
type SidebarProps = {
|
||||||
mobileOpen?: boolean;
|
mobileOpen?: boolean;
|
||||||
@@ -24,7 +27,9 @@ export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) =>
|
|||||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||||
|
|
||||||
const { t, lang } = useTranslation();
|
const { t, lang } = useTranslation();
|
||||||
|
const { activeWorkspace } = useWorkspace();
|
||||||
const isRtl = lang === 'fa';
|
const isRtl = lang === 'fa';
|
||||||
|
const canViewLogs = canWorkspace(activeWorkspace?.my_role, WORKSPACE_LOGS_VIEW);
|
||||||
|
|
||||||
const ToggleIcon = isRtl
|
const ToggleIcon = isRtl
|
||||||
? (isCollapsed ? PanelRightOpen : PanelRightClose)
|
? (isCollapsed ? PanelRightOpen : PanelRightClose)
|
||||||
@@ -61,6 +66,15 @@ export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) =>
|
|||||||
icon: ChartColumn,
|
icon: ChartColumn,
|
||||||
label: t.sidebar?.reports || 'Reports'
|
label: t.sidebar?.reports || 'Reports'
|
||||||
},
|
},
|
||||||
|
...(canViewLogs
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
path: '/logs',
|
||||||
|
icon: History,
|
||||||
|
label: t.sidebar?.logs || 'Logs',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []),
|
||||||
];
|
];
|
||||||
|
|
||||||
const renderNavItems = (mobile = false) =>
|
const renderNavItems = (mobile = false) =>
|
||||||
|
|||||||
182
src/components/logs/LogDetailsPanel.tsx
Normal file
182
src/components/logs/LogDetailsPanel.tsx
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
import { Clock3, Globe2, User2, X } from "lucide-react";
|
||||||
|
|
||||||
|
import type { WorkspaceLogDetail } from "../../api/logs";
|
||||||
|
import { API_BASE_URL } from "../../config/constants";
|
||||||
|
import { useTranslation } from "../../hooks/useTranslation";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
|
||||||
|
const resolveImageUrl = (value?: string | null) => {
|
||||||
|
if (!value) return null;
|
||||||
|
if (/^https?:\/\//i.test(value)) return value;
|
||||||
|
return `${API_BASE_URL.replace(/\/+$/, "")}/${value.replace(/^\/+/, "")}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function LogDetailsPanel({
|
||||||
|
open,
|
||||||
|
log,
|
||||||
|
isLoading,
|
||||||
|
onClose,
|
||||||
|
}: {
|
||||||
|
open: boolean;
|
||||||
|
log: WorkspaceLogDetail | null;
|
||||||
|
isLoading: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
}) {
|
||||||
|
const { t, lang } = useTranslation();
|
||||||
|
|
||||||
|
if (!open) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatTimestamp = (value?: string | null) => {
|
||||||
|
if (!value) return "-";
|
||||||
|
return new Intl.DateTimeFormat(lang === "fa" ? "fa-IR-u-ca-persian" : "en-US", {
|
||||||
|
year: "numeric",
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
}).format(new Date(value));
|
||||||
|
};
|
||||||
|
|
||||||
|
const actorName = log?.actor?.full_name || t.logs?.unknownActor || "Unknown actor";
|
||||||
|
const actorAvatar = resolveImageUrl(log?.actor?.profile_picture);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-[80] flex items-end bg-slate-950/40 backdrop-blur-[2px] lg:items-stretch lg:justify-end">
|
||||||
|
<button type="button" className="absolute inset-0 cursor-pointer" onClick={onClose} aria-label="Close log details" />
|
||||||
|
<aside className="relative z-10 flex max-h-[88vh] w-full flex-col rounded-t-[2rem] bg-white shadow-2xl dark:bg-slate-950 lg:h-full lg:max-h-none lg:w-[34rem] lg:rounded-none lg:border-l lg:border-slate-800">
|
||||||
|
<div className="flex items-center justify-between border-b border-slate-200 px-5 py-4 dark:border-slate-800">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold text-slate-900 dark:text-white">
|
||||||
|
{t.logs?.detailsTitle || "Activity details"}
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.detailsHint || "Review the exact values that changed in this action."}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button type="button" variant="ghost" size="icon" onClick={onClose} className="rounded-xl">
|
||||||
|
<X className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-y-auto px-5 py-5">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-500 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400">
|
||||||
|
{t.logs?.loadingDetails || "Loading details..."}
|
||||||
|
</div>
|
||||||
|
) : !log ? (
|
||||||
|
<div className="rounded-2xl border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">
|
||||||
|
{t.logs?.selectLogHint || "Select a log entry to see its details."}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-5">
|
||||||
|
<div className="rounded-3xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-slate-200 text-base font-semibold text-slate-700 dark:bg-slate-800 dark:text-slate-200">
|
||||||
|
{actorAvatar ? (
|
||||||
|
<img src={actorAvatar} alt={actorName} className="h-full w-full object-cover" />
|
||||||
|
) : (
|
||||||
|
<span>{actorName.trim().charAt(0).toUpperCase()}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="text-base font-semibold text-slate-900 dark:text-white">{actorName}</p>
|
||||||
|
<div className="mt-2 grid gap-2 text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<User2 className="h-4 w-4" />
|
||||||
|
<span>{log.actor?.mobile || "-"}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Clock3 className="h-4 w-4" />
|
||||||
|
<span>{formatTimestamp(log.timestamp)}</span>
|
||||||
|
</div>
|
||||||
|
{log.remote_addr ? (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Globe2 className="h-4 w-4" />
|
||||||
|
<span>{log.remote_addr}</span>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
<div className="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.target || "Target"}
|
||||||
|
</p>
|
||||||
|
<p className="mt-2 text-sm font-semibold text-slate-900 dark:text-white">{log.target.name}</p>
|
||||||
|
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.sections?.[log.section] || log.section}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.event || "Event"}
|
||||||
|
</p>
|
||||||
|
<p className="mt-2 text-sm font-semibold text-slate-900 dark:text-white">
|
||||||
|
{t.logs?.events?.[log.event] || log.event}
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{log.audit_action}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-3xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<div className="border-b border-slate-100 px-5 py-4 dark:border-slate-800">
|
||||||
|
<h3 className="text-base font-semibold text-slate-900 dark:text-white">
|
||||||
|
{t.logs?.changesTitle || "Changes"}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
{log.changes.length ? (
|
||||||
|
<div className="divide-y divide-slate-100 dark:divide-slate-800">
|
||||||
|
{log.changes.map((change, index) => (
|
||||||
|
<div key={`${change.field}-${index}`} className="grid gap-3 px-5 py-4 md:grid-cols-[1.2fr_1fr_1fr]">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-slate-900 dark:text-white">{change.label}</p>
|
||||||
|
{/* <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">{change.summary}</p> */}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.previousValue || "Previous"}
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 break-words text-sm text-slate-700 dark:text-slate-300">
|
||||||
|
{change.old_value || "-"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.currentValue || "Current"}
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 break-words text-sm text-slate-700 dark:text-slate-300">
|
||||||
|
{change.new_value || "-"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="px-5 py-6 text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.noDetails || "No field-level details are available for this activity."}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{log.serialized_snapshot ? (
|
||||||
|
<details className="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<summary className="cursor-pointer text-sm font-semibold text-slate-900 dark:text-white">
|
||||||
|
{t.logs?.snapshot || "Serialized snapshot"}
|
||||||
|
</summary>
|
||||||
|
<pre className="mt-3 overflow-x-auto rounded-xl bg-slate-950 p-3 text-xs text-slate-100" dir="ltr">
|
||||||
|
{JSON.stringify(log.serialized_snapshot, null, 2)}
|
||||||
|
</pre>
|
||||||
|
</details>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
203
src/components/logs/LogsFeed.tsx
Normal file
203
src/components/logs/LogsFeed.tsx
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
import { Clock3, History, Sparkles } from "lucide-react";
|
||||||
|
|
||||||
|
import type { WorkspaceLogItem } from "../../api/logs";
|
||||||
|
import { API_BASE_URL } from "../../config/constants";
|
||||||
|
import { useTranslation } from "../../hooks/useTranslation";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
|
||||||
|
const eventBadgeStyles: Record<string, string> = {
|
||||||
|
create: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
|
||||||
|
update: "bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300",
|
||||||
|
delete: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300",
|
||||||
|
restore: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300",
|
||||||
|
archive: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
|
||||||
|
unarchive: "bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-300",
|
||||||
|
activate: "bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-300",
|
||||||
|
deactivate: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300",
|
||||||
|
};
|
||||||
|
|
||||||
|
const sectionBadgeStyles: Record<string, string> = {
|
||||||
|
workspace: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300",
|
||||||
|
workspace_members: "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300",
|
||||||
|
clients: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300",
|
||||||
|
projects: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
|
||||||
|
project_members: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300",
|
||||||
|
tags: "bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300",
|
||||||
|
time_entries: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
|
||||||
|
rates: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
|
||||||
|
report_exports: "bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-900/30 dark:text-fuchsia-300",
|
||||||
|
};
|
||||||
|
|
||||||
|
const resolveImageUrl = (value?: string | null) => {
|
||||||
|
if (!value) return null;
|
||||||
|
if (/^https?:\/\//i.test(value)) return value;
|
||||||
|
return `${API_BASE_URL.replace(/\/+$/, "")}/${value.replace(/^\/+/, "")}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function LogsFeed({
|
||||||
|
items,
|
||||||
|
total,
|
||||||
|
hasMore,
|
||||||
|
isLoading,
|
||||||
|
isLoadingMore,
|
||||||
|
selectedId,
|
||||||
|
onOpen,
|
||||||
|
onLoadMore,
|
||||||
|
}: {
|
||||||
|
items: WorkspaceLogItem[];
|
||||||
|
total: number;
|
||||||
|
hasMore: boolean;
|
||||||
|
isLoading: boolean;
|
||||||
|
isLoadingMore: boolean;
|
||||||
|
selectedId: number | null;
|
||||||
|
onOpen: (id: number) => void;
|
||||||
|
onLoadMore: () => void;
|
||||||
|
}) {
|
||||||
|
const { t, lang } = useTranslation();
|
||||||
|
|
||||||
|
const formatTimestamp = (value: string) =>
|
||||||
|
new Intl.DateTimeFormat(lang === "fa" ? "fa-IR-u-ca-persian" : "en-US", {
|
||||||
|
year: "numeric",
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
}).format(new Date(value));
|
||||||
|
|
||||||
|
const buildSummary = (item: WorkspaceLogItem) => {
|
||||||
|
const actor = item.actor?.full_name || t.logs?.unknownActor || "Unknown actor";
|
||||||
|
const eventLabel = t.logs?.events?.[item.event] || item.event;
|
||||||
|
const sectionLabel = t.logs?.sections?.[item.section] || item.section;
|
||||||
|
const target = item.target?.name || "-";
|
||||||
|
if (typeof t.logs?.summary === "function") {
|
||||||
|
return t.logs.summary(actor, eventLabel, sectionLabel, target);
|
||||||
|
}
|
||||||
|
return `${actor} ${eventLabel.toLowerCase()} ${target} in ${sectionLabel.toLowerCase()}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getInitials = (item: WorkspaceLogItem) => {
|
||||||
|
const label = item.actor?.full_name || t.logs?.unknownActor || "?";
|
||||||
|
return label.trim().charAt(0).toUpperCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="rounded-3xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400">
|
||||||
|
{t.logs?.loading || "Loading logs..."}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!items.length) {
|
||||||
|
return (
|
||||||
|
<div className="rounded-3xl border border-dashed border-slate-300 bg-white p-8 text-center shadow-sm dark:border-slate-700 dark:bg-slate-900">
|
||||||
|
<div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
|
||||||
|
<History className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
|
<p className="text-base font-semibold text-slate-900 dark:text-white">
|
||||||
|
{t.logs?.empty || "No activity logs found"}
|
||||||
|
</p>
|
||||||
|
<p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.emptyHint || "Adjust your filters or wait for new workspace activity."}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="rounded-3xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<div className="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold text-slate-900 dark:text-white">
|
||||||
|
{t.logs?.resultsCount?.(total) || `${total} results`}
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.detailsHint || "Select an activity item to inspect the exact field changes."}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="hidden items-center gap-2 rounded-2xl bg-slate-100 px-3 py-2 text-sm text-slate-600 dark:bg-slate-800 dark:text-slate-300 sm:flex">
|
||||||
|
<Sparkles className="h-4 w-4" />
|
||||||
|
<span>{items.length}/{total}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="divide-y divide-slate-100 dark:divide-slate-800">
|
||||||
|
{items.map((item) => {
|
||||||
|
const avatarUrl = resolveImageUrl(item.actor?.profile_picture);
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => onOpen(item.id)}
|
||||||
|
className={`flex w-full flex-col gap-3 px-5 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-slate-800/70 ${
|
||||||
|
selectedId === item.id ? "bg-sky-50 dark:bg-sky-950/20" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-slate-200 text-sm font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300">
|
||||||
|
{avatarUrl ? (
|
||||||
|
<img src={avatarUrl} alt={item.actor?.full_name || "Actor"} className="h-full w-full object-cover" />
|
||||||
|
) : (
|
||||||
|
<span>{getInitials(item)}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<p className="truncate text-sm font-semibold text-slate-900 dark:text-white">
|
||||||
|
{buildSummary(item)}
|
||||||
|
</p>
|
||||||
|
<span className={`inline-flex rounded-full px-2.5 py-1 text-[11px] font-semibold ${sectionBadgeStyles[item.section] || sectionBadgeStyles.workspace}`}>
|
||||||
|
{t.logs?.sections?.[item.section] || item.section}
|
||||||
|
</span>
|
||||||
|
<span className={`inline-flex rounded-full px-2.5 py-1 text-[11px] font-semibold ${eventBadgeStyles[item.event] || eventBadgeStyles.update}`}>
|
||||||
|
{t.logs?.events?.[item.event] || item.event}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-slate-500 dark:text-slate-400">
|
||||||
|
<span className="truncate">{item.target?.name}</span>
|
||||||
|
<span className="inline-flex items-center gap-1">
|
||||||
|
<Clock3 className="h-3.5 w-3.5" />
|
||||||
|
{formatTimestamp(item.timestamp)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{item.preview_changes.length ? (
|
||||||
|
<div className="mt-3 flex flex-wrap gap-2">
|
||||||
|
{item.preview_changes.map((change) => (
|
||||||
|
<span
|
||||||
|
key={`${item.id}-${change.field}`}
|
||||||
|
className="inline-flex max-w-full truncate rounded-full bg-slate-100 px-2.5 py-1 text-xs text-slate-600 dark:bg-slate-800 dark:text-slate-300"
|
||||||
|
title={change.summary}
|
||||||
|
>
|
||||||
|
{change.summary}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{hasMore ? (
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={onLoadMore}
|
||||||
|
disabled={isLoadingMore}
|
||||||
|
className="rounded-2xl px-5"
|
||||||
|
>
|
||||||
|
{isLoadingMore ? t.loading || "Loading..." : t.logs?.loadMore || "Load more"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
221
src/components/logs/LogsFilterBar.tsx
Normal file
221
src/components/logs/LogsFilterBar.tsx
Normal file
@@ -0,0 +1,221 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Filter, RotateCcw, Search } from "lucide-react";
|
||||||
|
|
||||||
|
import type { WorkspaceLogEvent, WorkspaceLogSection } from "../../api/logs";
|
||||||
|
import type { WorkspaceMembership } from "../../api/workspaces";
|
||||||
|
import JalaliDatePicker from "../ui/JalaliDatePicker";
|
||||||
|
import { SearchableSelect } from "../ui/SearchableSelect";
|
||||||
|
import { Select } from "../ui/Select";
|
||||||
|
import { Input } from "../ui/input";
|
||||||
|
import { useTranslation } from "../../hooks/useTranslation";
|
||||||
|
|
||||||
|
export interface LogsFilterDraft {
|
||||||
|
search: string;
|
||||||
|
section: "" | WorkspaceLogSection;
|
||||||
|
event: "" | WorkspaceLogEvent;
|
||||||
|
actor: string;
|
||||||
|
from: string;
|
||||||
|
to: string;
|
||||||
|
ordering: "-timestamp" | "timestamp";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LogsFilterBar({
|
||||||
|
value,
|
||||||
|
users,
|
||||||
|
isLoadingUsers,
|
||||||
|
canSelectUsers,
|
||||||
|
onApply,
|
||||||
|
}: {
|
||||||
|
value: LogsFilterDraft;
|
||||||
|
users: WorkspaceMembership[];
|
||||||
|
isLoadingUsers: boolean;
|
||||||
|
canSelectUsers: boolean;
|
||||||
|
onApply: (value: LogsFilterDraft) => void;
|
||||||
|
}) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [draft, setDraft] = useState<LogsFilterDraft>(value);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setDraft(value);
|
||||||
|
}, [value]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!canSelectUsers && draft.actor) {
|
||||||
|
setDraft((current) => ({ ...current, actor: "" }));
|
||||||
|
}
|
||||||
|
}, [canSelectUsers, draft.actor]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-5">
|
||||||
|
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
||||||
|
<div className="xl:col-span-2">
|
||||||
|
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.search || "Search"}
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
||||||
|
<Input
|
||||||
|
value={draft.search}
|
||||||
|
onChange={(event) => setDraft((current) => ({ ...current, search: event.target.value }))}
|
||||||
|
placeholder={t.logs?.searchPlaceholder || "Search logs..."}
|
||||||
|
className="h-10 rounded-2xl border-slate-200 bg-white pl-10 dark:border-slate-700 dark:bg-slate-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.section || "Section"}
|
||||||
|
</label>
|
||||||
|
<Select
|
||||||
|
value={draft.section}
|
||||||
|
onChange={(section) =>
|
||||||
|
setDraft((current) => ({ ...current, section: section as "" | WorkspaceLogSection }))
|
||||||
|
}
|
||||||
|
options={[
|
||||||
|
{ value: "", label: t.logs?.allSections || "All sections" },
|
||||||
|
{ value: "workspace", label: t.logs?.sections?.workspace || "Workspace" },
|
||||||
|
{ value: "workspace_members", label: t.logs?.sections?.workspace_members || "Workspace members" },
|
||||||
|
{ value: "clients", label: t.logs?.sections?.clients || "Clients" },
|
||||||
|
{ value: "projects", label: t.logs?.sections?.projects || "Projects" },
|
||||||
|
{ value: "project_members", label: t.logs?.sections?.project_members || "Project members" },
|
||||||
|
{ value: "tags", label: t.logs?.sections?.tags || "Tags" },
|
||||||
|
{ value: "time_entries", label: t.logs?.sections?.time_entries || "Time entries" },
|
||||||
|
{ value: "rates", label: t.logs?.sections?.rates || "Rates" },
|
||||||
|
{ value: "report_exports", label: t.logs?.sections?.report_exports || "Report exports" },
|
||||||
|
]}
|
||||||
|
className="w-full"
|
||||||
|
buttonClassName="h-10 w-full rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.event || "Event"}
|
||||||
|
</label>
|
||||||
|
<Select
|
||||||
|
value={draft.event}
|
||||||
|
onChange={(event) =>
|
||||||
|
setDraft((current) => ({ ...current, event: event as "" | WorkspaceLogEvent }))
|
||||||
|
}
|
||||||
|
options={[
|
||||||
|
{ value: "", label: t.logs?.allEvents || "All events" },
|
||||||
|
{ value: "create", label: t.logs?.events?.create || "Create" },
|
||||||
|
{ value: "update", label: t.logs?.events?.update || "Update" },
|
||||||
|
{ value: "delete", label: t.logs?.events?.delete || "Delete" },
|
||||||
|
{ value: "restore", label: t.logs?.events?.restore || "Restore" },
|
||||||
|
{ value: "archive", label: t.logs?.events?.archive || "Archive" },
|
||||||
|
{ value: "unarchive", label: t.logs?.events?.unarchive || "Unarchive" },
|
||||||
|
{ value: "activate", label: t.logs?.events?.activate || "Activate" },
|
||||||
|
{ value: "deactivate", label: t.logs?.events?.deactivate || "Deactivate" },
|
||||||
|
]}
|
||||||
|
className="w-full"
|
||||||
|
buttonClassName="h-10 w-full rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{canSelectUsers || isLoadingUsers ? (
|
||||||
|
<div>
|
||||||
|
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.actor || "Actor"}
|
||||||
|
</label>
|
||||||
|
{isLoadingUsers ? (
|
||||||
|
<div className="flex h-10 items-center rounded-2xl border border-slate-200 bg-slate-50 px-3 text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400">
|
||||||
|
{t.logs?.loadingUsers || "Loading users..."}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<SearchableSelect
|
||||||
|
value={draft.actor}
|
||||||
|
onChange={(actor) => setDraft((current) => ({ ...current, actor }))}
|
||||||
|
options={[
|
||||||
|
{ value: "", label: t.logs?.allActors || "All actors" },
|
||||||
|
...users.map((membership) => ({
|
||||||
|
value: membership.user.id,
|
||||||
|
label:
|
||||||
|
`${membership.user.first_name || ""} ${membership.user.last_name || ""}`.trim() ||
|
||||||
|
membership.user.email ||
|
||||||
|
membership.user.id,
|
||||||
|
searchText: membership.user.mobile || "",
|
||||||
|
})),
|
||||||
|
]}
|
||||||
|
placeholder={t.logs?.allActors || "All actors"}
|
||||||
|
searchPlaceholder={t.logs?.searchActors || "Search users..."}
|
||||||
|
className="w-full"
|
||||||
|
buttonClassName="h-10 rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.fromDate || "From date"}
|
||||||
|
</label>
|
||||||
|
<JalaliDatePicker
|
||||||
|
value={draft.from}
|
||||||
|
onChange={(nextValue) => setDraft((current) => ({ ...current, from: nextValue }))}
|
||||||
|
placeholder="YYYY/MM/DD"
|
||||||
|
inputClassName="h-10 rounded-2xl border border-slate-200 bg-white px-3 text-sm dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.toDate || "To date"}
|
||||||
|
</label>
|
||||||
|
<JalaliDatePicker
|
||||||
|
value={draft.to}
|
||||||
|
onChange={(nextValue) => setDraft((current) => ({ ...current, to: nextValue }))}
|
||||||
|
placeholder="YYYY/MM/DD"
|
||||||
|
inputClassName="h-10 rounded-2xl border border-slate-200 bg-white px-3 text-sm dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.ordering || "Ordering"}
|
||||||
|
</label>
|
||||||
|
<Select
|
||||||
|
value={draft.ordering}
|
||||||
|
onChange={(ordering) => setDraft((current) => ({ ...current, ordering: ordering as "-timestamp" | "timestamp" }))}
|
||||||
|
options={[
|
||||||
|
{ value: "-timestamp", label: t.logs?.newestFirst || "Newest first" },
|
||||||
|
{ value: "timestamp", label: t.logs?.oldestFirst || "Oldest first" },
|
||||||
|
]}
|
||||||
|
className="w-full"
|
||||||
|
buttonClassName="h-10 w-full rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 flex flex-col gap-2 sm:flex-row sm:justify-end">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() =>
|
||||||
|
setDraft({
|
||||||
|
search: "",
|
||||||
|
section: "",
|
||||||
|
event: "",
|
||||||
|
actor: "",
|
||||||
|
from: "",
|
||||||
|
to: "",
|
||||||
|
ordering: "-timestamp",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
className="inline-flex h-11 items-center justify-center gap-2 rounded-2xl border border-slate-200 px-4 text-sm text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||||
|
>
|
||||||
|
<RotateCcw className="h-4 w-4" />
|
||||||
|
{t.logs?.clear || "Clear"}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => onApply(draft)}
|
||||||
|
className="inline-flex h-11 items-center justify-center gap-2 rounded-2xl bg-sky-600 px-4 text-sm font-medium text-white transition hover:bg-sky-700"
|
||||||
|
>
|
||||||
|
<Filter className="h-4 w-4" />
|
||||||
|
{t.logs?.apply || "Apply"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -8,6 +8,7 @@ export const WORKSPACE_MEMBERS_VIEW = "workspace.members.view";
|
|||||||
export const WORKSPACE_MEMBERS_ADD = "workspace.members.add";
|
export const WORKSPACE_MEMBERS_ADD = "workspace.members.add";
|
||||||
export const WORKSPACE_MEMBERS_REMOVE = "workspace.members.remove";
|
export const WORKSPACE_MEMBERS_REMOVE = "workspace.members.remove";
|
||||||
export const WORKSPACE_MEMBERS_CHANGE_ROLE = "workspace.members.change_role";
|
export const WORKSPACE_MEMBERS_CHANGE_ROLE = "workspace.members.change_role";
|
||||||
|
export const WORKSPACE_LOGS_VIEW = "workspace.logs.view";
|
||||||
export const CLIENTS_VIEW = "clients.view";
|
export const CLIENTS_VIEW = "clients.view";
|
||||||
export const CLIENTS_CREATE = "clients.create";
|
export const CLIENTS_CREATE = "clients.create";
|
||||||
export const CLIENTS_EDIT = "clients.edit";
|
export const CLIENTS_EDIT = "clients.edit";
|
||||||
@@ -36,6 +37,7 @@ export type WorkspaceCapability =
|
|||||||
| typeof WORKSPACE_MEMBERS_ADD
|
| typeof WORKSPACE_MEMBERS_ADD
|
||||||
| typeof WORKSPACE_MEMBERS_REMOVE
|
| typeof WORKSPACE_MEMBERS_REMOVE
|
||||||
| typeof WORKSPACE_MEMBERS_CHANGE_ROLE
|
| typeof WORKSPACE_MEMBERS_CHANGE_ROLE
|
||||||
|
| typeof WORKSPACE_LOGS_VIEW
|
||||||
| typeof CLIENTS_VIEW
|
| typeof CLIENTS_VIEW
|
||||||
| typeof CLIENTS_CREATE
|
| typeof CLIENTS_CREATE
|
||||||
| typeof CLIENTS_EDIT
|
| typeof CLIENTS_EDIT
|
||||||
@@ -65,6 +67,7 @@ const CAPABILITIES_BY_ROLE: Record<WorkspaceRole, Set<WorkspaceCapability>> = {
|
|||||||
WORKSPACE_MEMBERS_ADD,
|
WORKSPACE_MEMBERS_ADD,
|
||||||
WORKSPACE_MEMBERS_REMOVE,
|
WORKSPACE_MEMBERS_REMOVE,
|
||||||
WORKSPACE_MEMBERS_CHANGE_ROLE,
|
WORKSPACE_MEMBERS_CHANGE_ROLE,
|
||||||
|
WORKSPACE_LOGS_VIEW,
|
||||||
CLIENTS_VIEW,
|
CLIENTS_VIEW,
|
||||||
CLIENTS_CREATE,
|
CLIENTS_CREATE,
|
||||||
CLIENTS_EDIT,
|
CLIENTS_EDIT,
|
||||||
@@ -92,6 +95,7 @@ const CAPABILITIES_BY_ROLE: Record<WorkspaceRole, Set<WorkspaceCapability>> = {
|
|||||||
WORKSPACE_MEMBERS_ADD,
|
WORKSPACE_MEMBERS_ADD,
|
||||||
WORKSPACE_MEMBERS_REMOVE,
|
WORKSPACE_MEMBERS_REMOVE,
|
||||||
WORKSPACE_MEMBERS_CHANGE_ROLE,
|
WORKSPACE_MEMBERS_CHANGE_ROLE,
|
||||||
|
WORKSPACE_LOGS_VIEW,
|
||||||
CLIENTS_VIEW,
|
CLIENTS_VIEW,
|
||||||
CLIENTS_CREATE,
|
CLIENTS_CREATE,
|
||||||
CLIENTS_EDIT,
|
CLIENTS_EDIT,
|
||||||
|
|||||||
@@ -264,12 +264,13 @@ export const en = {
|
|||||||
next: "Next",
|
next: "Next",
|
||||||
},
|
},
|
||||||
|
|
||||||
sidebar: {
|
sidebar: {
|
||||||
timesheet: "Timesheet",
|
timesheet: "Timesheet",
|
||||||
reports: "Reports",
|
reports: "Reports",
|
||||||
workspaces: 'Workspaces',
|
logs: "Logs",
|
||||||
clients: 'Clients',
|
workspaces: 'Workspaces',
|
||||||
projects: "Projects",
|
clients: 'Clients',
|
||||||
|
projects: "Projects",
|
||||||
tags: "Tags",
|
tags: "Tags",
|
||||||
expand: 'Expand',
|
expand: 'Expand',
|
||||||
collapse: 'Collapse',
|
collapse: 'Collapse',
|
||||||
@@ -437,7 +438,7 @@ export const en = {
|
|||||||
deletedTagLabel: "Deleted tag",
|
deletedTagLabel: "Deleted tag",
|
||||||
},
|
},
|
||||||
|
|
||||||
reports: {
|
reports: {
|
||||||
title: "Reports",
|
title: "Reports",
|
||||||
description: (workspaceName: string) => `Review activity reports for ${workspaceName}`,
|
description: (workspaceName: string) => `Review activity reports for ${workspaceName}`,
|
||||||
selectWorkspace: "Please select a workspace first.",
|
selectWorkspace: "Please select a workspace first.",
|
||||||
@@ -484,11 +485,83 @@ export const en = {
|
|||||||
loadError: "Failed to load reports.",
|
loadError: "Failed to load reports.",
|
||||||
loadDayDetailsError: "Failed to load day details.",
|
loadDayDetailsError: "Failed to load day details.",
|
||||||
loadFiltersError: "Failed to load report filters.",
|
loadFiltersError: "Failed to load report filters.",
|
||||||
exportQueued: "Export queued. You will receive a notification with the download link.",
|
exportQueued: "Export queued. You will receive a notification with the download link.",
|
||||||
exportError: "Failed to queue report export.",
|
exportError: "Failed to queue report export.",
|
||||||
},
|
},
|
||||||
|
|
||||||
notifications: {
|
logs: {
|
||||||
|
eyebrow: "Workspace activity",
|
||||||
|
title: "Activity logs",
|
||||||
|
description: (workspaceName: string) => `Review what has happened inside ${workspaceName}.`,
|
||||||
|
selectWorkspace: "Please select a workspace first.",
|
||||||
|
unauthorized: "Only owners and admins can access workspace activity logs.",
|
||||||
|
loading: "Loading logs...",
|
||||||
|
loadingUsers: "Loading users...",
|
||||||
|
loadingDetails: "Loading details...",
|
||||||
|
loadError: "Failed to load logs.",
|
||||||
|
loadDetailsError: "Failed to load log details.",
|
||||||
|
loadFiltersError: "Failed to load log filters.",
|
||||||
|
search: "Search",
|
||||||
|
searchPlaceholder: "Search logs...",
|
||||||
|
section: "Section",
|
||||||
|
allSections: "All sections",
|
||||||
|
event: "Event",
|
||||||
|
allEvents: "All events",
|
||||||
|
actor: "Actor",
|
||||||
|
allActors: "All actors",
|
||||||
|
searchActors: "Search users...",
|
||||||
|
ordering: "Ordering",
|
||||||
|
newestFirst: "Newest first",
|
||||||
|
oldestFirst: "Oldest first",
|
||||||
|
fromDate: "From date",
|
||||||
|
toDate: "To date",
|
||||||
|
clear: "Clear",
|
||||||
|
apply: "Apply",
|
||||||
|
loadMore: "Load more",
|
||||||
|
totalLogs: "Total logs",
|
||||||
|
activeFilters: "Active filters",
|
||||||
|
latestActivity: "Latest activity",
|
||||||
|
resultsCount: (count: number) => `${count} results`,
|
||||||
|
empty: "No activity logs found",
|
||||||
|
emptyHint: "Adjust your filters or wait for new workspace activity.",
|
||||||
|
detailsTitle: "Activity details",
|
||||||
|
detailsHint: "Select an activity item to inspect the exact field changes.",
|
||||||
|
selectLogHint: "Select a log entry to see its details.",
|
||||||
|
target: "Target",
|
||||||
|
timestamp: "Timestamp",
|
||||||
|
remoteAddress: "Remote address",
|
||||||
|
previousValue: "Previous",
|
||||||
|
currentValue: "Current",
|
||||||
|
changesTitle: "Changes",
|
||||||
|
noDetails: "No field-level details are available for this activity.",
|
||||||
|
snapshot: "Serialized snapshot",
|
||||||
|
unknownActor: "Unknown actor",
|
||||||
|
summary: (actor: string, event: string, section: string, target: string) =>
|
||||||
|
`${actor} ${event.toLowerCase()} ${target} in ${section.toLowerCase()}`,
|
||||||
|
sections: {
|
||||||
|
workspace: "Workspace",
|
||||||
|
workspace_members: "Workspace members",
|
||||||
|
clients: "Clients",
|
||||||
|
projects: "Projects",
|
||||||
|
project_members: "Project members",
|
||||||
|
tags: "Tags",
|
||||||
|
time_entries: "Time entries",
|
||||||
|
rates: "Rates",
|
||||||
|
report_exports: "Report exports",
|
||||||
|
},
|
||||||
|
events: {
|
||||||
|
create: "Created",
|
||||||
|
update: "Updated",
|
||||||
|
delete: "Deleted",
|
||||||
|
restore: "Restored",
|
||||||
|
archive: "Archived",
|
||||||
|
unarchive: "Unarchived",
|
||||||
|
activate: "Activated",
|
||||||
|
deactivate: "Deactivated",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
notifications: {
|
||||||
title: "Notifications",
|
title: "Notifications",
|
||||||
open: "Open notifications",
|
open: "Open notifications",
|
||||||
empty: "No notifications yet.",
|
empty: "No notifications yet.",
|
||||||
|
|||||||
@@ -261,10 +261,11 @@ export const fa = {
|
|||||||
next: "بعدی",
|
next: "بعدی",
|
||||||
},
|
},
|
||||||
|
|
||||||
sidebar: {
|
sidebar: {
|
||||||
timesheet: 'تایمشیت',
|
timesheet: 'تایمشیت',
|
||||||
reports: 'گزارشها',
|
reports: 'گزارشها',
|
||||||
workspaces: 'ورکاسپیسها',
|
logs: "لاگها",
|
||||||
|
workspaces: 'ورکاسپیسها',
|
||||||
clients: 'مشتریها',
|
clients: 'مشتریها',
|
||||||
projects: "پروژهها",
|
projects: "پروژهها",
|
||||||
tags: "تگها",
|
tags: "تگها",
|
||||||
@@ -433,7 +434,7 @@ export const fa = {
|
|||||||
deletedProjectLabel: "پروژه حذفشده",
|
deletedProjectLabel: "پروژه حذفشده",
|
||||||
deletedTagLabel: "تگ حذفشده",
|
deletedTagLabel: "تگ حذفشده",
|
||||||
},
|
},
|
||||||
reports: {
|
reports: {
|
||||||
title: "گزارشها",
|
title: "گزارشها",
|
||||||
description: (workspaceName: string) => `مرور گزارش فعالیت برای ${workspaceName}`,
|
description: (workspaceName: string) => `مرور گزارش فعالیت برای ${workspaceName}`,
|
||||||
selectWorkspace: "لطفاً ابتدا یک ورکاسپیس انتخاب کنید.",
|
selectWorkspace: "لطفاً ابتدا یک ورکاسپیس انتخاب کنید.",
|
||||||
@@ -480,10 +481,81 @@ export const fa = {
|
|||||||
loadError: "دریافت گزارشها با خطا مواجه شد.",
|
loadError: "دریافت گزارشها با خطا مواجه شد.",
|
||||||
loadDayDetailsError: "دریافت جزئیات روز با خطا مواجه شد.",
|
loadDayDetailsError: "دریافت جزئیات روز با خطا مواجه شد.",
|
||||||
loadFiltersError: "دریافت فیلترهای گزارش با خطا مواجه شد.",
|
loadFiltersError: "دریافت فیلترهای گزارش با خطا مواجه شد.",
|
||||||
exportQueued: "درخواست خروجی ثبت شد. پیوند دانلود از طریق اعلان ارسال میشود.",
|
exportQueued: "درخواست خروجی ثبت شد. پیوند دانلود از طریق اعلان ارسال میشود.",
|
||||||
exportError: "ثبت درخواست خروجی با خطا مواجه شد.",
|
exportError: "ثبت درخواست خروجی با خطا مواجه شد.",
|
||||||
},
|
},
|
||||||
notifications: {
|
logs: {
|
||||||
|
eyebrow: "فعالیتهای ورکاسپیس",
|
||||||
|
title: "لاگهای فعالیت",
|
||||||
|
description: (workspaceName: string) => `مرور رویدادهای ثبتشده در ${workspaceName}`,
|
||||||
|
selectWorkspace: "لطفاً ابتدا یک ورکاسپیس انتخاب کنید.",
|
||||||
|
unauthorized: "فقط مالک و ادمین میتوانند لاگهای فعالیت ورکاسپیس را مشاهده کنند.",
|
||||||
|
loading: "در حال بارگذاری لاگها...",
|
||||||
|
loadingUsers: "در حال بارگذاری کاربران...",
|
||||||
|
loadingDetails: "در حال بارگذاری جزئیات...",
|
||||||
|
loadError: "دریافت لاگها با خطا مواجه شد.",
|
||||||
|
loadDetailsError: "دریافت جزئیات لاگ با خطا مواجه شد.",
|
||||||
|
loadFiltersError: "دریافت فیلترهای لاگ با خطا مواجه شد.",
|
||||||
|
search: "جستوجو",
|
||||||
|
searchPlaceholder: "جستوجوی لاگها...",
|
||||||
|
section: "بخش",
|
||||||
|
allSections: "همه بخشها",
|
||||||
|
event: "رویداد",
|
||||||
|
allEvents: "همه رویدادها",
|
||||||
|
actor: "انجامدهنده",
|
||||||
|
allActors: "همه کاربران",
|
||||||
|
searchActors: "جستوجوی کاربران...",
|
||||||
|
ordering: "مرتبسازی",
|
||||||
|
newestFirst: "جدیدترین",
|
||||||
|
oldestFirst: "قدیمیترین",
|
||||||
|
fromDate: "از تاریخ",
|
||||||
|
toDate: "تا تاریخ",
|
||||||
|
clear: "پاک کردن",
|
||||||
|
apply: "اعمال",
|
||||||
|
loadMore: "بارگذاری بیشتر",
|
||||||
|
totalLogs: "کل لاگها",
|
||||||
|
activeFilters: "فیلترهای فعال",
|
||||||
|
latestActivity: "آخرین فعالیت",
|
||||||
|
resultsCount: (count: number) => `${count} نتیجه`,
|
||||||
|
empty: "لاگ فعالیتی پیدا نشد",
|
||||||
|
emptyHint: "فیلترها را تغییر دهید یا منتظر فعالیت جدید بمانید.",
|
||||||
|
detailsTitle: "جزئیات فعالیت",
|
||||||
|
detailsHint: "برای بررسی دقیق تغییرات، یک مورد را انتخاب کنید.",
|
||||||
|
selectLogHint: "یک لاگ را برای مشاهده جزئیات انتخاب کنید.",
|
||||||
|
target: "هدف",
|
||||||
|
timestamp: "زمان",
|
||||||
|
remoteAddress: "آدرس شبکه",
|
||||||
|
previousValue: "مقدار قبلی",
|
||||||
|
currentValue: "مقدار جدید",
|
||||||
|
changesTitle: "تغییرات",
|
||||||
|
noDetails: "برای این رویداد جزئیات فیلدی در دسترس نیست.",
|
||||||
|
snapshot: "نمونه ذخیرهشده",
|
||||||
|
unknownActor: "کاربر نامشخص",
|
||||||
|
summary: (actor: string, event: string, section: string, target: string) =>
|
||||||
|
`${actor} ${target} را در بخش ${section} ${event}`,
|
||||||
|
sections: {
|
||||||
|
workspace: "ورکاسپیس",
|
||||||
|
workspace_members: "اعضای ورکاسپیس",
|
||||||
|
clients: "مشتریها",
|
||||||
|
projects: "پروژهها",
|
||||||
|
project_members: "اعضای پروژه",
|
||||||
|
tags: "تگها",
|
||||||
|
time_entries: "ورودیهای زمان",
|
||||||
|
rates: "نرخها",
|
||||||
|
report_exports: "خروجیهای گزارش",
|
||||||
|
},
|
||||||
|
events: {
|
||||||
|
create: "ایجاد کرد",
|
||||||
|
update: "ویرایش کرد",
|
||||||
|
delete: "حذف کرد",
|
||||||
|
restore: "بازیابی کرد",
|
||||||
|
archive: "بایگانی کرد",
|
||||||
|
unarchive: "از بایگانی خارج کرد",
|
||||||
|
activate: "فعال کرد",
|
||||||
|
deactivate: "غیرفعال کرد",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
notifications: {
|
||||||
title: "اعلانها",
|
title: "اعلانها",
|
||||||
open: "باز کردن اعلانها",
|
open: "باز کردن اعلانها",
|
||||||
empty: "هنوز اعلانی وجود ندارد.",
|
empty: "هنوز اعلانی وجود ندارد.",
|
||||||
|
|||||||
312
src/pages/Logs.tsx
Normal file
312
src/pages/Logs.tsx
Normal file
@@ -0,0 +1,312 @@
|
|||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { History, ShieldCheck, SlidersHorizontal } from "lucide-react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
import {
|
||||||
|
getWorkspaceLogDetail,
|
||||||
|
listWorkspaceLogs,
|
||||||
|
type WorkspaceLogDetail,
|
||||||
|
type WorkspaceLogItem,
|
||||||
|
} from "../api/logs";
|
||||||
|
import { fetchWorkspaceMemberships, type WorkspaceMembership } from "../api/workspaces";
|
||||||
|
import { LogDetailsPanel } from "../components/logs/LogDetailsPanel";
|
||||||
|
import { LogsFeed } from "../components/logs/LogsFeed";
|
||||||
|
import { LogsFilterBar, type LogsFilterDraft } from "../components/logs/LogsFilterBar";
|
||||||
|
import { useWorkspace } from "../context/WorkspaceContext";
|
||||||
|
import { useTranslation } from "../hooks/useTranslation";
|
||||||
|
import { canWorkspace, WORKSPACE_LOGS_VIEW } from "../lib/permissions";
|
||||||
|
|
||||||
|
const DEFAULT_FILTERS: LogsFilterDraft = {
|
||||||
|
search: "",
|
||||||
|
section: "",
|
||||||
|
event: "",
|
||||||
|
actor: "",
|
||||||
|
from: "",
|
||||||
|
to: "",
|
||||||
|
ordering: "-timestamp",
|
||||||
|
};
|
||||||
|
|
||||||
|
const PAGE_SIZE = 20;
|
||||||
|
|
||||||
|
export default function Logs() {
|
||||||
|
const { t, lang } = useTranslation();
|
||||||
|
const { activeWorkspace } = useWorkspace();
|
||||||
|
const [filters, setFilters] = useState<LogsFilterDraft>(DEFAULT_FILTERS);
|
||||||
|
const [memberships, setMemberships] = useState<WorkspaceMembership[]>([]);
|
||||||
|
const [logs, setLogs] = useState<WorkspaceLogItem[]>([]);
|
||||||
|
const [totalLogs, setTotalLogs] = useState(0);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [isLoadingUsers, setIsLoadingUsers] = useState(false);
|
||||||
|
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
||||||
|
const [selectedLogId, setSelectedLogId] = useState<number | null>(null);
|
||||||
|
const [selectedLog, setSelectedLog] = useState<WorkspaceLogDetail | null>(null);
|
||||||
|
const [isLoadingDetail, setIsLoadingDetail] = useState(false);
|
||||||
|
|
||||||
|
const workspaceRole = activeWorkspace?.my_role;
|
||||||
|
const canViewLogs = canWorkspace(workspaceRole, WORKSPACE_LOGS_VIEW);
|
||||||
|
const isWorkspaceRoleResolved = Boolean(workspaceRole);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFilters(DEFAULT_FILTERS);
|
||||||
|
setLogs([]);
|
||||||
|
setTotalLogs(0);
|
||||||
|
setSelectedLogId(null);
|
||||||
|
setSelectedLog(null);
|
||||||
|
}, [activeWorkspace?.id]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!activeWorkspace?.id || !isWorkspaceRoleResolved || !canViewLogs) {
|
||||||
|
setMemberships([]);
|
||||||
|
setIsLoadingUsers(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadUsers = async () => {
|
||||||
|
setIsLoadingUsers(true);
|
||||||
|
try {
|
||||||
|
const response = await fetchWorkspaceMemberships({
|
||||||
|
workspace: activeWorkspace.id,
|
||||||
|
limit: 200,
|
||||||
|
offset: 0,
|
||||||
|
});
|
||||||
|
setMemberships(response.results || []);
|
||||||
|
} catch {
|
||||||
|
setMemberships([]);
|
||||||
|
toast.error(t.logs?.loadFiltersError || "Failed to load log filters.");
|
||||||
|
} finally {
|
||||||
|
setIsLoadingUsers(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
void loadUsers();
|
||||||
|
}, [activeWorkspace?.id, canViewLogs, isWorkspaceRoleResolved, t.logs?.loadFiltersError]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!activeWorkspace?.id || !isWorkspaceRoleResolved || !canViewLogs) {
|
||||||
|
setLogs([]);
|
||||||
|
setTotalLogs(0);
|
||||||
|
setIsLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadLogs = async () => {
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await listWorkspaceLogs(
|
||||||
|
{
|
||||||
|
workspace: activeWorkspace.id,
|
||||||
|
search: filters.search || undefined,
|
||||||
|
section: filters.section || undefined,
|
||||||
|
actor: filters.actor || undefined,
|
||||||
|
event: filters.event || undefined,
|
||||||
|
from: filters.from || undefined,
|
||||||
|
to: filters.to || undefined,
|
||||||
|
ordering: filters.ordering,
|
||||||
|
},
|
||||||
|
{ limit: PAGE_SIZE, offset: 0 },
|
||||||
|
);
|
||||||
|
setLogs(response.results || []);
|
||||||
|
setTotalLogs(response.count || 0);
|
||||||
|
if (selectedLogId && !(response.results || []).some((item) => item.id === selectedLogId)) {
|
||||||
|
setSelectedLogId(null);
|
||||||
|
setSelectedLog(null);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
setLogs([]);
|
||||||
|
setTotalLogs(0);
|
||||||
|
toast.error(t.logs?.loadError || "Failed to load logs.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
void loadLogs();
|
||||||
|
}, [
|
||||||
|
activeWorkspace?.id,
|
||||||
|
canViewLogs,
|
||||||
|
filters.actor,
|
||||||
|
filters.event,
|
||||||
|
filters.from,
|
||||||
|
filters.ordering,
|
||||||
|
filters.search,
|
||||||
|
filters.section,
|
||||||
|
filters.to,
|
||||||
|
isWorkspaceRoleResolved,
|
||||||
|
t.logs?.loadError,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const handleLoadMore = async () => {
|
||||||
|
if (!activeWorkspace?.id || isLoadingMore || logs.length >= totalLogs) return;
|
||||||
|
|
||||||
|
setIsLoadingMore(true);
|
||||||
|
try {
|
||||||
|
const response = await listWorkspaceLogs(
|
||||||
|
{
|
||||||
|
workspace: activeWorkspace.id,
|
||||||
|
search: filters.search || undefined,
|
||||||
|
section: filters.section || undefined,
|
||||||
|
actor: filters.actor || undefined,
|
||||||
|
event: filters.event || undefined,
|
||||||
|
from: filters.from || undefined,
|
||||||
|
to: filters.to || undefined,
|
||||||
|
ordering: filters.ordering,
|
||||||
|
},
|
||||||
|
{ limit: PAGE_SIZE, offset: logs.length },
|
||||||
|
);
|
||||||
|
setLogs((current) => [...current, ...(response.results || [])]);
|
||||||
|
setTotalLogs(response.count || 0);
|
||||||
|
} catch {
|
||||||
|
toast.error(t.logs?.loadError || "Failed to load logs.");
|
||||||
|
} finally {
|
||||||
|
setIsLoadingMore(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenLog = async (id: number) => {
|
||||||
|
setSelectedLogId(id);
|
||||||
|
setIsLoadingDetail(true);
|
||||||
|
try {
|
||||||
|
const detail = await getWorkspaceLogDetail(id);
|
||||||
|
setSelectedLog(detail);
|
||||||
|
} catch {
|
||||||
|
toast.error(t.logs?.loadDetailsError || "Failed to load log details.");
|
||||||
|
setSelectedLog(null);
|
||||||
|
setSelectedLogId(null);
|
||||||
|
} finally {
|
||||||
|
setIsLoadingDetail(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const activeFiltersCount = useMemo(
|
||||||
|
() => [filters.search, filters.section, filters.event, filters.actor, filters.from, filters.to].filter(Boolean).length,
|
||||||
|
[filters.actor, filters.event, filters.from, filters.search, filters.section, filters.to],
|
||||||
|
);
|
||||||
|
|
||||||
|
const latestActivityLabel = useMemo(() => {
|
||||||
|
if (!logs[0]?.timestamp) return "-";
|
||||||
|
return new Intl.DateTimeFormat(lang === "fa" ? "fa-IR-u-ca-persian" : "en-US", {
|
||||||
|
year: "numeric",
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
}).format(new Date(logs[0].timestamp));
|
||||||
|
}, [lang, logs]);
|
||||||
|
|
||||||
|
const formatNumber = (value: number) =>
|
||||||
|
new Intl.NumberFormat(lang === "fa" ? "fa-IR" : "en-US").format(value);
|
||||||
|
|
||||||
|
if (!activeWorkspace) {
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="rounded-3xl border border-slate-200 bg-white p-6 text-slate-600 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300">
|
||||||
|
{t.logs?.selectWorkspace || "Please select a workspace first."}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isWorkspaceRoleResolved) {
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="rounded-3xl border border-slate-200 bg-white p-6 text-slate-600 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300">
|
||||||
|
{t.loading || "Loading..."}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!canViewLogs) {
|
||||||
|
return (
|
||||||
|
<div className="mx-auto max-w-4xl p-4 sm:p-6">
|
||||||
|
<div className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
|
||||||
|
<ShieldCheck className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||||
|
{t.logs?.title || "Activity logs"}
|
||||||
|
</h1>
|
||||||
|
<p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.unauthorized || "Only owners and admins can access workspace activity logs."}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mx-auto max-w-7xl space-y-5 p-4 md:p-6">
|
||||||
|
<section className="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-6">
|
||||||
|
<div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||||
|
{t.logs?.title || "Activity logs"}
|
||||||
|
</h1>
|
||||||
|
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
{t.logs?.description?.(activeWorkspace.name) || `Review what has happened inside ${activeWorkspace.name}.`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-3 sm:grid-cols-3">
|
||||||
|
<div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950">
|
||||||
|
<div className="flex items-center justify-between text-slate-500 dark:text-slate-400">
|
||||||
|
<span className="text-xs font-semibold uppercase tracking-[0.16em]">
|
||||||
|
{t.logs?.totalLogs || "Total logs"}
|
||||||
|
</span>
|
||||||
|
<History className="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<p className="mt-3 text-2xl font-bold text-slate-900 dark:text-white">{formatNumber(totalLogs)}</p>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950">
|
||||||
|
<div className="flex items-center justify-between text-slate-500 dark:text-slate-400">
|
||||||
|
<span className="text-xs font-semibold uppercase tracking-[0.16em]">
|
||||||
|
{t.logs?.activeFilters || "Active filters"}
|
||||||
|
</span>
|
||||||
|
<SlidersHorizontal className="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<p className="mt-3 text-2xl font-bold text-slate-900 dark:text-white">{formatNumber(activeFiltersCount)}</p>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950">
|
||||||
|
<div className="flex items-center justify-between text-slate-500 dark:text-slate-400">
|
||||||
|
<span className="text-xs font-semibold uppercase tracking-[0.16em]">
|
||||||
|
{t.logs?.latestActivity || "Latest activity"}
|
||||||
|
</span>
|
||||||
|
<ShieldCheck className="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<p className="mt-3 text-sm font-semibold text-slate-900 dark:text-white">{latestActivityLabel}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<LogsFilterBar
|
||||||
|
value={filters}
|
||||||
|
users={memberships}
|
||||||
|
isLoadingUsers={isLoadingUsers}
|
||||||
|
canSelectUsers={canViewLogs}
|
||||||
|
onApply={setFilters}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<LogsFeed
|
||||||
|
items={logs}
|
||||||
|
total={totalLogs}
|
||||||
|
hasMore={logs.length < totalLogs}
|
||||||
|
isLoading={isLoading}
|
||||||
|
isLoadingMore={isLoadingMore}
|
||||||
|
selectedId={selectedLogId}
|
||||||
|
onOpen={(id) => void handleOpenLog(id)}
|
||||||
|
onLoadMore={() => void handleLoadMore()}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<LogDetailsPanel
|
||||||
|
open={selectedLogId !== null}
|
||||||
|
log={selectedLog}
|
||||||
|
isLoading={isLoadingDetail}
|
||||||
|
onClose={() => {
|
||||||
|
setSelectedLogId(null);
|
||||||
|
setSelectedLog(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user