feat: add team templates (#912)

apps/web/src/app/(dashboard)/templates/templates-page-view.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { findTemplates } from '@documenso/lib/server-only/template/find-templates';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import type { Team } from '@documenso/prisma/client';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+
+import { TemplatesDataTable } from './data-table-templates';
+import { EmptyTemplateState } from './empty-state';
+import { NewTemplateDialog } from './new-template-dialog';
+
+export type TemplatesPageViewProps = {
+  searchParams?: {
+    page?: number;
+    perPage?: number;
+  };
+  team?: Team;
+};
+
+export const TemplatesPageView = async ({ searchParams = {}, team }: TemplatesPageViewProps) => {
+  const { user } = await getRequiredServerComponentSession();
+  const page = Number(searchParams.page) || 1;
+  const perPage = Number(searchParams.perPage) || 10;
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+  const templateRootPath = formatTemplatesPath(team?.url);
+
+  const { templates, totalPages } = await findTemplates({
+    userId: user.id,
+    teamId: team?.id,
+    page: page,
+    perPage: perPage,
+  });
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <div className="flex items-baseline justify-between">
+        <div className="flex flex-row items-center">
+          {team && (
+            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+              <AvatarFallback className="text-xs text-gray-400">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
+
+          <h1 className="truncate text-2xl font-semibold md:text-3xl">Templates</h1>
+        </div>
+
+        <div>
+          <NewTemplateDialog templateRootPath={templateRootPath} teamId={team?.id} />
+        </div>
+      </div>
+
+      <div className="relative mt-5">
+        {templates.length > 0 ? (
+          <TemplatesDataTable
+            templates={templates}
+            page={page}
+            perPage={perPage}
+            totalPages={totalPages}
+            documentRootPath={documentRootPath}
+            templateRootPath={templateRootPath}
+            teamId={team?.id}
+          />
+        ) : (
+          <EmptyTemplateState />
+        )}
+      </div>
+    </div>
+  );
+};