feat: update document table layout (#371)

* feat: update document table layout

- Removed dashboard page
- Removed redundant ID column
- Moved date to first column
- Added estimated locales for SSR dates

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -136,7 +136,7 @@ export const EditDocumentForm = ({
         duration: 5000,
       });
 
-      router.push('/dashboard');
+      router.push('/documents');
     } catch (err) {
       console.error(err);
 

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

@@ -52,8 +52,9 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
       <DataTable
         columns={[
           {
-            header: 'ID',
-            accessorKey: 'id',
+            header: 'Created',
+            accessorKey: 'created',
+            cell: ({ row }) => <LocaleDate date={row.getValue('created')} />,
           },
           {
             header: 'Title',
@@ -71,11 +72,6 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
             accessorKey: 'status',
             cell: ({ row }) => <DocumentStatus status={row.getValue('status')} />,
           },
-          {
-            header: 'Created',
-            accessorKey: 'created',
-            cell: ({ row }) => <LocaleDate date={row.getValue('created')} />,
-          },
           {
             header: 'Actions',
             cell: ({ row }) => (
@@ -92,7 +88,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
         totalPages={results.totalPages}
         onPaginationChange={onPaginationChange}
       >
-        {(table) => <DataTablePagination table={table} />}
+        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
       </DataTable>
 
       {isPending && (

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

@@ -11,8 +11,8 @@ import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-
 import { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
 import { DocumentStatus } from '~/components/formatter/document-status';
 
-import { UploadDocument } from '../dashboard/upload-document';
 import { DocumentsDataTable } from './data-table';
+import { UploadDocument } from './upload-document';
 
 export type DocumentsPageProps = {
   searchParams?: {
@@ -81,6 +81,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
                   {value !== ExtendedDocumentStatus.ALL && (
                     <span className="ml-1 hidden opacity-50 md:inline-block">
                       {Math.min(stats[value], 99)}
+                      {stats[value] > 99 && '+'}
                     </span>
                   )}
                 </Link>

apps/web/src/app/(dashboard)/documents/upload-document.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCreateDocument } from '~/api/document/create/fetcher';
+
+export type UploadDocumentProps = {
+  className?: string;
+};
+
+export const UploadDocument = ({ className }: UploadDocumentProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const { isLoading, mutateAsync: createDocument } = useCreateDocument();
+
+  const onFileDrop = async (file: File) => {
+    try {
+      const { id } = await createDocument({
+        file: file,
+      });
+
+      toast({
+        title: 'Document uploaded',
+        description: 'Your document has been uploaded successfully.',
+        duration: 5000,
+      });
+
+      router.push(`/documents/${id}`);
+    } catch (error) {
+      console.error(error);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while uploading your document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className={cn('relative', className)}>
+      <DocumentDropzone className="min-h-[40vh]" onDrop={onFileDrop} />
+
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+          <Loader className="h-12 w-12 animate-spin text-slate-500" />
+        </div>
+      )}
+    </div>
+  );
+};