Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-10 04:22:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: add empty state for different status

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-09-06 11:47:58 +00:00
parent a74374e39f
commit 8220b2f086
2 changed files with 48 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
apps/web/src/app/(dashboard)/documents/empty-state.tsx Normal file
View File

@ -0,0 +1,46 @@
import { ArrowRight, CheckCircle2 } from 'lucide-react';
export default function EmptyDocumentState({ status }: { status: string }) {
let headerText = 'All done';
let bodyText = 'All documents signed for now.';
let extraText = '';
let showArrow = false;
switch (status) {
case 'COMPLETED':
headerText = 'Nothing here';
bodyText = 'There are no signed documents yet.';
extraText = 'Start by adding a document';
showArrow = true;
break;
case 'DRAFT':
headerText = 'Nothing here';
bodyText = 'There are no drafts yet.';
extraText = 'Start by adding a document';
showArrow = true;
break;
case 'ALL':
headerText = 'Nothing here';
bodyText = 'There are no documents yet.';
extraText = 'Start by adding a document';
showArrow = true;
break;
default:
break;
}
return (
<div className="text-muted-foreground/50 flex h-96 flex-col items-center justify-center space-y-3">
<CheckCircle2 className="text-muted-foreground/50 h-14 w-14" />
<div className="text-center">
<h3 className="text-lg font-semibold">{headerText}</h3>
<p>{bodyText}</p>
{extraText && (
<p>
{extraText} {showArrow && <ArrowRight className="inline h-4 w-4" />}
</p>
)}
</div>
</div>
);
}

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

@ -1,7 +1,5 @@
import Link from 'next/link';
import { CheckCircle2 } 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';
@ -15,6 +13,7 @@ import { DocumentStatus } from '~/components/formatter/document-status';
import { UploadDocument } from '../dashboard/upload-document';
import { DocumentsDataTable } from './data-table';
import EmptyDocumentState from './empty-state';
export type DocumentsPageProps = {
searchParams?: {
@ -98,20 +97,8 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
<div className="mt-8">
{results.count > 0 && <DocumentsDataTable results={results} />}
{results.count === 0 && <EmptyDocumentState />}
{results.count === 0 && <EmptyDocumentState status={status} />}
</div>
</div>
);
}
const EmptyDocumentState = () => {
return (
<div className="text-muted-foreground/50 flex h-96 flex-col items-center justify-center space-y-3">
<CheckCircle2 className="text-muted-foreground/50 h-14 w-14" />
<div className="text-center">
<h3 className="text-lg font-semibold">All done</h3>
<p>All documents signed for now.</p>
</div>
</div>
);
};