wip: refresh design

2025-11-14 08:42:12 +10:00 · 2023-06-09 18:21:18 +10:00
parent 5ec97657c1
commit 803ebccee3
432 changed files with 19755 additions and 26866 deletions
--- a/apps/web/src/app/(dashboard)/documents/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/page.tsx
@ -0,0 +1,136 @@
+import Link from 'next/link';
+
+import { CheckCircle, Clock, Plus } 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 { isDocumentStatus } from '@documenso/lib/types/is-document-status';
+import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import { DocumentDropzone } from '~/components/(dashboard)/document-dropzone/document-dropzone';
+import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
+import {
+  PeriodSelectorValue,
+  isPeriodSelectorValue,
+} from '~/components/(dashboard)/period-selector/types';
+import { DocumentStatus } from '~/components/formatter/document-status';
+
+import { DocumentsDataTable } from './data-table';
+
+export type DocumentsPageProps = {
+  searchParams?: {
+    status?: InternalDocumentStatus | 'ALL';
+    period?: PeriodSelectorValue;
+    page?: string;
+    perPage?: string;
+  };
+};
+
+export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
+  const session = await getRequiredServerComponentSession();
+
+  const stats = await getStats({
+    userId: session.id,
+  });
+
+  const status = isDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
+  const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
+  const page = Number(searchParams.page) || 1;
+  const perPage = Number(searchParams.perPage) || 20;
+
+  const results = await findDocuments({
+    userId: session.id,
+    status: status === 'ALL' ? undefined : status,
+    orderBy: {
+      column: 'created',
+      direction: 'desc',
+    },
+    page,
+    perPage,
+  });
+
+  const isNoResults = status === 'ALL' && period === '' && results.data.length === 0;
+
+  const getTabHref = (value: typeof status) => {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('status', value);
+
+    if (params.has('page')) {
+      params.delete('page');
+    }
+
+    if (value === 'ALL') {
+      params.delete('status');
+    }
+
+    return `/documents?${params.toString()}`;
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <h1 className="text-4xl font-semibold">All Documents</h1>
+
+      <div className="mt-8 flex flex-wrap gap-x-4 gap-y-6">
+        <Tabs defaultValue={status}>
+          <TabsList>
+            <TabsTrigger className="min-w-[60px]" value="ALL" asChild>
+              <Link href={getTabHref('ALL')}>All</Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.DRAFT} asChild>
+              <Link href={getTabHref(InternalDocumentStatus.DRAFT)}>
+                <DocumentStatus status={InternalDocumentStatus.DRAFT} />
+
+                <span className="ml-1 hidden opacity-50 md:inline-block">
+                  {Math.min(stats.DRAFT, 99)}
+                </span>
+              </Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.PENDING} asChild>
+              <Link href={getTabHref(InternalDocumentStatus.PENDING)}>
+                <DocumentStatus status={InternalDocumentStatus.PENDING} />
+
+                <span className="ml-1 hidden opacity-50 md:inline-block">
+                  {Math.min(stats.PENDING, 99)}
+                </span>
+              </Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.COMPLETED} asChild>
+              <Link href={getTabHref(InternalDocumentStatus.COMPLETED)}>
+                <DocumentStatus status={InternalDocumentStatus.COMPLETED} />
+
+                <span className="ml-1 hidden opacity-50 md:inline-block">
+                  {Math.min(stats.COMPLETED, 99)}
+                </span>
+              </Link>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+
+        <div className="flex flex-1 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+          <PeriodSelector />
+
+          <Button>
+            <Plus className="-ml-1 mr-2 h-5 w-5" />
+            Add Document
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        {/* If we're viewing all documents for all time and there's nuffin we should should an add document component instead */}
+        {isNoResults ? (
+          <DocumentDropzone className="min-h-[60vh] md:min-h-[40vh]" />
+        ) : (
+          <DocumentsDataTable results={results} />
+        )}
+      </div>
+    </div>
+  );
+}