@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/purchase-orders/(list)/(default)/page.tsx

@@ -0,0 +1,30 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { PurchaseOrderPaginationTableProvider } from "../../_components/tables";
+import { PurchaseOrderTableToolbar } from "../../_components/toolbars";
+import { purchaseOrderColumns } from "../../_config/columns-data";
+import {
+  purchaseOrderArchiveCommand,
+  purchaseOrderDeleteCommand,
+  purchaseOrderRestoreCommand,
+  purchaseOrderStatusCommand,
+} from "../../_config/commands";
+
+export default function Page() {
+  return (
+    <Allowed permission={{ purchaseOrder: ["view"] }}>
+      <PurchaseOrderPaginationTableProvider
+        columns={purchaseOrderColumns}
+        commands={[
+          purchaseOrderStatusCommand,
+          purchaseOrderArchiveCommand,
+          purchaseOrderRestoreCommand,
+          purchaseOrderDeleteCommand,
+        ]}
+      >
+        <PurchaseOrderTableToolbar />
+        <DataTable />
+      </PurchaseOrderPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/(list)/archive/page.tsx

@@ -0,0 +1,29 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { PurchaseOrderPaginationTableProvider } from "../../_components/tables";
+import { purchaseOrderColumns } from "../../_config/columns-data";
+import {
+  purchaseOrderArchiveCommand,
+  purchaseOrderDeleteCommand,
+  purchaseOrderRestoreCommand,
+  purchaseOrderStatusCommand,
+} from "../../_config/commands";
+
+export default function Page() {
+  return (
+    <Allowed permission={{ purchaseOrder: ["view"] }}>
+      <PurchaseOrderPaginationTableProvider
+        columns={purchaseOrderColumns}
+        commands={[
+          purchaseOrderStatusCommand,
+          purchaseOrderArchiveCommand,
+          purchaseOrderRestoreCommand,
+          purchaseOrderDeleteCommand,
+        ]}
+        filterOptions={{ constraints: { isDeleted: true } }}
+      >
+        <DataTable />
+      </PurchaseOrderPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/(list)/draft/page.tsx

@@ -0,0 +1,31 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { PurchaseOrderPaginationTableProvider } from "../../_components/tables";
+import { PurchaseOrderTableToolbar } from "../../_components/toolbars";
+import { purchaseOrderColumns } from "../../_config/columns-data";
+import {
+  purchaseOrderArchiveCommand,
+  purchaseOrderDeleteCommand,
+  purchaseOrderRestoreCommand,
+  purchaseOrderStatusCommand,
+} from "../../_config/commands";
+
+export default function Page() {
+  return (
+    <Allowed permission={{ purchaseOrder: ["view"] }}>
+      <PurchaseOrderPaginationTableProvider
+        columns={purchaseOrderColumns}
+        commands={[
+          purchaseOrderStatusCommand,
+          purchaseOrderArchiveCommand,
+          purchaseOrderRestoreCommand,
+          purchaseOrderDeleteCommand,
+        ]}
+        filterOptions={{ constraints: { status: ["draft"] } }}
+      >
+        <PurchaseOrderTableToolbar />
+        <DataTable />
+      </PurchaseOrderPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/(list)/layout.tsx

@@ -0,0 +1,74 @@
+import {
+  BottomBar,
+  BottomBarLinks,
+  Header,
+  Topbar,
+  TopbarTitle,
+  TopbarTools,
+} from "@tulip-systems/app/components/client";
+import { InlineCommandMenu, InlineCommandMenuLoading } from "@tulip-systems/commands/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+import { type PropsWithChildren, Suspense } from "react";
+import { purchaseOrderCreateCommand } from "../_config/commands";
+
+export default function PurchaseOrderLayout(props: PropsWithChildren) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Bestellingen" }]} />
+
+          <TopbarTools>
+            <Suspense fallback={<InlineCommandMenuLoading />}>
+              <InlineCommandMenu data={null} commands={[purchaseOrderCreateCommand]} />
+            </Suspense>
+          </TopbarTools>
+        </Topbar>
+
+        <BottomBar>
+          <BottomBarLinks
+            paths={[
+              {
+                name: "Overzicht",
+                href: "/admin/purchase-orders",
+                segment: "(default)",
+              },
+              {
+                name: "Concept",
+                href: "/admin/purchase-orders/draft",
+                segment: "draft",
+              },
+              {
+                name: "Verzonden",
+                href: "/admin/purchase-orders/sent",
+                segment: "sent",
+              },
+              {
+                name: "Ontvangen",
+                href: "/admin/purchase-orders/received",
+                segment: "received",
+              },
+              {
+                name: "Betaald",
+                href: "/admin/purchase-orders/paid",
+                segment: "paid",
+              },
+            ]}
+          />
+
+          <BottomBarLinks
+            paths={[
+              {
+                name: "Archief",
+                href: "/admin/purchase-orders/archive",
+                segment: "archive",
+              },
+            ]}
+          />
+        </BottomBar>
+      </Header>
+
+      <TableLayout className="p-content">{props.children}</TableLayout>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/(list)/loading.tsx

@@ -0,0 +1,5 @@
+import { TableSkeleton } from "@tulip-systems/data-tables";
+
+export default function Loading() {
+  return <TableSkeleton />;
+}

package/dist/templates/spark/src/app/admin/purchase-orders/(list)/paid/page.tsx

@@ -0,0 +1,31 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { PurchaseOrderPaginationTableProvider } from "../../_components/tables";
+import { PurchaseOrderTableToolbar } from "../../_components/toolbars";
+import { purchaseOrderColumns } from "../../_config/columns-data";
+import {
+  purchaseOrderArchiveCommand,
+  purchaseOrderDeleteCommand,
+  purchaseOrderRestoreCommand,
+  purchaseOrderStatusCommand,
+} from "../../_config/commands";
+
+export default function Page() {
+  return (
+    <Allowed permission={{ purchaseOrder: ["view"] }}>
+      <PurchaseOrderPaginationTableProvider
+        columns={purchaseOrderColumns}
+        commands={[
+          purchaseOrderStatusCommand,
+          purchaseOrderArchiveCommand,
+          purchaseOrderRestoreCommand,
+          purchaseOrderDeleteCommand,
+        ]}
+        filterOptions={{ constraints: { status: ["paid"] } }}
+      >
+        <PurchaseOrderTableToolbar />
+        <DataTable />
+      </PurchaseOrderPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/(list)/received/page.tsx

@@ -0,0 +1,31 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { PurchaseOrderPaginationTableProvider } from "../../_components/tables";
+import { PurchaseOrderTableToolbar } from "../../_components/toolbars";
+import { purchaseOrderColumns } from "../../_config/columns-data";
+import {
+  purchaseOrderArchiveCommand,
+  purchaseOrderDeleteCommand,
+  purchaseOrderRestoreCommand,
+  purchaseOrderStatusCommand,
+} from "../../_config/commands";
+
+export default function Page() {
+  return (
+    <Allowed permission={{ purchaseOrder: ["view"] }}>
+      <PurchaseOrderPaginationTableProvider
+        columns={purchaseOrderColumns}
+        commands={[
+          purchaseOrderStatusCommand,
+          purchaseOrderArchiveCommand,
+          purchaseOrderRestoreCommand,
+          purchaseOrderDeleteCommand,
+        ]}
+        filterOptions={{ constraints: { status: ["received"] } }}
+      >
+        <PurchaseOrderTableToolbar />
+        <DataTable />
+      </PurchaseOrderPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/(list)/sent/page.tsx

@@ -0,0 +1,31 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { PurchaseOrderPaginationTableProvider } from "../../_components/tables";
+import { PurchaseOrderTableToolbar } from "../../_components/toolbars";
+import { purchaseOrderColumns } from "../../_config/columns-data";
+import {
+  purchaseOrderArchiveCommand,
+  purchaseOrderDeleteCommand,
+  purchaseOrderRestoreCommand,
+  purchaseOrderStatusCommand,
+} from "../../_config/commands";
+
+export default function Page() {
+  return (
+    <Allowed permission={{ purchaseOrder: ["view"] }}>
+      <PurchaseOrderPaginationTableProvider
+        columns={purchaseOrderColumns}
+        commands={[
+          purchaseOrderStatusCommand,
+          purchaseOrderArchiveCommand,
+          purchaseOrderRestoreCommand,
+          purchaseOrderDeleteCommand,
+        ]}
+        filterOptions={{ constraints: { status: ["sent"] } }}
+      >
+        <PurchaseOrderTableToolbar />
+        <DataTable />
+      </PurchaseOrderPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/[id]/(default)/(items)/loading.tsx

@@ -0,0 +1,5 @@
+import { TableSkeleton } from "@tulip-systems/data-tables";
+
+export default function Loading() {
+  return <TableSkeleton />;
+}

package/dist/templates/spark/src/app/admin/purchase-orders/[id]/(default)/(items)/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { InlineCommandMenu } from "@tulip-systems/commands/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+import { DataTable, SortableRows } from "@tulip-systems/data-tables/client";
+import { use } from "react";
+import { PurchaseOrderItemInfiniteTableProvider } from "@/app/admin/purchase-order-items/_components/tables";
+import { PurchaseOrderItemTableToolbar } from "@/app/admin/purchase-order-items/_components/toolbars";
+import { purchaseOrderItemInlineColumns } from "@/app/admin/purchase-order-items/_config/columns-inline";
+import {
+  purchaseOrderItemDeleteCommand,
+  purchaseOrderItemImportProductsCommand,
+} from "@/app/admin/purchase-order-items/_config/commands";
+import { orpc } from "@/server/router/client";
+
+export default function Page(props: PageProps<"/admin/purchase-orders/[id]">) {
+  const params = use(props.params);
+  const purchaseOrderId = params.id?.toString();
+
+  return (
+    <TableLayout>
+      <PurchaseOrderItemInfiniteTableProvider
+        columns={purchaseOrderItemInlineColumns}
+        commands={[purchaseOrderItemDeleteCommand]}
+        filterOptions={{ constraints: { purchaseOrderId: [purchaseOrderId] } }}
+      >
+        <PurchaseOrderItemTableToolbar>
+          <InlineCommandMenu
+            data={{ purchaseOrderId }}
+            commands={[purchaseOrderItemImportProductsCommand]}
+          />
+        </PurchaseOrderItemTableToolbar>
+
+        <SortableRows
+          mutationOptions={{
+            mutationFn: (input) => orpc.purchaseOrderItems.move.call({ ...input, purchaseOrderId }),
+          }}
+        >
+          <DataTable />
+        </SortableRows>
+      </PurchaseOrderItemInfiniteTableProvider>
+    </TableLayout>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/[id]/(default)/@dashboard/default.tsx

@@ -0,0 +1 @@
+export { default } from "./page";

package/dist/templates/spark/src/app/admin/purchase-orders/[id]/(default)/@dashboard/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
+import { EditorContent, EditorMenuBubble } from "@tulip-systems/editor/client";
+import {
+  InlineComboboxDropdown,
+  InlineEditor,
+  InlineField,
+  InlineFieldError,
+  InlineFieldLabel,
+} from "@tulip-systems/inline/client";
+import { buttonVariants } from "@tulip-systems/ui/button";
+import { DataStackLayout, DataStackRow } from "@tulip-systems/ui/data-stack";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { z } from "zod";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+
+export default function DetailPage(props: PageProps<"/admin/purchase-orders/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.purchaseOrders.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  const [suppliers, projects] = useSuspenseQueries({
+    queries: [orpc.suppliers.getAll.queryOptions(), orpc.projects.getAll.queryOptions()],
+  });
+
+  return (
+    <DataStackLayout>
+      <DataStackRow>
+        <InlineField>
+          <InlineFieldLabel>Leverancier</InlineFieldLabel>
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <InlineComboboxDropdown
+                placeholder="Kies een leverancier"
+                initialValue={data.supplierId}
+                variables={(value) => ({ id, data: { supplierId: value ?? undefined } })}
+                mutation={orpc.purchaseOrders.update.mutationOptions()}
+                strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+                items={suppliers.data.map(({ id, name }) => ({ id, value: name }))}
+                className="flex-1"
+              />
+              <InlineFieldError />
+            </div>
+
+            {data.supplierId && (
+              <Link
+                href={`/admin/suppliers/${data.supplierId}`}
+                className={buttonVariants({ variant: "outline" })}
+                target="_blank"
+              >
+                <Icons.externalLink className="size-4" />
+              </Link>
+            )}
+          </div>
+        </InlineField>
+
+        <InlineField>
+          <InlineFieldLabel>Project</InlineFieldLabel>
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <InlineComboboxDropdown
+                initialValue={data.projectId ?? undefined}
+                variables={(value) => ({ id, data: { projectId: value } })}
+                mutation={orpc.purchaseOrders.update.mutationOptions()}
+                strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+                items={projects.data.map(({ id, title }) => ({ id, value: title }))}
+                placeholder="Kies een project"
+                className="flex-1"
+              />
+              <InlineFieldError />
+            </div>
+
+            {data.projectId && (
+              <Link
+                href={`/admin/projects/${data.projectId}`}
+                className={buttonVariants({ variant: "outline" })}
+                target="_blank"
+              >
+                <Icons.externalLink className="size-4" />
+              </Link>
+            )}
+          </div>
+        </InlineField>
+      </DataStackRow>
+
+      <InlineField>
+        <InlineFieldLabel>Notities</InlineFieldLabel>
+        <InlineEditor
+          initialValue={data.notes ?? undefined}
+          variables={(value) => ({ id, data: { notes: value } })}
+          mutation={orpc.purchaseOrders.update.mutationOptions()}
+          strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
+          className="min-h-24"
+        >
+          <EditorMenuBubble />
+          <EditorContent />
+        </InlineEditor>
+        <InlineFieldError />
+      </InlineField>
+    </DataStackLayout>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/[id]/(default)/layout.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Header, Topbar, TopbarTitle, TopbarTools } from "@tulip-systems/app/components/client";
+import { ResponsiveCommandMenu } from "@tulip-systems/commands/client";
+import { formatCurrency } from "@tulip-systems/core";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { orpc } from "@/server/router/client";
+import {
+  purchaseOrderArchiveCommand,
+  purchaseOrderCopyCommand,
+  purchaseOrderCreateEmailCommand,
+  purchaseOrderDeleteCommand,
+  purchaseOrderDownloadCommand,
+  purchaseOrderPreviewCommand,
+  purchaseOrderRestoreCommand,
+  purchaseOrderStatusCommand,
+} from "../../_config/commands";
+import { PurchaseOrderStatusBadge } from "../../_config/status";
+import { calculatePurchaseOrderTotal } from "../../_lib/helpers";
+
+export default function ProductListLayout(props: LayoutProps<"/admin/purchase-orders/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.purchaseOrders.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  const subtotal = calculatePurchaseOrderTotal(data.items);
+  const totalVat = subtotal * 0.21;
+  const total = subtotal + totalVat;
+
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle
+            badge={<PurchaseOrderStatusBadge status={data.status} />}
+            breadcrumbs={[
+              { label: "Bestellingen", href: "/admin/purchase-orders" },
+              { label: data.number.toString() },
+            ]}
+          />
+
+          <TopbarTools>
+            <ResponsiveCommandMenu
+              data={data}
+              commands={[
+                purchaseOrderPreviewCommand,
+                purchaseOrderDownloadCommand,
+                purchaseOrderCopyCommand,
+                purchaseOrderStatusCommand,
+                purchaseOrderCreateEmailCommand,
+                purchaseOrderArchiveCommand,
+                purchaseOrderRestoreCommand,
+                purchaseOrderDeleteCommand,
+              ]}
+            />
+          </TopbarTools>
+        </Topbar>
+      </Header>
+
+      <div className="space-y-20 p-content pb-40">
+        {props.dashboard}
+        {props.children}
+      </div>
+
+      <div className="absolute right-0 bottom-0 left-0 overflow-auto border-t bg-background text-end">
+        <div className="flex w-max flex-row justify-end gap-20 px-10 py-6 md:w-full">
+          <span className="text-base">Subtotaal: {formatCurrency(subtotal)}</span>
+          <span className="text-base">BTW 21%: {formatCurrency(totalVat)}</span>
+          <span className="font-bold text-base">Totaal: {formatCurrency(total)}</span>
+        </div>
+      </div>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/[id]/(default)/pdf/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { PDFViewer } from "@react-pdf/renderer";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { orpc } from "@/server/router/client";
+import { PurchaseOrderPdf } from "../../../_components/pdf-document";
+
+export default function DetailPage(props: PageProps<"/admin/purchase-orders/[id]/pdf">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.purchaseOrders.getPDFData.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  return (
+    <PDFViewer className="h-[100dvh] w-full">
+      <PurchaseOrderPdf data={data} />
+    </PDFViewer>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/[id]/emails/[emailId]/layout.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Header, Topbar, TopbarTitle } from "@tulip-systems/app/components/client";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { orpc } from "@/server/router/client";
+
+export default function Layout(props: LayoutProps<"/admin/purchase-orders/[id]/emails/[emailId]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.purchaseOrders.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle
+            breadcrumbs={[
+              { label: "Bestellingen", href: "/admin/purchase-orders" },
+              { label: data.number.toString(), href: `/admin/purchase-orders/${id}` },
+              { label: "Email" },
+            ]}
+          />
+        </Topbar>
+      </Header>
+
+      <div className="p-content">{props.children}</div>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/[id]/emails/[emailId]/loading.tsx

@@ -0,0 +1,5 @@
+import { SendEmailFormLoading } from "@/app/admin/emails/_components/send-email";
+
+export default function Loading() {
+  return <SendEmailFormLoading />;
+}

package/dist/templates/spark/src/app/admin/purchase-orders/[id]/emails/[emailId]/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { InlineCommandMenu } from "@tulip-systems/commands/client";
+import { InlineProvider } from "@tulip-systems/inline/client";
+import { Card, CardHeader, CardTitle } from "@tulip-systems/ui/card";
+import { DataStack, DataStackTitle, DataStackValue } from "@tulip-systems/ui/data-stack";
+import { toast } from "@tulip-systems/ui/sonner";
+import { notFound, useRouter } from "next/navigation";
+import { use } from "react";
+import {
+  SendEmailForm,
+  SendEmailFormAttachments,
+  SendEmailFormBody,
+  SendEmailFormSubject,
+  SendEmailFormSubmit,
+  SendEmailFormTo,
+} from "@/app/admin/emails/_components/send-email";
+import { orpc } from "@/server/router/client";
+import { purchaseOrderPreviewCommand } from "../../../_config/commands";
+
+export default function Page(props: PageProps<"/admin/purchase-orders/[id]/emails/[emailId]">) {
+  const params = use(props.params);
+  const purchaseOrderId = params.id?.toString();
+  const emailId = params.emailId?.toString();
+
+  const router = useRouter();
+
+  const { data } = useSuspenseQuery(
+    orpc.purchaseOrders.getById.queryOptions({ input: { id: purchaseOrderId } }),
+  );
+  if (!data) notFound();
+
+  const contacts = data?.supplier?.suppliersContacts?.flatMap(({ contact }) => contact);
+
+  return (
+    <Allowed permission={{ email: ["view"] }}>
+      <InlineProvider permission={{ email: ["update", "delete", "archive"] }}>
+        <SendEmailForm id={emailId}>
+          <SendEmailFormTo contacts={contacts ?? []} />
+          <SendEmailFormSubject />
+          <SendEmailFormBody />
+
+          <DataStack>
+            <DataStackTitle>Inbegrepen bestanden</DataStackTitle>
+            <DataStackValue>
+              <Card className="w-fit py-2">
+                <CardHeader className="flex flex-row items-center justify-between gap-3 pl-2">
+                  <InlineCommandMenu
+                    data={{ id: purchaseOrderId }}
+                    commands={[purchaseOrderPreviewCommand]}
+                  />
+                  <CardTitle>{data?.number}.pdf</CardTitle>
+                </CardHeader>
+              </Card>
+            </DataStackValue>
+          </DataStack>
+
+          <SendEmailFormAttachments />
+          <SendEmailFormSubmit
+            mutation={orpc.purchaseOrders.sendEmail.mutationOptions({
+              onSuccess: () => {
+                toast.success("E-mail verzonden");
+                router.push(`/admin/purchase-orders/${purchaseOrderId}`);
+              },
+            })}
+          />
+        </SendEmailForm>
+      </InlineProvider>
+    </Allowed>
+  );
+}