feat: add recipients avatars on all tables

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

@@ -2,12 +2,9 @@ import Link from 'next/link';
 
 import { Clock, File, FileCheck } from 'lucide-react';
 
-import { initials } from '@documenso/lib/client-only/recipient-initials';
-import { type } from '@documenso/lib/client-only/recipient-type';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
 import { getStats } from '@documenso/lib/server-only/document/get-stats';
-import { Recipient } from '@documenso/prisma/client';
 import {
   Table,
   TableBody,
@@ -16,15 +13,8 @@ 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 { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
-import { StackAvatars } from '~/components/(dashboard)/avatar/stack-avatars';
 import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';
@@ -72,21 +62,6 @@ export default async function DashboardPage() {
             </TableHeader>
             <TableBody>
               {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>
@@ -100,82 +75,7 @@ export default async function DashboardPage() {
                     </TableCell>
 
                     <TableCell>
-                      <TooltipProvider>
+                      <StackAvatarsWithTooltip recipients={document.Recipient} />
-                        <Tooltip>
-                          <TooltipTrigger className="flex cursor-pointer">
-                            <StackAvatars recipients={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"
-                                    >
-                                      <StackAvatar
-                                        first={true}
-                                        key={recipient.id}
-                                        type={type(recipient)}
-                                        fallbackText={initials(recipient.name)}
-                                      />
-                                      <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"
-                                    >
-                                      <StackAvatar
-                                        first={true}
-                                        key={recipient.id}
-                                        type={type(recipient)}
-                                        fallbackText={initials(recipient.name)}
-                                      />
-                                      <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"
-                                    >
-                                      <StackAvatar
-                                        first={true}
-                                        key={recipient.id}
-                                        type={type(recipient)}
-                                        fallbackText={initials(recipient.name)}
-                                      />
-                                      <span className="text-sm text-gray-500">
-                                        {recipient.email}
-                                      </span>
-                                    </div>
-                                  ))}
-                                </div>
-                              )}
-                            </div>
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
                     </TableCell>
 
                     <TableCell>

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -7,16 +7,17 @@ import Link from 'next/link';
 import { Loader } from 'lucide-react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { DocumentWithReciepient } from '@documenso/lib/types/document-with-recipient';
 import { FindResultSet } from '@documenso/lib/types/find-result-set';
-import { Document } from '@documenso/prisma/client';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 
+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';
 
 export type DocumentsDataTableProps = {
-  results: FindResultSet<Document>;
+  results: FindResultSet<DocumentWithReciepient>;
 };
 
 export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
@@ -49,6 +50,13 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
               </Link>
             ),
           },
+          {
+            header: 'Recipient',
+            accessorKey: 'recipient',
+            cell: ({ row }) => {
+              return <StackAvatarsWithTooltip recipients={row.original.Recipient} />;
+            },
+          },
           {
             header: 'Status',
             accessorKey: 'status',

apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx

@@ -0,0 +1,90 @@
+import { initials } from '@documenso/lib/client-only/recipient-initials';
+import { type } from '@documenso/lib/client-only/recipient-type';
+import { Recipient } from '@documenso/prisma/client';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
+
+import { StackAvatar } from './stack-avatar';
+import { StackAvatars } from './stack-avatars';
+
+export const StackAvatarsWithTooltip = ({ recipients }: { recipients: Recipient[] }) => {
+  const waitingRecipients = recipients.filter(
+    (recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED',
+  );
+
+  const completedRecipients = recipients.filter(
+    (recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED',
+  );
+
+  const uncompletedRecipients = recipients.filter(
+    (recipient) => recipient.sendStatus === 'NOT_SENT' && recipient.signingStatus === 'NOT_SIGNED',
+  );
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger className="flex cursor-pointer">
+          <StackAvatars recipients={recipients} />
+        </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">
+                    <StackAvatar
+                      first={true}
+                      key={recipient.id}
+                      type={type(recipient)}
+                      fallbackText={initials(recipient.name)}
+                    />
+                    <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">
+                    <StackAvatar
+                      first={true}
+                      key={recipient.id}
+                      type={type(recipient)}
+                      fallbackText={initials(recipient.name)}
+                    />
+                    <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">
+                    <StackAvatar
+                      first={true}
+                      key={recipient.id}
+                      type={type(recipient)}
+                      fallbackText={initials(recipient.name)}
+                    />
+                    <span className="text-sm text-gray-500">{recipient.email}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};

apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx

@@ -4,7 +4,7 @@ import { initials } from '@documenso/lib/client-only/recipient-initials';
 import { type } from '@documenso/lib/client-only/recipient-type';
 import { Recipient } from '@documenso/prisma/client';
 
-import { StackAvatar } from '.';
+import { StackAvatar } from './stack-avatar';
 
 export function StackAvatars({ recipients }: { recipients: Recipient[] }) {
   const renderStackAvatars = (recipients: Recipient[]) => {

packages/lib/server-only/document/find-documents.ts

@@ -1,6 +1,7 @@
 import { prisma } from '@documenso/prisma';
-import { Document, DocumentStatus, Prisma, Recipient } from '@documenso/prisma/client';
+import { Document, DocumentStatus, Prisma } from '@documenso/prisma/client';
 
+import { DocumentWithReciepient } from '../../types/document-with-recipient';
 import { FindResultSet } from '../../types/find-result-set';
 
 export interface FindDocumentsOptions {
@@ -15,10 +16,6 @@ export interface FindDocumentsOptions {
   };
 }
 
-export type DocumentWithReciepient = Document & {
-  Recipient: Recipient[];
-};
-
 export const findDocuments = async ({
   userId,
   term,

packages/lib/types/document-with-recipient.ts

@@ -0,0 +1,5 @@
+import { Document, Recipient } from '@documenso/prisma/client';
+
+export type DocumentWithReciepient = Document & {
+  Recipient: Recipient[];
+};