mirror of
https://github.com/documenso/documenso.git
synced 2025-11-16 01:32:06 +10:00
chore: leaderboard table
This commit is contained in:
@ -0,0 +1,155 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useMemo, useState, useTransition } from 'react';
|
||||||
|
|
||||||
|
import { msg } from '@lingui/macro';
|
||||||
|
import { useLingui } from '@lingui/react';
|
||||||
|
import { ChevronDownIcon as CaretSortIcon, Loader } from 'lucide-react';
|
||||||
|
|
||||||
|
import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
|
||||||
|
import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
|
||||||
|
import { Button } from '@documenso/ui/primitives/button';
|
||||||
|
import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
|
||||||
|
import { DataTable } from '@documenso/ui/primitives/data-table';
|
||||||
|
import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
|
||||||
|
import { Input } from '@documenso/ui/primitives/input';
|
||||||
|
|
||||||
|
export type SigningVolume = {
|
||||||
|
customer_id: number;
|
||||||
|
customer_type: 'User' | 'Team';
|
||||||
|
customer_created_at: Date;
|
||||||
|
total_documents: bigint;
|
||||||
|
completed_documents: bigint;
|
||||||
|
customer_email: string;
|
||||||
|
customer_name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type LeaderboardTableProps = {
|
||||||
|
signingVolume: SigningVolume[];
|
||||||
|
totalPages: number;
|
||||||
|
perPage: number;
|
||||||
|
page: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const LeaderboardTable = ({
|
||||||
|
signingVolume,
|
||||||
|
totalPages,
|
||||||
|
perPage,
|
||||||
|
page,
|
||||||
|
}: LeaderboardTableProps) => {
|
||||||
|
const { _ } = useLingui();
|
||||||
|
|
||||||
|
const [isPending, startTransition] = useTransition();
|
||||||
|
const updateSearchParams = useUpdateSearchParams();
|
||||||
|
const [searchString, setSearchString] = useState('');
|
||||||
|
const debouncedSearchString = useDebouncedValue(searchString, 1000);
|
||||||
|
|
||||||
|
const columns = useMemo(() => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
>
|
||||||
|
{_(msg`Name`)}
|
||||||
|
<CaretSortIcon className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
accessorKey: 'customer_name',
|
||||||
|
cell: ({ row }) => <div>{row.getValue('customer_name')}</div>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
>
|
||||||
|
{_(msg`Email`)}
|
||||||
|
<CaretSortIcon className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
accessorKey: 'customer_email',
|
||||||
|
cell: ({ row }) => <div>{row.getValue('customer_email')}</div>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
>
|
||||||
|
{_(msg`Signing Volume`)}
|
||||||
|
<CaretSortIcon className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
accessorKey: 'completed_documents',
|
||||||
|
cell: ({ row }) => <div>{Number(row.getValue('completed_documents'))}</div>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
>
|
||||||
|
{_(msg`Customer Type`)}
|
||||||
|
<CaretSortIcon className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
accessorKey: 'customer_type',
|
||||||
|
cell: ({ row }) => <div>{row.getValue('customer_type')}</div>,
|
||||||
|
},
|
||||||
|
] satisfies DataTableColumnDef<SigningVolume>[];
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
startTransition(() => {
|
||||||
|
updateSearchParams({
|
||||||
|
search: debouncedSearchString,
|
||||||
|
page: 1,
|
||||||
|
perPage,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [debouncedSearchString]);
|
||||||
|
|
||||||
|
const onPaginationChange = (page: number, perPage: number) => {
|
||||||
|
startTransition(() => {
|
||||||
|
updateSearchParams({
|
||||||
|
page,
|
||||||
|
perPage,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setSearchString(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<Input
|
||||||
|
className="my-6 flex flex-row gap-4"
|
||||||
|
type="text"
|
||||||
|
placeholder={_(msg`Search by name or email`)}
|
||||||
|
value={searchString}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={signingVolume}
|
||||||
|
perPage={perPage}
|
||||||
|
currentPage={page}
|
||||||
|
totalPages={totalPages}
|
||||||
|
onPaginationChange={onPaginationChange}
|
||||||
|
>
|
||||||
|
{(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
|
||||||
|
</DataTable>
|
||||||
|
|
||||||
|
{isPending && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-white/50">
|
||||||
|
<Loader className="h-8 w-8 animate-spin text-gray-500" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
'use server';
|
||||||
|
|
||||||
|
import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
|
||||||
|
import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
|
||||||
|
import { getSigningVolume } from '@documenso/lib/server-only/admin/get-signing-volume';
|
||||||
|
|
||||||
|
export async function search(search: string, page: number, perPage: number) {
|
||||||
|
const { user } = await getRequiredServerComponentSession();
|
||||||
|
|
||||||
|
if (!isAdmin(user)) {
|
||||||
|
throw new Error('Unauthorized');
|
||||||
|
}
|
||||||
|
|
||||||
|
const results = await getSigningVolume({ search, page, perPage });
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}
|
||||||
@ -0,0 +1,155 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useMemo, useState, useTransition } from 'react';
|
||||||
|
|
||||||
|
import { msg } from '@lingui/macro';
|
||||||
|
import { useLingui } from '@lingui/react';
|
||||||
|
import { ChevronDownIcon as CaretSortIcon, Loader } from 'lucide-react';
|
||||||
|
|
||||||
|
import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
|
||||||
|
import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
|
||||||
|
import { Button } from '@documenso/ui/primitives/button';
|
||||||
|
import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
|
||||||
|
import { DataTable } from '@documenso/ui/primitives/data-table';
|
||||||
|
import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
|
||||||
|
import { Input } from '@documenso/ui/primitives/input';
|
||||||
|
|
||||||
|
export type SigningVolume = {
|
||||||
|
customer_id: number;
|
||||||
|
customer_type: 'User' | 'Team';
|
||||||
|
customer_created_at: Date;
|
||||||
|
total_documents: bigint;
|
||||||
|
completed_documents: bigint;
|
||||||
|
customer_email: string;
|
||||||
|
customer_name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type LeaderboardTableProps = {
|
||||||
|
signingVolume: SigningVolume[];
|
||||||
|
totalPages: number;
|
||||||
|
perPage: number;
|
||||||
|
page: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const LeaderboardTable = ({
|
||||||
|
signingVolume,
|
||||||
|
totalPages,
|
||||||
|
perPage,
|
||||||
|
page,
|
||||||
|
}: LeaderboardTableProps) => {
|
||||||
|
const { _ } = useLingui();
|
||||||
|
|
||||||
|
const [isPending, startTransition] = useTransition();
|
||||||
|
const updateSearchParams = useUpdateSearchParams();
|
||||||
|
const [searchString, setSearchString] = useState('');
|
||||||
|
const debouncedSearchString = useDebouncedValue(searchString, 1000);
|
||||||
|
|
||||||
|
const columns = useMemo(() => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
>
|
||||||
|
{_(msg`Name`)}
|
||||||
|
<CaretSortIcon className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
accessorKey: 'customer_name',
|
||||||
|
cell: ({ row }) => <div>{row.getValue('customer_name')}</div>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
>
|
||||||
|
{_(msg`Email`)}
|
||||||
|
<CaretSortIcon className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
accessorKey: 'customer_email',
|
||||||
|
cell: ({ row }) => <div>{row.getValue('customer_email')}</div>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
>
|
||||||
|
{_(msg`Signing Volume`)}
|
||||||
|
<CaretSortIcon className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
accessorKey: 'completed_documents',
|
||||||
|
cell: ({ row }) => <div>{Number(row.getValue('completed_documents'))}</div>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
>
|
||||||
|
{_(msg`Customer Type`)}
|
||||||
|
<CaretSortIcon className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
accessorKey: 'customer_type',
|
||||||
|
cell: ({ row }) => <div>{row.getValue('customer_type')}</div>,
|
||||||
|
},
|
||||||
|
] satisfies DataTableColumnDef<SigningVolume>[];
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
startTransition(() => {
|
||||||
|
updateSearchParams({
|
||||||
|
search: debouncedSearchString,
|
||||||
|
page: 1,
|
||||||
|
perPage,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [debouncedSearchString]);
|
||||||
|
|
||||||
|
const onPaginationChange = (page: number, perPage: number) => {
|
||||||
|
startTransition(() => {
|
||||||
|
updateSearchParams({
|
||||||
|
page,
|
||||||
|
perPage,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setSearchString(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<Input
|
||||||
|
className="my-6 flex flex-row gap-4"
|
||||||
|
type="text"
|
||||||
|
placeholder={_(msg`Search by name or email`)}
|
||||||
|
value={searchString}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={signingVolume}
|
||||||
|
perPage={perPage}
|
||||||
|
currentPage={page}
|
||||||
|
totalPages={totalPages}
|
||||||
|
onPaginationChange={onPaginationChange}
|
||||||
|
>
|
||||||
|
{(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
|
||||||
|
</DataTable>
|
||||||
|
|
||||||
|
{isPending && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-white/50">
|
||||||
|
<Loader className="h-8 w-8 animate-spin text-gray-500" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,16 +1,34 @@
|
|||||||
import { Trans } from '@lingui/macro';
|
import { Trans } from '@lingui/macro';
|
||||||
|
|
||||||
import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
|
import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
|
||||||
import { getSigningVolume } from '@documenso/lib/server-only/admin/get-signing-volume';
|
import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
|
||||||
|
import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
|
||||||
|
|
||||||
import { DataTableDemo as Table } from './table';
|
import { LeaderboardTable } from './data-table-leaderboard';
|
||||||
|
import { search } from './fetch-leaderboard.actions';
|
||||||
|
|
||||||
export default async function Leaderboard() {
|
type AdminLeaderboardProps = {
|
||||||
|
searchParams?: {
|
||||||
|
search?: string;
|
||||||
|
page?: number;
|
||||||
|
perPage?: number;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function Leaderboard({ searchParams = {} }: AdminLeaderboardProps) {
|
||||||
setupI18nSSR();
|
setupI18nSSR();
|
||||||
|
|
||||||
const signingVolume = await getSigningVolume();
|
const { user } = await getRequiredServerComponentSession();
|
||||||
|
|
||||||
console.log(signingVolume);
|
if (!isAdmin(user)) {
|
||||||
|
throw new Error('Unauthorized');
|
||||||
|
}
|
||||||
|
|
||||||
|
const page = Number(searchParams.page) || 1;
|
||||||
|
const perPage = Number(searchParams.perPage) || 10;
|
||||||
|
const searchString = searchParams.search || '';
|
||||||
|
|
||||||
|
const { signingVolume, totalPages } = await search(searchString, page, perPage);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@ -18,7 +36,12 @@ export default async function Leaderboard() {
|
|||||||
<Trans>Signing Volume</Trans>
|
<Trans>Signing Volume</Trans>
|
||||||
</h2>
|
</h2>
|
||||||
<div className="mt-8">
|
<div className="mt-8">
|
||||||
<Table />
|
<LeaderboardTable
|
||||||
|
signingVolume={signingVolume}
|
||||||
|
totalPages={totalPages}
|
||||||
|
page={page}
|
||||||
|
perPage={perPage}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,263 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
|
|
||||||
import type {
|
|
||||||
ColumnDef,
|
|
||||||
ColumnFiltersState,
|
|
||||||
SortingState,
|
|
||||||
VisibilityState,
|
|
||||||
} from '@tanstack/react-table';
|
|
||||||
import {
|
|
||||||
flexRender,
|
|
||||||
getCoreRowModel,
|
|
||||||
getFilteredRowModel,
|
|
||||||
getPaginationRowModel,
|
|
||||||
getSortedRowModel,
|
|
||||||
useReactTable,
|
|
||||||
} from '@tanstack/react-table';
|
|
||||||
import {
|
|
||||||
ChevronDownIcon as CaretSortIcon,
|
|
||||||
ChevronDownIcon as DotsHorizontalIcon,
|
|
||||||
} from 'lucide-react';
|
|
||||||
|
|
||||||
import { Button } from '@documenso/ui/primitives/button';
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuLabel,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from '@documenso/ui/primitives/dropdown-menu';
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from '@documenso/ui/primitives/table';
|
|
||||||
|
|
||||||
const data: Payment[] = [
|
|
||||||
{
|
|
||||||
id: 'm5gr84i9',
|
|
||||||
amount: 316,
|
|
||||||
status: 'success',
|
|
||||||
email: 'ken99@yahoo.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3u1reuv4',
|
|
||||||
amount: 242,
|
|
||||||
status: 'success',
|
|
||||||
email: 'Abe45@gmail.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'derv1ws0',
|
|
||||||
amount: 837,
|
|
||||||
status: 'processing',
|
|
||||||
email: 'Monserrat44@gmail.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '5kma53ae',
|
|
||||||
amount: 874,
|
|
||||||
status: 'success',
|
|
||||||
email: 'Silas22@gmail.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'bhqecj4p',
|
|
||||||
amount: 721,
|
|
||||||
status: 'failed',
|
|
||||||
email: 'carmella@hotmail.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '5kma53ae',
|
|
||||||
amount: 874,
|
|
||||||
status: 'success',
|
|
||||||
email: 'Silas22@gmail.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '5kma53ae',
|
|
||||||
amount: 874,
|
|
||||||
status: 'success',
|
|
||||||
email: 'Silas22@gmail.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '5kma53ae',
|
|
||||||
amount: 874,
|
|
||||||
status: 'success',
|
|
||||||
email: 'Silas22@gmail.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '5kma53ae',
|
|
||||||
amount: 874,
|
|
||||||
status: 'success',
|
|
||||||
email: 'Silas22@gmail.com',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export type Payment = {
|
|
||||||
id: string;
|
|
||||||
amount: number;
|
|
||||||
status: 'pending' | 'processing' | 'success' | 'failed';
|
|
||||||
email: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const columns: ColumnDef<Payment>[] = [
|
|
||||||
{
|
|
||||||
accessorKey: 'status',
|
|
||||||
header: 'Status',
|
|
||||||
cell: ({ row }) => <div className="capitalize">{row.getValue('status')}</div>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'email',
|
|
||||||
header: ({ column }) => {
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="pl-0 hover:bg-transparent"
|
|
||||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
||||||
>
|
|
||||||
Customers
|
|
||||||
<CaretSortIcon className="ml-2 h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
cell: ({ row }) => <div className="lowercase">{row.getValue('email')}</div>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'amount',
|
|
||||||
header: () => <div className="text-right">Amount</div>,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const amount = parseFloat(row.getValue('amount'));
|
|
||||||
|
|
||||||
// Format the amount as a dollar amount
|
|
||||||
const formatted = new Intl.NumberFormat('en-US', {
|
|
||||||
style: 'currency',
|
|
||||||
currency: 'USD',
|
|
||||||
}).format(amount);
|
|
||||||
|
|
||||||
return <div className="text-right font-medium">{formatted}</div>;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'actions',
|
|
||||||
enableHiding: false,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const payment = row.original;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
|
||||||
<span className="sr-only">Open menu</span>
|
|
||||||
<DotsHorizontalIcon className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end">
|
|
||||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
|
||||||
<DropdownMenuItem onClick={async () => navigator.clipboard.writeText(payment.id)}>
|
|
||||||
Copy payment ID
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<DropdownMenuItem>View customer</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem>View payment details</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export function DataTableDemo() {
|
|
||||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
|
||||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
|
|
||||||
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
|
|
||||||
const [rowSelection, setRowSelection] = React.useState({});
|
|
||||||
|
|
||||||
const table = useReactTable({
|
|
||||||
data,
|
|
||||||
columns,
|
|
||||||
onSortingChange: setSorting,
|
|
||||||
onColumnFiltersChange: setColumnFilters,
|
|
||||||
getCoreRowModel: getCoreRowModel(),
|
|
||||||
getPaginationRowModel: getPaginationRowModel(),
|
|
||||||
getSortedRowModel: getSortedRowModel(),
|
|
||||||
getFilteredRowModel: getFilteredRowModel(),
|
|
||||||
onColumnVisibilityChange: setColumnVisibility,
|
|
||||||
onRowSelectionChange: setRowSelection,
|
|
||||||
state: {
|
|
||||||
sorting,
|
|
||||||
columnFilters,
|
|
||||||
columnVisibility,
|
|
||||||
rowSelection,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full">
|
|
||||||
<div className="rounded-md border">
|
|
||||||
<Table>
|
|
||||||
<TableHeader>
|
|
||||||
{table.getHeaderGroups().map((headerGroup) => (
|
|
||||||
<TableRow key={headerGroup.id}>
|
|
||||||
{headerGroup.headers.map((header) => {
|
|
||||||
return (
|
|
||||||
<TableHead key={header.id}>
|
|
||||||
{header.isPlaceholder
|
|
||||||
? null
|
|
||||||
: flexRender(header.column.columnDef.header, header.getContext())}
|
|
||||||
</TableHead>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{table.getRowModel().rows?.length ? (
|
|
||||||
table.getRowModel().rows.map((row) => (
|
|
||||||
<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
|
|
||||||
{row.getVisibleCells().map((cell) => (
|
|
||||||
<TableCell key={cell.id}>
|
|
||||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
||||||
</TableCell>
|
|
||||||
))}
|
|
||||||
</TableRow>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
|
||||||
No results.
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-end space-x-2 py-4">
|
|
||||||
<div className="text-muted-foreground flex-1 text-sm">
|
|
||||||
{table.getFilteredSelectedRowModel().rows.length} of{' '}
|
|
||||||
{table.getFilteredRowModel().rows.length} row(s) selected.
|
|
||||||
</div>
|
|
||||||
<div className="space-x-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => table.previousPage()}
|
|
||||||
disabled={!table.getCanPreviousPage()}
|
|
||||||
>
|
|
||||||
Previous
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => table.nextPage()}
|
|
||||||
disabled={!table.getCanNextPage()}
|
|
||||||
>
|
|
||||||
Next
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,7 +1,41 @@
|
|||||||
|
import { Prisma } from '@prisma/client';
|
||||||
|
|
||||||
import { prisma } from '@documenso/prisma';
|
import { prisma } from '@documenso/prisma';
|
||||||
|
|
||||||
export const getSigningVolume = async () => {
|
export type SigningVolume = {
|
||||||
const results = await prisma.$queryRaw`
|
customer_id: number;
|
||||||
|
customer_type: 'User' | 'Team';
|
||||||
|
customer_created_at: Date;
|
||||||
|
total_documents: bigint;
|
||||||
|
completed_documents: bigint;
|
||||||
|
customer_email: string;
|
||||||
|
customer_name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type GetSigningVolumeOptions = {
|
||||||
|
search?: string;
|
||||||
|
page?: number;
|
||||||
|
perPage?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getSigningVolume = async ({
|
||||||
|
search = '',
|
||||||
|
page = 1,
|
||||||
|
perPage = 10,
|
||||||
|
}: GetSigningVolumeOptions = {}): Promise<{
|
||||||
|
signingVolume: SigningVolume[];
|
||||||
|
totalPages: number;
|
||||||
|
}> => {
|
||||||
|
const offset = (page - 1) * perPage;
|
||||||
|
|
||||||
|
const whereClause = search
|
||||||
|
? `AND (LOWER(COALESCE(u.name, t.name)) LIKE $1 OR LOWER(COALESCE(u.email, te.email)) LIKE $1)`
|
||||||
|
: '';
|
||||||
|
|
||||||
|
const searchParam = search ? [`%${search.toLowerCase()}%`] : [];
|
||||||
|
|
||||||
|
const [results, totalCount] = await prisma.$transaction(async (tx) => {
|
||||||
|
const signingVolumeQuery = tx.$queryRaw<SigningVolume[]>`
|
||||||
WITH paying_customers AS (
|
WITH paying_customers AS (
|
||||||
SELECT DISTINCT
|
SELECT DISTINCT
|
||||||
COALESCE(s."userId", t."ownerUserId") AS customer_id,
|
COALESCE(s."userId", t."ownerUserId") AS customer_id,
|
||||||
@ -42,8 +76,53 @@ export const getSigningVolume = async () => {
|
|||||||
LEFT JOIN "User" u ON pc.customer_id = u.id AND pc.customer_type = 'User'
|
LEFT JOIN "User" u ON pc.customer_id = u.id AND pc.customer_type = 'User'
|
||||||
LEFT JOIN "Team" t ON pc.customer_id = t."ownerUserId" AND pc.customer_type = 'Team'
|
LEFT JOIN "Team" t ON pc.customer_id = t."ownerUserId" AND pc.customer_type = 'Team'
|
||||||
LEFT JOIN "TeamEmail" te ON t.id = te."teamId"
|
LEFT JOIN "TeamEmail" te ON t.id = te."teamId"
|
||||||
|
WHERE 1=1 ${Prisma.raw(whereClause)}
|
||||||
ORDER BY dc.completed_documents DESC NULLS LAST, pc.customer_created_at DESC
|
ORDER BY dc.completed_documents DESC NULLS LAST, pc.customer_created_at DESC
|
||||||
|
LIMIT ${perPage} OFFSET ${offset}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
return results;
|
const totalCountQuery = tx.$queryRaw<[{ count: bigint }]>`
|
||||||
|
SELECT COUNT(*) as count
|
||||||
|
FROM (
|
||||||
|
WITH paying_customers AS (
|
||||||
|
SELECT DISTINCT
|
||||||
|
COALESCE(s."userId", t."ownerUserId") AS customer_id,
|
||||||
|
CASE
|
||||||
|
WHEN s."userId" IS NOT NULL THEN 'User'
|
||||||
|
ELSE 'Team'
|
||||||
|
END AS customer_type,
|
||||||
|
COALESCE(s."createdAt", t."createdAt") AS customer_created_at
|
||||||
|
FROM "Subscription" s
|
||||||
|
FULL OUTER JOIN "Team" t ON s."teamId" = t.id
|
||||||
|
WHERE s.status = 'ACTIVE'
|
||||||
|
)
|
||||||
|
SELECT
|
||||||
|
pc.customer_id,
|
||||||
|
CASE
|
||||||
|
WHEN pc.customer_type = 'User' THEN u.email
|
||||||
|
ELSE te.email
|
||||||
|
END AS customer_email,
|
||||||
|
CASE
|
||||||
|
WHEN pc.customer_type = 'User' THEN u.name
|
||||||
|
ELSE t.name
|
||||||
|
END AS customer_name
|
||||||
|
FROM paying_customers pc
|
||||||
|
LEFT JOIN "User" u ON pc.customer_id = u.id AND pc.customer_type = 'User'
|
||||||
|
LEFT JOIN "Team" t ON pc.customer_id = t."ownerUserId" AND pc.customer_type = 'Team'
|
||||||
|
LEFT JOIN "TeamEmail" te ON t.id = te."teamId"
|
||||||
|
WHERE 1=1 ${Prisma.raw(whereClause)}
|
||||||
|
) subquery
|
||||||
|
`;
|
||||||
|
|
||||||
|
const [signingVolumeResults, totalCountResults] = await Promise.all([
|
||||||
|
signingVolumeQuery,
|
||||||
|
totalCountQuery,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return [signingVolumeResults, totalCountResults];
|
||||||
|
});
|
||||||
|
|
||||||
|
const totalPages = Math.ceil(Number(totalCount[0].count) / perPage);
|
||||||
|
|
||||||
|
return { signingVolume: results, totalPages };
|
||||||
};
|
};
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -1000,6 +1000,11 @@ msgstr ""
|
|||||||
msgid "Current plan: {0}"
|
msgid "Current plan: {0}"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:94
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:94
|
||||||
|
msgid "Customer Type"
|
||||||
|
msgstr ""
|
||||||
|
|
||||||
#: apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx:28
|
#: apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx:28
|
||||||
msgid "Daily"
|
msgid "Daily"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
@ -1391,6 +1396,8 @@ msgid "Edit webhook"
|
|||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx:166
|
#: apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx:166
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:68
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:68
|
||||||
#: apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx:114
|
#: apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx:114
|
||||||
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:71
|
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:71
|
||||||
#: apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx:213
|
#: apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx:213
|
||||||
@ -1983,6 +1990,8 @@ msgid "My templates"
|
|||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx:148
|
#: apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx:148
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:55
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:55
|
||||||
#: apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx:99
|
#: apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx:99
|
||||||
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:66
|
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:66
|
||||||
#: apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table-actions.tsx:144
|
#: apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table-actions.tsx:144
|
||||||
@ -2587,6 +2596,8 @@ msgstr ""
|
|||||||
msgid "Search by document title"
|
msgid "Search by document title"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:133
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:133
|
||||||
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:144
|
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:144
|
||||||
msgid "Search by name or email"
|
msgid "Search by name or email"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
@ -2808,7 +2819,9 @@ msgstr ""
|
|||||||
msgid "Signing up..."
|
msgid "Signing up..."
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:18
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:81
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:81
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:36
|
||||||
msgid "Signing Volume"
|
msgid "Signing Volume"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -1000,6 +1000,11 @@ msgstr "Current Password"
|
|||||||
msgid "Current plan: {0}"
|
msgid "Current plan: {0}"
|
||||||
msgstr "Current plan: {0}"
|
msgstr "Current plan: {0}"
|
||||||
|
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:94
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:94
|
||||||
|
msgid "Customer Type"
|
||||||
|
msgstr "Customer Type"
|
||||||
|
|
||||||
#: apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx:28
|
#: apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx:28
|
||||||
msgid "Daily"
|
msgid "Daily"
|
||||||
msgstr "Daily"
|
msgstr "Daily"
|
||||||
@ -1395,6 +1400,8 @@ msgid "Edit webhook"
|
|||||||
msgstr "Edit webhook"
|
msgstr "Edit webhook"
|
||||||
|
|
||||||
#: apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx:166
|
#: apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx:166
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:68
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:68
|
||||||
#: apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx:114
|
#: apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx:114
|
||||||
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:71
|
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:71
|
||||||
#: apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx:213
|
#: apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx:213
|
||||||
@ -2001,6 +2008,8 @@ msgid "My templates"
|
|||||||
msgstr "My templates"
|
msgstr "My templates"
|
||||||
|
|
||||||
#: apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx:148
|
#: apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx:148
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:55
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:55
|
||||||
#: apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx:99
|
#: apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx:99
|
||||||
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:66
|
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:66
|
||||||
#: apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table-actions.tsx:144
|
#: apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table-actions.tsx:144
|
||||||
@ -2605,6 +2614,8 @@ msgstr "Search"
|
|||||||
msgid "Search by document title"
|
msgid "Search by document title"
|
||||||
msgstr "Search by document title"
|
msgstr "Search by document title"
|
||||||
|
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:133
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:133
|
||||||
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:144
|
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:144
|
||||||
msgid "Search by name or email"
|
msgid "Search by name or email"
|
||||||
msgstr "Search by name or email"
|
msgstr "Search by name or email"
|
||||||
@ -2830,7 +2841,9 @@ msgstr "Signing in..."
|
|||||||
msgid "Signing up..."
|
msgid "Signing up..."
|
||||||
msgstr "Signing up..."
|
msgstr "Signing up..."
|
||||||
|
|
||||||
#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:18
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:81
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:81
|
||||||
|
#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:36
|
||||||
msgid "Signing Volume"
|
msgid "Signing Volume"
|
||||||
msgstr "Signing Volume"
|
msgstr "Signing Volume"
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user