wip: create document workflow

apps/web/src/components/(dashboard)/metric-card/metric-card.tsx

@@ -13,7 +13,7 @@ export type CardMetricProps = {
 
 export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricProps) => {
   return (
-    <div className={cn('overflow-hidden rounded-lg border border-slate-200 bg-white')}>
+    <div className={cn('overflow-hidden rounded-lg border border-slate-200 bg-white', className)}>
       <div className="px-4 pb-6 pt-4 sm:px-4 sm:pb-8 sm:pt-4">
         <div className="flex items-start">
           {Icon && <Icon className="mr-2 h-4 w-4 text-slate-500" />}

apps/web/src/components/(dashboard)/pdf-viewer/pdf-viewer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { Loader } from 'lucide-react';
 import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf';
@@ -11,18 +11,32 @@ import { cn } from '@documenso/ui/lib/utils';
 
 type LoadedPDFDocument = pdfjs.PDFDocumentProxy;
 
+/**
+ * This imports the worker from the `pdfjs-dist` package.
+ */
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   'pdfjs-dist/build/pdf.worker.min.js',
   import.meta.url,
 ).toString();
 
+export type OnPDFViewerPageClick = (_event: {
+  pageNumber: number;
+  numPages: number;
+  originalEvent: React.MouseEvent<HTMLDivElement, MouseEvent>;
+  pageHeight: number;
+  pageWidth: number;
+  pageX: number;
+  pageY: number;
+}) => void | Promise<void>;
+
 export type PDFViewerProps = {
   className?: string;
   document: string;
+  onPageClick?: OnPDFViewerPageClick;
   [key: string]: unknown;
 };
 
-export const PDFViewer = ({ className, document, ...props }: PDFViewerProps) => {
+export const PDFViewer = ({ className, document, onPageClick, ...props }: PDFViewerProps) => {
   const $el = useRef<HTMLDivElement>(null);
 
   const [width, setWidth] = useState(0);
@@ -32,6 +46,50 @@ export const PDFViewer = ({ className, document, ...props }: PDFViewerProps) =>
     setNumPages(doc.numPages);
   };
 
+  const onDocumentPageClick = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    pageNumber: number,
+  ) => {
+    const $el = event.target instanceof HTMLElement ? event.target : null;
+
+    if (!$el) {
+      return;
+    }
+
+    const $page = $el.closest('.react-pdf__Page');
+
+    if (!$page) {
+      return;
+    }
+
+    const { height, width, top, left } = $page.getBoundingClientRect();
+
+    const pageX = event.clientX - left;
+    const pageY = event.clientY - top;
+
+    console.log({
+      pageNumber,
+      numPages,
+      originalEvent: event,
+      pageHeight: height,
+      pageWidth: width,
+      pageX,
+      pageY,
+    });
+
+    if (onPageClick) {
+      onPageClick({
+        pageNumber,
+        numPages,
+        originalEvent: event,
+        pageHeight: height,
+        pageWidth: width,
+        pageX,
+        pageY,
+      });
+    }
+  };
+
   useEffect(() => {
     if ($el.current) {
       const $current = $el.current;
@@ -55,9 +113,9 @@ export const PDFViewer = ({ className, document, ...props }: PDFViewerProps) =>
   }, []);
 
   return (
-    <div ref={$el} className={cn('overflow-hidden', className)}>
+    <div ref={$el} className={cn('overflow-hidden', className)} {...props}>
       <PDFDocument
-        file={`data:application/pdf;base64,${document}`}
+        file={document}
         className="w-full overflow-hidden rounded"
         onLoadSuccess={(d) => onDocumentLoaded(d)}
         externalLinkTarget="_blank"
@@ -74,9 +132,13 @@ export const PDFViewer = ({ className, document, ...props }: PDFViewerProps) =>
           .map((_, i) => (
             <div
               key={i}
-              className="border-t-primary mt-8 border-t pt-8 first:mt-0 first:border-t-0 first:pt-0"
+              className="border-primary/50 my-8 overflow-hidden rounded border first:mt-0 last:mb-0"
             >
-              <PDFPage pageNumber={i + 1} width={width} />
+              <PDFPage
+                pageNumber={i + 1}
+                width={width}
+                onClick={(e) => onDocumentPageClick(e, i + 1)}
+              />
             </div>
           ))}
       </PDFDocument>