feat(workspaces): expand detail page member list

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) {
@@ -368,11 +377,11 @@ export default function WorkspaceDetail() {
               <h2 className="text-lg font-semibold text-slate-900 dark:text-white">
                 {t.workspace?.membersSectionTitle || t.workspace?.members || 'Members'}
               </h2>
-              <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
-                {canViewMembers
-                  ? t.workspace?.membersSectionSubtitle || 'People in this workspace and their current roles.'
-                  : t.workspace?.membersLocked || 'Only owners and admins can view the full member list.'}
-              </p>
+              {canViewMembers
+                  ? <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+                      { t.workspace?.membersSectionSubtitle || 'People in this workspace and their current roles.' }
+                    </p>
+                  : ''}
             </div>
             {canEdit && (
               <button
@@ -394,34 +403,65 @@ export default function WorkspaceDetail() {
             ) : (
               activeMembers.map((member) => {
                 const rate = memberRateMap.get(member.user.id);
+                const isCurrentUser = member.user.id === user?.id;
                 return (
-                  <div key={member.id} className="flex flex-col gap-4 p-5 sm:p-6">
+                  <div
+                    key={member.id}
+                    className={`flex flex-col gap-4 p-5 sm:p-6 ${
+                      isCurrentUser
+                        ? 'bg-blue-50/80 ring-1 ring-blue-200 dark:bg-blue-950/20 dark:ring-blue-900/60'
+                        : ''
+                    }`}
+                  >
                     <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-                      <div className="min-w-0">
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-start gap-4">
+                          <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-full bg-slate-200 text-sm font-semibold text-slate-600 shadow-sm dark:bg-slate-800 dark:text-slate-300">
+                            {member.user?.profile_picture ? (
+                              <img
+                                src={member.user.profile_picture}
+                                alt={getMemberName(member)}
+                                className="h-full w-full object-cover"
+                              />
+                            ) : (
+                              <span>{getMemberInitials(member)}</span>
+                            )}
+                          </div>
+                          <div className="min-w-0 flex-1">
                         <div className="mb-2 flex flex-wrap items-center gap-2">
                           <h3 className="text-base font-semibold text-slate-900 dark:text-white">
                             {getMemberName(member)}
                           </h3>
+                          {isCurrentUser && (
+                            <span className="inline-flex rounded-full border border-blue-200 bg-blue-100 px-2.5 py-1 text-xs font-semibold text-blue-700 dark:border-blue-900/60 dark:bg-blue-900/30 dark:text-blue-300">
+                              {t.workspace?.youLabel || 'You'}
+                            </span>
+                          )}
                           <span className={`inline-flex rounded-full px-2.5 py-1 text-xs font-semibold ${roleBadgeStyles[member.role]}`}>
                             {t.workspace?.roles[member.role]}
                           </span>
                         </div>
-                        <div className="space-y-1 text-sm text-slate-500 dark:text-slate-400">
-                          <p>{getMemberContact(member)}</p>
-                          <p>
-                            {t.workspace?.joinedLabel || 'Joined'}: {formatDate(member.joined_at)}
-                          </p>
+                        {canViewMemberSensitiveDetails && (
+                          <div className="space-y-1 text-sm text-slate-500 dark:text-slate-400">
+                            <p>
+                              {t.workspace?.mobileNumber || 'Mobile Number'}: {getMemberContact(member)}
+                            </p>
+                          </div>
+                        )}
+                          </div>
                         </div>
                       </div>
 
-                      <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-800/80 sm:min-w-[210px]">
-                        <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
-                          {t.rates?.workspaceRate || 'Workspace rate'}
-                        </p>
-                        <p className="text-sm font-semibold text-slate-900 dark:text-white">
-                          {formatRateUnit(rate)}
-                        </p>
-                      </div>
+                      {canViewMemberSensitiveDetails && (
+                        <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-800/80 sm:min-w-[210px]">
+                          <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+                            {t.rates?.workspaceRate || 'Workspace rate'}
+                          </p>
+                          <p className="text-sm font-semibold text-slate-900 dark:text-white">
+                            {formatRateUnit(rate)}
+                          </p>
+                        </div>
+                      )}
                     </div>
                   </div>
                 );
@@ -430,7 +470,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>