feat(logs): add workspace activity log page

.gitignore

@@ -1,5 +1,7 @@
 # Logs
 logs
+!src/components/logs/
+!src/components/logs/**
 *.log
 npm-debug.log*
 yarn-debug.log*

src/App.tsx

@@ -21,6 +21,7 @@ import ProjectEdit from "./pages/ProjectEdit"
 import Tags from "./pages/Tags"
 import Reports from "./pages/Reports"
 import Timesheet from "./pages/Timesheet"
+import Logs from "./pages/Logs"
 
 const MainLayout = () => {
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
@@ -65,6 +66,7 @@ const router = createBrowserRouter([
           { path: "/profile", element: <Profile /> },
           { path: "/timesheet", element: <Timesheet /> },
           { path: "/reports", element: <Reports /> },
+          { path: "/logs", element: <Logs /> },
           { path: "/tags", element: <Tags /> },
           { path: "/workspaces", element: <Workspaces /> },
           { path: "/workspaces/create", element: <CreateWorkspace /> },

src/api/logs.ts

@@ -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();
+};

src/components/Sidebar.tsx

@@ -11,9 +11,12 @@ import {
   Briefcase,
   ChartColumn,
   Clock3,
+  History,
   Tags,
 } from 'lucide-react';
+import { useWorkspace } from '../context/WorkspaceContext';
 import { useTranslation } from '../hooks/useTranslation';
+import { canWorkspace, WORKSPACE_LOGS_VIEW } from '../lib/permissions';
 
 type SidebarProps = {
   mobileOpen?: boolean;
@@ -24,7 +27,9 @@ export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) =>
   const [isCollapsed, setIsCollapsed] = useState(false);
   
   const { t, lang } = useTranslation();
+  const { activeWorkspace } = useWorkspace();
   const isRtl = lang === 'fa';
+  const canViewLogs = canWorkspace(activeWorkspace?.my_role, WORKSPACE_LOGS_VIEW);
 
   const ToggleIcon = isRtl
     ? (isCollapsed ? PanelRightOpen : PanelRightClose)
@@ -61,6 +66,15 @@ export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) =>
       icon: ChartColumn,
       label: t.sidebar?.reports || 'Reports'
     },
+    ...(canViewLogs
+      ? [
+          {
+            path: '/logs',
+            icon: History,
+            label: t.sidebar?.logs || 'Logs',
+          },
+        ]
+      : []),
   ];
 
   const renderNavItems = (mobile = false) =>

src/components/logs/LogDetailsPanel.tsx

@@ -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>
+  );
+}

src/components/logs/LogsFeed.tsx

@@ -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>
+  );
+}

src/components/logs/LogsFilterBar.tsx

@@ -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>
+  );
+}

src/lib/permissions.ts

@@ -8,6 +8,7 @@ export const WORKSPACE_MEMBERS_VIEW = "workspace.members.view";
 export const WORKSPACE_MEMBERS_ADD = "workspace.members.add";
 export const WORKSPACE_MEMBERS_REMOVE = "workspace.members.remove";
 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_CREATE = "clients.create";
 export const CLIENTS_EDIT = "clients.edit";
@@ -36,6 +37,7 @@ export type WorkspaceCapability =
   | typeof WORKSPACE_MEMBERS_ADD
   | typeof WORKSPACE_MEMBERS_REMOVE
   | typeof WORKSPACE_MEMBERS_CHANGE_ROLE
+  | typeof WORKSPACE_LOGS_VIEW
   | typeof CLIENTS_VIEW
   | typeof CLIENTS_CREATE
   | typeof CLIENTS_EDIT
@@ -65,6 +67,7 @@ const CAPABILITIES_BY_ROLE: Record<WorkspaceRole, Set<WorkspaceCapability>> = {
     WORKSPACE_MEMBERS_ADD,
     WORKSPACE_MEMBERS_REMOVE,
     WORKSPACE_MEMBERS_CHANGE_ROLE,
+    WORKSPACE_LOGS_VIEW,
     CLIENTS_VIEW,
     CLIENTS_CREATE,
     CLIENTS_EDIT,
@@ -92,6 +95,7 @@ const CAPABILITIES_BY_ROLE: Record<WorkspaceRole, Set<WorkspaceCapability>> = {
     WORKSPACE_MEMBERS_ADD,
     WORKSPACE_MEMBERS_REMOVE,
     WORKSPACE_MEMBERS_CHANGE_ROLE,
+    WORKSPACE_LOGS_VIEW,
     CLIENTS_VIEW,
     CLIENTS_CREATE,
     CLIENTS_EDIT,

src/locales/en.ts

@@ -267,6 +267,7 @@ export const en = {
   sidebar: {
     timesheet: "Timesheet",
     reports: "Reports",
+    logs: "Logs",
     workspaces: 'Workspaces',
     clients: 'Clients',
     projects: "Projects",
@@ -488,6 +489,78 @@ export const en = {
     exportError: "Failed to queue report export.",
   },
 
+  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",
     open: "Open notifications",

src/locales/fa.ts

@@ -264,6 +264,7 @@ export const fa = {
   sidebar: {
     timesheet: 'تایم‌شیت',
     reports: 'گزارش‌ها',
+    logs: "لاگ‌ها",
     workspaces: 'ورک‌اسپیس‌ها',
     clients: 'مشتری‌ها',
     projects: "پروژه‌ها",
@@ -483,6 +484,77 @@ export const fa = {
     exportQueued: "درخواست خروجی ثبت شد. پیوند دانلود از طریق اعلان ارسال می‌شود.",
     exportError: "ثبت درخواست خروجی با خطا مواجه شد.",
   },
+  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: "اعلان‌ها",
     open: "باز کردن اعلان‌ها",

src/pages/Logs.tsx

@@ -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>
+  );
+}