,
},
{
header: 'Title',
- cell: ({ row }) => (
-
- {row.original.title}
-
- ),
+ cell: ({ row }) => ,
},
{
header: 'Recipient',
@@ -74,11 +72,6 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
accessorKey: 'status',
cell: ({ row }) => ,
},
- {
- header: 'Created',
- accessorKey: 'created',
- cell: ({ row }) => ,
- },
{
header: 'Actions',
cell: ({ row }) => (
@@ -95,7 +88,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
totalPages={results.totalPages}
onPaginationChange={onPaginationChange}
>
- {(table) => }
+ {(table) => }
{isPending && (
diff --git a/apps/web/src/app/(dashboard)/documents/page.tsx b/apps/web/src/app/(dashboard)/documents/page.tsx
index 4ea55936b..d1f558806 100644
--- a/apps/web/src/app/(dashboard)/documents/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/page.tsx
@@ -11,8 +11,8 @@ import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-
import { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
import { DocumentStatus } from '~/components/formatter/document-status';
-import { UploadDocument } from '../dashboard/upload-document';
import { DocumentsDataTable } from './data-table';
+import { UploadDocument } from './upload-document';
export type DocumentsPageProps = {
searchParams?: {
@@ -81,6 +81,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
{value !== ExtendedDocumentStatus.ALL && (
{Math.min(stats[value], 99)}
+ {stats[value] > 99 && '+'}
)}
diff --git a/apps/web/src/app/(dashboard)/dashboard/upload-document.tsx b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
similarity index 100%
rename from apps/web/src/app/(dashboard)/dashboard/upload-document.tsx
rename to apps/web/src/app/(dashboard)/documents/upload-document.tsx
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 1d1e056ae..2ce8744d4 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -2,6 +2,8 @@ import { Suspense } from 'react';
import { Caveat, Inter } from 'next/font/google';
+import { LocaleProvider } from '@documenso/lib/client-only/providers/locale';
+import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
import { TrpcProvider } from '@documenso/trpc/react';
import { cn } from '@documenso/ui/lib/utils';
import { Toaster } from '@documenso/ui/primitives/toaster';
@@ -45,6 +47,8 @@ export const metadata = {
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const flags = await getServerComponentAllFlags();
+ const locale = getLocale();
+
return (
-
-
-
-
- {children}
-
-
-
-
-
+
+
+
+
+
+ {children}
+
+
+
+
+
+
);
diff --git a/apps/web/src/components/formatter/locale-date.tsx b/apps/web/src/components/formatter/locale-date.tsx
index 837c6aa38..ecefb1e3b 100644
--- a/apps/web/src/components/formatter/locale-date.tsx
+++ b/apps/web/src/components/formatter/locale-date.tsx
@@ -2,16 +2,31 @@
import { HTMLAttributes, useEffect, useState } from 'react';
+import { DateTime, DateTimeFormatOptions } from 'luxon';
+
+import { useLocale } from '@documenso/lib/client-only/providers/locale';
+
export type LocaleDateProps = HTMLAttributes
& {
date: string | number | Date;
+ format?: DateTimeFormatOptions;
};
-export const LocaleDate = ({ className, date, ...props }: LocaleDateProps) => {
- const [localeDate, setLocaleDate] = useState(() => new Date(date).toISOString());
+/**
+ * Formats the date based on the user locale.
+ *
+ * Will use the estimated locale from the user headers on SSR, then will use
+ * the client browser locale once mounted.
+ */
+export const LocaleDate = ({ className, date, format, ...props }: LocaleDateProps) => {
+ const { locale } = useLocale();
+
+ const [localeDate, setLocaleDate] = useState(() =>
+ DateTime.fromJSDate(new Date(date)).setLocale(locale).toLocaleString(format),
+ );
useEffect(() => {
- setLocaleDate(new Date(date).toLocaleString());
- }, [date]);
+ setLocaleDate(DateTime.fromJSDate(new Date(date)).toLocaleString(format));
+ }, [date, format]);
return (
diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index 5e44146ea..d9d727afc 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@@ -18,13 +18,15 @@ import { Input } from '@documenso/ui/primitives/input';
import { Label } from '@documenso/ui/primitives/label';
import { useToast } from '@documenso/ui/primitives/use-toast';
-const ErrorMessages = {
+const ERROR_MESSAGES = {
[ErrorCode.CREDENTIALS_NOT_FOUND]: 'The email or password provided is incorrect',
[ErrorCode.INCORRECT_EMAIL_PASSWORD]: 'The email or password provided is incorrect',
[ErrorCode.USER_MISSING_PASSWORD]:
'This account appears to be using a social login method, please sign in using that method',
};
+const LOGIN_REDIRECT_PATH = '/documents';
+
export const ZSignInFormSchema = z.object({
email: z.string().email().min(1),
password: z.string().min(6).max(72),
@@ -37,9 +39,10 @@ export type SignInFormProps = {
};
export const SignInForm = ({ className }: SignInFormProps) => {
- const { toast } = useToast();
const searchParams = useSearchParams();
+ const { toast } = useToast();
+
const {
register,
handleSubmit,
@@ -61,7 +64,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
timeout = setTimeout(() => {
toast({
variant: 'destructive',
- description: ErrorMessages[errorCode] ?? 'An unknown error occurred',
+ description: ERROR_MESSAGES[errorCode] ?? 'An unknown error occurred',
});
}, 0);
}
@@ -78,12 +81,10 @@ export const SignInForm = ({ className }: SignInFormProps) => {
await signIn('credentials', {
email,
password,
- callbackUrl: '/documents',
+ callbackUrl: LOGIN_REDIRECT_PATH,
}).catch((err) => {
console.error(err);
});
-
- // throw new Error('Not implemented');
} catch (err) {
toast({
title: 'An unknown error occurred',
@@ -95,8 +96,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
const onSignInWithGoogleClick = async () => {
try {
- await signIn('google', { callbackUrl: '/dashboard' });
- // throw new Error('Not implemented');
+ await signIn('google', { callbackUrl: LOGIN_REDIRECT_PATH });
} catch (err) {
toast({
title: 'An unknown error occurred',
diff --git a/package.json b/package.json
index b66c194a2..3b2fbf6ca 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"private": true,
"scripts": {
"build": "turbo run build",
- "dev": "turbo run dev --filter=@documenso/{web,marketing}",
+ "dev": "turbo run dev --filter=@documenso/web --filter=@documenso/marketing",
"start": "cd apps && cd web && next start",
"lint": "turbo run lint",
"format": "prettier --write \"**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts,mdx}\"",
diff --git a/packages/lib/client-only/providers/locale.tsx b/packages/lib/client-only/providers/locale.tsx
new file mode 100644
index 000000000..ff8b03e5a
--- /dev/null
+++ b/packages/lib/client-only/providers/locale.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+export type LocaleContextValue = {
+ locale: string;
+};
+
+export const LocaleContext = createContext(null);
+
+export const useLocale = () => {
+ const context = useContext(LocaleContext);
+
+ if (!context) {
+ throw new Error('useLocale must be used within a LocaleProvider');
+ }
+
+ return context;
+};
+
+export function LocaleProvider({
+ children,
+ locale,
+}: {
+ children: React.ReactNode;
+ locale: string;
+}) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/packages/ui/primitives/data-table-pagination.tsx b/packages/ui/primitives/data-table-pagination.tsx
index 0ff27ae11..8147c92fb 100644
--- a/packages/ui/primitives/data-table-pagination.tsx
+++ b/packages/ui/primitives/data-table-pagination.tsx
@@ -1,19 +1,46 @@
import { Table } from '@tanstack/react-table';
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import { match } from 'ts-pattern';
import { Button } from './button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
interface DataTablePaginationProps {
table: Table;
+
+ /**
+ * The type of information to show on the left hand side of the pagination.
+ *
+ * Defaults to 'VisibleCount'.
+ */
+ additionalInformation?: 'SelectedCount' | 'VisibleCount' | 'None';
}
-export function DataTablePagination({ table }: DataTablePaginationProps) {
+export function DataTablePagination({
+ table,
+ additionalInformation = 'VisibleCount',
+}: DataTablePaginationProps) {
return (
- {table.getFilteredSelectedRowModel().rows.length} of{' '}
- {table.getFilteredRowModel().rows.length} row(s) selected.
+ {match(additionalInformation)
+ .with('SelectedCount', () => (
+
+ {table.getFilteredSelectedRowModel().rows.length} of{' '}
+ {table.getFilteredRowModel().rows.length} row(s) selected.
+
+ ))
+ .with('VisibleCount', () => {
+ const visibleRows = table.getFilteredRowModel().rows.length;
+
+ return (
+
+ Showing {visibleRows} result{visibleRows > 1 && 's'}.
+
+ );
+ })
+ .with('None', () => null)
+ .exhaustive()}
diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index c56e91b49..5de43c411 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -102,6 +102,7 @@ export const AddFieldsFormPartial = ({
const [selectedField, setSelectedField] = useState
(null);
const [selectedSigner, setSelectedSigner] = useState(null);
+ const [showRecipientsSelector, setShowRecipientsSelector] = useState(false);
const hasSelectedSignerBeenSent = selectedSigner?.sendStatus === SendStatus.SENT;
@@ -314,7 +315,7 @@ export const AddFieldsFormPartial = ({
))}
{!hideRecipients && (
-
+