Merge pull request #217 from documenso/feat/stacked-avatars

feat: stack avatars

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

@@ -14,6 +14,7 @@ import {
   TableRow,
 } from '@documenso/ui/primitives/table';
 
+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';
@@ -60,30 +61,38 @@ export default async function DashboardPage() {
               <TableRow>
                 <TableHead className="w-[100px]">ID</TableHead>
                 <TableHead>Title</TableHead>
+                <TableHead>Reciepient</TableHead>
                 <TableHead>Status</TableHead>
                 <TableHead className="text-right">Created</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {results.data.map((document) => (
+              {results.data.map((document) => {
-                <TableRow key={document.id}>
+                return (
-                  <TableCell className="font-medium">{document.id}</TableCell>
+                  <TableRow key={document.id}>
-                  <TableCell>
+                    <TableCell className="font-medium">{document.id}</TableCell>
-                    <Link
+                    <TableCell>
-                      href={`/documents/${document.id}`}
+                      <Link
-                      className="focus-visible:ring-ring ring-offset-background rounded-md font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+                        href={`/documents/${document.id}`}
-                    >
+                        className="focus-visible:ring-ring ring-offset-background rounded-md font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
-                      {document.title}
+                      >
-                    </Link>
+                        {document.title}
-                  </TableCell>
+                      </Link>
-                  <TableCell>
+                    </TableCell>
-                    <DocumentStatus status={document.status} />
+
-                  </TableCell>
+                    <TableCell>
-                  <TableCell className="text-right">
+                      <StackAvatarsWithTooltip recipients={document.Recipient} />
-                    <LocaleDate date={document.created} />
+                    </TableCell>
-                  </TableCell>
+
-                </TableRow>
+                    <TableCell>
-              ))}
+                      <DocumentStatus status={document.status} />
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <LocaleDate date={document.created} />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
               {results.data.length === 0 && (
                 <TableRow>
                   <TableCell colSpan={4} className="h-24 text-center">

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

@@ -8,15 +8,16 @@ import { Loader } from 'lucide-react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { FindResultSet } from '@documenso/lib/types/find-result-set';
-import { Document } from '@documenso/prisma/client';
+import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';
 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-avatar.tsx

@@ -0,0 +1,51 @@
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+
+const ZIndexes: { [key: string]: string } = {
+  '10': 'z-10',
+  '20': 'z-20',
+  '30': 'z-30',
+  '40': 'z-40',
+  '50': 'z-50',
+};
+
+export type StackAvatarProps = {
+  first?: boolean;
+  zIndex?: string;
+  fallbackText?: string;
+  type: 'unsigned' | 'waiting' | 'completed';
+};
+
+export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarProps) => {
+  let classes = '';
+  let zIndexClass = '';
+  const firstClass = first ? '' : '-ml-3';
+
+  if (zIndex) {
+    zIndexClass = ZIndexes[zIndex] ?? '';
+  }
+
+  switch (type) {
+    case 'unsigned':
+      classes = 'bg-dawn-200 text-dawn-900';
+      break;
+    case 'waiting':
+      classes = 'bg-water text-water-700';
+      break;
+    case 'completed':
+      classes = 'bg-documenso-200 text-documenso-800';
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <Avatar
+      className={`
+        ${zIndexClass}
+        ${firstClass}
+        h-10 w-10 border-2 border-solid border-white`}
+    >
+      <AvatarFallback className={classes}>{fallbackText ?? 'UK'}</AvatarFallback>
+    </Avatar>
+  );
+};

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 { getRecipientType } 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={getRecipientType(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={getRecipientType(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={getRecipientType(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

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { initials } from '@documenso/lib/client-only/recipient-initials';
+import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { Recipient } from '@documenso/prisma/client';
+
+import { StackAvatar } from './stack-avatar';
+
+export function StackAvatars({ recipients }: { recipients: Recipient[] }) {
+  const renderStackAvatars = (recipients: Recipient[]) => {
+    const zIndex = 50;
+    const itemsToRender = recipients.slice(0, 5);
+    const remainingItems = recipients.length - itemsToRender.length;
+
+    return itemsToRender.map((recipient: Recipient, index: number) => {
+      const first = index === 0 ? true : false;
+
+      const lastItemText =
+        index === itemsToRender.length - 1 && remainingItems > 0
+          ? `+${remainingItems + 1}`
+          : undefined;
+
+      return (
+        <StackAvatar
+          key={recipient.id}
+          first={first}
+          zIndex={String(zIndex - index * 10)}
+          type={lastItemText && index === 4 ? 'unsigned' : getRecipientType(recipient)}
+          fallbackText={lastItemText ? lastItemText : initials(recipient.name)}
+        />
+      );
+    });
+  };
+
+  return <>{renderStackAvatars(recipients)}</>;
+}

packages/lib/client-only/recipient-initials.ts

@@ -0,0 +1,6 @@
+export const initials = (text: string) =>
+  text
+    ?.split(' ')
+    .map((name: string) => name.slice(0, 1).toUpperCase())
+    .slice(0, 2)
+    .join('') ?? 'UK';

packages/lib/client-only/recipient-type.ts

@@ -0,0 +1,13 @@
+import { Recipient } from '@documenso/prisma/client';
+
+export const getRecipientType = (recipient: Recipient) => {
+  if (recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED') {
+    return 'completed';
+  }
+
+  if (recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED') {
+    return 'waiting';
+  }
+
+  return 'unsigned';
+};

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

@@ -1,5 +1,6 @@
 import { prisma } from '@documenso/prisma';
 import { Document, DocumentStatus, Prisma } from '@documenso/prisma/client';
+import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';
 
 import { FindResultSet } from '../../types/find-result-set';
 
@@ -22,7 +23,7 @@ export const findDocuments = async ({
   page = 1,
   perPage = 10,
   orderBy,
-}: FindDocumentsOptions): Promise<FindResultSet<Document>> => {
+}: FindDocumentsOptions): Promise<FindResultSet<DocumentWithReciepient>> => {
   const orderByColumn = orderBy?.column ?? 'created';
   const orderByDirection = orderBy?.direction ?? 'desc';
 
@@ -48,6 +49,9 @@ export const findDocuments = async ({
       orderBy: {
         [orderByColumn]: orderByDirection,
       },
+      include: {
+        Recipient: true,
+      },
     }),
     prisma.document.count({
       where: {

packages/prisma/schema.prisma

@@ -143,10 +143,10 @@ model Field {
   recipientId Int?
   type        FieldType
   page        Int
-  positionX   Decimal        @default(0)
+  positionX   Decimal    @default(0)
-  positionY   Decimal        @default(0)
+  positionY   Decimal    @default(0)
-  width       Decimal        @default(-1)
+  width       Decimal    @default(-1)
-  height      Decimal        @default(-1)
+  height      Decimal    @default(-1)
   customText  String
   inserted    Boolean
   Document    Document   @relation(fields: [documentId], references: [id], onDelete: Cascade)

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

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

packages/tailwind-config/index.cjs

@@ -76,6 +76,20 @@ module.exports = {
           900: '#52514a',
           950: '#2a2925',
         },
+        water: {
+          DEFAULT: '#d7e4f3',
+          50: '#f3f6fb',
+          100: '#e3ebf6',
+          200: '#d7e4f3',
+          300: '#abc7e5',
+          400: '#82abd8',
+          500: '#658ecc',
+          600: '#5175bf',
+          700: '#4764ae',
+          800: '#3e538f',
+          900: '#364772',
+          950: '#252d46',
+        },
       },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',