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

chore: leaderboard table

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2024-09-19 13:08:29 +00:00
parent 670393d0d0
commit 894e857826
6 changed files with 147 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx
View File

@ -8,20 +8,16 @@ 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;
id: number;
name: string;
signingVolume: number;
createdAt: Date;
};
type LeaderboardTableProps = {
@ -46,57 +42,53 @@ export const LeaderboardTable = ({
const columns = useMemo(() => {
return [
{
header: 'ID',
accessorKey: 'id',
cell: ({ row }) => <div>{row.original.id}</div>,
size: 10,
},
{
header: ({ column }) => (
<Button
variant="ghost"
<div
className="flex cursor-pointer items-center"
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
>
{_(msg`Name`)}
<CaretSortIcon className="ml-2 h-4 w-4" />
</Button>
</div>
),
accessorKey: 'customer_name',
cell: ({ row }) => <div>{row.getValue('customer_name')}</div>,
accessorKey: 'name',
cell: ({ row }) => <div>{row.getValue('name')}</div>,
size: 250,
},
{
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"
<div
className="flex cursor-pointer items-center"
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
>
{_(msg`Signing Volume`)}
<CaretSortIcon className="ml-2 h-4 w-4" />
</Button>
</div>
),
accessorKey: 'completed_documents',
cell: ({ row }) => <div>{Number(row.getValue('completed_documents'))}</div>,
accessorKey: 'signingVolume',
cell: ({ row }) => <div>{Number(row.getValue('signingVolume'))}</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>,
header: ({ column }) => {
return (
<div
className="flex cursor-pointer items-center"
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
>
{_(msg`Created`)}
<CaretSortIcon className="ml-2 h-4 w-4" />
</div>
);
},
accessorKey: 'createdAt',
cell: ({ row }) => <div>{row.original.createdAt.toLocaleDateString()}</div>,
},
] satisfies DataTableColumnDef<SigningVolume>[];
}, []);

155
apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx
View File

@ -1,155 +0,0 @@
'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>
);
};

3
apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx
View File

@ -28,7 +28,8 @@ export default async function Leaderboard({ searchParams = {} }: AdminLeaderboar
const perPage = Number(searchParams.perPage) || 10;
const searchString = searchParams.search || '';
const { signingVolume, totalPages } = await search(searchString, page, perPage);
// todo: change the name
const { leaderboard: signingVolume, totalPages } = await search(searchString, page, perPage);
return (
<div>

208
packages/lib/server-only/admin/get-signing-volume.ts
View File

@ -1,15 +1,11 @@
import { Prisma } from '@prisma/client';
import { prisma } from '@documenso/prisma';
import { Prisma } from '@documenso/prisma/client';
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;
id: number;
name: string;
signingVolume: number;
createdAt: Date;
};
export type GetSigningVolumeOptions = {
@ -18,111 +14,101 @@ export type GetSigningVolumeOptions = {
perPage?: number;
};
export const getSigningVolume = async ({
export async function getSigningVolume({
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 (
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'
),
document_counts AS (
SELECT
COALESCE(d."userId", t."ownerUserId") AS customer_id,
COUNT(DISTINCT d.id) AS total_documents,
COUNT(DISTINCT CASE WHEN d.status = 'COMPLETED' THEN d.id END) AS completed_documents
FROM "Document" d
LEFT JOIN "Team" t ON d."teamId" = t.id
GROUP BY COALESCE(d."userId", t."ownerUserId")
)
SELECT
pc.customer_id,
pc.customer_type,
pc.customer_created_at,
COALESCE(dc.total_documents, 0) AS total_documents,
COALESCE(dc.completed_documents, 0) AS completed_documents,
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 document_counts dc ON pc.customer_id = dc.customer_id
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)}
ORDER BY dc.completed_documents DESC NULLS LAST, pc.customer_created_at DESC
LIMIT ${perPage} OFFSET ${offset}
`;
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];
}: GetSigningVolumeOptions) {
const whereClause = Prisma.validator<Prisma.SubscriptionWhereInput>()({
status: 'ACTIVE',
OR: [
{
User: {
OR: [
{ name: { contains: search, mode: 'insensitive' } },
{ email: { contains: search, mode: 'insensitive' } },
],
},
},
{
team: {
name: { contains: search, mode: 'insensitive' },
},
},
],
});
const totalPages = Math.ceil(Number(totalCount[0].count) / perPage);
const [subscriptions, totalCount] = await Promise.all([
prisma.subscription.findMany({
where: whereClause,
select: {
id: true,
createdAt: true,
User: {
select: {
id: true,
name: true,
email: true,
Document: {
where: {
status: 'COMPLETED',
deletedAt: null,
},
select: {
id: true,
},
},
},
},
team: {
select: {
id: true,
name: true,
document: {
where: {
status: 'COMPLETED',
deletedAt: null,
},
select: {
id: true,
},
},
},
},
},
orderBy: [
{
User: {
Document: {
_count: 'desc',
},
},
},
],
skip: Math.max(page - 1, 0) * perPage,
take: perPage,
}),
prisma.subscription.count({
where: whereClause,
}),
]);
return { signingVolume: results, totalPages };
};
const leaderboardWithVolume: SigningVolume[] = subscriptions.map((subscription) => {
const name =
subscription.User?.name || subscription.team?.name || subscription.User?.email || 'Unknown';
const signingVolume =
(subscription.User?.Document.length || 0) + (subscription.team?.document.length || 0);
return {
id: subscription.id,
name,
signingVolume,
createdAt: subscription.createdAt,
};
});
return {
leaderboard: leaderboardWithVolume,
totalPages: Math.ceil(totalCount / perPage),
};
}

18
packages/lib/translations/de/web.po
View File

@ -961,6 +961,7 @@ msgid "Create your account and start using state-of-the-art document signing. Op
msgstr ""
#: apps/web/src/app/(dashboard)/admin/documents/document-results.tsx:62
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:85
#: apps/web/src/app/(dashboard)/documents/[id]/document-page-view-information.tsx:35
#: apps/web/src/app/(dashboard)/documents/data-table.tsx:54
#: apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table.tsx:65
@ -1002,8 +1003,8 @@ 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 ""
#~ msgid "Customer Type"
#~ msgstr ""
#: apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx:28
msgid "Daily"
@ -1396,8 +1397,6 @@ msgid "Edit webhook"
msgstr ""
#: 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/data-table-users.tsx:71
#: apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx:213
@ -1990,8 +1989,7 @@ msgid "My templates"
msgstr ""
#: 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/leaderboard/data-table-leaderboard.tsx:57
#: 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)/settings/security/passkeys/user-passkeys-data-table-actions.tsx:144
@ -2596,8 +2594,7 @@ msgstr ""
msgid "Search by document title"
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/leaderboard/data-table-leaderboard.tsx:125
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:144
msgid "Search by name or email"
msgstr ""
@ -2819,9 +2816,8 @@ msgstr ""
msgid "Signing up..."
msgstr ""
#: 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
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:71
#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:37
msgid "Signing Volume"
msgstr ""

18
packages/lib/translations/en/web.po
View File

@ -956,6 +956,7 @@ msgid "Create your account and start using state-of-the-art document signing. Op
msgstr "Create your account and start using state-of-the-art document signing. Open and beautiful signing is within your grasp."
#: apps/web/src/app/(dashboard)/admin/documents/document-results.tsx:62
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:85
#: apps/web/src/app/(dashboard)/documents/[id]/document-page-view-information.tsx:35
#: apps/web/src/app/(dashboard)/documents/data-table.tsx:54
#: apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table.tsx:65
@ -1002,8 +1003,8 @@ 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"
#~ msgid "Customer Type"
#~ msgstr "Customer Type"
#: apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx:28
msgid "Daily"
@ -1400,8 +1401,6 @@ msgid "Edit webhook"
msgstr "Edit webhook"
#: 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/data-table-users.tsx:71
#: apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx:213
@ -2008,8 +2007,7 @@ msgid "My templates"
msgstr "My templates"
#: 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/leaderboard/data-table-leaderboard.tsx:57
#: 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)/settings/security/passkeys/user-passkeys-data-table-actions.tsx:144
@ -2614,8 +2612,7 @@ msgstr "Search"
msgid "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/leaderboard/data-table-leaderboard.tsx:125
#: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:144
msgid "Search by name or email"
msgstr "Search by name or email"
@ -2841,9 +2838,8 @@ msgstr "Signing in..."
msgid "Signing up..."
msgstr "Signing up..."
#: 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
#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:71
#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:37
msgid "Signing Volume"
msgstr "Signing Volume"