feat(logs): add workspace activity log page

fix(timesheet): extend mobile layout to xl and tighten row field widths
refactor(workspaces): use eye icon for view action
2026-04-28 18:49:14 +03:30 · 2026-04-28 14:21:04 +03:30 · 2026-04-28 11:52:48 +03:30 · 2026-04-28 11:52:27 +03:30 · 2026-04-28 11:38:43 +03:30 · 2026-04-28 11:38:35 +03:30
27 changed files with 2196 additions and 693 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,7 @@
 # Logs
 logs
+!src/components/logs/
+!src/components/logs/**
 *.log
 npm-debug.log*
 yarn-debug.log*
@@ -23,4 +25,4 @@ dist-ssr
 *.sln
 *.sw?

-.env
+.env
--- a/src/App.tsx
+++ b/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 /> },
--- a/src/api/logs.ts
+++ b/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();
+};
--- a/src/api/projects.ts
+++ b/src/api/projects.ts
@@ -1,9 +1,16 @@
-import { authFetch } from "./client";
-
-export interface ProjectClient {
-  id: string;
-  name: string;
-}
+import { authFetch } from "./client";
+
+interface AuditUser {
+  id: string;
+  first_name?: string;
+  last_name?: string;
+  mobile?: string;
+}
+
+export interface ProjectClient {
+  id: string;
+  name: string;
+}

 export interface ProjectMemberPayload {
  user_id: string;
@@ -33,6 +40,7 @@ export interface Project {
  is_archived: boolean;
  is_deleted?: boolean;
  workspace: string;
+  created_by?: AuditUser | null;
  client: ProjectClient | null;
  my_role?: string;
  members?: ProjectMembership[];
--- a/src/api/tags.ts
+++ b/src/api/tags.ts
@@ -1,11 +1,19 @@
 import { authFetch } from "./client";

+interface AuditUser {
+  id: string;
+  first_name?: string;
+  last_name?: string;
+  mobile?: string;
+}
+
 export interface Tag {
  id: string;
  workspace: string;
  name: string;
  color: string;
  is_deleted?: boolean;
+  created_by?: AuditUser | null;
  created_at: string;
  updated_at: string;
 }
--- a/src/api/workspaces.ts
+++ b/src/api/workspaces.ts
@@ -2,12 +2,13 @@ import { authFetch } from "./client";

 export interface Workspace {
  id: string;
-  name: string;
-  description?: string;
-  owner?: string;
-  my_role?: 'owner' | 'admin' | 'member' | 'guest';
-  [key: string]: any;
-}
+  name: string;
+  description?: string;
+  thumbnail?: string | null;
+  owner?: string;
+  my_role?: 'owner' | 'admin' | 'member' | 'guest';
+  [key: string]: any;
+}

 export interface PaginatedResponse<T> {
  count: number;
@@ -19,13 +20,15 @@ export interface PaginatedResponse<T> {
 export interface WorkspaceMembership {
  id: string;
  workspace: string;
-  user: {
-    id: string;
-    email: string;
-    first_name?: string;
-    last_name?: string;
-    [key: string]: any;
-  };
+  user: {
+    id: string;
+    email?: string;
+    first_name?: string;
+    last_name?: string;
+    mobile?: string;
+    profile_picture?: string | null;
+    [key: string]: any;
+  };
  role: 'owner' | 'admin' | 'member' | 'guest';
  is_active: boolean;
  joined_at?: string;
@@ -75,11 +78,36 @@ export const getWorkspace = async (id: string): Promise<Workspace> => {
  return await response.json();
 };

-export const createWorkspace = async (data: { name: string; description: string; members?: any[] }): Promise<Workspace> => {
-  const response = await authFetch('/api/workspaces/', {
-    method: 'POST',
-    body: JSON.stringify(data),
-  });
+export const createWorkspace = async (data: {
+  name: string;
+  description: string;
+  members?: any[];
+  thumbnail?: File | null;
+}): Promise<Workspace> => {
+  const hasFile = data.thumbnail instanceof File;
+  const body = hasFile
+    ? (() => {
+        const formData = new FormData();
+        formData.append("name", data.name);
+        formData.append("description", data.description);
+        if (Array.isArray(data.members)) {
+          formData.append("members", JSON.stringify(data.members));
+        }
+        if (data.thumbnail) {
+          formData.append("thumbnail", data.thumbnail);
+        }
+        return formData;
+      })()
+    : JSON.stringify({
+        name: data.name,
+        description: data.description,
+        members: data.members,
+      });
+
+  const response = await authFetch('/api/workspaces/', {
+    method: 'POST',
+    body,
+  });

  if (!response.ok) {
    const errorData = await response.json();
@@ -88,11 +116,33 @@ export const createWorkspace = async (data: { name: string; description: string;
  return await response.json();
 };

-export const updateWorkspace = async (id: string, data: { name?: string; description?: string }): Promise<Workspace> => {
-  const response = await authFetch(`/api/workspaces/${id}/`, {
-    method: 'PATCH',
-    body: JSON.stringify(data),
-  });
+export const updateWorkspace = async (
+  id: string,
+  data: {
+    name?: string;
+    description?: string;
+    thumbnail?: File | null;
+    clear_thumbnail?: boolean;
+  },
+): Promise<Workspace> => {
+  const hasFile = data.thumbnail instanceof File;
+  const shouldClear = Boolean(data.clear_thumbnail);
+  const useForm = hasFile || shouldClear;
+  const body = useForm
+    ? (() => {
+        const formData = new FormData();
+        if (data.name !== undefined) formData.append("name", data.name);
+        if (data.description !== undefined) formData.append("description", data.description);
+        if (data.thumbnail) formData.append("thumbnail", data.thumbnail);
+        if (shouldClear) formData.append("clear_thumbnail", "true");
+        return formData;
+      })()
+    : JSON.stringify(data);
+
+  const response = await authFetch(`/api/workspaces/${id}/`, {
+    method: 'PATCH',
+    body,
+  });

  if (!response.ok) {
    const errorData = await response.json();
--- a/src/components/Sidebar.tsx
+++ b/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) =>
--- a/src/components/WorkspaceSelector.tsx
+++ b/src/components/WorkspaceSelector.tsx
@@ -50,10 +50,9 @@ export const WorkspaceSelector: React.FC = () => {
    const handleWorkspaceEdited = ((e: CustomEvent) => {
      // آپدیت نام کارتابل در نوبار در صورتی که کارتابل فعال ویرایش شده باشد
      if (activeWorkspace?.id === e.detail?.id) {
-        setActiveWorkspace({ 
-          ...activeWorkspace, 
-          name: e.detail.name, 
-          description: e.detail.description 
+        setActiveWorkspace({
+          ...activeWorkspace,
+          ...e.detail,
        } as Workspace);
      }
      refreshWorkspacesList();
@@ -123,9 +122,13 @@ export const WorkspaceSelector: React.FC = () => {
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 px-3 py-2 text-base font-medium text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
      >
-        <div className="w-6 h-6 flex items-center justify-center bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-md">
-          {activeWorkspace?.name?.charAt(0) || <Briefcase className="w-4 h-4" />}
-        </div>
+        <div className="w-6 h-6 flex items-center justify-center overflow-hidden rounded-md bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400">
+          {activeWorkspace?.thumbnail ? (
+            <img src={activeWorkspace.thumbnail} alt={activeWorkspace?.name || "Workspace"} className="h-full w-full object-cover" />
+          ) : (
+            activeWorkspace?.name?.charAt(0)?.toUpperCase() || <Briefcase className="w-4 h-4" />
+          )}
+        </div>
        <span className="max-w-30 truncate">
          {activeWorkspace?.name || t.workspace?.title || "Workspaces"}
        </span>
@@ -159,9 +162,13 @@ export const WorkspaceSelector: React.FC = () => {
                  className="w-full flex items-center justify-between px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
                >
                  <div className="flex items-center gap-2 truncate">
-                    <div className="w-6 h-6 flex items-center justify-center bg-slate-100 dark:bg-slate-800 rounded-md font-medium">
-                      {ws.name.charAt(0)}
-                    </div>
+                    <div className="w-6 h-6 flex items-center justify-center overflow-hidden rounded-md bg-slate-100 font-medium dark:bg-slate-800">
+                      {ws.thumbnail ? (
+                        <img src={ws.thumbnail} alt={ws.name} className="h-full w-full object-cover" />
+                      ) : (
+                        ws.name.charAt(0).toUpperCase()
+                      )}
+                    </div>
                    <span className="truncate">{ws.name}</span>
                  </div>
                  {activeWorkspace?.id === ws.id && (
--- a/src/components/logs/LogDetailsPanel.tsx
+++ b/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>
+  );
+}
--- a/src/components/logs/LogsFeed.tsx
+++ b/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>
+  );
+}
--- a/src/components/logs/LogsFilterBar.tsx
+++ b/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>
+  );
+}
--- a/src/components/reports/ReportsChartPanel.tsx
+++ b/src/components/reports/ReportsChartPanel.tsx
@@ -105,7 +105,13 @@ const getPersianDateParts = (value: Date) => {
  };
 };

-const getDailyAxisLabel = (date: Date, lang: "en" | "fa") => {
+const getDailyAxisLabel = (date: Date, lang: "en" | "fa", period: string) => {
+  if (period === "this_week") {
+    return new Intl.DateTimeFormat(lang === "fa" ? "fa-IR-u-ca-persian" : "en-US", {
+      weekday: "short",
+    }).format(date);
+  }
+
  if (lang === "fa") {
    return toPersianDigits(String(getPersianDateParts(date).day));
  }
@@ -140,7 +146,13 @@ const getMonthlyTooltipLabel = (bucketKey: string, lang: "en" | "fa") => {
  );
 };

-const buildDailyBuckets = (fromDate: string, toDate: string, existing: ReportChartBucket[], lang: "en" | "fa") => {
+const buildDailyBuckets = (
+  fromDate: string,
+  toDate: string,
+  existing: ReportChartBucket[],
+  lang: "en" | "fa",
+  period: string,
+) => {
  const map = new Map(existing.map((bucket) => [bucket.bucket_key, bucket]));
  const result: ReportChartBucket[] = [];
  const cursor = parseIsoDate(fromDate);
@@ -152,7 +164,7 @@ const buildDailyBuckets = (fromDate: string, toDate: string, existing: ReportCha
    result.push(
      existingBucket ?? {
        bucket_key: key,
-        bucket_label: getDailyAxisLabel(cursor, lang),
+        bucket_label: getDailyAxisLabel(cursor, lang, period),
        total_seconds: 0,
        total_duration: "00:00:00",
      },
@@ -162,7 +174,7 @@ const buildDailyBuckets = (fromDate: string, toDate: string, existing: ReportCha

  return result.map((bucket) => ({
    ...bucket,
-    bucket_label: getDailyAxisLabel(parseIsoDate(bucket.bucket_key), lang),
+    bucket_label: getDailyAxisLabel(parseIsoDate(bucket.bucket_key), lang, period),
  }));
 };

@@ -282,7 +294,7 @@ export function ReportsChartPanel({

  const buckets = useMonthlyBuckets
    ? buildMonthlyBuckets(data.scope.from_date, data.scope.to_date, data.buckets, lang)
-    : buildDailyBuckets(data.scope.from_date, data.scope.to_date, data.buckets, lang);
+    : buildDailyBuckets(data.scope.from_date, data.scope.to_date, data.buckets, lang, data.scope.period);

  const chartMinWidth = Math.max(640, buckets.length * (useMonthlyBuckets ? 92 : 44));
  const interval = useMonthlyBuckets ? 0 : buckets.length > 20 ? Math.ceil(buckets.length / 10) - 1 : 0;
--- a/src/components/reports/ReportsFilterBar.tsx
+++ b/src/components/reports/ReportsFilterBar.tsx
@@ -116,6 +116,7 @@ export function ReportsFilterBar({
  tags,
  users,
  canSelectUsers,
+  isLoadingUsers,
  labels,
 }: {
  value: ReportsFilterDraft;
@@ -125,6 +126,7 @@ export function ReportsFilterBar({
  tags: Tag[];
  users: WorkspaceMembership[];
  canSelectUsers: boolean;
+  isLoadingUsers: boolean;
  labels: Record<string, string>;
 }) {
  const [draft, setDraft] = useState(value);
@@ -200,30 +202,36 @@ export function ReportsFilterBar({
          </>
        ) : null}

-        {canSelectUsers ? (
+        {canSelectUsers || isLoadingUsers ? (
          <div>
            <label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
              {labels.user}
            </label>
-            <SearchableSelect
-              value={draft.user}
-              onChange={(user) => setDraft((current) => ({ ...current, user }))}
-              options={[
-                { value: "", label: labels.allUsers },
-                ...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={labels.allUsers}
-              searchPlaceholder={labels.searchUsers}
-              className="w-full"
-              buttonClassName="h-10 rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
-            />
+            {isLoadingUsers ? (
+              <div className="flex h-10 w-full 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">
+                {labels.searchUsers || "Loading users..."}
+              </div>
+            ) : (
+              <SearchableSelect
+                value={draft.user}
+                onChange={(user) => setDraft((current) => ({ ...current, user }))}
+                options={[
+                  { value: "", label: labels.allUsers },
+                  ...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={labels.allUsers}
+                searchPlaceholder={labels.searchUsers}
+                className="w-full"
+                buttonClassName="h-10 rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
+              />
+            )}
          </div>
        ) : null}

--- a/src/lib/permissions.ts
+++ b/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,
@@ -163,6 +167,21 @@ export const canProject = ({
  return projectRole === "manager" && PROJECT_MANAGER_CAPABILITIES.has(capability);
 };

+export const canDeleteWorkspaceResource = ({
+  workspaceRole,
+  currentUserId,
+  createdById,
+}: {
+  workspaceRole: WorkspaceRole | null | undefined;
+  currentUserId?: string | null;
+  createdById?: string | null;
+}) => {
+  if (!workspaceRole) return false;
+  if (workspaceRole === "owner") return true;
+  if (!currentUserId || !createdById) return false;
+  return currentUserId === createdById;
+};
+
 export const canChangeWorkspaceMember = ({
  actorRole,
  actorUserId,
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -131,8 +131,13 @@ export const en = {
    nameLabel: "Workspace Name",
    namePlaceholder: "Enter workspace name",
    descriptionLabel: "Description",
-    descriptionPlaceholder: "Enter description (optional)",
-    searchMemberPlaceholder: "Search exact mobile (e.g. 09123456789)",
+      descriptionPlaceholder: "Enter description (optional)",
+      thumbnailLabel: "Thumbnail",
+      uploadImage: "Click to upload image",
+      removeImage: "Remove image",
+      thumbnailInvalidType: "Unsupported image type. Use JPG, PNG, or WebP.",
+      thumbnailMaxSizeError: "Image size must be 2MB or less.",
+      searchMemberPlaceholder: "Search exact mobile (e.g. 09123456789)",
    addMember: "Add Member",
    roleAdmin: "Admin",
    roleMember: "Member",
@@ -151,30 +156,31 @@ export const en = {
    emptyState: "You are not a member of any workspace.",
    createTitle: "Create Workspace",
    editTitle: "Edit Workspace",
-    detailTitle: "Workspace Details",
-    save: "Save",
-    create: "Create",
-    noWorkspaceTitle: "Welcome!",
-    noWorkspaceDesc: "Please create your first workspace.",
-    back: "Back to Workspaces",
-    roleLabel: "Your Role",
-    openReports: "Open reports",
-    statsMembers: "Members",
-    statsRates: "Rates set",
-    statsOwnersAdmins: "Owners & admins",
-    statsGuests: "Guests",
-    membersSectionTitle: "Members",
-    membersSectionSubtitle: "People in this workspace and their current roles.",
-    membersLocked: "Only owners and admins can view the full member list.",
-    manageMembers: "Manage members",
-    joinedLabel: "Joined",
-    resourcesTitle: "Resources",
-    resourceOpen: "Open",
-    roleDistributionTitle: "Role distribution",
-    unknownMember: "Unknown member",
-    roles: {
-      owner: "Owner",
-      admin: "Admin",
+    detailTitle: "Workspace Details",
+    save: "Save",
+    create: "Create",
+    noWorkspaceTitle: "Welcome!",
+    noWorkspaceDesc: "Please create your first workspace.",
+    back: "Back to Workspaces",
+    roleLabel: "Your Role",
+    openReports: "Open reports",
+    statsMembers: "Members",
+    statsRates: "Rates set",
+    statsOwnersAdmins: "Owners & admins",
+    statsGuests: "Guests",
+    membersSectionTitle: "Members",
+    membersSectionSubtitle: "People in this workspace and their current roles.",
+    membersLocked: "Only owners and admins can view the full member list.",
+    manageMembers: "Manage members",
+    mobileNumber: "Mobile Number",
+    youLabel: "You",
+    resourcesTitle: "Resources",
+    resourceOpen: "Open",
+    roleDistributionTitle: "Role distribution",
+    unknownMember: "Unknown member",
+    roles: {
+      owner: "Owner",
+      admin: "Admin",
      member: "Member",
      guest: "Guest",
    },
@@ -261,13 +267,14 @@ export const en = {
  sidebar: {
    timesheet: "Timesheet",
    reports: "Reports",
+    logs: "Logs",
    workspaces: 'Workspaces',
    clients: 'Clients',
    projects: "Projects",
-    tags: "Tags",
-    expand: 'Expand',
-    collapse: 'Collapse',
-  },
+    tags: "Tags",
+    expand: 'Expand',
+    collapse: 'Collapse',
+  },

  ordering: {
    createdAtDesc: "Newest First",
@@ -277,7 +284,7 @@ export const en = {
    nameDesc: "Name (Z-A)",
  },

-  projects: {
+  projects: {
    title: "Projects",
    description: (workspaceName: string) => `Manage projects for ${workspaceName}`,
    active: "Active Projects",
@@ -314,12 +321,12 @@ export const en = {
    addAllWorkspaceMembers: "Add all workspace members",
    confirmDeleteTitle: "Remove Member",
    confirmDeleteDesc: "Are you sure you want to remove this member from the project?",
-    createSuccess: "Project created successfully.",
-    createError: "Failed to create project.",
-    updateSuccess: "Project updated successfully.",
-    updateError: "Failed to update project.",
-    edit: "Edit Project",
-    memberAlreadyAdded: "This user is already on the project team.",
+    createSuccess: "Project created successfully.",
+    createError: "Failed to create project.",
+    updateSuccess: "Project updated successfully.",
+    updateError: "Failed to update project.",
+    edit: "Edit Project",
+    memberAlreadyAdded: "This user is already on the project team.",
    roles: {
      member: "Member",
      manager: "Manager"
@@ -330,173 +337,245 @@ export const en = {
    userNotFound: "No user found with this mobile number.",
    alreadyInProject: "Already Added",
    addToProject: "Add to Project",
-    noWorkspaceMembers: "No members found.",
-  },
-
-  tags: {
-    title: "Tags",
-    description: (workspaceName: string) => `Manage tags for ${workspaceName}`,
-    create: "Create Tag",
-    createTitle: "Create Tag",
-    editTitle: "Edit Tag",
-    deleteTitle: "Delete Tag",
-    deleteConfirmMessage: (name: string) => `Are you sure you want to delete ${name}?`,
-    searchPlaceholder: "Search tags...",
-    nameLabel: "Tag Name",
-    namePlaceholder: "e.g. Design",
-    colorLabel: "Color",
-    emptyState: "No tags found",
-    selectWorkspace: "Please select a workspace first.",
-    fetchError: "Failed to load tags",
-    createSuccess: "Tag created successfully.",
-    updateSuccess: "Tag updated successfully.",
-    saveError: "Failed to save tag.",
-    deleteSuccess: "Tag deleted successfully.",
-    deleteError: "Failed to delete tag.",
-  },
-
-  rates: {
-    workspaceSectionTitle: "Workspace User Rates",
-    projectSectionTitle: "Project User Rates",
-    workspaceRate: "Workspace rate",
-    projectOverride: "Project override",
-    inheritsWorkspaceRate: "Inherits workspace rate",
-    noRate: "No rate",
-    hourlyRatePlaceholder: "0.00",
-    currencyPlaceholder: "USD",
-    searchUnitPlaceholder: "Search unit...",
-    removeRate: "Remove rate",
-    workspaceSaveSuccess: "Workspace user rate saved.",
-    workspaceSaveError: "Failed to save workspace user rate.",
-    workspaceRemoveSuccess: "Workspace user rate removed.",
-    workspaceRemoveError: "Failed to remove workspace user rate.",
-    projectSaveSuccess: "Project user rate saved.",
-    projectSaveError: "Failed to save project user rate.",
-    projectRemoveSuccess: "Project user rate removed.",
-    projectRemoveError: "Failed to remove project user rate.",
-  },
-
-  timesheet: {
-    title: "Timesheet",
-    description: (workspaceName: string) => `Track time inside ${workspaceName}`,
-    selectWorkspace: "Please select a workspace first.",
-    addEntry: "Add Entry",
-    startTimer: "Start Timer",
-    stopTimer: "Stop Timer",
-    timerRunning: "Timer Running",
-    runningLabel: "Current timer",
-    runningBadge: "Running",
-    noRunningEntry: "No running entry",
-    searchPlaceholder: "Search time entries...",
-    orderingNewest: "Newest first",
-    orderingOldest: "Oldest first",
-    emptyState: "No time entries found",
-    emptyDescription: "No description",
-    createTitle: "Add Time Entry",
-    startTitle: "Start Timer",
-    editTitle: "Edit Time Entry",
-    createSuccess: "Time entry created successfully.",
-    startSuccess: "Timer started successfully.",
-    updateSuccess: "Time entry updated successfully.",
-    saveError: "Failed to save time entry.",
-    stopSuccess: "Timer stopped successfully.",
-    stopError: "Failed to stop timer.",
-    deleteSuccess: "Time entry deleted successfully.",
-    deleteError: "Failed to delete time entry.",
-    fetchError: "Failed to load time entries.",
-    optionsError: "Failed to load projects and tags.",
-    descriptionLabel: "Description",
-    descriptionPlaceholder: "What are you working on?",
-    projectLabel: "Project",
-    noProject: "No project",
-    startLabel: "Start",
-    endLabel: "End",
-    billable: "Billable",
-    noTagsHint: "Create tags first from the Tags page.",
-    clearFilters: "Clear filters",
-    customFromLabel: "From date",
-    customToLabel: "To date",
-    allClientsLabel: "All clients",
-    allProjectsLabel: "All projects",
-    allTagsLabel: "All tags",
-    showFiltersLabel: "Show filters",
-    hideFiltersLabel: "Hide filters",
-    applyFiltersLabel: "Apply",
-    clientFilterPrefix: "Client",
-    projectFilterPrefix: "Project",
-    tagFilterPrefix: "Tag",
-    fromFilterPrefix: "From",
-    toFilterPrefix: "To",
-    deletedProjectLabel: "Deleted project",
-    deletedTagLabel: "Deleted tag",
-  },
-
+    noWorkspaceMembers: "No members found.",
+  },
+
+  tags: {
+    title: "Tags",
+    description: (workspaceName: string) => `Manage tags for ${workspaceName}`,
+    create: "Create Tag",
+    createTitle: "Create Tag",
+    editTitle: "Edit Tag",
+    deleteTitle: "Delete Tag",
+    deleteConfirmMessage: (name: string) => `Are you sure you want to delete ${name}?`,
+    searchPlaceholder: "Search tags...",
+    nameLabel: "Tag Name",
+    namePlaceholder: "e.g. Design",
+    colorLabel: "Color",
+    emptyState: "No tags found",
+    selectWorkspace: "Please select a workspace first.",
+    fetchError: "Failed to load tags",
+    createSuccess: "Tag created successfully.",
+    updateSuccess: "Tag updated successfully.",
+    saveError: "Failed to save tag.",
+    deleteSuccess: "Tag deleted successfully.",
+    deleteError: "Failed to delete tag.",
+  },
+
+  rates: {
+    workspaceSectionTitle: "Workspace User Rates",
+    projectSectionTitle: "Project User Rates",
+    workspaceRate: "Workspace rate",
+    projectOverride: "Project override",
+    inheritsWorkspaceRate: "Inherits workspace rate",
+    noRate: "No rate",
+    hourlyRatePlaceholder: "0.00",
+    currencyPlaceholder: "USD",
+    searchUnitPlaceholder: "Search unit...",
+    removeRate: "Remove rate",
+    workspaceSaveSuccess: "Workspace user rate saved.",
+    workspaceSaveError: "Failed to save workspace user rate.",
+    workspaceRemoveSuccess: "Workspace user rate removed.",
+    workspaceRemoveError: "Failed to remove workspace user rate.",
+    projectSaveSuccess: "Project user rate saved.",
+    projectSaveError: "Failed to save project user rate.",
+    projectRemoveSuccess: "Project user rate removed.",
+    projectRemoveError: "Failed to remove project user rate.",
+  },
+
+  timesheet: {
+    title: "Timesheet",
+    description: (workspaceName: string) => `Track time inside ${workspaceName}`,
+    selectWorkspace: "Please select a workspace first.",
+    addEntry: "Add Entry",
+    startTimer: "Start Timer",
+    stopTimer: "Stop Timer",
+    timerRunning: "Timer Running",
+    runningLabel: "Current timer",
+    runningBadge: "Running",
+    noRunningEntry: "No running entry",
+    searchPlaceholder: "Search time entries...",
+    orderingNewest: "Newest first",
+    orderingOldest: "Oldest first",
+    emptyState: "No time entries found",
+    emptyDescription: "No description",
+    createTitle: "Add Time Entry",
+    startTitle: "Start Timer",
+    editTitle: "Edit Time Entry",
+    createSuccess: "Time entry created successfully.",
+    startSuccess: "Timer started successfully.",
+    updateSuccess: "Time entry updated successfully.",
+    saveError: "Failed to save time entry.",
+    stopSuccess: "Timer stopped successfully.",
+    stopError: "Failed to stop timer.",
+    deleteSuccess: "Time entry deleted successfully.",
+    deleteError: "Failed to delete time entry.",
+    fetchError: "Failed to load time entries.",
+    optionsError: "Failed to load projects and tags.",
+    descriptionLabel: "Description",
+    descriptionPlaceholder: "What are you working on?",
+    projectLabel: "Project",
+    noProject: "No project",
+    startLabel: "Start",
+    endLabel: "End",
+    billable: "Billable",
+    noTagsHint: "Create tags first from the Tags page.",
+    clearFilters: "Clear filters",
+    customFromLabel: "From date",
+    customToLabel: "To date",
+    allClientsLabel: "All clients",
+    allProjectsLabel: "All projects",
+    allTagsLabel: "All tags",
+    showFiltersLabel: "Show filters",
+    hideFiltersLabel: "Hide filters",
+    applyFiltersLabel: "Apply",
+    clientFilterPrefix: "Client",
+    projectFilterPrefix: "Project",
+    tagFilterPrefix: "Tag",
+    fromFilterPrefix: "From",
+    toFilterPrefix: "To",
+    deletedProjectLabel: "Deleted project",
+    deletedTagLabel: "Deleted tag",
+  },
+
  reports: {
-    title: "Reports",
-    description: (workspaceName: string) => `Review activity reports for ${workspaceName}`,
-    selectWorkspace: "Please select a workspace first.",
-    chartTab: "Chart",
-    tableTab: "Table",
-    period: "Period",
-    periodThisWeek: "This week",
-    periodThisMonth: "This month",
-    periodThisYear: "This year",
-    periodFirstHalf: "First half of year",
-    periodSecondHalf: "Second half of year",
-    periodCustom: "Custom period",
-    fromDate: "From date",
-    toDate: "To date",
-    user: "User",
-    allUsers: "All users",
-    searchUsers: "Search users...",
-    client: "Client",
-    allClients: "All clients",
-    searchClients: "Search clients...",
-    project: "Project",
-    allProjects: "All projects",
-    searchProjects: "Search projects...",
-    tags: "Tags",
-    allTags: "All tags",
-    searchTags: "Search tags...",
-    name: "Name",
-    clear: "Clear",
-    apply: "Apply",
-    totalHours: "Total hours",
-    billableHours: "Billable hours",
-    nonBillableHours: "Non-billable hours",
-    totalIncome: "Total income",
-    chartTitle: "Activity chart",
-    totalSeconds: "Total seconds",
-    exportExcel: "Export Excel",
-    exportPdf: "Export PDF",
-    date: "Date",
-    details: "Details",
-    total: "Total",
-    clientsTable: "Clients",
-    projectsTable: "Projects",
-    tagsTable: "Tags",
-    loadError: "Failed to load reports.",
-    loadDayDetailsError: "Failed to load day details.",
-    loadFiltersError: "Failed to load report filters.",
+    title: "Reports",
+    description: (workspaceName: string) => `Review activity reports for ${workspaceName}`,
+    selectWorkspace: "Please select a workspace first.",
+    chartTab: "Chart",
+    tableTab: "Table",
+    period: "Period",
+    periodThisWeek: "This week",
+    periodThisMonth: "This month",
+    periodThisYear: "This year",
+    periodFirstHalf: "First half of year",
+    periodSecondHalf: "Second half of year",
+    periodCustom: "Custom period",
+    fromDate: "From date",
+    toDate: "To date",
+    user: "User",
+    allUsers: "All users",
+    searchUsers: "Search users...",
+    client: "Client",
+    allClients: "All clients",
+    searchClients: "Search clients...",
+    project: "Project",
+    allProjects: "All projects",
+    searchProjects: "Search projects...",
+    tags: "Tags",
+    allTags: "All tags",
+    searchTags: "Search tags...",
+    name: "Name",
+    clear: "Clear",
+    apply: "Apply",
+    totalHours: "Total hours",
+    billableHours: "Billable hours",
+    nonBillableHours: "Non-billable hours",
+    totalIncome: "Total income",
+    chartTitle: "Activity chart",
+    totalSeconds: "Total seconds",
+    exportExcel: "Export Excel",
+    exportPdf: "Export PDF",
+    date: "Date",
+    details: "Details",
+    total: "Total",
+    clientsTable: "Clients",
+    projectsTable: "Projects",
+    tagsTable: "Tags",
+    loadError: "Failed to load reports.",
+    loadDayDetailsError: "Failed to load day details.",
+    loadFiltersError: "Failed to load report filters.",
    exportQueued: "Export queued. You will receive a notification with the download link.",
    exportError: "Failed to queue report export.",
  },

-  notifications: {
-    title: "Notifications",
-    open: "Open notifications",
-    empty: "No notifications yet.",
-    loading: "Loading notifications...",
-    loadingMore: "Loading more...",
+  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",
-    markAllRead: "Mark all as read",
-    markSeenError: "Failed to update notification",
-    markAllError: "Failed to update notifications",
-    deleteError: "Failed to delete notification",
-    loadError: "Failed to load notifications",
-    openError: "Failed to open notification",
-    newTitle: "New notification",
-    openAction: "Open",
-    summary: (total: number, unread: number) => `${total} total, ${unread} unread`,
+    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",
+    empty: "No notifications yet.",
+    loading: "Loading notifications...",
+    loadingMore: "Loading more...",
+    loadMore: "Load more",
+    markAllRead: "Mark all as read",
+    markSeenError: "Failed to update notification",
+    markAllError: "Failed to update notifications",
+    deleteError: "Failed to delete notification",
+    loadError: "Failed to load notifications",
+    openError: "Failed to open notification",
+    newTitle: "New notification",
+    openAction: "Open",
+    summary: (total: number, unread: number) => `${total} total, ${unread} unread`,
+  },
+}
--- a/src/locales/fa.ts
+++ b/src/locales/fa.ts
@@ -132,8 +132,13 @@ export const fa = {
    nameLabel: "عنوان",
    namePlaceholder: "نام ورک‌اسپیس را وارد کنید",
    descriptionLabel: "توضیحات",
-    descriptionPlaceholder: "توضیحات (اختیاری)",
-    searchMemberPlaceholder: "جستجو با موبایل دقیق (مثلا 09123456789)",
+      descriptionPlaceholder: "توضیحات (اختیاری)",
+      thumbnailLabel: "تصویر",
+      uploadImage: "برای آپلود تصویر کلیک کنید",
+      removeImage: "حذف تصویر",
+      thumbnailInvalidType: "نوع تصویر پشتیبانی نمی‌شود. از JPG، PNG یا WebP استفاده کنید.",
+      thumbnailMaxSizeError: "حجم تصویر باید حداکثر ۲ مگابایت باشد.",
+      searchMemberPlaceholder: "جستجو با موبایل دقیق (مثلا 09123456789)",
    addMember: "افزودن عضو",
    roleAdmin: "مدیر",
    roleMember: "عضو",
@@ -168,7 +173,8 @@ export const fa = {
    membersSectionSubtitle: "اعضای این ورک‌اسپیس و نقش فعلی آن‌ها.",
    membersLocked: "فهرست کامل اعضا فقط برای مالک و ادمین قابل مشاهده است.",
    manageMembers: "مدیریت اعضا",
-    joinedLabel: "زمان عضویت",
+    mobileNumber: "شماره تماس",
+    youLabel: "شما",
    resourcesTitle: "منابع",
    resourceOpen: "مشاهده",
    roleDistributionTitle: "توزیع نقش‌ها",
@@ -255,10 +261,11 @@ export const fa = {
    next: "بعدی",
  },

-  sidebar: {
-    timesheet: 'تایم‌شیت',
-    reports: 'گزارش‌ها',
-    workspaces: 'ورک‌اسپیس‌ها',
+  sidebar: {
+    timesheet: 'تایم‌شیت',
+    reports: 'گزارش‌ها',
+    logs: "لاگ‌ها",
+    workspaces: 'ورک‌اسپیس‌ها',
    clients: 'مشتری‌ها',
    projects: "پروژه‌ها",
    tags: "تگ‌ها",
@@ -421,13 +428,13 @@ export const fa = {
    applyFiltersLabel: "اعمال",
    clientFilterPrefix: "مشتری",
    projectFilterPrefix: "پروژه",
-    tagFilterPrefix: "تگ",
-    fromFilterPrefix: "از",
-    toFilterPrefix: "تا",
-    deletedProjectLabel: "پروژه حذف‌شده",
-    deletedTagLabel: "تگ حذف‌شده",
-  },
-  reports: {
+    tagFilterPrefix: "تگ",
+    fromFilterPrefix: "از",
+    toFilterPrefix: "تا",
+    deletedProjectLabel: "پروژه حذف‌شده",
+    deletedTagLabel: "تگ حذف‌شده",
+  },
+  reports: {
    title: "گزارش‌ها",
    description: (workspaceName: string) => `مرور گزارش فعالیت برای ${workspaceName}`,
    selectWorkspace: "لطفاً ابتدا یک ورک‌اسپیس انتخاب کنید.",
@@ -474,10 +481,81 @@ export const fa = {
    loadError: "دریافت گزارش‌ها با خطا مواجه شد.",
    loadDayDetailsError: "دریافت جزئیات روز با خطا مواجه شد.",
    loadFiltersError: "دریافت فیلترهای گزارش با خطا مواجه شد.",
-    exportQueued: "درخواست خروجی ثبت شد. پیوند دانلود از طریق اعلان ارسال می‌شود.",
-    exportError: "ثبت درخواست خروجی با خطا مواجه شد.",
-  },
-  notifications: {
+    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: "باز کردن اعلان‌ها",
    empty: "هنوز اعلانی وجود ندارد.",
--- a/src/pages/Clients.tsx
+++ b/src/pages/Clients.tsx
@@ -1,13 +1,14 @@
 import { useEffect, useState } from "react"
 import { Plus, Building2, Loader2, Pencil, Trash2 } from "lucide-react"
-import { useWorkspace } from "../context/WorkspaceContext" 
-import { useTranslation } from "../hooks/useTranslation" 
-import {
-  CLIENTS_CREATE,
-  CLIENTS_DELETE,
-  CLIENTS_EDIT,
-  canWorkspace,
-} from "../lib/permissions"
+import { useWorkspace } from "../context/WorkspaceContext" 
+import { useAppContext } from "../context/AppContext"
+import { useTranslation } from "../hooks/useTranslation" 
+import {
+  CLIENTS_CREATE,
+  CLIENTS_EDIT,
+  canDeleteWorkspaceResource,
+  canWorkspace,
+} from "../lib/permissions"
 import { type Client } from "../types/client"
 import { getClients } from "../api/clients"
 import CreateClientModal from "../components/CreateClientModal"
@@ -18,9 +19,10 @@ import { Button } from "../components/ui/button"
 import { Card } from "../components/ui/card"
 import { Pagination } from "../components/Pagination"

-export default function Clients() {
-  const { activeWorkspace } = useWorkspace()
-  const [clients, setClients] = useState<Client[]>([]) 
+export default function Clients() {
+  const { activeWorkspace } = useWorkspace()
+  const { user } = useAppContext()
+  const [clients, setClients] = useState<Client[]>([]) 
  const [isLoading, setIsLoading] = useState(true)
  
  // Pagination States
@@ -40,10 +42,9 @@ export default function Clients() {
  
  const { t, lang } = useTranslation()
  const isFa = lang === "fa"
-  const workspaceRole = activeWorkspace?.my_role
-  const canCreateClient = canWorkspace(workspaceRole, CLIENTS_CREATE)
-  const canEditClient = canWorkspace(workspaceRole, CLIENTS_EDIT)
-  const canDeleteClient = canWorkspace(workspaceRole, CLIENTS_DELETE)
+  const workspaceRole = activeWorkspace?.my_role
+  const canCreateClient = canWorkspace(workspaceRole, CLIENTS_CREATE)
+  const canEditClient = canWorkspace(workspaceRole, CLIENTS_EDIT)

  const orderingOptions = [
    { value: "-created_at", label: t.ordering?.createdAtDesc || "Newest First" },
@@ -161,8 +162,14 @@ export default function Clients() {
            </div>
          ) : (
            <ul className="divide-y divide-slate-200 dark:divide-slate-800">
-              {clients.map((client) => (
-                <li key={client.id} className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex items-center justify-between gap-4">
+              {clients.map((client) => {
+                const canDeleteClient = canDeleteWorkspaceResource({
+                  workspaceRole,
+                  currentUserId: user?.id,
+                  createdById: client.created_by?.id,
+                })
+                return (
+                <li key={client.id} className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex items-center justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <h4 className="font-medium text-slate-900 dark:text-white truncate">{client.name}</h4>
                    {client.notes && (
@@ -196,10 +203,11 @@ export default function Clients() {
                      )}
                    </div>
                  )}
-                </li>
-              ))}
-            </ul>
-          )}
+                </li>
+                )
+              })}
+            </ul>
+          )}
        </div>
      </Card>

@@ -231,12 +239,12 @@ export default function Clients() {
        />
      )}

-      {canDeleteClient && (
-        <DeleteClientModal
-          isOpen={!!deleteClient}
-          onClose={() => setDeleteClient(null)}
-          onSuccess={fetchClientsList}
-          client={deleteClient}
+      {!!deleteClient && (
+        <DeleteClientModal
+          isOpen={!!deleteClient}
+          onClose={() => setDeleteClient(null)}
+          onSuccess={fetchClientsList}
+          client={deleteClient}
        />
      )}
    </div>
--- a/src/pages/Logs.tsx
+++ b/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>
+  );
+}
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { useTranslation } from "../hooks/useTranslation";
-import { getProjects, deleteProject, type Project } from "../api/projects";
-import { useWorkspace } from "../context/WorkspaceContext";
+import { getProjects, deleteProject, type Project } from "../api/projects";
+import { useAppContext } from "../context/AppContext";
+import { useWorkspace } from "../context/WorkspaceContext";
 import { ProjectCreateModal } from "../components/projects/ProjectCreateModal";
 import { ProjectEditModal } from "../components/projects/ProjectEditModal";
 import { Pagination } from "../components/Pagination";
@@ -14,21 +15,21 @@ import { Modal } from "../components/Modal";
 import { toast } from "sonner";
 import { Input } from "../components/ui/input";
 import {
-  PROJECTS_ARCHIVE,
-  PROJECTS_CREATE,
-  PROJECTS_DELETE,
-  PROJECTS_EDIT,
-  canWorkspace,
-} from "../lib/permissions";
+  PROJECTS_ARCHIVE,
+  PROJECTS_CREATE,
+  PROJECTS_EDIT,
+  canDeleteWorkspaceResource,
+  canWorkspace,
+} from "../lib/permissions";

 export const Projects: React.FC = () => {
-  const { t, lang } = useTranslation();
-  const { activeWorkspace } = useWorkspace();
-  const workspaceRole = activeWorkspace?.my_role;
-  const canCreateProject = canWorkspace(workspaceRole, PROJECTS_CREATE);
-  const canEditProject = canWorkspace(workspaceRole, PROJECTS_EDIT);
-  const canDeleteProject = canWorkspace(workspaceRole, PROJECTS_DELETE);
-  const canArchiveProject = canWorkspace(workspaceRole, PROJECTS_ARCHIVE);
+  const { t, lang } = useTranslation();
+  const { user } = useAppContext();
+  const { activeWorkspace } = useWorkspace();
+  const workspaceRole = activeWorkspace?.my_role;
+  const canCreateProject = canWorkspace(workspaceRole, PROJECTS_CREATE);
+  const canEditProject = canWorkspace(workspaceRole, PROJECTS_EDIT);
+  const canArchiveProject = canWorkspace(workspaceRole, PROJECTS_ARCHIVE);
  
  const [projects, setProjects] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
@@ -188,9 +189,15 @@ export const Projects: React.FC = () => {
                </div>
              ) : (
                <ul className="divide-y divide-slate-200 dark:divide-slate-800">
-                  {projects.map((project) => (
-                    <li
-                      key={project.id}
+                  {projects.map((project) => {
+                    const canDeleteProject = canDeleteWorkspaceResource({
+                      workspaceRole,
+                      currentUserId: user?.id,
+                      createdById: project.created_by?.id,
+                    });
+                    return (
+                    <li
+                      key={project.id}
                      className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex items-center justify-between gap-4"
                    >
                      <div className="flex-1 min-w-0">
@@ -232,8 +239,9 @@ export const Projects: React.FC = () => {
                          )}
                        </div>
                      )}
-                    </li>
-                  ))}
+                    </li>
+                    );
+                  })}
                </ul>
              )}
            </div>
--- a/src/pages/Reports.tsx
+++ b/src/pages/Reports.tsx
@@ -96,12 +96,15 @@ export default function Reports() {
  const [dayDetails, setDayDetails] = useState<DayDetailsResponse | null>(null);
  const [openDay, setOpenDay] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingUsers, setIsLoadingUsers] = useState(false);
  const [exportState, setExportState] = useState({
    excel: { pending: false, cooldownSeconds: 0 },
    pdf: { pending: false, cooldownSeconds: 0 },
  });

  const canSelectUsers = canWorkspace(activeWorkspace?.my_role, WORKSPACE_MEMBERS_VIEW);
+  const isWorkspaceRoleResolved = Boolean(activeWorkspace?.my_role);
+  const showUserFilterLoading = !isWorkspaceRoleResolved || (canSelectUsers && isLoadingUsers);

  const [filters, setFilters] = useState<ReportsFilterDraft>({
    period: "this_month",
@@ -117,16 +120,14 @@ export default function Reports() {
    if (!activeWorkspace?.id) return;
    const loadOptions = async () => {
      try {
-        const [projectsResponse, clientsResponse, tagsResponse, membersResponse] = await Promise.all([
+        const [projectsResponse, clientsResponse, tagsResponse] = await Promise.all([
          getProjects(activeWorkspace.id, { limit: 300, offset: 0 }),
          getClients(activeWorkspace.id, "", "", 300, 0),
          getTags(activeWorkspace.id, { limit: 300, offset: 0 }),
-          fetchWorkspaceMemberships({ workspace: activeWorkspace.id }),
        ]);
        setProjects(projectsResponse.results || []);
        setClients((clientsResponse.results || []).map((client: { id: string; name: string }) => ({ id: client.id, name: client.name })));
        setTags(tagsResponse.results || []);
-        setMemberships(membersResponse.results || []);
      } catch {
        toast.error(t.reports?.loadFiltersError || "Failed to load report filters.");
      }
@@ -134,6 +135,31 @@ export default function Reports() {
    void loadOptions();
  }, [activeWorkspace?.id, t.reports?.loadFiltersError]);

+  useEffect(() => {
+    if (!activeWorkspace?.id || !isWorkspaceRoleResolved) return;
+
+    if (!canSelectUsers) {
+      setMemberships([]);
+      setIsLoadingUsers(false);
+      return;
+    }
+
+    const loadUsers = async () => {
+      setIsLoadingUsers(true);
+      try {
+        const membersResponse = await fetchWorkspaceMemberships({ workspace: activeWorkspace.id });
+        setMemberships(membersResponse.results || []);
+      } catch {
+        toast.error(t.reports?.loadFiltersError || "Failed to load report filters.");
+        setMemberships([]);
+      } finally {
+        setIsLoadingUsers(false);
+      }
+    };
+
+    void loadUsers();
+  }, [activeWorkspace?.id, canSelectUsers, isWorkspaceRoleResolved, t.reports?.loadFiltersError]);
+
  const buildApiFilters = (draft: ReportsFilterDraft): ReportFilters | null => {
    if (!activeWorkspace?.id) return null;

@@ -296,6 +322,7 @@ export default function Reports() {
        tags={tags}
        users={memberships}
        canSelectUsers={canSelectUsers}
+        isLoadingUsers={showUserFilterLoading}
        labels={{
          period: t.reports?.period || "Period",
          thisWeek: t.reports?.periodThisWeek || "This week",
--- a/src/pages/Tags.tsx
+++ b/src/pages/Tags.tsx
@@ -3,9 +3,10 @@ import { Edit2, Plus, Tag as TagIcon, Trash2 } from "lucide-react";
 import { toast } from "sonner";

 import { createTag, deleteTag, getTags, type Tag, updateTag } from "../api/tags";
+import { useAppContext } from "../context/AppContext";
 import { useWorkspace } from "../context/WorkspaceContext";
 import { useTranslation } from "../hooks/useTranslation";
-import { TAGS_CREATE, TAGS_DELETE, TAGS_EDIT, canWorkspace } from "../lib/permissions";
+import { TAGS_CREATE, TAGS_EDIT, canDeleteWorkspaceResource, canWorkspace } from "../lib/permissions";
 import FilterBar from "../components/FilterBar";
 import { Modal } from "../components/Modal";
 import { Pagination } from "../components/Pagination";
@@ -17,11 +18,11 @@ const DEFAULT_COLOR = "#3B82F6";

 export default function Tags() {
  const { t } = useTranslation();
+  const { user } = useAppContext();
  const { activeWorkspace } = useWorkspace();
  const workspaceRole = activeWorkspace?.my_role;
  const canCreateTag = canWorkspace(workspaceRole, TAGS_CREATE);
  const canEditTag = canWorkspace(workspaceRole, TAGS_EDIT);
-  const canDeleteTag = canWorkspace(workspaceRole, TAGS_DELETE);

  const [tags, setTags] = useState<Tag[]>([]);
  const [isLoading, setIsLoading] = useState(false);
@@ -172,7 +173,13 @@ export default function Tags() {
      ) : (
        <div className="flex flex-col flex-1">
          <div className="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-            {tags.map((tag) => (
+            {tags.map((tag) => {
+              const canDeleteTag = canDeleteWorkspaceResource({
+                workspaceRole,
+                currentUserId: user?.id,
+                createdById: tag.created_by?.id,
+              });
+              return (
              <Card key={tag.id} className="overflow-hidden shadow-sm dark:border-slate-700 dark:bg-slate-800">
                <CardContent className="flex h-full flex-col gap-4 p-5">
                  <div className="flex items-start justify-between gap-3">
@@ -208,7 +215,8 @@ export default function Tags() {
                  </div>
                </CardContent>
              </Card>
-            ))}
+              );
+            })}

            {tags.length === 0 && (
              <div className="py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl text-slate-500 dark:text-slate-400">
--- a/src/pages/Timesheet.tsx
+++ b/src/pages/Timesheet.tsx
@@ -1235,11 +1235,11 @@ function EntryEditorFields({
                onChange={(projectId) => (onProjectChange ? onProjectChange(projectId) : onChange({ projectId }))}
                placeholder={t.timesheet?.projectLabel || "Project"}
                portalOwnerId={portalOwnerId}
-                className="min-w-0 max-w-[150px] 2xl:max-w-max flex-1"
+                className="min-w-0 max-w-fit flex-1"
              />

              {selectedProject?.client?.name && (
-                <span className="min-w-0 max-w-[120px] 2xl:max-w-max shrink truncate text-sm text-slate-400 dark:text-slate-500" title={selectedProject.client.name}>
+                <span className="min-w-0 max-w-[120px] 2xl:max-w-fit shrink truncate text-sm text-slate-400 dark:text-slate-500" title={selectedProject.client.name}>
                  - {selectedProject.client.name}
                </span>
              )}
@@ -1748,7 +1748,7 @@ function MobileRecordedEntryCard({
  };

  return (
-    <div ref={wrapperRef} className="relative overflow-hidden border-b border-slate-200 bg-slate-100/70 dark:border-slate-800 dark:bg-slate-900/70 md:hidden">
+    <div ref={wrapperRef} className="relative overflow-hidden border-b border-slate-200 bg-slate-100/70 dark:border-slate-800 dark:bg-slate-900/70 xl:hidden">
      <div className="pointer-events-none absolute inset-y-0 left-0 flex w-24 items-center justify-start bg-emerald-500/12 ps-4 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300">
        <Play className="h-4 w-4" />
      </div>
@@ -2526,110 +2526,10 @@ export default function Timesheet() {
        </div>
      </div>

-      <div
-        onBlurCapture={handleTimerBlurCapture}
-        className="mb-4 hidden rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950 md:block xl:hidden"
-      >
-        <div className="space-y-3">
-          <Input
-            value={timerDraft.description}
-            placeholder={t.timesheet?.descriptionPlaceholder || "What are you working on?"}
-            onChange={(event) => setTimerDraft((current) => ({ ...current, description: event.target.value }))}
-            disabled={isStartingTimer}
-            className="h-11 border-slate-200 bg-slate-50 text-sm dark:border-slate-700 dark:bg-slate-900"
-          />
-
-          <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(180px,220px)_auto]">
-            <Select
-              value={timerDraft.projectId}
-              onChange={(value) => setTimerDraft((current) => ({ ...current, projectId: String(value) }))}
-              options={[
-                { value: "", label: t.timesheet?.projectLabel || "Project" },
-                ...runningTimerProjects.map((project) => ({ value: project.id, label: project.name })),
-              ]}
-              className="w-full"
-              buttonClassName="h-11 w-full rounded-md border border-slate-200 bg-slate-50 px-3 text-sm shadow-none outline-none dark:border-slate-700 dark:bg-slate-900 focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-              disabled={isStartingTimer}
-              portalOwnerId={timerEditorOwnerId}
-            />
-
-            <div className="flex min-w-0 items-center">
-              <TagMultiSelect
-                tags={runningTimerTags}
-                selectedTags={timerDraft.tags}
-                onToggleTag={(tagId) =>
-                  setTimerDraft((current) => ({ ...current, tags: toggleTagId(current.tags, tagId) }))
-                }
-                emptyHint={t.timesheet?.noTagsHint || "Create tags first from the Tags page."}
-                title={t.tags?.title || "Tags"}
-                compact
-                portalOwnerId={timerEditorOwnerId}
-                className="max-w-full"
-                buttonClassName="max-w-full"
-              />
-            </div>
-
-            <div className="flex items-center justify-start lg:justify-end">
-              <div className="flex h-11 min-w-[132px] items-center justify-center rounded-md border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-white">
-                {runningEntry ? formatDuration(runningEntry, ticker) : "00:00:00"}
-              </div>
-            </div>
-          </div>
-
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <BillableIconButton
-              checked={timerDraft.isBillable}
-              onChange={(checked) => setTimerDraft((current) => ({ ...current, isBillable: checked }))}
-              label={t.timesheet?.billable || "Billable"}
-              disabled={isStartingTimer}
-            />
-
-            <div className="flex shrink-0 items-center gap-2">
-              {runningEntry ? (
-                <>
-                  <Button
-                    variant="destructive"
-                    size="icon"
-                    onClick={() => void handleStop(runningEntry)}
-                    className="h-11 w-11 rounded-md"
-                    title={t.timesheet?.stopTimer || "Stop"}
-                    aria-label={t.timesheet?.stopTimer || "Stop"}
-                  >
-                    <Square className="h-4 w-4 fill-current" />
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    size="icon"
-                    onClick={openDiscardTimerModal}
-                    disabled={isDiscardingTimer}
-                    className="h-11 w-11 rounded-md"
-                    title={(t.actions as { discard?: string } | undefined)?.discard || "Discard"}
-                    aria-label={(t.actions as { discard?: string } | undefined)?.discard || "Discard"}
-                  >
-                    {isDiscardingTimer ? "..." : <Trash2 className="h-4 w-4" />}
-                  </Button>
-                </>
-              ) : (
-                <Button
-                  onClick={() => void handleStartTimer()}
-                  disabled={isStartingTimer}
-                  size="icon"
-                  className="h-11 w-11 rounded-md"
-                  title={t.timesheet?.startTimer || "Start"}
-                  aria-label={t.timesheet?.startTimer || "Start"}
-                >
-                  {isStartingTimer ? "..." : <Play className="h-4 w-4 fill-current" />}
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-
      <div
        ref={mobileTimerRef}
        onBlurCapture={handleTimerBlurCapture}
-        className="mb-4 rounded-xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-800 dark:bg-slate-950 md:hidden"
+        className="mb-4 rounded-xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-800 dark:bg-slate-950 xl:hidden"
      >
        <div className="space-y-3">
          <Input
@@ -2802,20 +2702,7 @@ export default function Timesheet() {
                              lang={lang}
                            />
                          </div>
-                          <div className="hidden md:block xl:hidden">
-                            <RecordedEntryCard
-                              entry={entry}
-                              t={t}
-                              projects={projects}
-                              tags={tags}
-                              onDelete={openDeleteModal}
-                              onRestart={handleRestartFromEntry}
-                              onEntryUpdated={handleEntryUpdated}
-                              variant="tablet"
-                              lang={lang}
-                            />
-                          </div>
-                          <div className="md:hidden">
+                          <div className="xl:hidden">
                            <MobileRecordedEntryCard
                              entry={entry}
                              t={t}
--- a/src/pages/WorkspaceCreate.tsx
+++ b/src/pages/WorkspaceCreate.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, Fragment } from 'react';
 import { useBlocker, useNavigate } from 'react-router-dom';
 import { useTranslation } from '../hooks/useTranslation';
-import { AlertCircle, UserPlus, Trash2, Shield, Loader2 } from 'lucide-react';
+import { AlertCircle, UserPlus, Trash2, Shield, Loader2, UploadCloud } from 'lucide-react';
 import { Dialog, Transition } from '@headlessui/react';
 import { toast } from 'sonner';
 import { createWorkspace } from '../api/workspaces';
@@ -40,6 +40,8 @@ export default function WorkspaceCreate() {
  // Workspace Info States
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
+  const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
+  const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
  const [isSaving, setIsSaving] = useState(false);

  // Members States (Local)
@@ -54,8 +56,36 @@ export default function WorkspaceCreate() {
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);

-  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const hasUnsavedChanges = name.trim() !== '' || description.trim() !== '' || members.length > 0;
+  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const hasUnsavedChanges = name.trim() !== '' || description.trim() !== '' || members.length > 0 || !!thumbnailFile;
+
+  useEffect(() => {
+    if (!thumbnailFile) {
+      setThumbnailPreview(null);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(thumbnailFile);
+    setThumbnailPreview(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [thumbnailFile]);
+
+  const handleThumbnailChange = (file: File | null) => {
+    if (!file) {
+      setThumbnailFile(null);
+      return;
+    }
+    const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
+    if (!allowedTypes.includes(file.type)) {
+      toast.error(t.workspace?.thumbnailInvalidType || "Unsupported image type. Use JPG, PNG, or WebP.");
+      return;
+    }
+    const maxBytes = 2 * 1024 * 1024;
+    if (file.size > maxBytes) {
+      toast.error(t.workspace?.thumbnailMaxSizeError || "Image size must be 2MB or less.");
+      return;
+    }
+    setThumbnailFile(file);
+  };

  useEffect(() => {
    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
@@ -121,7 +151,8 @@ export default function WorkspaceCreate() {
      const payload = {
        name,
        description,
-        members: members.map(m => ({ user_id: m.user.id, role: m.role }))
+        members: members.map(m => ({ user_id: m.user.id, role: m.role })),
+        thumbnail: thumbnailFile,
      };
      const newWorkspace = await createWorkspace(payload);

@@ -178,13 +209,13 @@ export default function WorkspaceCreate() {
  const isFirstOwner = true;

  return (
-    <div className="absolute inset-0 flex flex-col overflow-y-auto bg-slate-50 p-4 dark:bg-slate-900 lg:overflow-hidden sm:p-6">
+    <div className="absolute inset-0 flex flex-col overflow-y-auto bg-slate-50 p-4 dark:bg-slate-900 lg:overflow-hidden sm:p-6">
      <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-4 sm:mb-6 shrink-0">
        {t.workspace?.createTitle || "Create Workspace"}
      </h1>
      
-      <div className="flex flex-col gap-4 lg:min-h-0 lg:flex-1 lg:flex-row sm:gap-6">
-        <div className="w-full shrink-0 rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-1/3 lg:max-w-md lg:flex-col lg:overflow-y-auto">
+      <div className="flex flex-col gap-4 lg:min-h-0 lg:flex-1 lg:flex-row sm:gap-6">
+        <div className="w-full shrink-0 rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-1/3 lg:max-w-md lg:flex-col lg:overflow-y-auto">
          <form onSubmit={handleSubmit} className="flex flex-col h-full p-6">
            <div className="mb-4">
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
@@ -210,6 +241,45 @@ export default function WorkspaceCreate() {
                className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
              />
            </div>
+<div className="mb-6">
+  <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
+    {t.workspace?.thumbnailLabel || "Thumbnail"}
+  </label>
+
+  <label className="mt-3 flex aspect-square w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-dashed border-slate-300 bg-slate-100 text-5xl font-semibold text-slate-700 transition hover:bg-slate-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">
+    {thumbnailPreview ? (
+      <img
+        src={thumbnailPreview}
+        alt={name || "Workspace"}
+        className="h-full w-full object-cover"
+      />
+    ) : (
+      <div className="flex flex-col items-center gap-2 text-center">
+        <UploadCloud className="h-12 w-12 text-slate-500 dark:text-slate-400" />
+          <span className="text-sm font-medium text-slate-500 dark:text-slate-400">
+            {t.workspace?.uploadImage || "Click to upload image"}
+          </span>
+      </div>
+    )}
+
+    <Input
+      type="file"
+      accept=".jpg,.jpeg,.png,.webp"
+      className="hidden"
+      onChange={(e) => handleThumbnailChange(e.target.files?.[0] || null)}
+    />
+  </label>
+
+  {thumbnailFile && (
+    <button
+      type="button"
+      onClick={() => setThumbnailFile(null)}
+      className="mt-2 text-xs text-red-600 hover:underline dark:text-red-400"
+    >
+      {t.workspace?.removeImage || "Remove image"}
+      </button>
+    )}
+  </div>
            <div className="mt-auto pt-6 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 shrink-0">
              <Button
                type="button"
@@ -228,7 +298,7 @@ export default function WorkspaceCreate() {
          </form>
        </div>

-        <div className="w-full rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-2/3 lg:min-h-0 lg:flex-1 lg:flex-col lg:overflow-hidden">
+        <div className="w-full rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-2/3 lg:min-h-0 lg:flex-1 lg:flex-col lg:overflow-hidden">
          <div className="p-6 shrink-0 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 z-10">
            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
              { t.workspace?.members || "Members" }
@@ -322,7 +392,7 @@ export default function WorkspaceCreate() {
          </div>

          {/* لیست اعضا (با قابلیت اسکرول) */}
-          <div className="space-y-3 bg-slate-50/30 p-6 dark:bg-slate-900/30 lg:flex-1 lg:overflow-y-auto">
+          <div className="space-y-3 bg-slate-50/30 p-6 dark:bg-slate-900/30 lg:flex-1 lg:overflow-y-auto">
            {members.map((m) => {
              return (
                <div key={m.localId} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg gap-3 shadow-sm hover:border-blue-200 dark:hover:border-blue-800 transition-colors">
--- a/src/pages/WorkspaceDetail.tsx
+++ b/src/pages/WorkspaceDetail.tsx
@@ -23,6 +23,7 @@ import {
  type Workspace,
  type WorkspaceMembership,
 } from '../api/workspaces';
+import { useAppContext } from '../context/AppContext';
 import { useWorkspace } from '../context/WorkspaceContext';
 import { useTranslation } from '../hooks/useTranslation';
 import {
@@ -53,6 +54,7 @@ export default function WorkspaceDetail() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { t, lang } = useTranslation();
+  const { user } = useAppContext();
  const { setActiveWorkspace } = useWorkspace();

  const [workspace, setWorkspace] = useState<Workspace | null>(null);
@@ -74,7 +76,7 @@ export default function WorkspaceDetail() {
      const data = await getWorkspace(id!);
      setWorkspace(data);

-      const canViewMembers = canWorkspace(data.my_role, WORKSPACE_MEMBERS_VIEW);
+      const canViewMembers = canWorkspace(data.my_role, WORKSPACE_VIEW);
      const canViewClients = canWorkspace(data.my_role, CLIENTS_VIEW);
      const canViewProjects = canWorkspace(data.my_role, PROJECTS_VIEW);
      const canViewTags = canWorkspace(data.my_role, TAGS_VIEW);
@@ -180,6 +182,12 @@ export default function WorkspaceDetail() {
    return member.user?.mobile || member.user?.email || '-';
  };

+  const getMemberInitials = (member: WorkspaceMembership) => {
+    const firstName = member.user?.first_name?.trim()?.charAt(0) || '';
+    const lastName = member.user?.last_name?.trim()?.charAt(0) || '';
+    return `${firstName}${lastName}`.trim().toUpperCase() || getMemberName(member).charAt(0).toUpperCase();
+  };
+
  const formatRateUnit = (rate?: WorkspaceUserRate) => {
    if (!rate) return t.rates?.noRate || 'No rate';
    const unitLabel =
@@ -192,7 +200,8 @@ export default function WorkspaceDetail() {
  const workspaceRole = workspace?.my_role;
  const canEdit = canWorkspace(workspaceRole, WORKSPACE_EDIT);
  const canDelete = canWorkspace(workspaceRole, WORKSPACE_DELETE);
-  const canViewMembers = canWorkspace(workspaceRole, WORKSPACE_MEMBERS_VIEW);
+  const canViewMembers = canWorkspace(workspaceRole, WORKSPACE_VIEW);
+  const canViewMemberSensitiveDetails = canWorkspace(workspaceRole, WORKSPACE_MEMBERS_VIEW);
  const canViewReports = canWorkspace(workspaceRole, WORKSPACE_VIEW);

  if (isLoading || !workspace) {
@@ -251,7 +260,7 @@ export default function WorkspaceDetail() {

      <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-8">
        <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
-          <div className="min-w-0">
+          <div className="min-w-0 w-full">
            <div className="mb-3 flex flex-wrap items-center gap-3">
              <h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
                {workspace.name}
@@ -269,29 +278,32 @@ export default function WorkspaceDetail() {
            {canViewReports && (
              <button
                onClick={() => openWorkspaceRoute('/reports')}
-                className="inline-flex h-11 items-center justify-center rounded-xl border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-slate-600 dark:hover:bg-slate-700"
+                className="inline-flex w-full h-11 items-center justify-center rounded-xl border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-slate-600 dark:hover:bg-slate-700"
              >
                {t.workspace?.openReports || 'Open reports'}
              </button>
            )}
-            {canEdit && (
-              <button
-                onClick={() => navigate(`/workspaces/${id}/edit`)}
-                className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border px-4 text-sm font-semibold transition bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400 border-blue-200 hover:border-blue-300 hover:bg-blue-100 dark:border-blue-900/60 dark:hover:bg-blue-900/30"
-              >
-                <Edit2 className="h-4 w-4" />
-                <span>{t.actions?.edit || 'Edit'}</span>
-              </button>
-            )}
-            {canDelete && (
-              <button
-                onClick={handleDelete}
-                className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-red-200 bg-red-50 px-4 text-sm font-semibold text-red-700 transition hover:border-red-300 hover:bg-red-100 dark:border-red-900/60 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/30"
-              >
-                <Trash2 className="h-4 w-4" />
-                <span>{t.actions?.delete || 'Delete'}</span>
-              </button>
-            )}
+            <div className="flex w-full items-center gap-2">
+              {canEdit && (
+                <button
+                  onClick={() => navigate(`/workspaces/${id}/edit`)}
+                  className="inline-flex w-full h-11 items-center justify-center gap-2 rounded-xl border px-4 text-sm font-semibold transition bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400 border-blue-200 hover:border-blue-300 hover:bg-blue-100 dark:border-blue-900/60 dark:hover:bg-blue-900/30"
+                >
+                  <Edit2 className="h-4 w-4" />
+                  <span className="lg:hidden">{t.actions?.edit || 'Edit'}</span>
+                </button>
+              )}
+              {canDelete && (
+                <button
+                  onClick={handleDelete}
+                  className="inline-flex w-full h-11 items-center justify-center gap-2 rounded-xl border border-red-200 bg-red-50 px-4 text-sm font-semibold text-red-700 transition hover:border-red-300 hover:bg-red-100 dark:border-red-900/60 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/30"
+                >
+                  <Trash2 className="h-4 w-4" />
+                  <span className="lg:hidden">{t.actions?.delete || 'Delete'}</span>
+                </button>
+              )}
+            </div>
+
          </div>
        </div>
      </section>
@@ -368,11 +380,11 @@ export default function WorkspaceDetail() {
              <h2 className="text-lg font-semibold text-slate-900 dark:text-white">
                {t.workspace?.membersSectionTitle || t.workspace?.members || 'Members'}
              </h2>
-              <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
-                {canViewMembers
-                  ? t.workspace?.membersSectionSubtitle || 'People in this workspace and their current roles.'
-                  : t.workspace?.membersLocked || 'Only owners and admins can view the full member list.'}
-              </p>
+              {canViewMembers
+                  ? <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+                      { t.workspace?.membersSectionSubtitle || 'People in this workspace and their current roles.' }
+                    </p>
+                  : ''}
            </div>
            {canEdit && (
              <button
@@ -394,34 +406,65 @@ export default function WorkspaceDetail() {
            ) : (
              activeMembers.map((member) => {
                const rate = memberRateMap.get(member.user.id);
+                const isCurrentUser = member.user.id === user?.id;
                return (
-                  <div key={member.id} className="flex flex-col gap-4 p-5 sm:p-6">
+                  <div
+                    key={member.id}
+                    className={`flex flex-col gap-4 p-5 sm:p-6 ${
+                      isCurrentUser
+                        ? 'bg-blue-50/80 ring-1 ring-blue-200 dark:bg-blue-950/20 dark:ring-blue-900/60'
+                        : ''
+                    }`}
+                  >
                    <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-                      <div className="min-w-0">
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-start gap-4">
+                          <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-full bg-slate-200 text-sm font-semibold text-slate-600 shadow-sm dark:bg-slate-800 dark:text-slate-300">
+                            {member.user?.profile_picture ? (
+                              <img
+                                src={member.user.profile_picture}
+                                alt={getMemberName(member)}
+                                className="h-full w-full object-cover"
+                              />
+                            ) : (
+                              <span>{getMemberInitials(member)}</span>
+                            )}
+                          </div>
+                          <div className="min-w-0 flex-1">
                        <div className="mb-2 flex flex-wrap items-center gap-2">
                          <h3 className="text-base font-semibold text-slate-900 dark:text-white">
                            {getMemberName(member)}
                          </h3>
+                          {isCurrentUser && (
+                            <span className="inline-flex rounded-full border border-blue-200 bg-blue-100 px-2.5 py-1 text-xs font-semibold text-blue-700 dark:border-blue-900/60 dark:bg-blue-900/30 dark:text-blue-300">
+                              {t.workspace?.youLabel || 'You'}
+                            </span>
+                          )}
                          <span className={`inline-flex rounded-full px-2.5 py-1 text-xs font-semibold ${roleBadgeStyles[member.role]}`}>
                            {t.workspace?.roles[member.role]}
                          </span>
                        </div>
-                        <div className="space-y-1 text-sm text-slate-500 dark:text-slate-400">
-                          <p>{getMemberContact(member)}</p>
-                          <p>
-                            {t.workspace?.joinedLabel || 'Joined'}: {formatDate(member.joined_at)}
-                          </p>
+                        {canViewMemberSensitiveDetails && (
+                          <div className="space-y-1 text-sm text-slate-500 dark:text-slate-400">
+                            <p>
+                              {t.workspace?.mobileNumber || 'Mobile Number'}: {getMemberContact(member)}
+                            </p>
+                          </div>
+                        )}
+                          </div>
                        </div>
                      </div>

-                      <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-800/80 sm:min-w-[210px]">
-                        <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
-                          {t.rates?.workspaceRate || 'Workspace rate'}
-                        </p>
-                        <p className="text-sm font-semibold text-slate-900 dark:text-white">
-                          {formatRateUnit(rate)}
-                        </p>
-                      </div>
+                      {canViewMemberSensitiveDetails && (
+                        <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-800/80 sm:min-w-[210px]">
+                          <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+                            {t.rates?.workspaceRate || 'Workspace rate'}
+                          </p>
+                          <p className="text-sm font-semibold text-slate-900 dark:text-white">
+                            {formatRateUnit(rate)}
+                          </p>
+                        </div>
+                      )}
                    </div>
                  </div>
                );
@@ -430,7 +473,7 @@ export default function WorkspaceDetail() {
          </div>
        ) : (
          <div className="p-6 text-sm text-slate-500 dark:text-slate-400">
-            {t.workspace?.membersLocked || 'Only owners and admins can view the full member list.'}
+            {t.workspace?.membersLocked || 'This member list is not available for your current role.'}
          </div>
        )}
      </section>
--- a/src/pages/WorkspaceEdit.tsx
+++ b/src/pages/WorkspaceEdit.tsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useRef, Fragment, useMemo, useCallback } from 'react';
-import { useBlocker, useNavigate, useParams } from 'react-router-dom';
-import { useTranslation } from '../hooks/useTranslation';
-import { AlertCircle, UserPlus, Trash2, Shield } from 'lucide-react';
-import { Dialog, Transition } from '@headlessui/react';
-import { toast } from 'sonner';
-import { getPriceUnits, getWorkspaceUserRates, type PriceUnit, type WorkspaceUserRate } from '../api/rates';
-import {
+import { useBlocker, useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from '../hooks/useTranslation';
+import { AlertCircle, UserPlus, Trash2, Shield, UploadCloud } from 'lucide-react';
+import { Dialog, Transition } from '@headlessui/react';
+import { toast } from 'sonner';
+import { getPriceUnits, getWorkspaceUserRates, type PriceUnit, type WorkspaceUserRate } from '../api/rates';
+import {
  updateWorkspace,
  addWorkspaceMembership,
  removeWorkspaceMembership,
@@ -14,21 +14,21 @@ import {
  getWorkspace
 } from '../api/workspaces';
 import { searchUserByExactMobile, type SearchedUser } from '../api/users';
-import { useAppContext } from '../context/AppContext';
-import {
-  WORKSPACE_EDIT,
-  WORKSPACE_MEMBERS_ADD,
-  WORKSPACE_MEMBERS_CHANGE_ROLE,
-  canChangeWorkspaceMember,
-  canWorkspace,
-  type WorkspaceRole,
-} from '../lib/permissions';
+import { useAppContext } from '../context/AppContext';
+import {
+  WORKSPACE_EDIT,
+  WORKSPACE_MEMBERS_ADD,
+  WORKSPACE_MEMBERS_CHANGE_ROLE,
+  canChangeWorkspaceMember,
+  canWorkspace,
+  type WorkspaceRole,
+} from '../lib/permissions';
 import { Button } from '../components/ui/button';
-import { InfiniteScroll } from '../components/InfiniteScroll';
-import { Select } from '../components/ui/Select';
-import { Input } from '../components/ui/input';
-import { TextAreaInput } from '../components/ui/TextAreaInput';
-import WorkspaceMemberRateFields from '../components/rates/WorkspaceMemberRateFields';
+import { InfiniteScroll } from '../components/InfiniteScroll';
+import { Select } from '../components/ui/Select';
+import { Input } from '../components/ui/input';
+import { TextAreaInput } from '../components/ui/TextAreaInput';
+import WorkspaceMemberRateFields from '../components/rates/WorkspaceMemberRateFields';

 const toEnglishDigits = (str: string) => {
  return str.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString())
@@ -55,12 +55,16 @@ export default function EditWorkspace() {
  // Workspace Info States
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
-  const [myRole, setMyRole] = useState<WorkspaceRole>('member');
+  const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
+  const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
+  const [clearThumbnail, setClearThumbnail] = useState(false);
+  const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
+  const [myRole, setMyRole] = useState<WorkspaceRole>('member');
  const [workspaceOwnerId, setWorkspaceOwnerId] = useState<string>('');
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSaving, setIsSaving] = useState(false);
-  const [workspaceRates, setWorkspaceRates] = useState<WorkspaceUserRate[]>([]);
-  const [priceUnits, setPriceUnits] = useState<PriceUnit[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [workspaceRates, setWorkspaceRates] = useState<WorkspaceUserRate[]>([]);
+  const [priceUnits, setPriceUnits] = useState<PriceUnit[]>([]);

  // Members States
  const [members, setMembers] = useState<any[]>([]);
@@ -79,7 +83,7 @@ export default function EditWorkspace() {
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);

-  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const [initialData, setInitialData] = useState({
    name: '',
@@ -91,9 +95,39 @@ export default function EditWorkspace() {

    const isNameChanged = name.trim() !== (initialData.name || '').trim();
    const isDescChanged = description.trim() !== (initialData.description || '').trim();
+    const isImageChanged = !!thumbnailFile || clearThumbnail;

-    return isNameChanged || isDescChanged;
-  }, [name, description, initialData, isLoading]);
+    return isNameChanged || isDescChanged || isImageChanged;
+  }, [name, description, initialData, isLoading, thumbnailFile, clearThumbnail]);
+
+  useEffect(() => {
+    if (!thumbnailFile) {
+      setThumbnailPreview(null);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(thumbnailFile);
+    setThumbnailPreview(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [thumbnailFile]);
+
+  const handleThumbnailChange = (file: File | null) => {
+    if (!file) {
+      setThumbnailFile(null);
+      return;
+    }
+    const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
+    if (!allowedTypes.includes(file.type)) {
+      toast.error(t.workspace?.thumbnailInvalidType || "Unsupported image type. Use JPG, PNG, or WebP.");
+      return;
+    }
+    const maxBytes = 2 * 1024 * 1024;
+    if (file.size > maxBytes) {
+      toast.error(t.workspace?.thumbnailMaxSizeError || "Image size must be 2MB or less.");
+      return;
+    }
+    setThumbnailFile(file);
+    setClearThumbnail(false);
+  };

  useEffect(() => {
    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
@@ -113,16 +147,16 @@ export default function EditWorkspace() {
    return false;
  });

-  useEffect(() => {
-    if (id) loadData();
-  }, [id]);
-
-  useEffect(() => {
-    if (!isLoading && id && !canWorkspace(myRole, WORKSPACE_EDIT)) {
-      toast.error("You do not have permission to edit this workspace.");
-      navigate(`/workspaces/${id}`);
-    }
-  }, [id, isLoading, myRole, navigate]);
+  useEffect(() => {
+    if (id) loadData();
+  }, [id]);
+
+  useEffect(() => {
+    if (!isLoading && id && !canWorkspace(myRole, WORKSPACE_EDIT)) {
+      toast.error("You do not have permission to edit this workspace.");
+      navigate(`/workspaces/${id}`);
+    }
+  }, [id, isLoading, myRole, navigate]);

  const loadData = async () => {
    try {
@@ -130,20 +164,23 @@ export default function EditWorkspace() {
      const workspaceData = await getWorkspace(id!);
      setName(workspaceData.name);
      setDescription(workspaceData.description || '');
+      setThumbnailUrl(workspaceData.thumbnail || null);
+      setThumbnailFile(null);
+      setClearThumbnail(false);
      setMyRole(workspaceData.my_role || 'member');
      setWorkspaceOwnerId(workspaceData.owner || '');

-      const [membersData, ratesData, unitsData] = await Promise.all([
-        fetchWorkspaceMemberships({ workspace: id!, limit: LIMIT, offset: 0 }),
-        getWorkspaceUserRates(id!),
-        getPriceUnits(),
-      ]);
-      const results = membersData.results || (Array.isArray(membersData) ? membersData : []);
-      
-      setMembers(results);
-      setWorkspaceRates(ratesData.results || []);
-      setPriceUnits(unitsData.results || []);
-      setOffset(LIMIT);
+      const [membersData, ratesData, unitsData] = await Promise.all([
+        fetchWorkspaceMemberships({ workspace: id!, limit: LIMIT, offset: 0 }),
+        getWorkspaceUserRates(id!),
+        getPriceUnits(),
+      ]);
+      const results = membersData.results || (Array.isArray(membersData) ? membersData : []);
+      
+      setMembers(results);
+      setWorkspaceRates(ratesData.results || []);
+      setPriceUnits(unitsData.results || []);
+      setOffset(LIMIT);
      
      // Robust hasMore check: use `.next` if available, otherwise check if array filled the limit
      setHasMore(membersData.next ? true : results.length >= LIMIT);
@@ -225,10 +262,15 @@ export default function EditWorkspace() {
    if (!name.trim() || !id) return;
    try {
      setIsSaving(true);
-      await updateWorkspace(id, { name, description });
+      const updatedWorkspace = await updateWorkspace(id, {
+        name,
+        description,
+        thumbnail: thumbnailFile,
+        clear_thumbnail: clearThumbnail,
+      });
      toast.success(t.workspace?.toast?.successUpdate || "Workspace updated successfully.");
      window.dispatchEvent(new CustomEvent('workspace_edited', { 
-        detail: { id, name, description } 
+        detail: updatedWorkspace
      }));
      navigate('/workspaces');
    } catch (error) {
@@ -241,11 +283,11 @@ export default function EditWorkspace() {
  const handleAddMember = async () => {
    if (!searchResult || !id) return;
    try {
-      const newMembership = await addWorkspaceMembership({
-        workspace: id,
-        user: String(searchResult.id),
-        role: newMemberRole
-      });
+      const newMembership = await addWorkspaceMembership({
+        workspace: id,
+        user: String(searchResult.id),
+        role: newMemberRole
+      });
      setMembers([newMembership, ...members]);
      toast.success(t.workspace?.toast?.successAdd || "Member added successfully.");
      setSearchQuery('');
@@ -283,26 +325,27 @@ export default function EditWorkspace() {
    }
  };

-  const canManageMembers = canWorkspace(myRole, WORKSPACE_MEMBERS_CHANGE_ROLE);
-  const isFirstOwner = currentUserId === workspaceOwnerId;
+  const canManageMembers = canWorkspace(myRole, WORKSPACE_MEMBERS_CHANGE_ROLE);
+  const isFirstOwner = currentUserId === workspaceOwnerId;
+  const isOwner = myRole === "owner";

-  const roleOptions = (allowOwner: boolean) => [
-    ...(allowOwner ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
-    { value: "admin", label: t.workspace?.roles?.admin || "Admin" },
-    { value: "member", label: t.workspace?.roles?.member || "Member" },
-    { value: "guest", label: t.workspace?.roles?.guest || "Guest" },
-  ];
-
-  if (isLoading) return <div className="p-8 text-center">{t.workspace?.loading || "Loading..."}</div>;
+  const roleOptions = (allowOwnerRole: boolean, allowAdminRole: boolean) => [
+    ...(allowOwnerRole ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
+    ...(allowAdminRole ? [{ value: "admin", label: t.workspace?.roles?.admin || "Admin" }] : []),
+    { value: "member", label: t.workspace?.roles?.member || "Member" },
+    { value: "guest", label: t.workspace?.roles?.guest || "Guest" },
+  ];
+
+  if (isLoading) return <div className="p-8 text-center">{t.workspace?.loading || "Loading..."}</div>;

  return (
-    <div className="absolute inset-0 flex flex-col overflow-y-auto bg-slate-50 p-4 dark:bg-slate-900 lg:overflow-hidden sm:p-6">
+    <div className="absolute inset-0 flex flex-col overflow-y-auto bg-slate-50 p-4 dark:bg-slate-900 lg:overflow-hidden sm:p-6">
      <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-4 sm:mb-6 shrink-0">
        {t.workspace?.editTitle || "Edit Workspace"}
      </h1>
      
-      <div className="flex flex-col gap-4 lg:min-h-0 lg:flex-1 lg:flex-row sm:gap-6">
-        <div className="w-full shrink-0 rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-1/3 lg:max-w-md lg:flex-col lg:overflow-y-auto">
+      <div className="flex flex-col gap-4 lg:min-h-0 lg:flex-1 lg:flex-row sm:gap-6">
+        <div className="w-full shrink-0 rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-1/3 lg:max-w-md lg:flex-col lg:overflow-y-auto">
          <form onSubmit={handleSubmit} className="flex flex-col h-full p-6">
            <div className="mb-4">
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
@@ -327,6 +370,55 @@ export default function EditWorkspace() {
                className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
              />
            </div>
+            <div className="mb-6">
+              <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
+                {t.workspace?.thumbnailLabel || "Thumbnail"}
+              </label>
+
+              <label className="mt-3 flex aspect-square w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-dashed border-slate-300 bg-slate-100 text-5xl font-semibold text-slate-700 transition hover:bg-slate-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">
+                {thumbnailPreview ? (
+                  <img
+                    src={thumbnailPreview}
+                    alt={name || "Workspace"}
+                    className="h-full w-full object-cover"
+                  />
+                ) : !clearThumbnail && thumbnailUrl ? (
+                  <img
+                    src={thumbnailUrl}
+                    alt={name || "Workspace"}
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <div className="flex flex-col items-center gap-2 text-center">
+                    <UploadCloud className="h-10 w-10 text-slate-500 dark:text-slate-400" />
+
+                      <span className="text-sm font-medium text-slate-500 dark:text-slate-400">
+                        {t.workspace?.uploadImage || "Click to upload image"}
+                      </span>
+                  </div>
+                )}
+
+                <input
+                  type="file"
+                  accept=".jpg,.jpeg,.png,.webp"
+                  className="hidden"
+                  onChange={(e) => handleThumbnailChange(e.target.files?.[0] || null)}
+                />
+              </label>
+
+              {(thumbnailUrl || thumbnailFile) && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setThumbnailFile(null);
+                    setClearThumbnail(true);
+                  }}
+                  className="mt-2 text-xs text-red-600 hover:underline dark:text-red-400"
+                >
+                  {t.workspace?.removeImage || "Remove image"}
+                </button>
+              )}
+            </div>
            <div className="mt-auto pt-6 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 shrink-0">
              <Button type="button" variant="ghost" onClick={() => navigate('/workspaces')}>
                {t.actions?.cancel || "Cancel"}
@@ -338,14 +430,14 @@ export default function EditWorkspace() {
          </form>
        </div>

-        <div className="w-full rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-2/3 lg:min-h-0 lg:flex-1 lg:flex-col lg:overflow-hidden">
+        <div className="w-full rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-2/3 lg:min-h-0 lg:flex-1 lg:flex-col lg:overflow-hidden">
          <div className="p-6 shrink-0 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 z-10">
            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
              { t.workspace?.members || "Members" }
            </h2>
            
-            {canWorkspace(myRole, WORKSPACE_MEMBERS_ADD) && (
-              <div className="space-y-3">
+            {canWorkspace(myRole, WORKSPACE_MEMBERS_ADD) && (
+              <div className="space-y-3">
                <Input
                  type="text"
                  placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."}
@@ -389,8 +481,8 @@ export default function EditWorkspace() {
                        value={newMemberRole}
                        onChange={(val) => setNewMemberRole(val as any)}
                        options={[
-                          ...roleOptions(isFirstOwner),
-                        ]}
+                          ...roleOptions(isFirstOwner, isOwner),
+                        ]}
                        className="flex-1 sm:flex-none"
                        buttonClassName="w-full sm:w-[110px] px-3 py-1.5 text-sm"
                      />
@@ -414,7 +506,7 @@ export default function EditWorkspace() {
            )}
          </div>

-          <div className="space-y-3 bg-slate-50/30 p-6 dark:bg-slate-900/30 lg:flex-1 lg:overflow-y-auto">
+          <div className="space-y-3 bg-slate-50/30 p-6 dark:bg-slate-900/30 lg:flex-1 lg:overflow-y-auto">
            <InfiniteScroll
              onLoadMore={loadMoreMembers}
              hasMore={hasMore}
@@ -424,21 +516,21 @@ export default function EditWorkspace() {
            >
              {members.map((m) => {
                const isThisMemberTheFirstOwner = m.user?.id === workspaceOwnerId;
-                const canChangeThisUserRole = canChangeWorkspaceMember({
-                  actorRole: myRole,
-                  actorUserId: currentUserId,
-                  targetRole: m.role,
-                  targetUserId: m.user?.id,
-                  ownerUserId: workspaceOwnerId,
-                });
+                const canChangeThisUserRole = canChangeWorkspaceMember({
+                  actorRole: myRole,
+                  actorUserId: currentUserId,
+                  targetRole: m.role,
+                  targetUserId: m.user?.id,
+                  ownerUserId: workspaceOwnerId,
+                });

                return (
-                  <div key={m.id} className="flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-3 shadow-sm transition-colors hover:border-blue-200 dark:border-slate-800 dark:bg-slate-900 dark:hover:border-blue-800">
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                      <div className="flex items-center gap-3">
-                      {m.user?.profile_picture ? (
-                        <img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover shadow-sm" />
-                      ) : (
+                  <div key={m.id} className="flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-3 shadow-sm transition-colors hover:border-blue-200 dark:border-slate-800 dark:bg-slate-900 dark:hover:border-blue-800">
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                      <div className="flex items-center gap-3">
+                      {m.user?.profile_picture ? (
+                        <img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover shadow-sm" />
+                      ) : (
                        <div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm shadow-sm">
                          {m.user?.name?.[0] || m.user?.first_name?.[0] || "U"}
                        </div>
@@ -447,57 +539,57 @@ export default function EditWorkspace() {
                        <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
                          {m.user?.name || `${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
                        </p>
-                        <p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
-                      </div>
-                    </div>
-
-                      <div className="flex items-center gap-3 self-end sm:self-auto">
-                        {canChangeThisUserRole ? (
-                          <Select
-                            value={m.role}
-                            onChange={(val) => handleChangeRole(m.id, val)}
-                            options={roleOptions(isFirstOwner)}
-                            buttonClassName="w-[110px] px-3 py-1.5 text-sm"
-                          />
-                        ) : (
-                          <span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-md capitalize flex items-center gap-1">
-                            {m.role === 'owner' && <Shield className="w-3 h-3" />}
-                            {m.role && m.role in t.workspace.roles
-                              ? t.workspace.roles[m.role as keyof typeof t.workspace.roles]
-                              : m.role || "-"}
-                          </span>
-                        )}
-
-                        {canChangeThisUserRole && (
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon"
-                            onClick={() => openDeleteModal(m.id)}
-                            className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
-                            title={t.workspace?.removeMemberTitle || "Remove member"}
-                          >
-                            <Trash2 className="w-4 h-4" />
-                          </Button>
-                        )}
-                      </div>
-                    </div>
-
-                    <div className="flex flex-col gap-2 border-t border-slate-100 pt-3 dark:border-slate-800 sm:flex-row sm:items-center sm:justify-between">
-                      <div className="text-xs text-slate-500 dark:text-slate-400">
-                        {t.rates?.workspaceRate || "Workspace rate"}
-                      </div>
-                      <WorkspaceMemberRateFields
-                        workspaceId={id!}
-                        userId={m.user.id}
-                        rate={workspaceRates.find((item) => item.user === m.user.id)}
-                        priceUnits={priceUnits}
-                        onRatesChanged={(updater) => setWorkspaceRates((current) => updater(current))}
-                      />
-                    </div>
-                  </div>
-                );
-              })}
+                        <p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
+                      </div>
+                    </div>
+
+                      <div className="flex items-center gap-3 self-end sm:self-auto">
+                        {canChangeThisUserRole ? (
+                          <Select
+                            value={m.role}
+                            onChange={(val) => handleChangeRole(m.id, val)}
+                            options={roleOptions(isFirstOwner, isOwner)}
+                            buttonClassName="w-[110px] px-3 py-1.5 text-sm"
+                          />
+                        ) : (
+                          <span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-md capitalize flex items-center gap-1">
+                            {m.role === 'owner' && <Shield className="w-3 h-3" />}
+                            {m.role && m.role in t.workspace.roles
+                              ? t.workspace.roles[m.role as keyof typeof t.workspace.roles]
+                              : m.role || "-"}
+                          </span>
+                        )}
+
+                        {canChangeThisUserRole && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => openDeleteModal(m.id)}
+                            className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
+                            title={t.workspace?.removeMemberTitle || "Remove member"}
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    <div className="flex flex-col gap-2 border-t border-slate-100 pt-3 dark:border-slate-800 sm:flex-row sm:items-center sm:justify-between">
+                      <div className="text-xs text-slate-500 dark:text-slate-400">
+                        {t.rates?.workspaceRate || "Workspace rate"}
+                      </div>
+                      <WorkspaceMemberRateFields
+                        workspaceId={id!}
+                        userId={m.user.id}
+                        rate={workspaceRates.find((item) => item.user === m.user.id)}
+                        priceUnits={priceUnits}
+                        onRatesChanged={(updater) => setWorkspaceRates((current) => updater(current))}
+                      />
+                    </div>
+                  </div>
+                );
+              })}
            </InfiniteScroll>
            {members.length === 0 && !isLoadingMembers && (
              <div className="flex flex-col items-center justify-center py-10 text-slate-500">
@@ -505,12 +597,12 @@ export default function EditWorkspace() {
                <p className="text-sm">
                  {t.workspace?.noMembers || "No members found."}
                </p>
-              </div>
-            )}
-          </div>
-
-        </div>
-      </div>
+              </div>
+            )}
+          </div>
+
+        </div>
+      </div>

      <Transition appear show={isDeleteDialogOpen} as={Fragment}>
        <Dialog as="div" className="relative z-50" onClose={() => setIsDeleteDialogOpen(false)}>
--- a/src/pages/Workspaces.tsx
+++ b/src/pages/Workspaces.tsx
@@ -1,15 +1,15 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Plus, Trash2, Pencil, ChevronRight } from 'lucide-react';
+import { Plus, Trash2, Pencil, Eye } from 'lucide-react';
 import { toast } from 'sonner';
-import { fetchWorkspaces, deleteWorkspace, type Workspace } from '../api/workspaces';
-import { useTranslation } from '../hooks/useTranslation';
-import {
-  WORKSPACE_DELETE,
-  WORKSPACE_EDIT,
-  canWorkspace,
-  type WorkspaceRole,
-} from '../lib/permissions';
+import { fetchWorkspaces, deleteWorkspace, type Workspace } from '../api/workspaces';
+import { useTranslation } from '../hooks/useTranslation';
+import {
+  WORKSPACE_DELETE,
+  WORKSPACE_EDIT,
+  canWorkspace,
+  type WorkspaceRole,
+} from '../lib/permissions';
 import FilterBar from '../components/FilterBar';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
@@ -17,7 +17,7 @@ import { Card, CardContent, CardTitle } from '../components/ui/card';
 import { Pagination } from '../components/Pagination';
 import { Modal } from '../components/Modal';

-const RoleBadge = ({ role }: { role?: WorkspaceRole }) => {
+const RoleBadge = ({ role }: { role?: WorkspaceRole }) => {
  const { t } = useTranslation();
  if (!role) return null;
  
@@ -48,8 +48,8 @@ export default function Workspaces() {
  const [deleteModal, setDeleteModal] = useState<{isOpen: boolean; workspace: Workspace | null}>({isOpen: false, workspace: null});
  const [deleteInput, setDeleteInput] = useState('');

-  const navigate = useNavigate();
-  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { t } = useTranslation();

  const orderingOptions = [
    { value: '-created_at', label: t.ordering?.createdAtDesc || 'Newest First' },
@@ -122,14 +122,14 @@ export default function Workspaces() {
          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title || 'Workspaces'}</h1>
          <p className="text-slate-500 dark:text-slate-400 mt-1">{t.workspace?.subtitle || 'Manage your workspaces'}</p>
        </div>
-        <Button
-          onClick={() => navigate('/workspaces/create')}
-          size="icon"
-          className="shadow-sm"
-          title={t.workspace?.createNew || 'Create New'}
-        >
-          <Plus className="h-5 w-5" />
-        </Button>
+        <Button
+          onClick={() => navigate('/workspaces/create')}
+          size="icon"
+          className="shadow-sm"
+          title={t.workspace?.createNew || 'Create New'}
+        >
+          <Plus className="h-5 w-5" />
+        </Button>
      </div>

      <FilterBar 
@@ -148,19 +148,26 @@ export default function Workspaces() {
      ) : (
        <div className="flex flex-col flex-1">
          <div className="flex flex-col gap-4 mb-6">
-            {workspaces.map((workspace) => {
-              const canDeleteWorkspace = canWorkspace(workspace.my_role, WORKSPACE_DELETE);
-              const canEditWorkspace = canWorkspace(workspace.my_role, WORKSPACE_EDIT);
-
-              return (
+            {workspaces.map((workspace) => {
+              const canDeleteWorkspace = canWorkspace(workspace.my_role, WORKSPACE_DELETE);
+              const canEditWorkspace = canWorkspace(workspace.my_role, WORKSPACE_EDIT);
+
+              return (
                <Card key={workspace.id} className="flex flex-col text-slate-800 dark:text-slate-100 dark:bg-slate-800 dark:border-slate-700 shadow-sm">
                  <CardContent className="flex flex-col sm:flex-row items-start sm:items-center justify-between py-4 px-6 gap-4">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
+                        <div className="h-9 w-9 shrink-0 overflow-hidden rounded-lg bg-slate-100 dark:bg-slate-600 flex items-center justify-center text-sm font-semibold text-slate-700 dark:text-slate-200">
+                          {workspace.thumbnail ? (
+                            <img src={workspace.thumbnail} alt={workspace.name} className="h-full w-full object-cover" />
+                          ) : (
+                            workspace.name.trim().charAt(0).toUpperCase() || "W"
+                          )}
+                        </div>
                        <CardTitle className="text-lg line-clamp-1">
                          {workspace.name}
                        </CardTitle>
-                        <RoleBadge role={workspace.my_role} />
+                          <RoleBadge role={workspace.my_role} />
                      </div>
                      <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-1">
                        {workspace.description || t.workspace?.noDescription || 'No description'}
@@ -168,8 +175,8 @@ export default function Workspaces() {
                    </div>

                    <div className="flex items-center gap-2 shrink-0">
-                      {canDeleteWorkspace && (
-                        <Button 
+                      {canDeleteWorkspace && (
+                        <Button 
                          variant="ghost" 
                          size="icon"
                          onClick={() => setDeleteModal({ isOpen: true, workspace })}
@@ -180,8 +187,8 @@ export default function Workspaces() {
                        </Button>
                      )}

-                      {canEditWorkspace && (
-                      <Button 
+                      {canEditWorkspace && (
+                      <Button 
                          variant="ghost" 
                          size="icon"
                          onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
@@ -198,7 +205,7 @@ export default function Workspaces() {
                        className="h-8 w-8 hover:bg-blue-700 dark:hover:bg-blue-500 border-none shadow-sm transition-all"
                        title={t.actions?.view || 'View'}
                      >
-                        <ChevronRight className="h-4 w-4 rtl:-scale-x-100" />
+                        <Eye className="h-4 w-4 rtl:-scale-x-100" />
                      </Button>
                    </div>
                  </CardContent>
--- a/src/types/client.ts
+++ b/src/types/client.ts
@@ -1,12 +1,20 @@
-export interface Client {
-  id: string;
-  name: string;
-  notes: string | null;
-  workspace: string;
-  can_delete: boolean;
-  created_at: string;
-  updated_at: string;
-}
+interface AuditUser {
+  id: string;
+  first_name?: string;
+  last_name?: string;
+  mobile?: string;
+}
+
+export interface Client {
+  id: string;
+  name: string;
+  notes: string | null;
+  workspace: string;
+  created_by?: AuditUser | null;
+  can_delete: boolean;
+  created_at: string;
+  updated_at: string;
+}

 export interface PaginatedClientList {
  count: number;
Author	SHA1	Message	Date
Amirhossein Khalili	8bd0e908a1	feat(logs): add workspace activity log page	2026-04-28 18:49:14 +03:30
Amirhossein Khalili	088ad8760b	fix(timesheet): extend mobile layout to xl and tighten row field widths	2026-04-28 14:21:04 +03:30
Amirhossein Khalili	5d313a9663	refactor(workspaces): use eye icon for view action	2026-04-28 11:52:48 +03:30
Amirhossein Khalili	fa242b6206	fix(workspaces): improve detail header action responsiveness	2026-04-28 11:52:27 +03:30
Amirhossein Khalili	7348af28a1	i18n(workspaces): add thumbnail labels and validation messages	2026-04-28 11:38:43 +03:30
Amirhossein Khalili	f45038d398	feat(workspaces): add thumbnail UI across workspace surfaces	2026-04-28 11:38:35 +03:30
Amirhossein Khalili	599e25e836	fix(reports): add controlled fetching + change chart buckets to localized weekday names	2026-04-28 11:03:51 +03:30
Amirhossein Khalili	581cfab1ac	feat(workspaces): expand detail page member list	2026-04-28 10:46:15 +03:30
Amirhossein Khalili	b1ad372474	fix(permissions): align workspace resource actions with role rules	2026-04-28 10:02:37 +03:30