mirror of
https://github.com/documenso/documenso.git
synced 2025-11-17 18:21:32 +10:00
feat: org insights (#1937)
This commit is contained in:
Ephraim Duncan
GitHub
@ -2,40 +2,49 @@ import { useEffect, useMemo, useState, useTransition } from 'react';
|
||||
|
||||
import { msg } from '@lingui/core/macro';
|
||||
import { useLingui } from '@lingui/react';
|
||||
import { Trans } from '@lingui/react/macro';
|
||||
import { ChevronDownIcon, ChevronUpIcon, ChevronsUpDown, Loader } from 'lucide-react';
|
||||
import { Link } from 'react-router';
|
||||
|
||||
import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
|
||||
import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
|
||||
import type { DateRange } from '@documenso/lib/types/search-params';
|
||||
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 = {
|
||||
id: number;
|
||||
export type OrganisationOverview = {
|
||||
id: string;
|
||||
name: string;
|
||||
signingVolume: number;
|
||||
createdAt: Date;
|
||||
planId: string;
|
||||
customerId: string;
|
||||
subscriptionStatus?: string;
|
||||
isActive?: boolean;
|
||||
teamCount?: number;
|
||||
memberCount?: number;
|
||||
};
|
||||
|
||||
type LeaderboardTableProps = {
|
||||
signingVolume: SigningVolume[];
|
||||
type OrganisationOverviewTableProps = {
|
||||
organisations: OrganisationOverview[];
|
||||
totalPages: number;
|
||||
perPage: number;
|
||||
page: number;
|
||||
sortBy: 'name' | 'createdAt' | 'signingVolume';
|
||||
sortOrder: 'asc' | 'desc';
|
||||
dateRange: DateRange;
|
||||
};
|
||||
|
||||
export const AdminLeaderboardTable = ({
|
||||
signingVolume,
|
||||
export const AdminOrganisationOverviewTable = ({
|
||||
organisations,
|
||||
totalPages,
|
||||
perPage,
|
||||
page,
|
||||
sortBy,
|
||||
sortOrder,
|
||||
}: LeaderboardTableProps) => {
|
||||
dateRange,
|
||||
}: OrganisationOverviewTableProps) => {
|
||||
const { _, i18n } = useLingui();
|
||||
|
||||
const [isPending, startTransition] = useTransition();
|
||||
@ -67,17 +76,16 @@ export const AdminLeaderboardTable = ({
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div>
|
||||
<a
|
||||
className="text-primary underline"
|
||||
href={`https://dashboard.stripe.com/subscriptions/${row.original.planId}`}
|
||||
target="_blank"
|
||||
<Link
|
||||
className="hover:underline"
|
||||
to={`/admin/organisation-insights/${row.original.id}?dateRange=${dateRange}`}
|
||||
>
|
||||
{row.getValue('name')}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
size: 250,
|
||||
size: 240,
|
||||
},
|
||||
{
|
||||
header: () => (
|
||||
@ -85,7 +93,9 @@ export const AdminLeaderboardTable = ({
|
||||
className="flex cursor-pointer items-center"
|
||||
onClick={() => handleColumnSort('signingVolume')}
|
||||
>
|
||||
{_(msg`Signing Volume`)}
|
||||
<span className="whitespace-nowrap">
|
||||
<Trans>Document Volume</Trans>
|
||||
</span>
|
||||
{sortBy === 'signingVolume' ? (
|
||||
sortOrder === 'asc' ? (
|
||||
<ChevronUpIcon className="ml-2 h-4 w-4" />
|
||||
@ -99,6 +109,23 @@ export const AdminLeaderboardTable = ({
|
||||
),
|
||||
accessorKey: 'signingVolume',
|
||||
cell: ({ row }) => <div>{Number(row.getValue('signingVolume'))}</div>,
|
||||
size: 160,
|
||||
},
|
||||
{
|
||||
header: () => {
|
||||
return <Trans>Teams</Trans>;
|
||||
},
|
||||
accessorKey: 'teamCount',
|
||||
cell: ({ row }) => <div>{Number(row.original.teamCount) || 0}</div>,
|
||||
size: 120,
|
||||
},
|
||||
{
|
||||
header: () => {
|
||||
return <Trans>Members</Trans>;
|
||||
},
|
||||
accessorKey: 'memberCount',
|
||||
cell: ({ row }) => <div>{Number(row.original.memberCount) || 0}</div>,
|
||||
size: 160,
|
||||
},
|
||||
{
|
||||
header: () => {
|
||||
@ -107,7 +134,9 @@ export const AdminLeaderboardTable = ({
|
||||
className="flex cursor-pointer items-center"
|
||||
onClick={() => handleColumnSort('createdAt')}
|
||||
>
|
||||
{_(msg`Created`)}
|
||||
<span className="whitespace-nowrap">
|
||||
<Trans>Created</Trans>
|
||||
</span>
|
||||
{sortBy === 'createdAt' ? (
|
||||
sortOrder === 'asc' ? (
|
||||
<ChevronUpIcon className="ml-2 h-4 w-4" />
|
||||
@ -121,10 +150,11 @@ export const AdminLeaderboardTable = ({
|
||||
);
|
||||
},
|
||||
accessorKey: 'createdAt',
|
||||
cell: ({ row }) => i18n.date(row.original.createdAt),
|
||||
cell: ({ row }) => i18n.date(new Date(row.original.createdAt)),
|
||||
size: 120,
|
||||
},
|
||||
] satisfies DataTableColumnDef<SigningVolume>[];
|
||||
}, [sortOrder, sortBy]);
|
||||
] satisfies DataTableColumnDef<OrganisationOverview>[];
|
||||
}, [sortOrder, sortBy, dateRange]);
|
||||
|
||||
useEffect(() => {
|
||||
startTransition(() => {
|
||||
@ -169,13 +199,13 @@ export const AdminLeaderboardTable = ({
|
||||
<Input
|
||||
className="my-6 flex flex-row gap-4"
|
||||
type="text"
|
||||
placeholder={_(msg`Search by name or email`)}
|
||||
placeholder={_(msg`Search by organisation name`)}
|
||||
value={searchString}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={signingVolume}
|
||||
data={organisations}
|
||||
perPage={perPage}
|
||||
currentPage={page}
|
||||
totalPages={totalPages}
|
||||
@ -93,13 +93,31 @@ export const AdminOrganisationsTable = ({
|
||||
),
|
||||
},
|
||||
{
|
||||
header: t`Status`,
|
||||
id: 'role',
|
||||
header: t`Role`,
|
||||
cell: ({ row }) => (
|
||||
<Badge variant="neutral">
|
||||
{row.original.owner.id === memberUserId ? t`Owner` : t`Member`}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'billingStatus',
|
||||
header: t`Status`,
|
||||
cell: ({ row }) => {
|
||||
const subscription = row.original.subscription;
|
||||
const isPaid = subscription && subscription.status === 'ACTIVE';
|
||||
return (
|
||||
<div
|
||||
className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
|
||||
isPaid ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
|
||||
}`}
|
||||
>
|
||||
{isPaid ? t`Paid` : t`Free`}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: t`Subscription`,
|
||||
cell: ({ row }) =>
|
||||
@ -168,7 +186,7 @@ export const AdminOrganisationsTable = ({
|
||||
onPaginationChange={onPaginationChange}
|
||||
columnVisibility={{
|
||||
owner: showOwnerColumn,
|
||||
status: memberUserId !== undefined,
|
||||
role: memberUserId !== undefined,
|
||||
}}
|
||||
error={{
|
||||
enable: isLoadingError,
|
||||
|
||||
287
apps/remix/app/components/tables/organisation-insights-table.tsx
Normal file
287
apps/remix/app/components/tables/organisation-insights-table.tsx
Normal file
@ -0,0 +1,287 @@
|
||||
import { useTransition } from 'react';
|
||||
|
||||
import { msg } from '@lingui/core/macro';
|
||||
import { useLingui } from '@lingui/react';
|
||||
import { Building2, Loader, TrendingUp, Users } from 'lucide-react';
|
||||
import { Link } from 'react-router';
|
||||
import { useNavigation } from 'react-router';
|
||||
|
||||
import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
|
||||
import type { OrganisationDetailedInsights } from '@documenso/lib/server-only/admin/get-organisation-detailed-insights';
|
||||
import type { DateRange } from '@documenso/lib/types/search-params';
|
||||
import type { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
|
||||
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 { DateRangeFilter } from '~/components/filters/date-range-filter';
|
||||
import { DocumentStatus } from '~/components/general/document/document-status';
|
||||
|
||||
type OrganisationInsightsTableProps = {
|
||||
insights: OrganisationDetailedInsights;
|
||||
page: number;
|
||||
perPage: number;
|
||||
dateRange: DateRange;
|
||||
view: 'teams' | 'users' | 'documents';
|
||||
};
|
||||
|
||||
export const OrganisationInsightsTable = ({
|
||||
insights,
|
||||
page,
|
||||
perPage,
|
||||
dateRange,
|
||||
view,
|
||||
}: OrganisationInsightsTableProps) => {
|
||||
const { _, i18n } = useLingui();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const navigation = useNavigation();
|
||||
const updateSearchParams = useUpdateSearchParams();
|
||||
|
||||
const isLoading = isPending || navigation.state === 'loading';
|
||||
|
||||
const onPaginationChange = (newPage: number, newPerPage: number) => {
|
||||
startTransition(() => {
|
||||
updateSearchParams({
|
||||
page: newPage,
|
||||
perPage: newPerPage,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleViewChange = (newView: 'teams' | 'users' | 'documents') => {
|
||||
startTransition(() => {
|
||||
updateSearchParams({
|
||||
view: newView,
|
||||
page: 1,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const teamsColumns = [
|
||||
{
|
||||
header: _(msg`Team Name`),
|
||||
accessorKey: 'name',
|
||||
cell: ({ row }) => <span className="block max-w-full truncate">{row.getValue('name')}</span>,
|
||||
size: 240,
|
||||
},
|
||||
{
|
||||
header: _(msg`Members`),
|
||||
accessorKey: 'memberCount',
|
||||
cell: ({ row }) => Number(row.getValue('memberCount')),
|
||||
size: 120,
|
||||
},
|
||||
{
|
||||
header: _(msg`Documents`),
|
||||
accessorKey: 'documentCount',
|
||||
cell: ({ row }) => Number(row.getValue('documentCount')),
|
||||
size: 140,
|
||||
},
|
||||
{
|
||||
header: _(msg`Created`),
|
||||
accessorKey: 'createdAt',
|
||||
cell: ({ row }) => i18n.date(new Date(row.getValue('createdAt'))),
|
||||
size: 160,
|
||||
},
|
||||
] satisfies DataTableColumnDef<(typeof insights.teams)[number]>[];
|
||||
|
||||
const usersColumns = [
|
||||
{
|
||||
header: () => <span className="whitespace-nowrap">{_(msg`Name`)}</span>,
|
||||
accessorKey: 'name',
|
||||
cell: ({ row }) => (
|
||||
<Link
|
||||
className="block max-w-full truncate hover:underline"
|
||||
to={`/admin/users/${row.original.id}`}
|
||||
>
|
||||
{(row.getValue('name') as string) || (row.getValue('email') as string)}
|
||||
</Link>
|
||||
),
|
||||
size: 220,
|
||||
},
|
||||
{
|
||||
header: () => <span className="whitespace-nowrap">{_(msg`Email`)}</span>,
|
||||
accessorKey: 'email',
|
||||
cell: ({ row }) => <span className="block max-w-full truncate">{row.getValue('email')}</span>,
|
||||
size: 260,
|
||||
},
|
||||
{
|
||||
header: () => <span className="whitespace-nowrap">{_(msg`Documents Created`)}</span>,
|
||||
accessorKey: 'documentCount',
|
||||
cell: ({ row }) => Number(row.getValue('documentCount')),
|
||||
size: 180,
|
||||
},
|
||||
{
|
||||
header: () => <span className="whitespace-nowrap">{_(msg`Documents Completed`)}</span>,
|
||||
accessorKey: 'signedDocumentCount',
|
||||
cell: ({ row }) => Number(row.getValue('signedDocumentCount')),
|
||||
size: 180,
|
||||
},
|
||||
{
|
||||
header: () => <span className="whitespace-nowrap">{_(msg`Joined`)}</span>,
|
||||
accessorKey: 'createdAt',
|
||||
cell: ({ row }) => i18n.date(new Date(row.getValue('createdAt'))),
|
||||
size: 160,
|
||||
},
|
||||
] satisfies DataTableColumnDef<(typeof insights.users)[number]>[];
|
||||
|
||||
const documentsColumns = [
|
||||
{
|
||||
header: () => <span className="whitespace-nowrap">{_(msg`Title`)}</span>,
|
||||
accessorKey: 'title',
|
||||
cell: ({ row }) => (
|
||||
<Link
|
||||
className="block max-w-[200px] truncate hover:underline"
|
||||
to={`/admin/documents/${row.original.id}`}
|
||||
title={row.getValue('title') as string}
|
||||
>
|
||||
{row.getValue('title')}
|
||||
</Link>
|
||||
),
|
||||
size: 200,
|
||||
},
|
||||
{
|
||||
header: () => <span className="whitespace-nowrap">{_(msg`Status`)}</span>,
|
||||
accessorKey: 'status',
|
||||
cell: ({ row }) => (
|
||||
<DocumentStatus status={row.getValue('status') as ExtendedDocumentStatus} />
|
||||
),
|
||||
size: 120,
|
||||
},
|
||||
{
|
||||
header: () => <span className="whitespace-nowrap">{_(msg`Team`)}</span>,
|
||||
accessorKey: 'teamName',
|
||||
cell: ({ row }) => (
|
||||
<span className="block max-w-[150px] truncate" title={row.getValue('teamName') as string}>
|
||||
{row.getValue('teamName')}
|
||||
</span>
|
||||
),
|
||||
size: 150,
|
||||
},
|
||||
{
|
||||
header: () => <span className="whitespace-nowrap">{_(msg`Created`)}</span>,
|
||||
accessorKey: 'createdAt',
|
||||
cell: ({ row }) => i18n.date(new Date(row.getValue('createdAt'))),
|
||||
size: 140,
|
||||
},
|
||||
{
|
||||
header: () => <span className="whitespace-nowrap">{_(msg`Completed`)}</span>,
|
||||
accessorKey: 'completedAt',
|
||||
cell: ({ row }) => {
|
||||
const completedAt = row.getValue('completedAt') as Date | null;
|
||||
|
||||
return completedAt ? i18n.date(new Date(completedAt)) : '-';
|
||||
},
|
||||
size: 140,
|
||||
},
|
||||
] satisfies DataTableColumnDef<(typeof insights.documents)[number]>[];
|
||||
|
||||
const getCurrentData = (): unknown[] => {
|
||||
switch (view) {
|
||||
case 'teams':
|
||||
return insights.teams;
|
||||
case 'users':
|
||||
return insights.users;
|
||||
case 'documents':
|
||||
return insights.documents;
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const getCurrentColumns = (): DataTableColumnDef<unknown>[] => {
|
||||
switch (view) {
|
||||
case 'teams':
|
||||
return teamsColumns as unknown as DataTableColumnDef<unknown>[];
|
||||
case 'users':
|
||||
return usersColumns as unknown as DataTableColumnDef<unknown>[];
|
||||
case 'documents':
|
||||
return documentsColumns as unknown as DataTableColumnDef<unknown>[];
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{insights.summary && (
|
||||
<div className="mb-6 grid grid-cols-2 gap-4 md:grid-cols-3">
|
||||
<SummaryCard icon={Building2} title={_(msg`Teams`)} value={insights.summary.totalTeams} />
|
||||
<SummaryCard icon={Users} title={_(msg`Members`)} value={insights.summary.totalMembers} />
|
||||
<SummaryCard
|
||||
icon={TrendingUp}
|
||||
title={_(msg`Documents Completed`)}
|
||||
value={insights.summary.volumeThisPeriod}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={view === 'teams' ? 'default' : 'outline'}
|
||||
onClick={() => handleViewChange('teams')}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{_(msg`Teams`)}
|
||||
</Button>
|
||||
<Button
|
||||
variant={view === 'users' ? 'default' : 'outline'}
|
||||
onClick={() => handleViewChange('users')}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{_(msg`Users`)}
|
||||
</Button>
|
||||
<Button
|
||||
variant={view === 'documents' ? 'default' : 'outline'}
|
||||
onClick={() => handleViewChange('documents')}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{_(msg`Documents`)}
|
||||
</Button>
|
||||
</div>
|
||||
<DateRangeFilter currentRange={dateRange} />
|
||||
</div>
|
||||
|
||||
<div className={view === 'documents' ? 'overflow-hidden' : undefined}>
|
||||
<DataTable<unknown, unknown>
|
||||
columns={getCurrentColumns()}
|
||||
data={getCurrentData()}
|
||||
perPage={perPage}
|
||||
currentPage={page}
|
||||
totalPages={insights.totalPages}
|
||||
onPaginationChange={onPaginationChange}
|
||||
>
|
||||
{(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
{isLoading && (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
const SummaryCard = ({
|
||||
icon: Icon,
|
||||
title,
|
||||
value,
|
||||
subtitle,
|
||||
}: {
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
title: string;
|
||||
value: number;
|
||||
subtitle?: string;
|
||||
}) => (
|
||||
<div className="bg-card flex items-start gap-x-2 rounded-lg border px-4 py-3">
|
||||
<Icon className="text-muted-foreground h-4 w-4 items-start" />
|
||||
<div className="-mt-0.5 space-y-2">
|
||||
<p className="text-muted-foreground text-sm font-medium">{title}</p>
|
||||
<p className="text-2xl font-bold">{value}</p>
|
||||
{subtitle && <p className="text-muted-foreground text-xs">{subtitle}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
Reference in New Issue
Block a user