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

feat: team analytics

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2025-08-20 15:19:09 +00:00
parent a51110d276
commit 202702b1c7
16 changed files with 834 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
apps/remix/app/components/analytics/analytics-metrics.tsx Normal file
View File

@ -0,0 +1,105 @@
import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react';
import { Trans } from '@lingui/react/macro';
import {
File,
FileCheck,
FileClock,
FileEdit,
Mail,
MailOpen,
PenTool,
UserSquare2,
} from 'lucide-react';
import type { DocumentStats, RecipientStats } from '@documenso/lib/server-only/analytics';
import { cn } from '@documenso/ui/lib/utils';
import { CardMetric } from '~/components/general/metric-card';
export type AnalyticsMetricsProps = {
docStats: DocumentStats;
recipientStats: RecipientStats;
isLoading?: boolean;
className?: string;
};
export const AnalyticsMetrics = ({
docStats,
recipientStats,
isLoading = false,
className,
}: AnalyticsMetricsProps) => {
const { _ } = useLingui();
return (
<div className={className}>
{/* Overview Metrics */}
<div
className={cn('grid flex-1 grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4', {
'pointer-events-none opacity-50': isLoading,
})}
>
<CardMetric icon={File} title={_(msg`Total Documents`)} value={docStats.ALL} />
<CardMetric
icon={FileCheck}
title={_(msg`Completed Documents`)}
value={docStats.COMPLETED}
/>
<CardMetric
icon={UserSquare2}
title={_(msg`Total Recipients`)}
value={recipientStats.TOTAL_RECIPIENTS}
/>
<CardMetric
icon={PenTool}
title={_(msg`Signatures Collected`)}
value={recipientStats.SIGNED}
/>
</div>
{/* Document Metrics Section */}
<div className="mt-16">
<h3 className="text-3xl font-semibold">
<Trans>Document metrics</Trans>
</h3>
<div className="mb-8 mt-4 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
<CardMetric icon={FileEdit} title={_(msg`Drafted Documents`)} value={docStats.DRAFT} />
<CardMetric icon={FileClock} title={_(msg`Pending Documents`)} value={docStats.PENDING} />
<CardMetric
icon={FileCheck}
title={_(msg`Completed Documents`)}
value={docStats.COMPLETED}
/>
</div>
</div>
{/* Recipients Metrics Section */}
<div>
<h3 className="text-3xl font-semibold">
<Trans>Recipients metrics</Trans>
</h3>
<div className="mb-8 mt-4 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
<CardMetric
icon={UserSquare2}
title={_(msg`Total Recipients`)}
value={recipientStats.TOTAL_RECIPIENTS}
/>
<CardMetric icon={Mail} title={_(msg`Documents Sent`)} value={recipientStats.SENT} />
<CardMetric
icon={MailOpen}
title={_(msg`Documents Viewed`)}
value={recipientStats.OPENED}
/>
<CardMetric
icon={PenTool}
title={_(msg`Signatures Collected`)}
value={recipientStats.SIGNED}
/>
</div>
</div>
</div>
);
};