status tooltip, recipient page

apps/web/package.json

@@ -36,6 +36,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.41.5",
     "react-pdf": "^6.2.2",
+    "react-tooltip": "^5.7.2",
     "sass": "^1.57.1",
     "short-uuid": "^4.2.2",
     "typescript": "4.8.4"

apps/web/pages/_app.tsx

@@ -1,5 +1,6 @@
 import "../styles/tailwind.css";
 import "../../../node_modules/placeholder-loading/src/scss/placeholder-loading.scss";
+import "react-tooltip/dist/react-tooltip.css";
 import { ReactElement, ReactNode } from "react";
 import type { AppProps } from "next/app";
 import { NextPage } from "next";

apps/web/pages/documents.tsx

@@ -3,11 +3,18 @@ import { ReactElement, useEffect, useState } from "react";
 import Layout from "../components/layout";
 import type { NextPageWithLayout } from "./_app";
 import Head from "next/head";
-import { PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
+import {
+  CheckBadgeIcon,
+  EnvelopeIcon,
+  EyeIcon,
+  PlusIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { uploadDocument } from "@documenso/features";
 import { DocumentStatus } from "@prisma/client";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 
 const DocumentsPage: NextPageWithLayout = (req, res) => {
   const router = useRouter();
@@ -129,13 +136,62 @@ const DocumentsPage: NextPageWithLayout = (req, res) => {
                           {document.title || "#" + document.id}
                         </td>
                         <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                          {document.recipients || "-"}
+                          {document.Recipient.map((item: any) => (
+                            <div>
+                              {item.sendStatus === "SENT" &&
+                              item.readStatus !== "OPENED" &&
+                              item.signingStatus !== "SIGNED" ? (
+                                <span id="sent_icon">
+                                  <EnvelopeIcon className="inline h-5 mr-1"></EnvelopeIcon>
+                                  {item.email}
+                                </span>
+                              ) : (
+                                ""
+                              )}
+                              {item.sendStatus === "SENT" &&
+                              item.readStatus === "OPENED" ? (
+                                <span id="read_icon">
+                                  <EyeIcon className="inline h-5 mr-1"></EyeIcon>{" "}
+                                  {item.email}
+                                </span>
+                              ) : (
+                                ""
+                              )}
+                              {item.sendStatus === "SENT" &&
+                              item.readStatus === "OPENED" &&
+                              item.signingStatus === "SIGNED" ? (
+                                <span id="signed_icon">
+                                  <CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>{" "}
+                                  {item.email}
+                                </span>
+                              ) : (
+                                ""
+                              )}
+                            </div>
+                          ))}
+                          {document.Recipient.length === 0 ? "-" : null}
+                          <ReactTooltip
+                            anchorId="sent_icon"
+                            place="bottom"
+                            content="Document was sent to recipient."
+                          />
+                          <ReactTooltip
+                            anchorId="read_icon"
+                            place="bottom"
+                            content="Document was opened but not signed yet."
+                          />
+                          <ReactTooltip
+                            anchorId="signed_icon"
+                            place="bottom"
+                            content="Document was signed by the recipient."
+                          />
                         </td>
                         <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                           {formatDocumentStatus(document.status)}
                           <p>
                             <small>
-                              {document.recipients || 0}/{document.signed || 0}
+                              {document.signed || 0}/
+                              {document.Recipient.length || 0}
                             </small>
                           </p>
                         </td>

apps/web/pages/documents/[id]/index.tsx

@@ -5,23 +5,69 @@ import { Document, Page, pdfjs } from "react-pdf";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
+import prisma from "@documenso/prisma";
+import { getUserFromToken } from "@documenso/lib/server";
+import Logo from "../../../components/logo";
+import Link from "next/link";
 
 const PDFViewer = dynamic(() => import("../../../components/pdf-viewer"), {
   ssr: false,
 });
 
-const DocumentsDetailPage: NextPageWithLayout = () => {
+const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
   const router = useRouter();
 
   return (
-    <div className="mx-auto w-fit">
-      <PDFViewer
-        pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
-      />
+    <div className="mx-auto w-fit p-4">
+      <div className="mx-auto w-auto text-left">
+        <div>
+          <h3 className="font-medium leading-tight text-3xl mt-0 mb-2 text-neon">
+            {props.document.title}
+          </h3>
+          <Link
+            type="a"
+            href={
+              NEXT_PUBLIC_WEBAPP_URL +
+              "/documents/" +
+              props.document.id +
+              "/recipients"
+            }
+            className="inline-flex items-center justify-center rounded-md border border-transparent bg-neon px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
+          >
+            Add Signers
+          </Link>
+        </div>
+      </div>
+      <div className="">
+        <PDFViewer
+          pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
+        />
+      </div>
     </div>
   );
 };
 
+export async function getServerSideProps(context: any) {
+  const user = await getUserFromToken(context.req, context.res);
+  if (!user) return;
+
+  const { id: documentId } = context.query;
+  const document = await prisma.document.findFirstOrThrow({
+    where: {
+      id: +documentId,
+    },
+  });
+
+  // todo optimize querys
+  // todo no intersection groups
+
+  return {
+    props: {
+      document: document,
+    },
+  };
+}
+
 DocumentsDetailPage.getLayout = function getLayout(page: ReactElement) {
   return <Layout>{page}</Layout>;
 };

apps/web/pages/documents/[id]/recipients.tsx

@@ -0,0 +1,48 @@
+import prisma from "@documenso/prisma";
+import Head from "next/head";
+import { ReactElement } from "react";
+import Layout from "../../../components/layout";
+import { NextPageWithLayout } from "../../_app";
+import { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import {
+  ArchiveBoxIcon,
+  ArrowRightCircleIcon,
+  ChevronDownIcon,
+  DocumentDuplicateIcon,
+  HeartIcon,
+  PencilSquareIcon,
+  TrashIcon,
+  UserPlusIcon,
+} from "@heroicons/react/20/solid";
+import { classNames } from "@documenso/lib";
+import {
+  UserGroupIcon,
+  UserIcon,
+  UsersIcon,
+} from "@heroicons/react/24/outline";
+
+const RecipientsPage: NextPageWithLayout = () => {
+  return (
+    <>
+      <Head>
+        <title>Documenttitle - Recipients | Documenso</title>
+      </Head>
+      -todo add signers ui -todo add breadcrumps -todo who will sign this
+      dropdown
+    </>
+  );
+};
+
+RecipientsPage.getLayout = function getLayout(page: ReactElement) {
+  return <Layout>{page}</Layout>;
+};
+
+export async function getServerSideProps(context: any) {
+  // todo get current document
+  return {
+    props: {},
+  };
+}
+
+export default RecipientsPage;