wip: refresh design

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

@@ -0,0 +1,94 @@
+import Link from 'next/link';
+
+import { Clock, File, FileCheck } from 'lucide-react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
+import { getStats } from '@documenso/lib/server-only/document/get-stats';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
+import { DocumentStatus } from '~/components/formatter/document-status';
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import { UploadDocument } from './upload-document';
+
+export default async function DashboardPage() {
+  const session = await getRequiredServerComponentSession();
+
+  const [stats, results] = await Promise.all([
+    getStats({
+      userId: session.id,
+    }),
+    findDocuments({
+      userId: session.id,
+      perPage: 10,
+    }).then((r) => ({ ...r, data: [] })),
+  ]);
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <h1 className="text-4xl font-semibold">Dashboard</h1>
+
+      <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3">
+        <CardMetric icon={FileCheck} title="Completed" value={stats.COMPLETED} />
+        <CardMetric icon={File} title="Drafts" value={stats.DRAFT} />
+        <CardMetric icon={Clock} title="Pending" value={stats.PENDING} />
+      </div>
+
+      <div className="mt-12">
+        <UploadDocument />
+
+        <h2 className="mt-8 text-2xl font-semibold">Recent Documents</h2>
+
+        <div className="mt-8 overflow-x-auto rounded-lg border border-slate-200">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[100px]">ID</TableHead>
+                <TableHead>Title</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="text-right">Created</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {results.data.map((document) => (
+                <TableRow key={document.id}>
+                  <TableCell className="font-medium">{document.id}</TableCell>
+                  <TableCell>
+                    <Link
+                      href={`/documents/${document.id}`}
+                      className="font-medium hover:underline"
+                    >
+                      {document.title}
+                    </Link>
+                  </TableCell>
+                  <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">
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/dashboard/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 { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCreateDocument } from '~/api/document/create/fetcher';
+import { DocumentDropzone } from '~/components/(dashboard)/document-dropzone/document-dropzone';
+
+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>
+  );
+};