feat: add tooltip on hover on stacked avatars

apps/web/src/app/(dashboard)/dashboard/page.tsx

@@ -14,6 +14,12 @@ import {
   TableHeader,
   TableRow,
 } from '@documenso/ui/primitives/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
 
 import { StackAvatar } from '~/components/(dashboard)/avatar';
 import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
@@ -60,6 +66,24 @@ const renderStackAvatars = (recipients: Recipient[]) => {
   });
 };
 
+const renderAvatar = (recipient: Recipient) => {
+  const initials =
+    recipient.name
+      ?.split(' ')
+      .map((name: string) => name.slice(0, 1).toUpperCase())
+      .slice(0, 2)
+      .join('') ?? 'UK';
+
+  const type =
+    recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED'
+      ? 'completed'
+      : recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED'
+      ? 'waiting'
+      : 'unsigned';
+
+  return <StackAvatar first={true} key={recipient.id} type={type} fallbackText={initials} />;
+};
+
 export default async function DashboardPage() {
   const session = await getRequiredServerComponentSession();
 
@@ -106,7 +130,23 @@ export default async function DashboardPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {results.data.map((document) => (
+              {results.data.map((document) => {
+                const waitingRecipients = document.Recipient.filter(
+                  (recipient) =>
+                    recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED',
+                );
+
+                const completedRecipients = document.Recipient.filter(
+                  (recipient) =>
+                    recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED',
+                );
+
+                const uncompletedRecipients = document.Recipient.filter(
+                  (recipient) =>
+                    recipient.sendStatus === 'NOT_SENT' && recipient.signingStatus === 'NOT_SIGNED',
+                );
+
+                return (
                   <TableRow key={document.id}>
                     <TableCell className="font-medium">{document.id}</TableCell>
                     <TableCell>
@@ -118,8 +158,68 @@ export default async function DashboardPage() {
                       </Link>
                     </TableCell>
 
-                  <TableCell className="flex cursor-pointer">
+                    <TableCell>
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger className="flex cursor-pointer">
                             {renderStackAvatars(document.Recipient)}
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <div className="flex flex-col gap-y-5 p-1">
+                              {completedRecipients.length > 0 && (
+                                <div>
+                                  <h1 className="text-base font-medium">Completed</h1>
+                                  {completedRecipients.map((recipient: Recipient) => (
+                                    <div
+                                      key={recipient.id}
+                                      className="my-1 flex items-center gap-2"
+                                    >
+                                      {renderAvatar(recipient)}
+                                      <span className="text-sm text-gray-500">
+                                        {recipient.email}
+                                      </span>
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+
+                              {waitingRecipients.length > 0 && (
+                                <div>
+                                  <h1 className="text-base font-medium">Waiting</h1>
+                                  {waitingRecipients.map((recipient: Recipient) => (
+                                    <div
+                                      key={recipient.id}
+                                      className="my-1 flex items-center gap-2"
+                                    >
+                                      {renderAvatar(recipient)}
+                                      <span className="text-sm text-gray-500">
+                                        {recipient.email}
+                                      </span>
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+
+                              {uncompletedRecipients.length > 0 && (
+                                <div>
+                                  <h1 className="text-base font-medium">Uncompleted</h1>
+                                  {uncompletedRecipients.map((recipient: Recipient) => (
+                                    <div
+                                      key={recipient.id}
+                                      className="my-1 flex items-center gap-2"
+                                    >
+                                      {renderAvatar(recipient)}
+                                      <span className="text-sm text-gray-500">
+                                        {recipient.email}
+                                      </span>
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
                     </TableCell>
 
                     <TableCell>
@@ -129,7 +229,8 @@ export default async function DashboardPage() {
                       <LocaleDate date={document.created} />
                     </TableCell>
                   </TableRow>
-              ))}
+                );
+              })}
               {results.data.length === 0 && (
                 <TableRow>
                   <TableCell colSpan={4} className="h-24 text-center">

apps/web/src/components/(dashboard)/avatar/index.tsx

@@ -11,7 +11,7 @@ export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarPr
   let classes = '';
   switch (type) {
     case 'unsigned':
-      classes = 'bg-dawn-400 text-dawn-900';
+      classes = 'bg-dawn-200 text-dawn-900';
       break;
     case 'waiting':
       classes = 'bg-water text-water-700';