feat(logs): add workspace activity log page

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