feat: add user conversion count to admin panel (#1150)

Displays the count of users who signed up after signing at least one
document in the admin panel

apps/marketing/content/blog/announcing-profiles.mdx

@@ -25,18 +25,20 @@ tags:
 > TLDR; We are launching a Documenso Profile where you can display your templates for everyone to sign at any time.
 
 ## Introducing Documenso Profiles
+
 Today, I’m excited to announce that we are launching Documenso Profiles 🎉 While we have been focussing on the conventional signing experience so far, Direct Links and now profiles are our first steps to bring some long-awaited innovation back to digital signatures.
 
 Documenso Profiles allows you to share any template with a public link in a very easy-to-understand way. Adding templates to your profiles allows everyone to sign your documents just when they need to. Forms, NDAs, Disclaimers, and even contracts are now available anytime they are needed. Profiles turn the classic signing flow on its head by letting the recipient sign first before the document’s owner becomes active. Booking links (e.g., Cal.com) and customer self-service portals (e.g., Stripe Billing Portal) are becoming the norm, so it’s time we did the same for signing.
 
 ## The Best Way to Share Your Singing Links
-With profiles, we want to offer you the best way to share your standing Documenso Template Links in a public place. You can add your Documenso Profile to your social profiles, Email footer, Video Description, or wherever your audience, customers, and partners interact with you. The profile will be a public, trusted place to ensure you know who you are dealing with. 
+
+With profiles, we want to offer you the best way to share your standing Documenso Template Links in a public place. You can add your Documenso Profile to your social profiles, Email footer, Video Description, or wherever your audience, customers, and partners interact with you. The profile will be a public, trusted place to ensure you know who you are dealing with.
 
 Looking at the classical social media fake profile problem, we know this is tricky to achieve. We will pay close attention to how profiles are used and how we can help the community use them easily and securely. As a first step towards this direction, we are introducing a trust badge next to your name. There will be 3 levels to start:
 
 - Free Users: No Badge
 - Paid Users: Green Badge
-- Early Adopters: Gold Badge 
+- Early Adopters: Gold Badge
 
 <figure>
   <MdxNextImage
@@ -49,11 +51,12 @@ Looking at the classical social media fake profile problem, we know this is tric
   <figcaption className="text-center">Add and remove templates anytime.</figcaption>
 </figure>
 
-
 ## An Open Economy built on Documenso
-We see offering profiles as a first step towards creating a full economy on top of the open signing ecosystem we envision. While we want to keep building the product with the community, we also want an economy to grow on the open tech we create. This includes using the tech (profiles) or offering service on top of the tech (hosting and customization). Our ecosystem is still young, and the goal is not to have Documenso Inc. as the only commercial actor but to fill our own niche in a global and thriving open ecosystem.  One of our guiding principles is solving things once and for all. While our focus will be on the core signing product, we want to enable others to offer templates for use on profiles or privately. A lot of contracts, forms, and other paperwork have been recreated countless times. Offering high-quality, peer-reviewed templates is a natural extension of the current platform. There will be free templates, offered as marketing for their creators, and paid templates, offered as actual products.
+
+We see offering profiles as a first step towards creating a full economy on top of the open signing ecosystem we envision. While we want to keep building the product with the community, we also want an economy to grow on the open tech we create. This includes using the tech (profiles) or offering service on top of the tech (hosting and customization). Our ecosystem is still young, and the goal is not to have Documenso Inc. as the only commercial actor but to fill our own niche in a global and thriving open ecosystem. One of our guiding principles is solving things once and for all. While our focus will be on the core signing product, we want to enable others to offer templates for use on profiles or privately. A lot of contracts, forms, and other paperwork have been recreated countless times. Offering high-quality, peer-reviewed templates is a natural extension of the current platform. There will be free templates, offered as marketing for their creators, and paid templates, offered as actual products.
 
 ## What's next
+
 While an open signing economy is really exciting, we know it will take time to mature. Building out a mature ecosystem for builders and entrepreneurs takes time. While this aspect of Documenso matures, we will be focussing on the core of the platform: Letting you integrate and embed Documenso wherever you want it.
 
 If you already have a Documenso account, you can [activate your profile here](https://app.documenso.com/settings/public-profile).

apps/marketing/content/blog/signing-an-nda-faster-with-documenso.mdx

@@ -25,11 +25,12 @@ tags:
 > TLDR; Documenso makes sending NDAs faster, faster with templates, and even still faster using direct links.
 
 ## What is an NDA?
+
 An NDA, or non-disclosure agreement, is a legal contract that establishes a confidential relationship. The parties involved agree not to disclose information covered by the agreement. NDAs are often used to protect sensitive information or trade secrets and to ensure that such information isn't made public by the recipient without permission. They are commonly used in business settings, such as during negotiations or when new employees are hired who will have access to proprietary information.
 
 ## Do I need an NDA?
-> Disclaimer: This is not legal advice, and the most important legal questions are often ultra-case-specific and should be discussed with a legal professional
 
+> Disclaimer: This is not legal advice, and the most important legal questions are often ultra-case-specific and should be discussed with a legal professional
 
 There is a solid amount of debate around the question of whether an NDA actually protects anyone and is worth the friction. Investors scoff at the idea of a startup requiring them to sign an NDA before disclosing their "billion dollar idea" as they see hundreds of them and are aware that without proper execution, there is nothing to protect.
 
@@ -38,6 +39,7 @@ In another classical example, a big company and a small company e.g. a startup,
 That being said, as with most contracts, NDAs can be useful if both parties keep the spirit of the agreement. In this case, detailing in writing what can and cannot be disclosed is good for managing expectations and building trust. NDAs are also common practice in merger and acquisition projects and are often part of hiring critical roles within a company.
 
 ### Level 1: Basic Signing
+
 If you need to sign an NDA, signing it with Documenso is incredibly fast already. Let's take a look at how to make it even faster. Simply uploading and sending is the most straightforward way to get this done. It works like this:
 
 - Upload the NDA PDF template
@@ -57,7 +59,9 @@ If you need to sign an NDA, signing it with Documenso is incredibly fast already
 ></video>
 
 ### Level 2: Using Templates
+
 If you have to sign the same NDA multiple times with different people, you can create a template to save time. Creating a template is just as easy as creating a document, just skipping the sending step. After creating the template for your NDA, you can create a signable document with just 1 click. Simply fill in the recipient email, and you are done.
+
 > Pro Tip: Check "Send Document" to immediately send it after filling out the recipient if you are familiar with the template.
 
 <video
@@ -74,6 +78,7 @@ If you have to sign the same NDA multiple times with different people, you can c
 </figcaption>
 
 ### Level 3: Using a Direct Link
+
 Using a pre-defined template is pretty fast, but can we make it even faster? Yes, we can! By adding a direct link to your NDA template and publishing it (internally or even externally). A [Direct Link](http://documenso.com/blog/announcing-direct-links) lets people sign your NDA without you lifting a finger. Everyone with access to the link can sign it at any time, making discussions of who sends what when a thing of the past. You can use Direct links with a pre-signed template for maximum convenience or with a second signer/ approver from your side to keep control over the process.
 
 You can try it here and [sign a demo NDA](https://documen.so/demo-nda) with me.
@@ -81,6 +86,7 @@ You can try it here and [sign a demo NDA](https://documen.so/demo-nda) with me.
 > Pro Tip: Use [Zapier](https://documen.so/zapier) to get notified of that platform of your choice as soon as someone signs your link.
 
 ## Conclusion
+
 Signing NDAs is not always effective, but it can be necessary, so be sure to use a tool to make it easy and fast. Documenso is a great DocuSign alternative that helps you get it done. If you need to get an NDA out today, you can use the [Documenso Free plan](https://documen.so/free), which gives you 5 signatures per month and 3 Direct Link templates.
 
 As always, we want to hear from you on [Twitter / X](https://twitter.com/eltimuro) (DMs are open) or [Discord](https://documen.so/discord) if you have any questions, ideas, or comments.

apps/marketing/content/changelog.mdx

@@ -3,27 +3,35 @@ title: Changelog - Documenso
 ---
 
 # Changelog
+
 Check out what's new in the latest version and read our thoughts on it. For more technical details, you can find our releases on GitHub [here](https://github.com/documenso/documenso/releases). You can find our [release candidates here](https://github.com/documenso/documenso/tags).
 
 ---
 
 ## v1.5.6 (latest)
+
 ### <small>Released 28th June 2024</small>
+
 > This release contains [11 fixes](https://github.com/documenso/documenso/releases/tag/v1.5.6)
 
 ### 🕗 Show Creation Time
+
 We are now displaying the document creation time in the documents view. This allows for easier identification of multiple documents created on the same day.
 
 ### 🔗 Direct Template Links
+
 With this release, we are introducing direct link templates. This allows you to statically link to any template and let anyone with the link sign it at any time. A new document is created in your account when a template is signed. Templates with direct links still support all other template features, allowing you to create intricate workflows triggered by the signers.
 
 Learn more about Direct Links [on our blog](https://documenso.com/blog/announcing-direct-links) or try them by signing the [Documenso Supporters Pledge](https://documen.so/pledge).
 
 ### 🛂 OpenID Connect (OIDC) Support
+
 Thanks to [Matt Kilgore](https://github.com/tankerkiller125), Documenso now supports OIDC as an authentication provider. This allows self-hosted users to define whatever identity provider they want as long as it supports the OIDC. Azure, Zitadel, Authentik, KeyCloak, and Google all support OIDC.
 
 ---
+
 ## v1.5.5
+
 ### <small>Released 6th May 2024</small>
 
 > This release contains [20 fixes](https://github.com/documenso/documenso/releases/tag/v1.5.5)
@@ -64,4 +72,4 @@ On the security/ compliance side, we also added Signing Certificates and Audit L
 
 We are pretty hyped about this one: Since version 0.9, we relied on https://github.com/vbuch/node-signpdf to add the digital signatures to our documents. Since signing is at the heart of Documenso, we created our own rust-based library for signing. As of 1.5.4, Documenso's signing runs on @documenso/pdf-sign. The library offers a better architecture to enable signing with private keys that are not stored locally (e.g. via HSM). We are in the process of cleaning up the library to open source it like the rest of Documenso 🌱 The library will also help us to offer Long Term Validation (LTV) for signatures soon. While we are currently limited to signing with PKCS7-B, eventually, we plan to support all common signing standards like PAdES, CAdES, and XAdES.
 
----
+---

apps/web/src/app/(dashboard)/admin/nav.tsx

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { BarChart3, FileStack, Settings, User2, Wallet2 } from 'lucide-react';
+import { BarChart3, FileStack, Settings, Users, Wallet2 } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -46,7 +46,7 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
         asChild
       >
         <Link href="/admin/users">
-          <User2 className="mr-2 h-5 w-5" />
+          <Users className="mr-2 h-5 w-5" />
           Users
         </Link>
       </Button>

apps/web/src/app/(dashboard)/admin/stats/page.tsx

@@ -2,27 +2,28 @@ import {
   File,
   FileCheck,
   FileClock,
+  FileCog,
   FileEdit,
   Mail,
   MailOpen,
   PenTool,
-  User as UserIcon,
-  UserPlus2,
+  UserPlus,
   UserSquare2,
+  Users,
 } from 'lucide-react';
 
 import { getDocumentStats } from '@documenso/lib/server-only/admin/get-documents-stats';
 import { getRecipientsStats } from '@documenso/lib/server-only/admin/get-recipients-stats';
 import {
-  getUserWithAtLeastOneDocumentPerMonth,
-  getUserWithAtLeastOneDocumentSignedPerMonth,
   getUserWithSignedDocumentMonthlyGrowth,
   getUsersCount,
   getUsersWithSubscriptionsCount,
 } from '@documenso/lib/server-only/admin/get-users-stats';
+import { getSignerConversionMonthly } from '@documenso/lib/server-only/user/get-signer-conversion';
 
 import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
 
+import { SignerConversionChart } from './signer-conversion-chart';
 import { UserWithDocumentChart } from './user-with-document';
 
 export default async function AdminStatsPage() {
@@ -31,16 +32,18 @@ export default async function AdminStatsPage() {
     usersWithSubscriptionsCount,
     docStats,
     recipientStats,
-    userWithAtLeastOneDocumentPerMonth,
-    userWithAtLeastOneDocumentSignedPerMonth,
+    signerConversionMonthly,
+    // userWithAtLeastOneDocumentPerMonth,
+    // userWithAtLeastOneDocumentSignedPerMonth,
     MONTHLY_USERS_SIGNED,
   ] = await Promise.all([
     getUsersCount(),
     getUsersWithSubscriptionsCount(),
     getDocumentStats(),
     getRecipientsStats(),
-    getUserWithAtLeastOneDocumentPerMonth(),
-    getUserWithAtLeastOneDocumentSignedPerMonth(),
+    getSignerConversionMonthly(),
+    // getUserWithAtLeastOneDocumentPerMonth(),
+    // getUserWithAtLeastOneDocumentSignedPerMonth(),
     getUserWithSignedDocumentMonthlyGrowth(),
   ]);
 
@@ -49,14 +52,15 @@ export default async function AdminStatsPage() {
       <h2 className="text-4xl font-semibold">Instance Stats</h2>
 
       <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <CardMetric icon={UserIcon} title="Total Users" value={usersCount} />
+        <CardMetric icon={Users} title="Total Users" value={usersCount} />
         <CardMetric icon={File} title="Total Documents" value={docStats.ALL} />
         <CardMetric
-          icon={UserPlus2}
+          icon={UserPlus}
           title="Active Subscriptions"
           value={usersWithSubscriptionsCount}
         />
-        <CardMetric icon={UserPlus2} title="App Version" value={`v${process.env.APP_VERSION}`} />
+
+        <CardMetric icon={FileCog} title="App Version" value={`v${process.env.APP_VERSION}`} />
       </div>
 
       <div className="mt-16 gap-8">
@@ -88,7 +92,7 @@ export default async function AdminStatsPage() {
 
       <div className="mt-16">
         <h3 className="text-3xl font-semibold">Charts</h3>
-        <div className="mt-5 grid grid-cols-2 gap-10">
+        <div className="mt-5 grid grid-cols-2 gap-8">
           <UserWithDocumentChart
             data={MONTHLY_USERS_SIGNED}
             title="MAU (created document)"
@@ -100,6 +104,12 @@ export default async function AdminStatsPage() {
             title="MAU (had document completed)"
             tooltip="Monthly Active Users: Users that had at least one of their documents completed"
           />
+          <SignerConversionChart title="Signers that Signed Up" data={signerConversionMonthly} />
+          <SignerConversionChart
+            title="Total Signers that Signed Up"
+            data={signerConversionMonthly}
+            cummulative
+          />
         </div>
       </div>
     </div>

apps/web/src/app/(dashboard)/admin/stats/signer-conversion-chart.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetSignerConversionMonthlyResult } from '@documenso/lib/server-only/user/get-signer-conversion';
+
+export type SignerConversionChartProps = {
+  className?: string;
+  title: string;
+  cummulative?: boolean;
+  data: GetSignerConversionMonthlyResult;
+};
+
+export const SignerConversionChart = ({
+  className,
+  data,
+  title,
+  cummulative = false,
+}: SignerConversionChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, count, cume_count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('MMM yyyy'),
+      count: Number(count),
+      signed_count: Number(cume_count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">{title}</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value, name) => [
+                Number(value).toLocaleString('en-US'),
+                name === 'Recipients',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey={cummulative ? 'signed_count' : 'count'}
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Recipients"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/admin/stats/user-with-document.tsx

@@ -68,7 +68,7 @@ export const UserWithDocumentChart = ({
         </div>
 
         <ResponsiveContainer width="100%" height={400}>
-          <BarChart className="bg-white" data={formattedData(data, completed)}>
+          <BarChart data={formattedData(data, completed)}>
             <XAxis dataKey="month" />
             <YAxis />
 

apps/web/src/components/(dashboard)/metric-card/metric-card.tsx

@@ -25,7 +25,7 @@ export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricPr
             </div>
           )}
 
-          <h3 className="text-primary-forground flex items-end text-sm font-medium leading-tight">
+          <h3 className="text-primary-forground mb-2 flex items-end text-sm font-medium leading-tight">
             {title}
           </h3>
         </div>