feat(logs): add workspace activity log page

.gitignore

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

src/App.tsx

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

src/api/logs.ts

@@ -0,0 +1,140 @@
+import { authFetch } from "./client";
+
+export type WorkspaceLogSection =
+  | "workspace"
+  | "workspace_members"
+  | "clients"
+  | "projects"
+  | "project_members"
+  | "tags"
+  | "time_entries"
+  | "rates"
+  | "report_exports";
+
+export type WorkspaceLogEvent =
+  | "create"
+  | "update"
+  | "delete"
+  | "restore"
+  | "archive"
+  | "unarchive"
+  | "activate"
+  | "deactivate";
+
+export interface WorkspaceLogActor {
+  id: string;
+  full_name: string;
+  mobile?: string | null;
+  profile_picture?: string | null;
+}
+
+export interface WorkspaceLogTarget {
+  id: string;
+  name: string;
+  section: WorkspaceLogSection;
+  workspace_id: string;
+}
+
+export interface WorkspaceLogPreviewChange {
+  field: string;
+  label: string;
+  summary: string;
+}
+
+export interface WorkspaceLogItem {
+  id: number;
+  timestamp: string;
+  section: WorkspaceLogSection;
+  model: string | null;
+  event: WorkspaceLogEvent;
+  audit_action: string;
+  actor: WorkspaceLogActor | null;
+  target: WorkspaceLogTarget;
+  changed_fields: string[];
+  preview_changes: WorkspaceLogPreviewChange[];
+}
+
+export interface WorkspaceLogChangeRow {
+  field: string;
+  label: string;
+  change_type: "field" | "m2m";
+  operation: string;
+  old_value: string | null;
+  new_value: string | null;
+  summary: string;
+}
+
+export interface WorkspaceLogDetail extends WorkspaceLogItem {
+  remote_addr?: string | null;
+  changes: WorkspaceLogChangeRow[];
+  raw_changes: Record<string, unknown>;
+  serialized_snapshot?: unknown;
+  additional_data: Record<string, unknown>;
+}
+
+export interface WorkspaceLogFilters {
+  workspace: string;
+  section?: WorkspaceLogSection | "";
+  actor?: string;
+  event?: WorkspaceLogEvent | "";
+  search?: string;
+  from?: string;
+  to?: string;
+  ordering?: "-timestamp" | "timestamp";
+}
+
+interface PaginatedResponse<T> {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results: T[];
+}
+
+const toQueryString = (params: Record<string, string | number | undefined>) => {
+  const query = new URLSearchParams();
+  Object.entries(params).forEach(([key, value]) => {
+    if (value !== undefined && value !== null && value !== "") {
+      query.set(key, String(value));
+    }
+  });
+  return query.toString();
+};
+
+export const listWorkspaceLogs = async (
+  filters: WorkspaceLogFilters,
+  pagination?: { limit?: number; offset?: number },
+): Promise<PaginatedResponse<WorkspaceLogItem>> => {
+  const query = toQueryString({
+    workspace: filters.workspace,
+    section: filters.section || undefined,
+    actor: filters.actor || undefined,
+    event: filters.event || undefined,
+    search: filters.search || undefined,
+    from: filters.from || undefined,
+    to: filters.to || undefined,
+    ordering: filters.ordering || "-timestamp",
+    limit: pagination?.limit,
+    offset: pagination?.offset,
+  });
+
+  const response = await authFetch(`/api/logs/${query ? `?${query}` : ""}`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch workspace logs.");
+  }
+
+  const data = await response.json();
+  return {
+    count: data.count || 0,
+    next: data.next || null,
+    previous: data.previous || null,
+    results: data.results || [],
+  };
+};
+
+export const getWorkspaceLogDetail = async (id: number): Promise<WorkspaceLogDetail> => {
+  const response = await authFetch(`/api/logs/${id}/`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch workspace log detail.");
+  }
+  return await response.json();
+};

src/api/projects.ts

@@ -1,5 +1,12 @@
 import { authFetch } from "./client";
 
+interface AuditUser {
+  id: string;
+  first_name?: string;
+  last_name?: string;
+  mobile?: string;
+}
+
 export interface ProjectClient {
   id: string;
   name: 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[];

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

src/api/workspaces.ts

@@ -4,6 +4,7 @@ export interface Workspace {
   id: string;
   name: string;
   description?: string;
+  thumbnail?: string | null;
   owner?: string;
   my_role?: 'owner' | 'admin' | 'member' | 'guest';
   [key: string]: any;
@@ -21,9 +22,11 @@ export interface WorkspaceMembership {
   workspace: string;
   user: {
     id: string;
-    email: string;
+    email?: string;
     first_name?: string;
     last_name?: string;
+    mobile?: string;
+    profile_picture?: string | null;
     [key: string]: any;
   };
   role: 'owner' | 'admin' | 'member' | 'guest';
@@ -75,10 +78,35 @@ 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> => {
+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: JSON.stringify(data),
+    body,
   });
 
   if (!response.ok) {
@@ -88,10 +116,32 @@ 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> => {
+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: JSON.stringify(data),
+    body,
   });
 
   if (!response.ok) {

src/components/Sidebar.tsx

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

src/components/WorkspaceSelector.tsx

@@ -52,8 +52,7 @@ export const WorkspaceSelector: React.FC = () => {
       if (activeWorkspace?.id === e.detail?.id) {
         setActiveWorkspace({
           ...activeWorkspace,
-          name: e.detail.name, 
+          ...e.detail,
-          description: e.detail.description 
         } as Workspace);
       }
       refreshWorkspacesList();
@@ -123,8 +122,12 @@ 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">
+        <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?.name?.charAt(0) || <Briefcase className="w-4 h-4" />}
+          {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"}
@@ -159,8 +162,12 @@ 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">
+                    <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.name.charAt(0)}
+                      {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>

src/components/logs/LogDetailsPanel.tsx

@@ -0,0 +1,182 @@
+import { Clock3, Globe2, User2, X } from "lucide-react";
+
+import type { WorkspaceLogDetail } from "../../api/logs";
+import { API_BASE_URL } from "../../config/constants";
+import { useTranslation } from "../../hooks/useTranslation";
+import { Button } from "../ui/button";
+
+const resolveImageUrl = (value?: string | null) => {
+  if (!value) return null;
+  if (/^https?:\/\//i.test(value)) return value;
+  return `${API_BASE_URL.replace(/\/+$/, "")}/${value.replace(/^\/+/, "")}`;
+};
+
+export function LogDetailsPanel({
+  open,
+  log,
+  isLoading,
+  onClose,
+}: {
+  open: boolean;
+  log: WorkspaceLogDetail | null;
+  isLoading: boolean;
+  onClose: () => void;
+}) {
+  const { t, lang } = useTranslation();
+
+  if (!open) {
+    return null;
+  }
+
+  const formatTimestamp = (value?: string | null) => {
+    if (!value) return "-";
+    return new Intl.DateTimeFormat(lang === "fa" ? "fa-IR-u-ca-persian" : "en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    }).format(new Date(value));
+  };
+
+  const actorName = log?.actor?.full_name || t.logs?.unknownActor || "Unknown actor";
+  const actorAvatar = resolveImageUrl(log?.actor?.profile_picture);
+
+  return (
+    <div className="fixed inset-0 z-[80] flex items-end bg-slate-950/40 backdrop-blur-[2px] lg:items-stretch lg:justify-end">
+      <button type="button" className="absolute inset-0 cursor-pointer" onClick={onClose} aria-label="Close log details" />
+      <aside className="relative z-10 flex max-h-[88vh] w-full flex-col rounded-t-[2rem] bg-white shadow-2xl dark:bg-slate-950 lg:h-full lg:max-h-none lg:w-[34rem] lg:rounded-none lg:border-l lg:border-slate-800">
+        <div className="flex items-center justify-between border-b border-slate-200 px-5 py-4 dark:border-slate-800">
+          <div>
+            <h2 className="text-lg font-semibold text-slate-900 dark:text-white">
+              {t.logs?.detailsTitle || "Activity details"}
+            </h2>
+            <p className="text-sm text-slate-500 dark:text-slate-400">
+              {t.logs?.detailsHint || "Review the exact values that changed in this action."}
+            </p>
+          </div>
+          <Button type="button" variant="ghost" size="icon" onClick={onClose} className="rounded-xl">
+            <X className="h-5 w-5" />
+          </Button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto px-5 py-5">
+          {isLoading ? (
+            <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-500 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400">
+              {t.logs?.loadingDetails || "Loading details..."}
+            </div>
+          ) : !log ? (
+            <div className="rounded-2xl border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">
+              {t.logs?.selectLogHint || "Select a log entry to see its details."}
+            </div>
+          ) : (
+            <div className="space-y-5">
+              <div className="rounded-3xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900">
+                <div className="flex items-start gap-4">
+                  <div className="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-slate-200 text-base font-semibold text-slate-700 dark:bg-slate-800 dark:text-slate-200">
+                    {actorAvatar ? (
+                      <img src={actorAvatar} alt={actorName} className="h-full w-full object-cover" />
+                    ) : (
+                      <span>{actorName.trim().charAt(0).toUpperCase()}</span>
+                    )}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-base font-semibold text-slate-900 dark:text-white">{actorName}</p>
+                    <div className="mt-2 grid gap-2 text-sm text-slate-500 dark:text-slate-400">
+                      <div className="flex items-center gap-2">
+                        <User2 className="h-4 w-4" />
+                        <span>{log.actor?.mobile || "-"}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Clock3 className="h-4 w-4" />
+                        <span>{formatTimestamp(log.timestamp)}</span>
+                      </div>
+                      {log.remote_addr ? (
+                        <div className="flex items-center gap-2">
+                          <Globe2 className="h-4 w-4" />
+                          <span>{log.remote_addr}</span>
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="grid gap-3 sm:grid-cols-2">
+                <div className="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
+                  <p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">
+                    {t.logs?.target || "Target"}
+                  </p>
+                  <p className="mt-2 text-sm font-semibold text-slate-900 dark:text-white">{log.target.name}</p>
+                  <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+                    {t.logs?.sections?.[log.section] || log.section}
+                  </p>
+                </div>
+                <div className="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
+                  <p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">
+                    {t.logs?.event || "Event"}
+                  </p>
+                  <p className="mt-2 text-sm font-semibold text-slate-900 dark:text-white">
+                    {t.logs?.events?.[log.event] || log.event}
+                  </p>
+                  <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{log.audit_action}</p>
+                </div>
+              </div>
+
+              <div className="rounded-3xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
+                <div className="border-b border-slate-100 px-5 py-4 dark:border-slate-800">
+                  <h3 className="text-base font-semibold text-slate-900 dark:text-white">
+                    {t.logs?.changesTitle || "Changes"}
+                  </h3>
+                </div>
+                {log.changes.length ? (
+                  <div className="divide-y divide-slate-100 dark:divide-slate-800">
+                    {log.changes.map((change, index) => (
+                      <div key={`${change.field}-${index}`} className="grid gap-3 px-5 py-4 md:grid-cols-[1.2fr_1fr_1fr]">
+                        <div>
+                          <p className="text-sm font-semibold text-slate-900 dark:text-white">{change.label}</p>
+                          {/* <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">{change.summary}</p> */}
+                        </div>
+                        <div>
+                          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">
+                            {t.logs?.previousValue || "Previous"}
+                          </p>
+                          <p className="mt-1 break-words text-sm text-slate-700 dark:text-slate-300">
+                            {change.old_value || "-"}
+                          </p>
+                        </div>
+                        <div>
+                          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">
+                            {t.logs?.currentValue || "Current"}
+                          </p>
+                          <p className="mt-1 break-words text-sm text-slate-700 dark:text-slate-300">
+                            {change.new_value || "-"}
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="px-5 py-6 text-sm text-slate-500 dark:text-slate-400">
+                    {t.logs?.noDetails || "No field-level details are available for this activity."}
+                  </div>
+                )}
+              </div>
+
+              {log.serialized_snapshot ? (
+                <details className="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
+                  <summary className="cursor-pointer text-sm font-semibold text-slate-900 dark:text-white">
+                    {t.logs?.snapshot || "Serialized snapshot"}
+                  </summary>
+                  <pre className="mt-3 overflow-x-auto rounded-xl bg-slate-950 p-3 text-xs text-slate-100" dir="ltr">
+                    {JSON.stringify(log.serialized_snapshot, null, 2)}
+                  </pre>
+                </details>
+              ) : null}
+            </div>
+          )}
+        </div>
+      </aside>
+    </div>
+  );
+}

src/components/logs/LogsFeed.tsx

@@ -0,0 +1,203 @@
+import { Clock3, History, Sparkles } from "lucide-react";
+
+import type { WorkspaceLogItem } from "../../api/logs";
+import { API_BASE_URL } from "../../config/constants";
+import { useTranslation } from "../../hooks/useTranslation";
+import { Button } from "../ui/button";
+
+const eventBadgeStyles: Record<string, string> = {
+  create: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
+  update: "bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300",
+  delete: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300",
+  restore: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300",
+  archive: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
+  unarchive: "bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-300",
+  activate: "bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-300",
+  deactivate: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300",
+};
+
+const sectionBadgeStyles: Record<string, string> = {
+  workspace: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300",
+  workspace_members: "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300",
+  clients: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300",
+  projects: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
+  project_members: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300",
+  tags: "bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300",
+  time_entries: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
+  rates: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
+  report_exports: "bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-900/30 dark:text-fuchsia-300",
+};
+
+const resolveImageUrl = (value?: string | null) => {
+  if (!value) return null;
+  if (/^https?:\/\//i.test(value)) return value;
+  return `${API_BASE_URL.replace(/\/+$/, "")}/${value.replace(/^\/+/, "")}`;
+};
+
+export function LogsFeed({
+  items,
+  total,
+  hasMore,
+  isLoading,
+  isLoadingMore,
+  selectedId,
+  onOpen,
+  onLoadMore,
+}: {
+  items: WorkspaceLogItem[];
+  total: number;
+  hasMore: boolean;
+  isLoading: boolean;
+  isLoadingMore: boolean;
+  selectedId: number | null;
+  onOpen: (id: number) => void;
+  onLoadMore: () => void;
+}) {
+  const { t, lang } = useTranslation();
+
+  const formatTimestamp = (value: string) =>
+    new Intl.DateTimeFormat(lang === "fa" ? "fa-IR-u-ca-persian" : "en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    }).format(new Date(value));
+
+  const buildSummary = (item: WorkspaceLogItem) => {
+    const actor = item.actor?.full_name || t.logs?.unknownActor || "Unknown actor";
+    const eventLabel = t.logs?.events?.[item.event] || item.event;
+    const sectionLabel = t.logs?.sections?.[item.section] || item.section;
+    const target = item.target?.name || "-";
+    if (typeof t.logs?.summary === "function") {
+      return t.logs.summary(actor, eventLabel, sectionLabel, target);
+    }
+    return `${actor} ${eventLabel.toLowerCase()} ${target} in ${sectionLabel.toLowerCase()}`;
+  };
+
+  const getInitials = (item: WorkspaceLogItem) => {
+    const label = item.actor?.full_name || t.logs?.unknownActor || "?";
+    return label.trim().charAt(0).toUpperCase();
+  };
+
+  if (isLoading) {
+    return (
+      <div className="rounded-3xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400">
+        {t.logs?.loading || "Loading logs..."}
+      </div>
+    );
+  }
+
+  if (!items.length) {
+    return (
+      <div className="rounded-3xl border border-dashed border-slate-300 bg-white p-8 text-center shadow-sm dark:border-slate-700 dark:bg-slate-900">
+        <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
+          <History className="h-5 w-5" />
+        </div>
+        <p className="text-base font-semibold text-slate-900 dark:text-white">
+          {t.logs?.empty || "No activity logs found"}
+        </p>
+        <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+          {t.logs?.emptyHint || "Adjust your filters or wait for new workspace activity."}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-3xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <div className="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800">
+          <div>
+            <h2 className="text-lg font-semibold text-slate-900 dark:text-white">
+              {t.logs?.resultsCount?.(total) || `${total} results`}
+            </h2>
+            <p className="text-sm text-slate-500 dark:text-slate-400">
+              {t.logs?.detailsHint || "Select an activity item to inspect the exact field changes."}
+            </p>
+          </div>
+          <div className="hidden items-center gap-2 rounded-2xl bg-slate-100 px-3 py-2 text-sm text-slate-600 dark:bg-slate-800 dark:text-slate-300 sm:flex">
+            <Sparkles className="h-4 w-4" />
+            <span>{items.length}/{total}</span>
+          </div>
+        </div>
+
+        <div className="divide-y divide-slate-100 dark:divide-slate-800">
+          {items.map((item) => {
+            const avatarUrl = resolveImageUrl(item.actor?.profile_picture);
+            return (
+              <button
+                key={item.id}
+                type="button"
+                onClick={() => onOpen(item.id)}
+                className={`flex w-full flex-col gap-3 px-5 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-slate-800/70 ${
+                  selectedId === item.id ? "bg-sky-50 dark:bg-sky-950/20" : ""
+                }`}
+              >
+                <div className="flex items-start gap-3">
+                  <div className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-slate-200 text-sm font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300">
+                    {avatarUrl ? (
+                      <img src={avatarUrl} alt={item.actor?.full_name || "Actor"} className="h-full w-full object-cover" />
+                    ) : (
+                      <span>{getInitials(item)}</span>
+                    )}
+                  </div>
+
+                  <div className="min-w-0 flex-1">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <p className="truncate text-sm font-semibold text-slate-900 dark:text-white">
+                        {buildSummary(item)}
+                      </p>
+                      <span className={`inline-flex rounded-full px-2.5 py-1 text-[11px] font-semibold ${sectionBadgeStyles[item.section] || sectionBadgeStyles.workspace}`}>
+                        {t.logs?.sections?.[item.section] || item.section}
+                      </span>
+                      <span className={`inline-flex rounded-full px-2.5 py-1 text-[11px] font-semibold ${eventBadgeStyles[item.event] || eventBadgeStyles.update}`}>
+                        {t.logs?.events?.[item.event] || item.event}
+                      </span>
+                    </div>
+
+                    <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-slate-500 dark:text-slate-400">
+                      <span className="truncate">{item.target?.name}</span>
+                      <span className="inline-flex items-center gap-1">
+                        <Clock3 className="h-3.5 w-3.5" />
+                        {formatTimestamp(item.timestamp)}
+                      </span>
+                    </div>
+
+                    {item.preview_changes.length ? (
+                      <div className="mt-3 flex flex-wrap gap-2">
+                        {item.preview_changes.map((change) => (
+                          <span
+                            key={`${item.id}-${change.field}`}
+                            className="inline-flex max-w-full truncate rounded-full bg-slate-100 px-2.5 py-1 text-xs text-slate-600 dark:bg-slate-800 dark:text-slate-300"
+                            title={change.summary}
+                          >
+                            {change.summary}
+                          </span>
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {hasMore ? (
+        <div className="flex justify-center">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={onLoadMore}
+            disabled={isLoadingMore}
+            className="rounded-2xl px-5"
+          >
+            {isLoadingMore ? t.loading || "Loading..." : t.logs?.loadMore || "Load more"}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/components/logs/LogsFilterBar.tsx

@@ -0,0 +1,221 @@
+import { useEffect, useState } from "react";
+import { Filter, RotateCcw, Search } from "lucide-react";
+
+import type { WorkspaceLogEvent, WorkspaceLogSection } from "../../api/logs";
+import type { WorkspaceMembership } from "../../api/workspaces";
+import JalaliDatePicker from "../ui/JalaliDatePicker";
+import { SearchableSelect } from "../ui/SearchableSelect";
+import { Select } from "../ui/Select";
+import { Input } from "../ui/input";
+import { useTranslation } from "../../hooks/useTranslation";
+
+export interface LogsFilterDraft {
+  search: string;
+  section: "" | WorkspaceLogSection;
+  event: "" | WorkspaceLogEvent;
+  actor: string;
+  from: string;
+  to: string;
+  ordering: "-timestamp" | "timestamp";
+}
+
+export function LogsFilterBar({
+  value,
+  users,
+  isLoadingUsers,
+  canSelectUsers,
+  onApply,
+}: {
+  value: LogsFilterDraft;
+  users: WorkspaceMembership[];
+  isLoadingUsers: boolean;
+  canSelectUsers: boolean;
+  onApply: (value: LogsFilterDraft) => void;
+}) {
+  const { t } = useTranslation();
+  const [draft, setDraft] = useState<LogsFilterDraft>(value);
+
+  useEffect(() => {
+    setDraft(value);
+  }, [value]);
+
+  useEffect(() => {
+    if (!canSelectUsers && draft.actor) {
+      setDraft((current) => ({ ...current, actor: "" }));
+    }
+  }, [canSelectUsers, draft.actor]);
+
+  return (
+    <div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-5">
+      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+        <div className="xl:col-span-2">
+          <label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+            {t.logs?.search || "Search"}
+          </label>
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+            <Input
+              value={draft.search}
+              onChange={(event) => setDraft((current) => ({ ...current, search: event.target.value }))}
+              placeholder={t.logs?.searchPlaceholder || "Search logs..."}
+              className="h-10 rounded-2xl border-slate-200 bg-white pl-10 dark:border-slate-700 dark:bg-slate-900"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+            {t.logs?.section || "Section"}
+          </label>
+          <Select
+            value={draft.section}
+            onChange={(section) =>
+              setDraft((current) => ({ ...current, section: section as "" | WorkspaceLogSection }))
+            }
+            options={[
+              { value: "", label: t.logs?.allSections || "All sections" },
+              { value: "workspace", label: t.logs?.sections?.workspace || "Workspace" },
+              { value: "workspace_members", label: t.logs?.sections?.workspace_members || "Workspace members" },
+              { value: "clients", label: t.logs?.sections?.clients || "Clients" },
+              { value: "projects", label: t.logs?.sections?.projects || "Projects" },
+              { value: "project_members", label: t.logs?.sections?.project_members || "Project members" },
+              { value: "tags", label: t.logs?.sections?.tags || "Tags" },
+              { value: "time_entries", label: t.logs?.sections?.time_entries || "Time entries" },
+              { value: "rates", label: t.logs?.sections?.rates || "Rates" },
+              { value: "report_exports", label: t.logs?.sections?.report_exports || "Report exports" },
+            ]}
+            className="w-full"
+            buttonClassName="h-10 w-full rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+
+        <div>
+          <label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+            {t.logs?.event || "Event"}
+          </label>
+          <Select
+            value={draft.event}
+            onChange={(event) =>
+              setDraft((current) => ({ ...current, event: event as "" | WorkspaceLogEvent }))
+            }
+            options={[
+              { value: "", label: t.logs?.allEvents || "All events" },
+              { value: "create", label: t.logs?.events?.create || "Create" },
+              { value: "update", label: t.logs?.events?.update || "Update" },
+              { value: "delete", label: t.logs?.events?.delete || "Delete" },
+              { value: "restore", label: t.logs?.events?.restore || "Restore" },
+              { value: "archive", label: t.logs?.events?.archive || "Archive" },
+              { value: "unarchive", label: t.logs?.events?.unarchive || "Unarchive" },
+              { value: "activate", label: t.logs?.events?.activate || "Activate" },
+              { value: "deactivate", label: t.logs?.events?.deactivate || "Deactivate" },
+            ]}
+            className="w-full"
+            buttonClassName="h-10 w-full rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+
+        {canSelectUsers || isLoadingUsers ? (
+          <div>
+            <label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+              {t.logs?.actor || "Actor"}
+            </label>
+            {isLoadingUsers ? (
+              <div className="flex h-10 items-center rounded-2xl border border-slate-200 bg-slate-50 px-3 text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400">
+                {t.logs?.loadingUsers || "Loading users..."}
+              </div>
+            ) : (
+              <SearchableSelect
+                value={draft.actor}
+                onChange={(actor) => setDraft((current) => ({ ...current, actor }))}
+                options={[
+                  { value: "", label: t.logs?.allActors || "All actors" },
+                  ...users.map((membership) => ({
+                    value: membership.user.id,
+                    label:
+                      `${membership.user.first_name || ""} ${membership.user.last_name || ""}`.trim() ||
+                      membership.user.email ||
+                      membership.user.id,
+                    searchText: membership.user.mobile || "",
+                  })),
+                ]}
+                placeholder={t.logs?.allActors || "All actors"}
+                searchPlaceholder={t.logs?.searchActors || "Search users..."}
+                className="w-full"
+                buttonClassName="h-10 rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
+              />
+            )}
+          </div>
+        ) : null}
+
+        <div>
+          <label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+            {t.logs?.fromDate || "From date"}
+          </label>
+          <JalaliDatePicker
+            value={draft.from}
+            onChange={(nextValue) => setDraft((current) => ({ ...current, from: nextValue }))}
+            placeholder="YYYY/MM/DD"
+            inputClassName="h-10 rounded-2xl border border-slate-200 bg-white px-3 text-sm dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
+          />
+        </div>
+
+        <div>
+          <label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+            {t.logs?.toDate || "To date"}
+          </label>
+          <JalaliDatePicker
+            value={draft.to}
+            onChange={(nextValue) => setDraft((current) => ({ ...current, to: nextValue }))}
+            placeholder="YYYY/MM/DD"
+            inputClassName="h-10 rounded-2xl border border-slate-200 bg-white px-3 text-sm dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
+          />
+        </div>
+
+        <div>
+          <label className="mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+            {t.logs?.ordering || "Ordering"}
+          </label>
+          <Select
+            value={draft.ordering}
+            onChange={(ordering) => setDraft((current) => ({ ...current, ordering: ordering as "-timestamp" | "timestamp" }))}
+            options={[
+              { value: "-timestamp", label: t.logs?.newestFirst || "Newest first" },
+              { value: "timestamp", label: t.logs?.oldestFirst || "Oldest first" },
+            ]}
+            className="w-full"
+            buttonClassName="h-10 w-full rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-col gap-2 sm:flex-row sm:justify-end">
+        <button
+          type="button"
+          onClick={() =>
+            setDraft({
+              search: "",
+              section: "",
+              event: "",
+              actor: "",
+              from: "",
+              to: "",
+              ordering: "-timestamp",
+            })
+          }
+          className="inline-flex h-11 items-center justify-center gap-2 rounded-2xl border border-slate-200 px-4 text-sm text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
+        >
+          <RotateCcw className="h-4 w-4" />
+          {t.logs?.clear || "Clear"}
+        </button>
+        <button
+          type="button"
+          onClick={() => onApply(draft)}
+          className="inline-flex h-11 items-center justify-center gap-2 rounded-2xl bg-sky-600 px-4 text-sm font-medium text-white transition hover:bg-sky-700"
+        >
+          <Filter className="h-4 w-4" />
+          {t.logs?.apply || "Apply"}
+        </button>
+      </div>
+    </div>
+  );
+}

src/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;

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
+            {isLoadingUsers ? (
-              value={draft.user}
+              <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">
-              onChange={(user) => setDraft((current) => ({ ...current, user }))}
+                {labels.searchUsers || "Loading users..."}
-              options={[
+              </div>
-                { value: "", label: labels.allUsers },
+            ) : (
-                ...users.map((membership) => ({
+              <SearchableSelect
-                  value: membership.user.id,
+                value={draft.user}
-                  label:
+                onChange={(user) => setDraft((current) => ({ ...current, user }))}
-                    `${membership.user.first_name || ""} ${membership.user.last_name || ""}`.trim() ||
+                options={[
-                    membership.user.email ||
+                  { value: "", label: labels.allUsers },
-                    membership.user.id,
+                  ...users.map((membership) => ({
-                  searchText: membership.user.mobile || "",
+                    value: membership.user.id,
-                })),
+                    label:
-              ]}
+                      `${membership.user.first_name || ""} ${membership.user.last_name || ""}`.trim() ||
-              placeholder={labels.allUsers}
+                      membership.user.email ||
-              searchPlaceholder={labels.searchUsers}
+                      membership.user.id,
-              className="w-full"
+                    searchText: membership.user.mobile || "",
-              buttonClassName="h-10 rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
+                  })),
-            />
+                ]}
+                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}
 

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,

src/locales/en.ts

@@ -131,8 +131,13 @@ export const en = {
     nameLabel: "Workspace Name",
     namePlaceholder: "Enter workspace name",
     descriptionLabel: "Description",
-    descriptionPlaceholder: "Enter description (optional)",
+      descriptionPlaceholder: "Enter description (optional)",
-    searchMemberPlaceholder: "Search exact mobile (e.g. 09123456789)",
+      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",
@@ -167,7 +172,8 @@ export const en = {
     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",
+    mobileNumber: "Mobile Number",
+    youLabel: "You",
     resourcesTitle: "Resources",
     resourceOpen: "Open",
     roleDistributionTitle: "Role distribution",
@@ -261,6 +267,7 @@ export const en = {
   sidebar: {
     timesheet: "Timesheet",
     reports: "Reports",
+    logs: "Logs",
     workspaces: 'Workspaces',
     clients: 'Clients',
     projects: "Projects",
@@ -482,6 +489,78 @@ export const en = {
     exportError: "Failed to queue report export.",
   },
 
+  logs: {
+    eyebrow: "Workspace activity",
+    title: "Activity logs",
+    description: (workspaceName: string) => `Review what has happened inside ${workspaceName}.`,
+    selectWorkspace: "Please select a workspace first.",
+    unauthorized: "Only owners and admins can access workspace activity logs.",
+    loading: "Loading logs...",
+    loadingUsers: "Loading users...",
+    loadingDetails: "Loading details...",
+    loadError: "Failed to load logs.",
+    loadDetailsError: "Failed to load log details.",
+    loadFiltersError: "Failed to load log filters.",
+    search: "Search",
+    searchPlaceholder: "Search logs...",
+    section: "Section",
+    allSections: "All sections",
+    event: "Event",
+    allEvents: "All events",
+    actor: "Actor",
+    allActors: "All actors",
+    searchActors: "Search users...",
+    ordering: "Ordering",
+    newestFirst: "Newest first",
+    oldestFirst: "Oldest first",
+    fromDate: "From date",
+    toDate: "To date",
+    clear: "Clear",
+    apply: "Apply",
+    loadMore: "Load more",
+    totalLogs: "Total logs",
+    activeFilters: "Active filters",
+    latestActivity: "Latest activity",
+    resultsCount: (count: number) => `${count} results`,
+    empty: "No activity logs found",
+    emptyHint: "Adjust your filters or wait for new workspace activity.",
+    detailsTitle: "Activity details",
+    detailsHint: "Select an activity item to inspect the exact field changes.",
+    selectLogHint: "Select a log entry to see its details.",
+    target: "Target",
+    timestamp: "Timestamp",
+    remoteAddress: "Remote address",
+    previousValue: "Previous",
+    currentValue: "Current",
+    changesTitle: "Changes",
+    noDetails: "No field-level details are available for this activity.",
+    snapshot: "Serialized snapshot",
+    unknownActor: "Unknown actor",
+    summary: (actor: string, event: string, section: string, target: string) =>
+      `${actor} ${event.toLowerCase()} ${target} in ${section.toLowerCase()}`,
+    sections: {
+      workspace: "Workspace",
+      workspace_members: "Workspace members",
+      clients: "Clients",
+      projects: "Projects",
+      project_members: "Project members",
+      tags: "Tags",
+      time_entries: "Time entries",
+      rates: "Rates",
+      report_exports: "Report exports",
+    },
+    events: {
+      create: "Created",
+      update: "Updated",
+      delete: "Deleted",
+      restore: "Restored",
+      archive: "Archived",
+      unarchive: "Unarchived",
+      activate: "Activated",
+      deactivate: "Deactivated",
+    },
+  },
+
   notifications: {
     title: "Notifications",
     open: "Open notifications",

src/locales/fa.ts

@@ -132,8 +132,13 @@ export const fa = {
     nameLabel: "عنوان",
     namePlaceholder: "نام ورک‌اسپیس را وارد کنید",
     descriptionLabel: "توضیحات",
-    descriptionPlaceholder: "توضیحات (اختیاری)",
+      descriptionPlaceholder: "توضیحات (اختیاری)",
-    searchMemberPlaceholder: "جستجو با موبایل دقیق (مثلا 09123456789)",
+      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: "توزیع نقش‌ها",
@@ -258,6 +264,7 @@ export const fa = {
   sidebar: {
     timesheet: 'تایم‌شیت',
     reports: 'گزارش‌ها',
+    logs: "لاگ‌ها",
     workspaces: 'ورک‌اسپیس‌ها',
     clients: 'مشتری‌ها',
     projects: "پروژه‌ها",
@@ -477,6 +484,77 @@ export const fa = {
     exportQueued: "درخواست خروجی ثبت شد. پیوند دانلود از طریق اعلان ارسال می‌شود.",
     exportError: "ثبت درخواست خروجی با خطا مواجه شد.",
   },
+  logs: {
+    eyebrow: "فعالیت‌های ورک‌اسپیس",
+    title: "لاگ‌های فعالیت",
+    description: (workspaceName: string) => `مرور رویدادهای ثبت‌شده در ${workspaceName}`,
+    selectWorkspace: "لطفاً ابتدا یک ورک‌اسپیس انتخاب کنید.",
+    unauthorized: "فقط مالک و ادمین می‌توانند لاگ‌های فعالیت ورک‌اسپیس را مشاهده کنند.",
+    loading: "در حال بارگذاری لاگ‌ها...",
+    loadingUsers: "در حال بارگذاری کاربران...",
+    loadingDetails: "در حال بارگذاری جزئیات...",
+    loadError: "دریافت لاگ‌ها با خطا مواجه شد.",
+    loadDetailsError: "دریافت جزئیات لاگ با خطا مواجه شد.",
+    loadFiltersError: "دریافت فیلترهای لاگ با خطا مواجه شد.",
+    search: "جست‌وجو",
+    searchPlaceholder: "جست‌وجوی لاگ‌ها...",
+    section: "بخش",
+    allSections: "همه بخش‌ها",
+    event: "رویداد",
+    allEvents: "همه رویدادها",
+    actor: "انجام‌دهنده",
+    allActors: "همه کاربران",
+    searchActors: "جست‌وجوی کاربران...",
+    ordering: "مرتب‌سازی",
+    newestFirst: "جدیدترین",
+    oldestFirst: "قدیمی‌ترین",
+    fromDate: "از تاریخ",
+    toDate: "تا تاریخ",
+    clear: "پاک کردن",
+    apply: "اعمال",
+    loadMore: "بارگذاری بیشتر",
+    totalLogs: "کل لاگ‌ها",
+    activeFilters: "فیلترهای فعال",
+    latestActivity: "آخرین فعالیت",
+    resultsCount: (count: number) => `${count} نتیجه`,
+    empty: "لاگ فعالیتی پیدا نشد",
+    emptyHint: "فیلترها را تغییر دهید یا منتظر فعالیت جدید بمانید.",
+    detailsTitle: "جزئیات فعالیت",
+    detailsHint: "برای بررسی دقیق تغییرات، یک مورد را انتخاب کنید.",
+    selectLogHint: "یک لاگ را برای مشاهده جزئیات انتخاب کنید.",
+    target: "هدف",
+    timestamp: "زمان",
+    remoteAddress: "آدرس شبکه",
+    previousValue: "مقدار قبلی",
+    currentValue: "مقدار جدید",
+    changesTitle: "تغییرات",
+    noDetails: "برای این رویداد جزئیات فیلدی در دسترس نیست.",
+    snapshot: "نمونه ذخیره‌شده",
+    unknownActor: "کاربر نامشخص",
+    summary: (actor: string, event: string, section: string, target: string) =>
+      `${actor} ${target} را در بخش ${section} ${event}`,
+    sections: {
+      workspace: "ورک‌اسپیس",
+      workspace_members: "اعضای ورک‌اسپیس",
+      clients: "مشتری‌ها",
+      projects: "پروژه‌ها",
+      project_members: "اعضای پروژه",
+      tags: "تگ‌ها",
+      time_entries: "ورودی‌های زمان",
+      rates: "نرخ‌ها",
+      report_exports: "خروجی‌های گزارش",
+    },
+    events: {
+      create: "ایجاد کرد",
+      update: "ویرایش کرد",
+      delete: "حذف کرد",
+      restore: "بازیابی کرد",
+      archive: "بایگانی کرد",
+      unarchive: "از بایگانی خارج کرد",
+      activate: "فعال کرد",
+      deactivate: "غیرفعال کرد",
+    },
+  },
   notifications: {
     title: "اعلان‌ها",
     open: "باز کردن اعلان‌ها",

src/pages/Clients.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from "react"
 import { Plus, Building2, Loader2, Pencil, Trash2 } from "lucide-react"
 import { useWorkspace } from "../context/WorkspaceContext" 
+import { useAppContext } from "../context/AppContext"
 import { useTranslation } from "../hooks/useTranslation" 
 import {
   CLIENTS_CREATE,
-  CLIENTS_DELETE,
   CLIENTS_EDIT,
+  canDeleteWorkspaceResource,
   canWorkspace,
 } from "../lib/permissions"
 import { type Client } from "../types/client"
@@ -20,6 +21,7 @@ import { Pagination } from "../components/Pagination"
 
 export default function Clients() {
   const { activeWorkspace } = useWorkspace()
+  const { user } = useAppContext()
   const [clients, setClients] = useState<Client[]>([]) 
   const [isLoading, setIsLoading] = useState(true)
   
@@ -43,7 +45,6 @@ export default function Clients() {
   const workspaceRole = activeWorkspace?.my_role
   const canCreateClient = canWorkspace(workspaceRole, CLIENTS_CREATE)
   const canEditClient = canWorkspace(workspaceRole, CLIENTS_EDIT)
-  const canDeleteClient = canWorkspace(workspaceRole, CLIENTS_DELETE)
 
   const orderingOptions = [
     { value: "-created_at", label: t.ordering?.createdAtDesc || "Newest First" },
@@ -161,7 +162,13 @@ export default function Clients() {
             </div>
           ) : (
             <ul className="divide-y divide-slate-200 dark:divide-slate-800">
-              {clients.map((client) => (
+              {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>
@@ -197,7 +204,8 @@ export default function Clients() {
                     </div>
                   )}
                 </li>
-              ))}
+                )
+              })}
             </ul>
           )}
         </div>
@@ -231,7 +239,7 @@ export default function Clients() {
         />
       )}
 
-      {canDeleteClient && (
+      {!!deleteClient && (
         <DeleteClientModal
           isOpen={!!deleteClient}
           onClose={() => setDeleteClient(null)}

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

src/pages/Projects.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useTranslation } from "../hooks/useTranslation";
 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";
@@ -16,18 +17,18 @@ import { Input } from "../components/ui/input";
 import {
   PROJECTS_ARCHIVE,
   PROJECTS_CREATE,
-  PROJECTS_DELETE,
   PROJECTS_EDIT,
+  canDeleteWorkspaceResource,
   canWorkspace,
 } from "../lib/permissions";
 
 export const Projects: React.FC = () => {
   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 canDeleteProject = canWorkspace(workspaceRole, PROJECTS_DELETE);
   const canArchiveProject = canWorkspace(workspaceRole, PROJECTS_ARCHIVE);
   
   const [projects, setProjects] = useState<any[]>([]);
@@ -188,7 +189,13 @@ export const Projects: React.FC = () => {
                 </div>
               ) : (
                 <ul className="divide-y divide-slate-200 dark:divide-slate-800">
-                  {projects.map((project) => (
+                  {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"
@@ -233,7 +240,8 @@ export const Projects: React.FC = () => {
                         </div>
                       )}
                     </li>
-                  ))}
+                    );
+                  })}
                 </ul>
               )}
             </div>

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",

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">

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">
+                          <div className="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">
                             <MobileRecordedEntryCard
                               entry={entry}
                               t={t}

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)
@@ -55,7 +57,35 @@ export default function WorkspaceCreate() {
   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 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);
 
@@ -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"

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 && (
+            <div className="flex w-full items-center gap-2">
-              <button
+              {canEdit && (
-                onClick={() => navigate(`/workspaces/${id}/edit`)}
+                <button
-                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"
+                  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>{t.actions?.edit || 'Edit'}</span>
+                  <Edit2 className="h-4 w-4" />
-              </button>
+                  <span className="lg:hidden">{t.actions?.edit || 'Edit'}</span>
-            )}
+                </button>
-            {canDelete && (
+              )}
-              <button
+              {canDelete && (
-                onClick={handleDelete}
+                <button
-                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"
+                  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>{t.actions?.delete || 'Delete'}</span>
+                  <Trash2 className="h-4 w-4" />
-              </button>
+                  <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
-                {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.'
+                      { 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>
-              </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">
+                        {canViewMemberSensitiveDetails && (
-                          <p>{getMemberContact(member)}</p>
+                          <div className="space-y-1 text-sm text-slate-500 dark:text-slate-400">
-                          <p>
+                            <p>
-                            {t.workspace?.joinedLabel || 'Joined'}: {formatDate(member.joined_at)}
+                              {t.workspace?.mobileNumber || 'Mobile Number'}: {getMemberContact(member)}
-                          </p>
+                            </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]">
+                      {canViewMemberSensitiveDetails && (
-                        <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+                        <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]">
-                          {t.rates?.workspaceRate || 'Workspace rate'}
+                          <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
-                        </p>
+                            {t.rates?.workspaceRate || 'Workspace rate'}
-                        <p className="text-sm font-semibold text-slate-900 dark:text-white">
+                          </p>
-                          {formatRateUnit(rate)}
+                          <p className="text-sm font-semibold text-slate-900 dark:text-white">
-                        </p>
+                            {formatRateUnit(rate)}
-                      </div>
+                          </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>

src/pages/WorkspaceEdit.tsx

@@ -1,7 +1,7 @@
 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 { 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';
@@ -55,6 +55,10 @@ export default function EditWorkspace() {
   // Workspace Info States
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
+  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);
@@ -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;
+    return isNameChanged || isDescChanged || isImageChanged;
-  }, [name, description, initialData, isLoading]);
+  }, [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) => {
@@ -130,6 +164,9 @@ 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 || '');
 
@@ -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) {
@@ -285,10 +327,11 @@ export default function EditWorkspace() {
 
   const canManageMembers = canWorkspace(myRole, WORKSPACE_MEMBERS_CHANGE_ROLE);
   const isFirstOwner = currentUserId === workspaceOwnerId;
+  const isOwner = myRole === "owner";
 
-  const roleOptions = (allowOwner: boolean) => [
+  const roleOptions = (allowOwnerRole: boolean, allowAdminRole: boolean) => [
-    ...(allowOwner ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
+    ...(allowOwnerRole ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
-    { value: "admin", label: t.workspace?.roles?.admin || "Admin" },
+    ...(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" },
   ];
@@ -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"}
@@ -389,7 +481,7 @@ 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"
@@ -456,7 +548,7 @@ export default function EditWorkspace() {
                           <Select
                             value={m.role}
                             onChange={(val) => handleChangeRole(m.id, val)}
-                            options={roleOptions(isFirstOwner)}
+                            options={roleOptions(isFirstOwner, isOwner)}
                             buttonClassName="w-[110px] px-3 py-1.5 text-sm"
                           />
                         ) : (

src/pages/Workspaces.tsx

@@ -1,6 +1,6 @@
 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';
@@ -157,10 +157,17 @@ export default function Workspaces() {
                   <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'}
@@ -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>

src/types/client.ts

@@ -1,8 +1,16 @@
+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;