Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 00:32:43 +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
committed by Mythie
parent 5aff50b13b
commit 4879d2360b
2 changed files with 48 additions and 16 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>
);
}

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

@ -1,7 +1,5 @@
import Link from 'next/link'; import Link from 'next/link';
import { CheckCircle2 } from 'lucide-react';
import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session'; import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
import { findDocuments } from '@documenso/lib/server-only/document/find-documents'; import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
import { getStats } from '@documenso/lib/server-only/document/get-stats'; import { getStats } from '@documenso/lib/server-only/document/get-stats';
@ -14,7 +12,7 @@ import { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/ty
import { DocumentStatus } from '~/components/formatter/document-status'; import { DocumentStatus } from '~/components/formatter/document-status';
import { DocumentsDataTable } from './data-table'; import { DocumentsDataTable } from './data-table';
import { UploadDocument } from './upload-document'; import EmptyDocumentState from './empty-state';
export type DocumentsPageProps = { export type DocumentsPageProps = {
searchParams?: { searchParams?: {
@ -92,20 +90,8 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
<div className="mt-8"> <div className="mt-8">
{results.count > 0 && <DocumentsDataTable results={results} />} {results.count > 0 && <DocumentsDataTable results={results} />}
{results.count === 0 && <EmptyDocumentState />} {results.count === 0 && <EmptyDocumentState status={status} />}
</div> </div>
</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>
);
};