handleColumnSort('createdAt')}>
Created
diff --git a/apps/remix/app/components/tables/admin-organisation-stats-table.tsx b/apps/remix/app/components/tables/admin-organisation-stats-table.tsx
new file mode 100644
index 000000000..d3233bacf
--- /dev/null
+++ b/apps/remix/app/components/tables/admin-organisation-stats-table.tsx
@@ -0,0 +1,269 @@
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { currentMonthlyPeriod } from '@documenso/lib/universal/monthly-period';
+import { trpc } from '@documenso/trpc/react';
+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 { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+import { useLingui } from '@lingui/react/macro';
+import { ChevronDownIcon, ChevronsUpDownIcon, ChevronUpIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import { Link, useSearchParams } from 'react-router';
+
+type OrderByColumn = 'documentCount' | 'emailCount' | 'apiCount' | 'emailReports' | 'totalCount';
+type OrderByDirection = 'asc' | 'desc';
+
+const parseOrderByColumn = (value: string | undefined): OrderByColumn | undefined => {
+ if (
+ value === 'documentCount' ||
+ value === 'emailCount' ||
+ value === 'apiCount' ||
+ value === 'emailReports' ||
+ value === 'totalCount'
+ ) {
+ return value;
+ }
+
+ return undefined;
+};
+
+const parseOrderByDirection = (value: string | undefined): OrderByDirection => {
+ return value === 'asc' ? 'asc' : 'desc';
+};
+
+/**
+ * Number of days to divide the period's usage by to get a per-day average.
+ *
+ * For the in-progress (current) month we divide by today's UTC day-of-month so the
+ * average reflects elapsed days only. For a fully-elapsed past month we divide by the
+ * total number of days in that month.
+ */
+const getPeriodDivisor = (period: string): number => {
+ if (period === currentMonthlyPeriod()) {
+ return new Date().getUTCDate();
+ }
+
+ const [yearStr, monthStr] = period.split('-');
+ const year = Number(yearStr);
+ const month = Number(monthStr);
+
+ if (Number.isNaN(year) || Number.isNaN(month)) {
+ return new Date().getUTCDate();
+ }
+
+ // Day 0 of the following month resolves to the last day of `month`.
+ return new Date(Date.UTC(year, month, 0)).getUTCDate();
+};
+
+export type OrganisationStatsDisplayMode = 'usage' | 'quotas' | 'averages';
+
+type AdminOrganisationStatsTableProps = {
+ displayMode?: OrganisationStatsDisplayMode;
+};
+
+export const AdminOrganisationStatsTable = ({ displayMode = 'usage' }: AdminOrganisationStatsTableProps) => {
+ const { t } = useLingui();
+
+ const [searchParams, setSearchParams] = useSearchParams();
+ const updateSearchParams = useUpdateSearchParams();
+
+ const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
+
+ // Default to the current month.
+ const period = searchParams?.get('period') ?? currentMonthlyPeriod();
+ const claimId = searchParams?.get('claimId') || undefined;
+ const orderByColumn = parseOrderByColumn(searchParams?.get('orderByColumn') ?? undefined);
+ const orderByDirection = parseOrderByDirection(searchParams?.get('orderByDirection') ?? undefined);
+
+ const { data, isLoading, isLoadingError } = trpc.admin.organisation.stats.find.useQuery({
+ query: parsedSearchParams.query,
+ page: parsedSearchParams.page,
+ perPage: parsedSearchParams.perPage,
+ period,
+ claimId,
+ orderByColumn,
+ orderByDirection,
+ });
+
+ const onPaginationChange = (page: number, perPage: number) => {
+ updateSearchParams({
+ page,
+ perPage,
+ });
+ };
+
+ const handleColumnSort = (column: OrderByColumn) => {
+ const nextDirection = orderByColumn === column && orderByDirection === 'desc' ? 'asc' : 'desc';
+
+ // Use the functional updater so we merge onto the latest params. Reading the
+ // captured `searchParams` here would drop filters (e.g. claimId) that changed
+ // after this handler was memoised into the column definitions.
+ setSearchParams((previous) => {
+ const next = new URLSearchParams(previous);
+
+ next.set('orderByColumn', column);
+ next.set('orderByDirection', nextDirection);
+ next.set('page', '1');
+
+ return next;
+ });
+ };
+
+ const results = data ?? {
+ data: [],
+ perPage: 10,
+ currentPage: 1,
+ totalPages: 1,
+ };
+
+ const columns = useMemo(() => {
+ const divisor = getPeriodDivisor(period);
+
+ const formatPerDay = (used: number) => {
+ const perDay = divisor > 0 ? used / divisor : 0;
+ const rounded = Math.round(perDay * 10) / 10;
+
+ return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);
+ };
+
+ const renderUsageCell = (used: number, quota: number | null) => {
+ if (displayMode === 'averages') {
+ return formatPerDay(used);
+ }
+
+ if (displayMode === 'quotas') {
+ return (
+
+ {used}/{quota === null ? '∞' : quota}
+
+ );
+ }
+
+ return
{used};
+ };
+
+ const sortableHeader = (label: string, column: OrderByColumn) => (
+
+ );
+
+ return [
+ {
+ header: t`Organisation`,
+ accessorKey: 'organisationName',
+ cell: ({ row }) => (
+
+ {row.original.organisationName}
+
+ ),
+ },
+ {
+ header: t`Claim`,
+ accessorKey: 'originalClaimId',
+ cell: ({ row }) =>
{row.original.originalClaimId ?? '—'},
+ },
+ {
+ header: t`Period`,
+ accessorKey: 'period',
+ cell: ({ row }) =>
{row.original.period},
+ },
+ {
+ header: () => sortableHeader(t`Documents`, 'documentCount'),
+ accessorKey: 'documentCount',
+ cell: ({ row }) => renderUsageCell(row.original.documentCount, row.original.documentQuota),
+ },
+ {
+ header: () => sortableHeader(t`Emails`, 'emailCount'),
+ accessorKey: 'emailCount',
+ cell: ({ row }) => renderUsageCell(row.original.emailCount, row.original.emailQuota),
+ },
+ {
+ header: () => sortableHeader(t`API`, 'apiCount'),
+ accessorKey: 'apiCount',
+ cell: ({ row }) => renderUsageCell(row.original.apiCount, row.original.apiQuota),
+ },
+ {
+ header: () => sortableHeader(t`Reports`, 'emailReports'),
+ accessorKey: 'emailReports',
+ cell: ({ row }) => row.original.emailReports,
+ },
+ {
+ header: () => sortableHeader(t`Total`, 'totalCount'),
+ accessorKey: 'totalCount',
+ cell: ({ row }) =>
{row.original.totalCount},
+ },
+ ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+ // `searchParams` must be a dependency: `handleColumnSort` closes over `setSearchParams`,
+ // whose functional updater is bound to the `searchParams` captured at creation time.
+ // Without this, changing a filter (e.g. claimId) wouldn't refresh the memoised handler,
+ // and sorting would merge onto stale params and drop the active filter.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [t, orderByColumn, orderByDirection, period, displayMode, searchParams]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ }}
+ >
+ {(table) => }
+
+
+ );
+};
diff --git a/apps/remix/app/components/tables/admin-organisations-table.tsx b/apps/remix/app/components/tables/admin-organisations-table.tsx
index 144fb20b8..ee336af8d 100644
--- a/apps/remix/app/components/tables/admin-organisations-table.tsx
+++ b/apps/remix/app/components/tables/admin-organisations-table.tsx
@@ -1,17 +1,3 @@
-import { useMemo, useState } from 'react';
-
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
-import {
- ArrowRightLeftIcon,
- CreditCardIcon,
- ExternalLinkIcon,
- MoreHorizontalIcon,
- SettingsIcon,
- UserIcon,
-} from 'lucide-react';
-import { Link, useSearchParams } from 'react-router';
-
import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
import { SUBSCRIPTION_STATUS_MAP } from '@documenso/lib/constants/billing';
import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
@@ -29,6 +15,17 @@ import {
} from '@documenso/ui/primitives/dropdown-menu';
import { Skeleton } from '@documenso/ui/primitives/skeleton';
import { TableCell } from '@documenso/ui/primitives/table';
+import { Trans, useLingui } from '@lingui/react/macro';
+import {
+ ArrowRightLeftIcon,
+ CreditCardIcon,
+ ExternalLinkIcon,
+ MoreHorizontalIcon,
+ SettingsIcon,
+ UserIcon,
+} from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { Link, useSearchParams } from 'react-router';
import { AdminSwapSubscriptionDialog } from '~/components/dialogs/admin-swap-subscription-dialog';
@@ -85,9 +82,7 @@ export const AdminOrganisationsTable = ({
{
header: t`Organisation`,
accessorKey: 'name',
- cell: ({ row }) => (
-
{row.original.name}
- ),
+ cell: ({ row }) =>
{row.original.name},
},
{
header: t`Created At`,
@@ -97,17 +92,13 @@ export const AdminOrganisationsTable = ({
{
header: t`Owner`,
accessorKey: 'owner',
- cell: ({ row }) => (
-
{row.original.owner.name}
- ),
+ cell: ({ row }) =>
{row.original.owner.name},
},
{
id: 'role',
header: t`Role`,
cell: ({ row }) => (
-
- {row.original.owner.id === memberUserId ? t`Owner` : t`Member`}
-
+
{row.original.owner.id === memberUserId ? t`Owner` : t`Member`}
),
},
{
@@ -118,7 +109,7 @@ export const AdminOrganisationsTable = ({
const isPaid = subscription && subscription.status === 'ACTIVE';
return (
@@ -183,8 +174,7 @@ export const AdminOrganisationsTable = ({
{row.original.subscription &&
- (row.original.subscription.status === 'ACTIVE' ||
- row.original.subscription.status === 'PAST_DUE') && (
+ (row.original.subscription.status === 'ACTIVE' || row.original.subscription.status === 'PAST_DUE') && (
setSwapSource({
@@ -248,7 +238,7 @@ export const AdminOrganisationsTable = ({
}}
>
{(table) =>
- !hidePaginationUntilOverflow || 1 > table.getPageCount() ? (
+ !hidePaginationUntilOverflow || table.getPageCount() > 1 ? (
) : null
}
diff --git a/apps/remix/app/components/tables/admin-user-teams-table.tsx b/apps/remix/app/components/tables/admin-user-teams-table.tsx
index 39eaaa5b4..901205b1c 100644
--- a/apps/remix/app/components/tables/admin-user-teams-table.tsx
+++ b/apps/remix/app/components/tables/admin-user-teams-table.tsx
@@ -1,9 +1,3 @@
-import { useMemo } from 'react';
-
-import { useLingui } from '@lingui/react';
-import { useLingui as useLinguiMacro } from '@lingui/react/macro';
-import { Link, useSearchParams } from 'react-router';
-
import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
@@ -16,6 +10,10 @@ import { DataTablePagination } from '@documenso/ui/primitives/data-table-paginat
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@documenso/ui/primitives/hover-card';
import { Skeleton } from '@documenso/ui/primitives/skeleton';
import { TableCell } from '@documenso/ui/primitives/table';
+import { useLingui } from '@lingui/react';
+import { useLingui as useLinguiMacro } from '@lingui/react/macro';
+import { useMemo } from 'react';
+import { Link, useSearchParams } from 'react-router';
type AdminUserTeamsTableProps = {
userId: number;
@@ -61,10 +59,7 @@ export const AdminUserTeamsTable = ({ userId }: AdminUserTeamsTableProps) => {
{row.original.name}
-
+
- id
- {row.original.id}
@@ -79,10 +74,7 @@ export const AdminUserTeamsTable = ({ userId }: AdminUserTeamsTableProps) => {
header: t`Organisation`,
accessorKey: 'organisation',
cell: ({ row }) => (
-
+
{row.original.organisation.name}
),
@@ -91,9 +83,7 @@ export const AdminUserTeamsTable = ({ userId }: AdminUserTeamsTableProps) => {
header: t`Role`,
accessorKey: 'teamRole',
cell: ({ row }) => (
-
- {i18n._(TEAM_MEMBER_ROLE_MAP[row.original.teamRole as TeamMemberRole])}
-
+ {i18n._(TEAM_MEMBER_ROLE_MAP[row.original.teamRole as TeamMemberRole])}
),
},
{
@@ -137,9 +127,7 @@ export const AdminUserTeamsTable = ({ userId }: AdminUserTeamsTableProps) => {
}}
>
{(table) =>
- table.getPageCount() > 1 ? (
-
- ) : null
+ table.getPageCount() > 1 ? : null
}
);
diff --git a/apps/remix/app/components/tables/document-logs-table.tsx b/apps/remix/app/components/tables/document-logs-table.tsx
index c37235130..892a27a50 100644
--- a/apps/remix/app/components/tables/document-logs-table.tsx
+++ b/apps/remix/app/components/tables/document-logs-table.tsx
@@ -1,13 +1,3 @@
-import { useMemo } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { DateTime } from 'luxon';
-import type { DateTimeFormatOptions } from 'luxon';
-import { useSearchParams } from 'react-router';
-import { UAParser } from 'ua-parser-js';
-
import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
import { formatDocumentAuditLogAction } from '@documenso/lib/utils/document-audit-logs';
@@ -17,6 +7,14 @@ import { DataTable } from '@documenso/ui/primitives/data-table';
import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
import { Skeleton } from '@documenso/ui/primitives/skeleton';
import { TableCell } from '@documenso/ui/primitives/table';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { DateTimeFormatOptions } from 'luxon';
+import { DateTime } from 'luxon';
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router';
+import { UAParser } from 'ua-parser-js';
export type DocumentLogsTableProps = {
documentId: number;
@@ -97,9 +95,7 @@ export const DocumentLogsTable = ({ documentId, userId }: DocumentLogsTableProps
{
header: _(msg`Action`),
accessorKey: 'type',
- cell: ({ row }) => (
- {formatDocumentAuditLogAction(i18n, row.original, userId).description}
- ),
+ cell: ({ row }) => {formatDocumentAuditLogAction(i18n, row.original, userId).description},
},
{
header: _(msg`IP Address`),
diff --git a/apps/remix/app/components/tables/documents-table-action-button.tsx b/apps/remix/app/components/tables/documents-table-action-button.tsx
index 506c6afa0..a6e9a9edd 100644
--- a/apps/remix/app/components/tables/documents-table-action-button.tsx
+++ b/apps/remix/app/components/tables/documents-table-action-button.tsx
@@ -1,15 +1,14 @@
-import { Trans } from '@lingui/react/macro';
-import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
-import { CheckCircle, Download, Edit, EyeIcon, Pencil } from 'lucide-react';
-import { Link } from 'react-router';
-import { match } from 'ts-pattern';
-
import { useSession } from '@documenso/lib/client-only/providers/session';
import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
import { isDocumentCompleted } from '@documenso/lib/utils/document';
import { findRecipientByEmail } from '@documenso/lib/utils/recipients';
import { formatDocumentsPath } from '@documenso/lib/utils/teams';
import { Button } from '@documenso/ui/primitives/button';
+import { Trans } from '@lingui/react/macro';
+import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
+import { CheckCircle, Download, Edit, EyeIcon, Pencil } from 'lucide-react';
+import { Link } from 'react-router';
+import { match } from 'ts-pattern';
import { useCurrentTeam } from '~/providers/team';
@@ -57,36 +56,33 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
isCurrentTeamDocument,
internalVersion: row.internalVersion,
})
- .with(
- isOwner ? { isDraft: true, isOwner: true } : { isDraft: true, isCurrentTeamDocument: true },
- () => (
-
- ),
- )
+ .with(isOwner ? { isDraft: true, isOwner: true } : { isDraft: true, isCurrentTeamDocument: true }, () => (
+
+ ))
.with({ isRecipient: true, isPending: true, isSigned: false }, () => (