fix: use custom status widget

apps/marketing/package.json

@@ -19,6 +19,7 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
+    "@openstatus/react": "^0.0.3",
     "contentlayer": "^0.3.4",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.279.0",

apps/marketing/src/app/(marketing)/layout.tsx

@@ -1,78 +1,14 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-
-import Image from 'next/image';
-import { usePathname } from 'next/navigation';
-
-import launchWeekTwoImage from '@documenso/assets/images/background-lw-2.png';
-import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import { cn } from '@documenso/ui/lib/utils';
-
 import { Footer } from '~/components/(marketing)/footer';
-import { Header } from '~/components/(marketing)/header';
+import { LayoutHeader } from '~/components/(marketing)/layout-header';
 
 export type MarketingLayoutProps = {
   children: React.ReactNode;
 };
 
 export default function MarketingLayout({ children }: MarketingLayoutProps) {
-  const [scrollY, setScrollY] = useState(0);
-  const pathname = usePathname();
-
-  const { getFlag } = useFeatureFlags();
-
-  const showProfilesAnnouncementBar = getFlag('marketing_profiles_announcement_bar');
-
-  useEffect(() => {
-    const onScroll = () => {
-      setScrollY(window.scrollY);
-    };
-
-    window.addEventListener('scroll', onScroll);
-
-    return () => window.removeEventListener('scroll', onScroll);
-  }, []);
-
   return (
-    <div
+    <div className="relative flex min-h-[100vh] max-w-[100vw] flex-col overflow-y-auto overflow-x-hidden pt-20 md:pt-28">
-      className={cn('relative flex min-h-[100vh] max-w-[100vw] flex-col pt-20 md:pt-28', {
+      <LayoutHeader />
-        'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
-      })}
-    >
-      <div
-        className={cn('fixed left-0 top-0 z-50 w-full bg-transparent', {
-          'bg-background/50 backdrop-blur-md': scrollY > 5,
-        })}
-      >
-        {showProfilesAnnouncementBar && (
-          <div className="relative inline-flex w-full items-center justify-center overflow-hidden px-4 py-2.5">
-            <div className="absolute inset-0 -z-[1]">
-              <Image
-                src={launchWeekTwoImage}
-                className="h-full w-full object-cover"
-                alt="Launch Week 2"
-              />
-            </div>
-
-            <div className="text-background text-center text-sm text-white">
-              Claim your documenso public profile username now!{' '}
-              <span className="hidden font-semibold md:inline">documenso.com/u/yourname</span>
-              <div className="mt-1.5 block md:ml-4 md:mt-0 md:inline-block">
-                <a
-                  href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=marketing-announcement-bar`}
-                  className="bg-background text-foreground rounded-md px-2.5 py-1 text-xs font-medium duration-300"
-                >
-                  Claim Now
-                </a>
-              </div>
-            </div>
-          </div>
-        )}
-
-        <Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
-      </div>
 
       <div className="relative max-w-screen-xl flex-1 px-4 sm:mx-auto lg:px-8">{children}</div>
 

apps/marketing/src/app/(marketing)/open/bar-metrics.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLDivElement> & {
   data: T;
@@ -34,13 +33,13 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
     .reverse();
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
+    <div className={className} {...props}>
-      <div className="flex items-center px-4">
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
           <h3 className="text-lg font-semibold">{title}</h3>
           <span>{extraInfo}</span>
         </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={chartHeight}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />

apps/marketing/src/app/(marketing)/open/cap-table.tsx

@@ -5,8 +5,6 @@ import { useEffect, useState } from 'react';
 
 import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';
 
-import { cn } from '@documenso/ui/lib/utils';
-
 import { CAP_TABLE } from './data';
 
 const COLORS = ['#7fd843', '#a2e771', '#c6f2a4'];
@@ -49,10 +47,12 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
     setIsSSR(false);
   }, []);
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
+    <div className={className} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Cap Table</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
         {!isSSR && (
           <PieChart width={400} height={400}>
             <Pie

apps/marketing/src/app/(marketing)/open/funding-raised.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
   data: Record<string, string | number>[];
@@ -18,10 +17,12 @@ export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps)
   }));
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
+    <div className={className} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Funding Raised</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
             <XAxis dataKey="date" />

apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx

@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyCompletedDocumentsChartProps = {
   className?: string;
@@ -23,12 +22,12 @@ export const MonthlyCompletedDocumentsChart = ({
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
+    <div className={className}>
-      <div className="flex items-center px-4">
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
           <h3 className="text-lg font-semibold">Completed Documents per Month</h3>
         </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />
@@ -38,7 +37,7 @@ export const MonthlyCompletedDocumentsChart = ({
               labelStyle={{
                 color: 'hsl(var(--primary-foreground))',
               }}
-              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Total Users']}
+              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Completed Documents']}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
 
@@ -47,7 +46,7 @@ export const MonthlyCompletedDocumentsChart = ({
               fill="hsl(var(--primary))"
               radius={[4, 4, 0, 0]}
               maxBarSize={60}
-              label="Completed Documents per Month"
+              label="Completed Documents"
             />
           </BarChart>
         </ResponsiveContainer>

apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx

@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyNewUsersChartProps = {
   className?: string;
@@ -20,12 +19,12 @@ export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartPr
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
+    <div className={className}>
-      <div className="flex items-center px-4">
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
           <h3 className="text-lg font-semibold">New Users</h3>
         </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />

apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx

@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyTotalUsersChartProps = {
   className?: string;
@@ -20,12 +19,12 @@ export const MonthlyTotalUsersChart = ({ className, data }: MonthlyTotalUsersCha
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
+    <div className={className}>
-      <div className="flex items-center px-4">
+      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
           <h3 className="text-lg font-semibold">Total Users</h3>
         </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -6,18 +6,19 @@ import { getCompletedDocumentsMonthly } from '@documenso/lib/server-only/user/ge
 import { getUserMonthlyGrowth } from '@documenso/lib/server-only/user/get-user-monthly-growth';
 
 import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
-import { MetricCard } from '~/app/(marketing)/open/metric-card';
-import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 import { CallToAction } from '~/components/(marketing)/call-to-action';
 
 import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
-import { MonthlyCompletedDocumentsChart } from './monthly-completed-documents-chart copy';
+import { MetricCard } from './metric-card';
+import { MonthlyCompletedDocumentsChart } from './monthly-completed-documents-chart';
 import { MonthlyNewUsersChart } from './monthly-new-users-chart';
 import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
+import { SalaryBands } from './salary-bands';
 import { TeamMembers } from './team-members';
 import { OpenPageTooltip } from './tooltip';
+import { TotalSignedDocumentsChart } from './total-signed-documents-chart';
 import { Typefully } from './typefully';
 
 export const metadata: Metadata = {
@@ -133,17 +134,18 @@ export default async function OpenPage() {
     { total_count: mergedPullRequests },
     STARGAZERS_DATA,
     EARLY_ADOPTERS_DATA,
+    MONTHLY_USERS,
+    MONTHLY_COMPLETED_DOCUMENTS,
   ] = await Promise.all([
     fetchGithubStats(),
     fetchOpenIssues(),
     fetchMergedPullRequests(),
     fetchStargazers(),
     fetchEarlyAdopters(),
+    getUserMonthlyGrowth(),
+    getCompletedDocumentsMonthly(),
   ]);
 
-  const MONTHLY_USERS = await getUserMonthlyGrowth();
-  const MONTHLY_COMPLETED_DOCUMENTS = await getCompletedDocumentsMonthly();
-
   return (
     <div>
       <div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
@@ -205,7 +207,7 @@ export default async function OpenPage() {
           <BarMetric<StargazersType>
             data={STARGAZERS_DATA}
             metricKey="stars"
-            title="Github: Total Stars"
+            title="GitHub: Total Stars"
             label="Stars"
             className="col-span-12 lg:col-span-6"
           />
@@ -213,27 +215,27 @@ export default async function OpenPage() {
           <BarMetric<StargazersType>
             data={STARGAZERS_DATA}
             metricKey="mergedPRs"
-            title="Github: Total Merged PRs"
+            title="GitHub: Total Merged PRs"
             label="Merged PRs"
-            chartHeight={300}
+            chartHeight={400}
             className="col-span-12 lg:col-span-6"
           />
 
           <BarMetric<StargazersType>
             data={STARGAZERS_DATA}
             metricKey="forks"
-            title="Github: Total Forks"
+            title="GitHub: Total Forks"
             label="Forks"
-            chartHeight={300}
+            chartHeight={400}
             className="col-span-12 lg:col-span-6"
           />
 
           <BarMetric<StargazersType>
             data={STARGAZERS_DATA}
             metricKey="openIssues"
-            title="Github: Total Open Issues"
+            title="GitHub: Total Open Issues"
             label="Open Issues"
-            chartHeight={300}
+            chartHeight={400}
             className="col-span-12 lg:col-span-6"
           />
 
@@ -258,6 +260,10 @@ export default async function OpenPage() {
             data={MONTHLY_COMPLETED_DOCUMENTS}
             className="col-span-12 lg:col-span-6"
           />
+          <TotalSignedDocumentsChart
+            data={MONTHLY_COMPLETED_DOCUMENTS}
+            className="col-span-12 lg:col-span-6"
+          />
         </div>
       </div>
 

apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+
+export type TotalSignedDocumentsChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const TotalSignedDocumentsChart = ({ className, data }: TotalSignedDocumentsChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, cume_count: count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Completed Documents</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [
+                Number(value).toLocaleString('en-US'),
+                'Total Completed Documents',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Total Completed Documents"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/typefully.tsx

@@ -6,18 +6,19 @@ import Link from 'next/link';
 
 import { FaXTwitter } from 'react-icons/fa6';
 
-import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
 export type TypefullyProps = HTMLAttributes<HTMLDivElement>;
 
 export const Typefully = ({ className, ...props }: TypefullyProps) => {
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
+    <div className={className} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Twitter Stats</h3>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Twitter Stats</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border py-8 shadow-sm hover:shadow">
+        <div className="my-12 flex flex-col items-center gap-y-4 text-center">
-        <div className="flex flex-col items-center gap-y-4 text-center">
           <FaXTwitter className="h-12 w-12" />
           <Link href="https://typefully.com/documenso/stats" target="_blank">
             <h1>Documenso on X</h1>

apps/marketing/src/app/(marketing)/singleplayer/client.tsx

@@ -184,6 +184,7 @@ export const SinglePlayerClient = () => {
   };
 
   return (
+    <div className="overflow-x-auto overflow-y-hidden">
       <div className="mt-6 sm:mt-12">
         <div className="text-center">
           <h1 className="text-3xl font-bold lg:text-5xl">Single Player Mode</h1>
@@ -264,5 +265,6 @@ export const SinglePlayerClient = () => {
           </div>
         </div>
       </div>
+    </div>
   );
 };

apps/marketing/src/components/(marketing)/callout.tsx

@@ -53,7 +53,7 @@ export const Callout = ({ starCount }: CalloutProps) => {
       >
         <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
           <LuGithub className="mr-2 h-5 w-5" />
-          Star on Github
+          Star on GitHub
           {starCount && starCount > 0 && (
             <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
               {starCount.toLocaleString('en-US')}

apps/marketing/src/components/(marketing)/footer.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
@@ -13,6 +11,8 @@ import LogoImage from '@documenso/assets/logo.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
+import { StatusWidget } from './status-widget';
+
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
 const SOCIAL_LINKS = [
@@ -62,6 +62,10 @@ export const Footer = ({ className, ...props }: FooterProps) => {
               </Link>
             ))}
           </div>
+
+          <div className="mt-6">
+            <StatusWidget />
+          </div>
         </div>
 
         <div className="grid w-full max-w-sm grid-cols-2 gap-x-4 gap-y-2 md:w-auto md:gap-x-8">

apps/marketing/src/components/(marketing)/hero.tsx

@@ -123,7 +123,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           <Link href="https://github.com/documenso/documenso" onClick={() => event('view-github')}>
             <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
               <LuGithub className="mr-2 h-5 w-5" />
-              Star on Github
+              Star on GitHub
             </Button>
           </Link>
         </motion.div>

apps/marketing/src/components/(marketing)/layout-header.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import Image from 'next/image';
+
+import launchWeekTwoImage from '@documenso/assets/images/background-lw-2.png';
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { cn } from '@documenso/ui/lib/utils';
+
+import { Header } from '~/components/(marketing)/header';
+
+export function LayoutHeader() {
+  const [scrollY, setScrollY] = useState(0);
+
+  const { getFlag } = useFeatureFlags();
+
+  const showProfilesAnnouncementBar = getFlag('marketing_profiles_announcement_bar');
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrollY(window.scrollY);
+    };
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  return (
+    <div
+      className={cn('fixed left-0 top-0 z-50 w-full bg-transparent', {
+        'bg-background/50 backdrop-blur-md': scrollY > 5,
+      })}
+    >
+      {showProfilesAnnouncementBar && (
+        <div className="relative inline-flex w-full items-center justify-center overflow-hidden px-4 py-2.5">
+          <div className="absolute inset-0 -z-[1]">
+            <Image
+              src={launchWeekTwoImage}
+              className="h-full w-full object-cover"
+              alt="Launch Week 2"
+            />
+          </div>
+
+          <div className="text-background text-center text-sm text-white">
+            Claim your documenso public profile username now!{' '}
+            <span className="hidden font-semibold md:inline">documenso.com/u/yourname</span>
+            <div className="mt-1.5 block md:ml-4 md:mt-0 md:inline-block">
+              <a
+                href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=marketing-announcement-bar`}
+                className="bg-background text-foreground rounded-md px-2.5 py-1 text-xs font-medium duration-300"
+              >
+                Claim Now
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+    </div>
+  );
+}

apps/marketing/src/components/(marketing)/status-widget.tsx

@@ -0,0 +1,73 @@
+import type { Status } from '@openstatus/react';
+import { getStatus } from '@openstatus/react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+const getStatusLevel = (level: Status) => {
+  return {
+    operational: {
+      label: 'Operational',
+      color: 'bg-green-500',
+      color2: 'bg-green-400',
+    },
+    degraded_performance: {
+      label: 'Degraded Performance',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    partial_outage: {
+      label: 'Partial Outage',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    major_outage: {
+      label: 'Major Outage',
+      color: 'bg-red-500',
+      color2: 'bg-red-400',
+    },
+    unknown: {
+      label: 'Unknown',
+      color: 'bg-gray-500',
+      color2: 'bg-gray-400',
+    },
+    incident: {
+      label: 'Incident',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    under_maintenance: {
+      label: 'Under Maintenance',
+      color: 'bg-gray-500',
+      color2: 'bg-gray-400',
+    },
+  }[level];
+};
+
+export async function StatusWidget() {
+  const { status } = await getStatus('documenso');
+
+  const level = getStatusLevel(status);
+
+  return (
+    <a
+      className="border-border inline-flex max-w-fit  items-center justify-between gap-2 space-x-2 rounded-md border border-gray-200 px-3 py-1 text-sm"
+      href="https://status.documenso.com"
+      target="_blank"
+      rel="noreferrer"
+    >
+      <div>
+        <p className="text-sm">{level.label}</p>
+      </div>
+
+      <span className="relative ml-auto flex h-1.5 w-1.5">
+        <span
+          className={cn(
+            'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
+            level.color2,
+          )}
+        />
+        <span className={cn('relative inline-flex h-1.5 w-1.5 rounded-full', level.color)} />
+      </span>
+    </a>
+  );
+}

package-lock.json

@@ -42,6 +42,7 @@
         "@documenso/trpc": "*",
         "@documenso/ui": "*",
         "@hookform/resolvers": "^3.1.0",
+        "@openstatus/react": "^0.0.3",
         "contentlayer": "^0.3.4",
         "framer-motion": "^10.12.8",
         "lucide-react": "^0.279.0",
@@ -4124,6 +4125,14 @@
       "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
       "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw=="
     },
+    "node_modules/@openstatus/react": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@openstatus/react/-/react-0.0.3.tgz",
+      "integrity": "sha512-uDiegz7e3H67pG8lTT+op+6w5keTT7XpcENrREaqlWl5j53TYyO8nheOG1PeNw2/Qgd5KaGeRJJFn1crhTUSYw==",
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/@opentelemetry/api": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.4.1.tgz",

packages/lib/server-only/user/get-monthly-completed-document.ts

@@ -17,9 +17,9 @@ type GetCompletedDocumentsMonthlyQueryResult = Array<{
 export const getCompletedDocumentsMonthly = async () => {
   const result = await prisma.$queryRaw<GetCompletedDocumentsMonthlyQueryResult>`
     SELECT
-      DATE_TRUNC('month', "completedAt") AS "month",
+      DATE_TRUNC('month', "updatedAt") AS "month",
       COUNT("id") as "count",
-      SUM(COUNT("id")) OVER (ORDER BY DATE_TRUNC('month', "completedAt")) as "cume_count"
+      SUM(COUNT("id")) OVER (ORDER BY DATE_TRUNC('month', "updatedAt")) as "cume_count"
     FROM "Document"
     WHERE "status" = 'COMPLETED'
     GROUP BY "month"

packages/ui/primitives/theme-switcher.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { motion } from 'framer-motion';
 import { Monitor, MoonStar, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';