diff --git a/apps/web/pages/dashboard.tsx b/apps/web/pages/dashboard.tsx index 63ad4068b..0af0942f9 100644 --- a/apps/web/pages/dashboard.tsx +++ b/apps/web/pages/dashboard.tsx @@ -30,19 +30,19 @@ const DashboardPage: NextPageWithLayout = (props: any) => { name: "Draft", stat: "0", icon: DocumentIcon, - link: "/documents?filter=draft", + link: "/documents?filter=DRAFT", }, { name: "Waiting for others", stat: "0", icon: UsersIcon, - link: "/documents?filter=waiting_for_others", + link: "/documents?filter=PENDING", }, { name: "Completed", stat: "0", icon: CheckBadgeIcon, - link: "/documents?filter=completed", + link: "/documents?filter=COMPLETED", }, ]; diff --git a/apps/web/pages/documents.tsx b/apps/web/pages/documents.tsx index 91fc7e153..e665c8eb7 100644 --- a/apps/web/pages/documents.tsx +++ b/apps/web/pages/documents.tsx @@ -16,13 +16,33 @@ import { useRouter } from "next/router"; import { uploadDocument } from "@documenso/features"; import { DocumentStatus } from "@prisma/client"; import { Tooltip as ReactTooltip } from "react-tooltip"; -import { Button, IconButton } from "@documenso/ui"; -import Filter from "../components/filter"; +import { Button, IconButton, SelectBox } from "@documenso/ui"; +import { NextPageContext } from "next"; const DocumentsPage: NextPageWithLayout = (props: any) => { const router = useRouter(); const [documents, setDocuments]: any[] = useState([]); const [loading, setLoading] = useState(true); + const statusFilters = [ + { label: "All", value: "ALL" }, + { label: "Draft", value: "DRAFT" }, + { label: "Pending", value: "PENDING" }, + { label: "Completed", value: "COMPLETED" }, + ]; + const createdFilter = [ + { label: "All Time", value: 0 }, + { label: "Last 7 days", value: 7 }, + { label: "Last 30 days", value: 30 }, + { label: "Last 3 months", value: 90 }, + { label: "Last 12 months", value: 66 }, + ]; + + const [selectedStatusFilter, setSelectedStatusFilter] = useState( + statusFilters[0] + ); + const [selectedCreatedFilter, setSelectedCreatedFilter] = useState( + createdFilter[0] + ); const getDocuments = async () => { if (!documents.length) setLoading(true); @@ -39,13 +59,46 @@ const DocumentsPage: NextPageWithLayout = (props: any) => { }; useEffect(() => { - getDocuments(); + getDocuments().finally(() => { + setSelectedStatusFilter( + statusFilters.filter( + (status) => status.value === props.filter.toUpperCase() + )[0] + ); + }); }, []); function showDocument(documentId: number) { router.push(`/documents/${documentId}/recipients`); } + function filterDocumentes(documents: []): any { + let filteredDocuments = documents.filter( + (d: any) => + d.status === selectedStatusFilter.value || + selectedStatusFilter.value === "ALL" + ); + + filteredDocuments = filteredDocuments.filter((document: any) => + wasXDaysAgoOrLess(new Date(document.created), selectedCreatedFilter.value) + ); + + return filteredDocuments; + } + + function wasXDaysAgoOrLess(documentDate: Date, lastXDays: number): boolean { + const millisecondsInDay = 24 * 60 * 60 * 1000; // Number of milliseconds in a day + const today: Date = new Date(); // Today's date + + // Calculate the difference between the two dates in days + const diffInDays = Math.floor( + (today.getTime() - documentDate.getTime()) / millisecondsInDay + ); + + // Check if the difference is letss or equal to lastXDays + return diffInDays <= lastXDays; + } + return ( <> @@ -71,7 +124,28 @@ const DocumentsPage: NextPageWithLayout = (props: any) => { -