feat: create a banner with custom text by admin

apps/web/src/app/(dashboard)/admin/banner/banner-form.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ZBannerSchema = z.object({
+  text: z.string().optional(),
+  show: z.boolean().optional(),
+});
+
+type TBannerSchema = z.infer<typeof ZBannerSchema>;
+
+export function BannerForm({ show, text }: TBannerSchema) {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const form = useForm<TBannerSchema>({
+    resolver: zodResolver(ZBannerSchema),
+    defaultValues: {
+      show,
+      text,
+    },
+  });
+
+  const { mutateAsync: updateBanner, isLoading: isUpdatingBanner } =
+    trpcReact.banner.updateBanner.useMutation();
+
+  const onBannerUpdate = async ({ show, text }: TBannerSchema) => {
+    try {
+      await updateBanner({
+        show,
+        text,
+      });
+
+      toast({
+        title: 'Banner Updated',
+        description: 'Your banner has been updated successfully.',
+        duration: 5000,
+      });
+
+      router.refresh();
+    } catch (err) {
+      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            'We encountered an unknown error while attempting to reset your password. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form className="flex flex-col" onSubmit={form.handleSubmit(onBannerUpdate)}>
+        <FormField
+          control={form.control}
+          name="show"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+              <div className="space-y-0.5">
+                <FormLabel>Show Banner</FormLabel>
+                <FormDescription>Show a banner to the users by the admin</FormDescription>
+              </div>
+              <FormControl>
+                <Switch checked={field.value} onCheckedChange={field.onChange} />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="text"
+          render={({ field }) => (
+            <FormItem className="mt-8">
+              <FormLabel className="text-base ">Banner Text</FormLabel>
+              <FormControl>
+                <Textarea placeholder="Text to show to users" className="resize-none" {...field} />
+              </FormControl>
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit" loading={isUpdatingBanner} className="mt-3 justify-end self-end">
+          Update Banner
+        </Button>
+      </form>
+    </Form>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { getBanner } from '@documenso/lib/server-only/banner/get-banner';
+
+import { BannerForm } from './banner-form';
+
+export default async function AdminBannerPage() {
+  const banner = await getBanner();
+
+  return (
+    <div className="space-y-8">
+      <h2 className="text-4xl font-semibold">Banner</h2>
+
+      <BannerForm show={banner?.show ?? false} text={banner?.text ?? ''} />
+    </div>
+  );
+}

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

@@ -1,11 +1,11 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { BarChart3, FileStack, User2, Wallet2 } from 'lucide-react';
+import { BadgeAlert, BarChart3, FileStack, User2, Wallet2 } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -78,6 +78,20 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
           Subscriptions
         </Link>
       </Button>
+
+      <Button
+        variant="ghost"
+        className={cn(
+          'justify-start md:w-full',
+          pathname?.startsWith('/admin/banner') && 'bg-secondary',
+        )}
+        asChild
+      >
+        <Link href="/admin/banner">
+          <BadgeAlert className="mr-2 h-5 w-5" />
+          Banner
+        </Link>
+      </Button>
     </div>
   );
 };

apps/web/src/app/(dashboard)/layout.tsx

@@ -9,6 +9,7 @@ import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTeams } from '@documenso/lib/server-only/team/get-teams';
 
+import { Banner } from '~/components/(dashboard)/layout/banner';
 import { Header } from '~/components/(dashboard)/layout/header';
 import { VerifyEmailBanner } from '~/components/(dashboard)/layout/verify-email-banner';
 import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
@@ -37,6 +38,8 @@ export default async function AuthenticatedDashboardLayout({
       <LimitsProvider>
         {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
 
+        <Banner />
+
         <Header user={user} teams={teams} />
 
         <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>

apps/web/src/components/(dashboard)/layout/banner.tsx

@@ -0,0 +1,21 @@
+import { getBanner } from '@documenso/lib/server-only/banner/get-banner';
+
+export const Banner = async () => {
+  const banner = await getBanner();
+
+  return (
+    <>
+      {banner && banner.show && (
+        <div className="bg-documenso-200 dark:bg-documenso-400">
+          <div className="text-documenso-900 mx-auto flex h-auto max-w-screen-xl items-center justify-center px-4 py-3 text-sm font-medium">
+            <div className="flex items-center">{banner.text}</div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+// Banner
+// Custom Text
+// Custom Text with Custom Icon