feat: team member progress modal (#5651)

* feat: restrict members

* feat: member progress modal

src/components/TeamProgress/MemberProgressItem.tsx

@@ -1,5 +1,8 @@
+import { useStore } from '@nanostores/react';
 import type { TeamMember } from './TeamProgressPage';
 import { useState } from 'react';
+import { $currentTeam } from '../../stores/team';
+import { cn } from '../../lib/classname';
 
 type MemberProgressItemProps = {
   member: TeamMember;
@@ -18,12 +21,17 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
     teamId,
   } = props;
 
+  const currentTeam = useStore($currentTeam);
   const memberProgress = member?.progress?.sort((a, b) => {
     return b.done - a.done;
   });
 
   const [showAll, setShowAll] = useState(false);
 
+  const isPersonalProgressOnly =
+    currentTeam?.personalProgressOnly &&
+    currentTeam.role === 'member' &&
+    String(member._id) !== currentTeam.memberId;
   const memberDetailsUrl = `/team/member?t=${teamId}&m=${member._id}`;
 
   return (
@@ -44,13 +52,41 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
           />
           <div className="inline-grid w-full">
             {!isMyProgress && (
-              <a href={memberDetailsUrl} className="truncate font-medium">
+              <a
+                href={memberDetailsUrl}
+                className={cn(
+                  'truncate font-medium',
+                  isPersonalProgressOnly
+                    ? 'pointer-events-none cursor-default no-underline'
+                    : '',
+                )}
+                onClick={(e) => {
+                  if (isPersonalProgressOnly) {
+                    e.preventDefault();
+                  }
+                }}
+                aria-disabled={isPersonalProgressOnly}
+              >
                 {member.name}
               </a>
             )}
             {isMyProgress && (
               <div className="inline-grid grid-cols-[auto,32px] items-center gap-1.5">
-                <a href={memberDetailsUrl} className="truncate font-medium">
+                <a
+                  href={memberDetailsUrl}
+                  className={cn(
+                    'truncate font-medium',
+                    isPersonalProgressOnly
+                      ? 'pointer-events-none cursor-default no-underline'
+                      : '',
+                  )}
+                  onClick={(e) => {
+                    if (isPersonalProgressOnly) {
+                      e.preventDefault();
+                    }
+                  }}
+                  aria-disabled={isPersonalProgressOnly}
+                >
                   {member.name}
                 </a>
                 <span className="rounded-md bg-red-500 px-1 py-0.5 text-xs text-white">