Member progress item sorting

src/components/TeamDropdown/TeamDropdown.tsx

@@ -95,7 +95,7 @@ export function TeamDropdown() {
             {pendingTeamIds.length}
           </span>
         )}
-        <div className="flex items-center gap-2">
+        <div className="inline-grid grid-cols-[16px_auto] items-center gap-1.5 mr-1.5">
           {isLoading && <Spinner className="h-4 w-4" isDualRing={false} />}
           {!isLoading && (
             <img
@@ -149,7 +149,7 @@ export function TeamDropdown() {
                     className="flex w-full cursor-pointer items-center gap-2 rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                     href={`${pageLink}`}
                   >
-                    <span className="flex-grow truncate">{team.name}</span>
+                    <span className="flex-grow min-w-0 truncate">{team.name}</span>
                     {pendingTeamIds.includes(team._id) && (
                       <span className="flex rounded-md bg-red-500 px-2 text-xs text-white">
                         Invite

src/components/TeamMembers/TeamMembersPage.tsx

@@ -163,8 +163,8 @@ export function TeamMembersPage() {
                       <MemberRoleBadge role={member.role} />
                     </span>
                     <div className="flex items-center">
-                      <h3 className="flex items-center font-medium">
-                        {member.name}
+                      <h3 className="inline-grid grid-cols-[auto_auto] items-center font-medium">
+                        <span className="truncate">{member.name}</span>
                         {member.userId === user?.id && (
                           <span className="ml-2 hidden text-xs font-normal text-blue-500 sm:inline">
                             You

src/components/TeamProgress/MemberProgressItem.tsx

@@ -5,9 +5,10 @@ import { MemberProgressModal } from './MemberProgressModal';
 type MemberProgressItemProps = {
   teamId: string;
   member: TeamMember;
+  isMyProgress?: boolean;
 };
 export function MemberProgressItem(props: MemberProgressItemProps) {
-  const { member, teamId } = props;
+  const { member, teamId, isMyProgress = false } = props;
 
   const memberProgress = member?.progress?.sort((a, b) => {
     return b.done - a.done;
@@ -31,10 +32,10 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
       )}
 
       <div
-        className="flex h-full min-h-[270px] flex-col rounded-md border"
+        className={`flex h-full min-h-[270px] flex-col overflow-hidden rounded-md border`}
         key={member._id}
       >
-        <div className="flex items-center gap-3 border-b p-3">
+        <div className={`relative flex items-center gap-3 border-b p-3`}>
           <img
             src={
               member.avatar
@@ -44,8 +45,18 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
             alt={member.name || ''}
             className="h-8 w-8 rounded-full"
           />
-          <div className="inline-grid">
+          <div className="inline-grid w-full">
+            {!isMyProgress && (
               <h3 className="truncate font-medium">{member.name}</h3>
+            )}
+            {isMyProgress && (
+              <div className="inline-grid grid-cols-[auto,32px] items-center gap-1.5">
+                <h3 className="truncate font-medium">{member.name}</h3>
+                <span className="rounded-md bg-red-500 text-center py-0.5 text-xs text-white">
+                  You
+                </span>
+              </div>
+            )}
             <p className="truncate text-sm text-gray-500">{member.email}</p>
           </div>
         </div>
@@ -60,9 +71,11 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
                 >
                   <span className="relative z-10 flex items-center justify-between text-sm">
                     <span className="inline-grid">
-                      <span className={'truncate'}>{progress.resourceTitle}</span>
+                      <span className={'truncate'}>
+                        {progress.resourceTitle}
+                      </span>
                     </span>
-                    <span className="text-xs text-gray-400 shrink-0 ml-1.5">
+                    <span className="ml-1.5 shrink-0 text-xs text-gray-400">
                       {progress.done} / {progress.total}
                     </span>
                   </span>

src/components/TeamProgress/TeamProgressPage.tsx

@@ -72,10 +72,17 @@ export function TeamProgressPage() {
       return;
     }
 
-    const currentUserProgress = response.find((member) => member.email === user?.email)
-    const otherUserProgresses = response.filter(member => member.email !== user?.email);
-    const allUserProgresses = currentUserProgress ? [currentUserProgress, ...otherUserProgresses] : otherUserProgresses;
-    setTeamMembers(allUserProgresses);
+    setTeamMembers(
+      response.sort((a, b) => {
+        if (a.email === user?.email) {
+          return -1;
+        }
+        if (b.email === user?.email) {
+          return 1;
+        }
+        return 0;
+      })
+    );
   }
 
   useEffect(() => {
@@ -139,7 +146,8 @@ export function TeamProgressPage() {
       <div className="flex items-center gap-2">
         {groupingTypes.map((grouping) => (
           <button
-            className={`rounded-md border p-1 px-2 text-sm ${selectedGrouping === grouping.value
+            className={`rounded-md border p-1 px-2 text-sm ${
+              selectedGrouping === grouping.value
                 ? ' border-gray-400 bg-gray-200 '
                 : ''
             }`}
@@ -163,7 +171,11 @@ export function TeamProgressPage() {
         {selectedGrouping === 'member' && (
           <div className="grid gap-4 sm:grid-cols-2">
             {teamMembers.map((member) => (
-              <MemberProgressItem teamId={teamId} member={member} />
+              <MemberProgressItem
+                teamId={teamId}
+                member={member}
+                isMyProgress={member?.email === user?.email}
+              />
             ))}
           </div>
         )}