feat(workspaces): turn workspace detail into a management hub

src/pages/WorkspaceDetail.tsx

@@ -1,101 +1,439 @@
-import { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { ArrowLeft, ArrowRight, Edit2, Trash2 } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import {
+  ArrowLeft,
+  ArrowRight,
+  Banknote,
+  BriefcaseBusiness,
+  Edit2,
+  FolderKanban,
+  Tag,
+  Trash2,
+  Users,
+} from 'lucide-react';
+
+import { getClients } from '../api/clients';
+import { getProjects } from '../api/projects';
+import { getWorkspaceUserRates, type WorkspaceUserRate } from '../api/rates';
+import { getTags } from '../api/tags';
+import {
+  deleteWorkspace,
+  fetchWorkspaceMemberships,
+  getWorkspace,
+  type Workspace,
+  type WorkspaceMembership,
+} from '../api/workspaces';
+import { useWorkspace } from '../context/WorkspaceContext';
 import { useTranslation } from '../hooks/useTranslation';
-import { getWorkspace, deleteWorkspace, type Workspace } from '../api/workspaces';
-import { WORKSPACE_DELETE, WORKSPACE_EDIT, canWorkspace } from '../lib/permissions';
-
-export default function WorkspaceDetail() {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const { t, lang } = useTranslation();
-  const [workspace, setWorkspace] = useState<Workspace | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  const isRtl = lang === 'fa';
-  const BackIcon = isRtl ? ArrowRight : ArrowLeft;
-
-  useEffect(() => {
-    if (id) loadWorkspace();
-  }, [id]);
-
-  const loadWorkspace = async () => {
-    try {
-      const data = await getWorkspace(id!);
-      setWorkspace(data);
-    } catch (error) {
-      console.error(error);
-      navigate('/workspaces');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleDelete = async () => {
-    if (!window.confirm(t.workspace?.confirmDelete) || !id) return;
-    try {
-      await deleteWorkspace(id);
-      navigate('/workspaces');
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  if (isLoading || !workspace) {
-    return <div className="p-8 text-center">{t.workspace?.loading}</div>;
-  }
-
-  const canEdit = canWorkspace(workspace.my_role, WORKSPACE_EDIT);
-  const canDelete = canWorkspace(workspace.my_role, WORKSPACE_DELETE);
-
-  return (
-    <div className="max-w-4xl mx-auto p-6">
-      <button
-        onClick={() => navigate('/workspaces')}
-        className="flex items-center gap-2 text-slate-500 hover:text-slate-900 dark:hover:text-white mb-6 transition-colors"
-      >
-        <BackIcon className="h-5 w-5" />
-        <span>{t.workspace?.back}</span>
-      </button>
-
-      <div className="bg-white dark:bg-slate-900 rounded-xl p-8 border border-slate-200 dark:border-slate-800 shadow-sm relative">
-        <div className="flex justify-between items-start mb-6">
-          <div>
-            <h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">
-              {workspace.name}
-            </h1>
-            <span className="inline-block px-3 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-sm rounded-full font-medium">
-              {workspace.my_role ? t.workspace?.roles[workspace.my_role] : "-"}
-            </span>
-          </div>
-          
-          {canEdit && (
-            <div className="flex gap-2">
-              <button
-                onClick={() => navigate(`/workspaces/${id}/edit`)}
-                className="p-2 text-slate-500 hover:text-emerald-600 bg-slate-50 dark:bg-slate-800 rounded-lg"
-              >
-                <Edit2 className="h-5 w-5" />
-              </button>
-              {canDelete && (
-                <button
-                  onClick={handleDelete}
-                  className="p-2 text-slate-500 hover:text-red-600 bg-slate-50 dark:bg-slate-800 rounded-lg"
-                >
-                  <Trash2 className="h-5 w-5" />
-                </button>
-              )}
-            </div>
-          )}
-        </div>
-
-        <div className="prose dark:prose-invert max-w-none">
-          <h3 className="text-lg font-semibold mb-2">{t.workspace?.descriptionLabel}</h3>
-          <p className="text-slate-600 dark:text-slate-400 whitespace-pre-wrap">
-            {workspace.description || t.workspace?.noDescription}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
+import {
+  CLIENTS_VIEW,
+  PROJECTS_VIEW,
+  TAGS_VIEW,
+  WORKSPACE_DELETE,
+  WORKSPACE_EDIT,
+  WORKSPACE_MEMBERS_VIEW,
+  WORKSPACE_VIEW,
+  canWorkspace,
+} from '../lib/permissions';
+
+type ResourceCounts = {
+  projects: number;
+  clients: number;
+  tags: number;
+};
+
+const roleBadgeStyles: Record<string, string> = {
+  owner: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
+  admin: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+  member: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
+  guest: 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
+};
+
+export default function WorkspaceDetail() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { t, lang } = useTranslation();
+  const { setActiveWorkspace } = useWorkspace();
+
+  const [workspace, setWorkspace] = useState<Workspace | null>(null);
+  const [members, setMembers] = useState<WorkspaceMembership[]>([]);
+  const [rates, setRates] = useState<WorkspaceUserRate[]>([]);
+  const [counts, setCounts] = useState<ResourceCounts>({ projects: 0, clients: 0, tags: 0 });
+  const [isLoading, setIsLoading] = useState(true);
+
+  const isRtl = lang === 'fa';
+  const BackIcon = isRtl ? ArrowRight : ArrowLeft;
+
+  useEffect(() => {
+    if (!id) return;
+    void loadWorkspace();
+  }, [id]);
+
+  const loadWorkspace = async () => {
+    try {
+      const data = await getWorkspace(id!);
+      setWorkspace(data);
+
+      const canViewMembers = canWorkspace(data.my_role, WORKSPACE_MEMBERS_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);
+      const canViewRates = canWorkspace(data.my_role, WORKSPACE_EDIT);
+
+      const tasks: Promise<void>[] = [];
+
+      if (canViewMembers) {
+        tasks.push(
+          fetchWorkspaceMemberships({ workspace: id!, limit: 200, offset: 0 }).then((response) => {
+            setMembers(response.results || []);
+          }),
+        );
+      } else {
+        setMembers([]);
+      }
+
+      if (canViewRates) {
+        tasks.push(
+          getWorkspaceUserRates(id!).then((response) => {
+            setRates(response.results || []);
+          }),
+        );
+      } else {
+        setRates([]);
+      }
+
+      tasks.push(
+        Promise.all([
+          canViewProjects ? getProjects(id!, { limit: 1, offset: 0, is_archived: false }) : Promise.resolve({ count: 0 }),
+          canViewClients ? getClients(id!, '', '', 1, 0) : Promise.resolve({ count: 0 }),
+          canViewTags ? getTags(id!, { limit: 1, offset: 0 }) : Promise.resolve({ count: 0, results: [] }),
+        ]).then(([projectsData, clientsData, tagsData]) => {
+          setCounts({
+            projects: projectsData.count || 0,
+            clients: clientsData.count || 0,
+            tags: tagsData.count || 0,
+          });
+        }),
+      );
+
+      await Promise.all(tasks);
+    } catch (error) {
+      console.error(error);
+      navigate('/workspaces');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!window.confirm(t.workspace?.confirmDelete) || !id) return;
+    try {
+      await deleteWorkspace(id);
+      navigate('/workspaces');
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const activeMembers = members.filter((member) => member.is_active);
+  const roleCounts = useMemo(
+    () =>
+      activeMembers.reduce(
+        (acc, member) => {
+          acc[member.role] += 1;
+          return acc;
+        },
+        { owner: 0, admin: 0, member: 0, guest: 0 },
+      ),
+    [activeMembers],
+  );
+
+  const memberRateMap = useMemo(
+    () => new Map(rates.map((rate) => [rate.user, rate])),
+    [rates],
+  );
+
+  const displayNumber = (value: number) =>
+    new Intl.NumberFormat(lang === 'fa' ? 'fa-IR' : 'en-US').format(value);
+
+  const formatDate = (value?: string) => {
+    if (!value) return '-';
+    try {
+      return new Intl.DateTimeFormat(lang === 'fa' ? 'fa-IR' : 'en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      }).format(new Date(value));
+    } catch {
+      return value;
+    }
+  };
+
+  const getMemberName = (member: WorkspaceMembership) => {
+    const firstName = member.user?.first_name?.trim() || '';
+    const lastName = member.user?.last_name?.trim() || '';
+    const fullName = `${firstName} ${lastName}`.trim();
+    return fullName || member.user?.email || t.workspace?.unknownMember || 'Unknown member';
+  };
+
+  const getMemberContact = (member: WorkspaceMembership) => {
+    return member.user?.mobile || member.user?.email || '-';
+  };
+
+  const formatRateUnit = (rate?: WorkspaceUserRate) => {
+    if (!rate) return t.rates?.noRate || 'No rate';
+    const unitLabel =
+      lang === 'fa'
+        ? rate.price_unit?.local_name || rate.price_unit?.code || rate.currency
+        : rate.price_unit?.code || rate.currency;
+    return `${rate.hourly_rate} ${unitLabel}`;
+  };
+
+  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 canViewReports = canWorkspace(workspaceRole, WORKSPACE_VIEW);
+
+  if (isLoading || !workspace) {
+    return <div className="p-8 text-center">{t.workspace?.loading}</div>;
+  }
+
+  const openWorkspaceRoute = (path: string) => {
+    setActiveWorkspace(workspace);
+    navigate(path);
+  };
+
+  const resourceCards = [
+    {
+      key: 'projects',
+      title: t.sidebar?.projects || 'Projects',
+      value: displayNumber(counts.projects),
+      icon: FolderKanban,
+      onClick: () => openWorkspaceRoute('/projects'),
+      visible: canWorkspace(workspace.my_role, PROJECTS_VIEW),
+    },
+    {
+      key: 'clients',
+      title: t.sidebar?.clients || 'Clients',
+      value: displayNumber(counts.clients),
+      icon: BriefcaseBusiness,
+      onClick: () => openWorkspaceRoute('/clients'),
+      visible: canWorkspace(workspace.my_role, CLIENTS_VIEW),
+    },
+    {
+      key: 'tags',
+      title: t.sidebar?.tags || 'Tags',
+      value: displayNumber(counts.tags),
+      icon: Tag,
+      onClick: () => openWorkspaceRoute('/tags'),
+      visible: canWorkspace(workspace.my_role, TAGS_VIEW),
+    },
+    {
+      key: 'reports',
+      title: t.sidebar?.reports || 'Reports',
+      value: t.workspace?.resourceOpen || 'Open',
+      icon: Banknote,
+      onClick: () => openWorkspaceRoute('/reports'),
+      visible: canViewReports,
+    },
+  ].filter((item) => item.visible);
+
+  return (
+    <div className="mx-auto flex max-w-7xl flex-col gap-6 p-4 sm:p-6">
+      <button
+        onClick={() => navigate('/workspaces')}
+        className="flex items-center gap-2 text-slate-500 transition-colors hover:text-slate-900 dark:hover:text-white"
+      >
+        <BackIcon className="h-5 w-5" />
+        <span>{t.workspace?.back}</span>
+      </button>
+
+      <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="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}
+              </h1>
+              <span className={`inline-flex rounded-full px-3 py-1 text-sm font-semibold ${roleBadgeStyles[workspace.my_role || 'guest']}`}>
+                {workspace.my_role ? t.workspace?.roles[workspace.my_role] : '-'}
+              </span>
+            </div>
+            <p className="max-w-3xl whitespace-pre-wrap text-sm leading-7 text-slate-600 dark:text-slate-400">
+              {workspace.description || t.workspace?.noDescription}
+            </p>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
+            {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"
+              >
+                {t.workspace?.openReports || 'Open reports'}
+              </button>
+            )}
+            {canEdit && (
+              <button
+                onClick={() => navigate(`/workspaces/${id}/edit`)}
+                className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border px-4 text-sm font-semibold transition bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400 border-blue-200 hover:border-blue-300 hover:bg-blue-100 dark:border-blue-900/60 dark:hover:bg-blue-900/30"
+              >
+                <Edit2 className="h-4 w-4" />
+                <span>{t.actions?.edit || 'Edit'}</span>
+              </button>
+            )}
+            {canDelete && (
+              <button
+                onClick={handleDelete}
+                className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-red-200 bg-red-50 px-4 text-sm font-semibold text-red-700 transition hover:border-red-300 hover:bg-red-100 dark:border-red-900/60 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/30"
+              >
+                <Trash2 className="h-4 w-4" />
+                <span>{t.actions?.delete || 'Delete'}</span>
+              </button>
+            )}
+          </div>
+        </div>
+      </section>
+
+      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+          <div className="mb-3 flex items-center justify-between">
+            <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.workspace?.statsMembers || 'Members'}</span>
+            <Users className="h-5 w-5 text-slate-400" />
+          </div>
+          <p className="text-3xl font-bold text-slate-900 dark:text-white">{displayNumber(activeMembers.length)}</p>
+        </div>
+
+        <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+          <div className="mb-3 flex items-center justify-between">
+            <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.workspace?.statsRates || 'Rates set'}</span>
+            <Banknote className="h-5 w-5 text-slate-400" />
+          </div>
+          <p className="text-3xl font-bold text-slate-900 dark:text-white">{displayNumber(rates.length)}</p>
+        </div>
+
+        <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+          <div className="mb-3 flex items-center justify-between">
+            <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.workspace?.statsOwnersAdmins || 'Owners & admins'}</span>
+            <Users className="h-5 w-5 text-slate-400" />
+          </div>
+          <p className="text-3xl font-bold text-slate-900 dark:text-white">
+            {displayNumber(roleCounts.owner + roleCounts.admin)}
+          </p>
+        </div>
+
+        <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+          <div className="mb-3 flex items-center justify-between">
+            <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.workspace?.statsGuests || 'Guests'}</span>
+            <Users className="h-5 w-5 text-slate-400" />
+          </div>
+          <p className="text-3xl font-bold text-slate-900 dark:text-white">{displayNumber(roleCounts.guest)}</p>
+        </div>
+      </section>
+
+      <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <h2 className="mb-4 text-lg font-semibold text-slate-900 dark:text-white">
+          {t.workspace?.resourcesTitle || 'Resources'}
+        </h2>
+        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+          {resourceCards.map((card) => {
+            const Icon = card.icon;
+            return (
+              <button
+                key={card.key}
+                onClick={card.onClick}
+                className="flex items-center justify-between rounded-2xl border border-slate-200 bg-slate-50 p-4 text-start transition hover:border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:border-slate-600 dark:hover:bg-slate-700"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="rounded-xl bg-white p-2 text-slate-600 shadow-sm dark:bg-slate-900 dark:text-slate-300">
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold text-slate-900 dark:text-white">{card.title}</p>
+                    <p className="text-xs text-slate-500 dark:text-slate-400">{card.value}</p>
+                  </div>
+                </div>
+                <BackIcon className="h-4 w-4 rtl:rotate-180 text-slate-400" />
+              </button>
+            );
+          })}
+        </div>
+      </section>
+
+      <section className="rounded-3xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <div className="border-b border-slate-100 p-6 dark:border-slate-800">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <h2 className="text-lg font-semibold text-slate-900 dark:text-white">
+                {t.workspace?.membersSectionTitle || t.workspace?.members || 'Members'}
+              </h2>
+              <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+                {canViewMembers
+                  ? t.workspace?.membersSectionSubtitle || 'People in this workspace and their current roles.'
+                  : t.workspace?.membersLocked || 'Only owners and admins can view the full member list.'}
+              </p>
+            </div>
+            {canEdit && (
+              <button
+                onClick={() => navigate(`/workspaces/${id}/edit`)}
+                className="inline-flex h-10 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?.manageMembers || 'Manage members'}
+              </button>
+            )}
+          </div>
+        </div>
+
+        {canViewMembers ? (
+          <div className={`divide-y divide-slate-100 dark:divide-slate-800 ${activeMembers.length > 6 ? 'max-h-[36rem] overflow-y-auto' : ''}`}>
+            {activeMembers.length === 0 ? (
+              <div className="p-6 text-sm text-slate-500 dark:text-slate-400">
+                {t.workspace?.noMembers || 'No members found.'}
+              </div>
+            ) : (
+              activeMembers.map((member) => {
+                const rate = memberRateMap.get(member.user.id);
+                return (
+                  <div key={member.id} className="flex flex-col gap-4 p-5 sm:p-6">
+                    <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                      <div className="min-w-0">
+                        <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>
+                          <span className={`inline-flex rounded-full px-2.5 py-1 text-xs font-semibold ${roleBadgeStyles[member.role]}`}>
+                            {t.workspace?.roles[member.role]}
+                          </span>
+                        </div>
+                        <div className="space-y-1 text-sm text-slate-500 dark:text-slate-400">
+                          <p>{getMemberContact(member)}</p>
+                          <p>
+                            {t.workspace?.joinedLabel || 'Joined'}: {formatDate(member.joined_at)}
+                          </p>
+                        </div>
+                      </div>
+
+                      <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-800/80 sm:min-w-[210px]">
+                        <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+                          {t.rates?.workspaceRate || 'Workspace rate'}
+                        </p>
+                        <p className="text-sm font-semibold text-slate-900 dark:text-white">
+                          {formatRateUnit(rate)}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })
+            )}
+          </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.'}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}