add fields ui

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

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { ReactElement, useState } from "react";
 import Layout from "../../../components/layout";
 import { NextPageWithLayout } from "../../_app";
 import dynamic from "next/dynamic";
@@ -8,11 +8,8 @@ import { getUserFromToken } from "@documenso/lib/server";
 import Link from "next/link";
 import { DocumentStatus } from "@prisma/client";
 import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
   InformationCircleIcon,
   PaperAirplaneIcon,
-  UserPlusIcon,
   UsersIcon,
 } from "@heroicons/react/24/outline";
 import { getDocument } from "@documenso/lib/query";
@@ -25,6 +22,7 @@ const PDFViewer = dynamic(() => import("../../../components/pdf-viewer"), {
 
 const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
   const router = useRouter();
+  const [fields, setFields]: any[] = useState([]);
 
   return (
     <div className="mt-4">
@@ -95,8 +93,35 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
           </div>
         </div>
       </div>
-      <div className="mx-auto w-fit p-4">
+      <div className="mx-auto w-fit">
+        <div className="max-w-xs mt-6">
+          <select
+            className="mb-3 inline mt-1 w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+            defaultValue={props?.document?.Recipient[0]}
+          >
+            {props?.document?.Recipient?.map((item: any) => (
+              <option key={item.email}>
+                {item.name ? `${item.name} <${item.email}>` : item.email}
+              </option>
+            ))}
+          </select>
+          <Button
+            className="inline ml-1"
+            onClick={() => {
+              setFields(fields.concat({ type: "signature" }));
+            }}
+          >
+            Add Signature
+          </Button>
+          <Button color="secondary" className="inline ml-1">
+            Add Date
+          </Button>
+          <Button color="secondary" className="inline ml-1">
+            Add Text
+          </Button>
+        </div>
         <PDFViewer
+          fields={fields}
           pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
         />
       </div>