@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/emails/_components/send-email.tsx

@@ -0,0 +1,346 @@
+"use client";
+
+import { type DefaultError, type MutationOptions, useSuspenseQuery } from "@tanstack/react-query";
+import { useAction } from "@tulip-systems/core/client";
+import { LocalDriveViewLoading } from "@tulip-systems/drive-local/client";
+import { EditorContent, EditorMenuFixed } from "@tulip-systems/editor/client";
+import {
+  InlineEditor,
+  InlineField,
+  InlineFieldError,
+  InlineFieldLabel,
+  InlineRecipientInput,
+  InlineStringInput,
+} from "@tulip-systems/inline/client";
+import { getAssetURL } from "@tulip-systems/storage";
+import { UploadZone } from "@tulip-systems/storage/client";
+import { Button } from "@tulip-systems/ui/button";
+import { Card, CardHeader } from "@tulip-systems/ui/card";
+import {
+  DataStack,
+  DataStackLayout,
+  DataStackTitle,
+  DataStackValue,
+} from "@tulip-systems/ui/data-stack";
+import { ScrollArea } from "@tulip-systems/ui/scroll-area";
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+import { Toggle } from "@tulip-systems/ui/toggle";
+import { FileIcon } from "lucide-react";
+import Link from "next/link";
+import { notFound, useRouter } from "next/navigation";
+import { createContext, type PropsWithChildren, Suspense, use, useState } from "react";
+import { z } from "zod";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+import type { RouterOutputs } from "@/server/router/router";
+import { uploadClient } from "@/server/storage/client";
+import { sendEmailSchema } from "../_lib/validators";
+
+/**
+ * Context for the send email form
+ */
+type SendEmailFormContextType = {
+  data: RouterOutputs["emails"]["getById"] & { isValid: boolean };
+};
+
+const SendEmailFormContext = createContext({} as SendEmailFormContextType);
+
+/**
+ * Send email form
+ */
+export function SendEmailForm(props: PropsWithChildren<{ id: string }>) {
+  const { data } = useSuspenseQuery(
+    orpc.emails.getById.queryOptions({
+      input: { id: props.id },
+      select: (data) =>
+        data ? { ...data, isValid: sendEmailSchema.safeParse(data).success } : null,
+    }),
+  );
+  if (!data) notFound();
+
+  return (
+    <div className="pb-20">
+      <SendEmailFormContext value={{ data }}>
+        <DataStackLayout>{props.children}</DataStackLayout>
+      </SendEmailFormContext>
+    </div>
+  );
+}
+
+/**
+ * Send email form to
+ */
+export type SendEmailFormToProps = {
+  contacts: {
+    id: string;
+    email: string;
+    name: string;
+  }[];
+};
+
+export function SendEmailFormTo(props: SendEmailFormToProps) {
+  const { data } = use(SendEmailFormContext);
+
+  const [showCc, setShowCc] = useState(false);
+  const [showBcc, setShowBcc] = useState(false);
+
+  return (
+    <>
+      <InlineField>
+        <InlineFieldLabel>Ontvanger</InlineFieldLabel>
+
+        <div className="flex gap-2">
+          <InlineRecipientInput
+            contacts={props.contacts}
+            initialValue={data.to ?? []}
+            variables={(value) => ({ id: data.id, data: { to: value } })}
+            mutation={orpc.emails.update.mutationOptions()}
+            strategy={{ mutate: { on: "commit" }, validate: { commit: z.array(z.string()) } }}
+            disabled={data.status !== "draft"}
+            placeholder="Kies een ontvanger..."
+          />
+
+          <Toggle
+            variant="outline"
+            pressed={showCc}
+            onPressedChange={(value) => setShowCc(value)}
+            tabIndex={-1}
+            className="size-10"
+          >
+            cc
+          </Toggle>
+
+          <Toggle
+            variant="outline"
+            pressed={showBcc}
+            onPressedChange={(value) => setShowBcc(value)}
+            tabIndex={-1}
+            className="size-10"
+          >
+            bcc
+          </Toggle>
+        </div>
+
+        <InlineFieldError />
+      </InlineField>
+
+      {showCc && (
+        <InlineField>
+          <InlineFieldLabel>Cc</InlineFieldLabel>
+          <InlineRecipientInput
+            contacts={props.contacts}
+            initialValue={data.cc ?? []}
+            variables={(value) => ({ id: data.id, data: { cc: value } })}
+            mutation={orpc.emails.update.mutationOptions()}
+            strategy={{ mutate: { on: "commit" }, validate: { commit: z.array(z.string()) } }}
+            disabled={data.status !== "draft"}
+            placeholder="Kies een cc..."
+          />
+          <InlineFieldError />
+        </InlineField>
+      )}
+
+      {showBcc && (
+        <InlineField>
+          <InlineFieldLabel>Bcc</InlineFieldLabel>
+          <InlineRecipientInput
+            contacts={props.contacts}
+            initialValue={data.bcc ?? []}
+            variables={(value) => ({ id: data.id, data: { bcc: value } })}
+            mutation={orpc.emails.update.mutationOptions()}
+            strategy={{ mutate: { on: "commit" }, validate: { commit: z.array(z.string()) } }}
+            disabled={data.status !== "draft"}
+            placeholder="Kies een bcc..."
+          />
+          <InlineFieldError />
+        </InlineField>
+      )}
+    </>
+  );
+}
+
+/**
+ * Send email form subject
+ */
+export function SendEmailFormSubject() {
+  const { data } = use(SendEmailFormContext);
+  return (
+    <InlineField>
+      <InlineFieldLabel>Onderwerp</InlineFieldLabel>
+      <InlineStringInput
+        initialValue={data.subject ?? ""}
+        variables={(value) => ({ id: data.id, data: { subject: value } })}
+        mutation={orpc.emails.update.mutationOptions()}
+        strategy={{ mutate: { on: "blur" }, validate: { blur: sendEmailSchema.shape.subject } }}
+        disabled={data.status !== "draft"}
+      />
+      <InlineFieldError />
+    </InlineField>
+  );
+}
+
+/**
+ * Send email form body
+ */
+export function SendEmailFormBody() {
+  const { data } = use(SendEmailFormContext);
+  return (
+    <InlineField>
+      <InlineFieldLabel>Bericht</InlineFieldLabel>
+      <InlineEditor
+        initialValue={data.body ?? undefined}
+        variables={(value) => ({ id: data.id, data: { body: value } })}
+        mutation={orpc.emails.update.mutationOptions()}
+        strategy={{
+          mutate: { on: "change", debounceMs: 700 },
+          validate: { change: sendEmailSchema.shape.body },
+        }}
+        className="min-h-120"
+        disabled={data.status !== "draft"}
+        extensions={{
+          highlight: false,
+          color: false,
+          horizontalRule: false,
+          blockquote: false,
+        }}
+      >
+        {data.status === "draft" && <EditorMenuFixed />}
+        <EditorContent />
+      </InlineEditor>
+      <InlineFieldError />
+    </InlineField>
+  );
+}
+
+/**
+ * Send email form attachments
+ */
+export function SendEmailFormAttachments() {
+  const { data } = use(SendEmailFormContext);
+
+  return (
+    <DataStack>
+      <DataStackTitle>Bestanden</DataStackTitle>
+      <DataStackValue>
+        <Suspense fallback={<LocalDriveViewLoading />}>
+          <UploadZone
+            variables={{}}
+            uploadClient={uploadClient}
+            uploadHooks={{
+              afterPresign: async (asset) => {
+                await orpc.emails.createAttachment.call({ emailId: data.id, assetId: asset.id });
+              },
+            }}
+            className="h-120 rounded-xl border border-dashed"
+          >
+            <ScrollArea className="h-full w-full">
+              <div className="flex min-h-120 flex-col gap-y-3 p-3">
+                {data.attachments.map(({ asset }) => (
+                  <Card key={asset.id} className="py-2">
+                    <CardHeader className="flex items-center justify-between gap-2">
+                      <div className="flex items-center gap-2">
+                        <FileIcon className="size-4 min-w-4" />
+
+                        <Link
+                          href={getAssetURL(asset.id, { disposition: "attachment" })}
+                          target="_blank"
+                          className="break-all font-medium hover:underline"
+                        >
+                          {asset.name}
+                        </Link>
+                      </div>
+
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() =>
+                          window.open(
+                            getAssetURL(asset.id, { disposition: "attachment" }),
+                            "_blank",
+                          )
+                        }
+                      >
+                        <Icons.download />
+                      </Button>
+                    </CardHeader>
+                  </Card>
+                ))}
+              </div>
+            </ScrollArea>
+          </UploadZone>
+
+          {/* <DriveContextProvider
+            namespace={namespace}
+            where={{ nodeIds: data.attachments.flatMap(({ nodeId }) => nodeId) ?? [] }}
+            className="min-h-120"
+            uploadHooks={{
+              afterPresign: async ({asset}) => {
+                await orpc.emails.createAttachment.call({ emailId: data.id, assetId: asset.id });
+              },
+            }}
+          >
+            <DriveGrid
+              className={cn(
+                "rounded-2xl border border-dashed p-content",
+                data.status !== "draft" && "pointer-events-none opacity-50",
+              )}
+            />
+          </DriveContextProvider> */}
+        </Suspense>
+      </DataStackValue>
+    </DataStack>
+  );
+}
+
+/**
+ * Send email form submit
+ */
+type SendEmailFormSubmitProps<TData = unknown, TError = DefaultError, TOnMutateResult = unknown> = {
+  mutation: MutationOptions<TData, TError, { id: string }, TOnMutateResult>;
+};
+
+export function SendEmailFormSubmit<
+  TData = unknown,
+  TError = DefaultError,
+  TOnMutateResult = unknown,
+>(props: SendEmailFormSubmitProps<TData, TError, TOnMutateResult>) {
+  const router = useRouter();
+  const { data } = use(SendEmailFormContext);
+
+  const sendEmailMutation = useAction(props.mutation);
+
+  if (data.status !== "draft") return null;
+
+  return (
+    <div className="absolute right-0 bottom-0 left-0 border-t bg-background text-end">
+      <div className="flex w-max flex-row justify-between gap-10 px-10 py-6 md:w-full">
+        <Button variant="ghost" type="button" onClick={() => router.push(`/admin/emails`)}>
+          Annuleren
+        </Button>
+
+        <Button
+          type="submit"
+          disabled={!data.isValid || sendEmailMutation.isPending}
+          onClick={() => sendEmailMutation.mutate({ id: data.id })}
+        >
+          {sendEmailMutation.isPending && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+          Verzenden
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Send email form loading state
+ */
+export function SendEmailFormLoading() {
+  return (
+    <div className="space-y-5">
+      <Skeleton className="h-20" />
+      <Skeleton className="h-20" />
+      <Skeleton className="h-80" />
+      <Skeleton className="h-80" />
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/emails/_components/tables.tsx

@@ -0,0 +1,83 @@
+"use client";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import type { VisibilityState } from "@tanstack/react-table";
+import type { CommandFor } from "@tulip-systems/commands";
+import type { TableColumnDef } from "@tulip-systems/data-tables";
+import {
+  createTableConfig,
+  TableConfigProvider,
+  usePaginationStrategy,
+} from "@tulip-systems/data-tables/client";
+import { offsetPagination } from "@tulip-systems/query";
+import {
+  type UseFiltersOptions,
+  useFilters,
+  usePagination,
+  useSorting,
+} from "@tulip-systems/query/client";
+import { type PropsWithChildren, useDeferredValue, useMemo } from "react";
+import { orpc } from "@/server/router/client";
+import type { EmailColumn } from "../_config/columns-data";
+import { emailArchiveCommand, emailDeleteCommand, emailRestoreCommand } from "../_config/commands";
+import { emailsFilters } from "../_config/filters";
+import { emailTableSorts } from "../_config/sorting";
+
+export const emailTableCommands = [emailArchiveCommand, emailRestoreCommand, emailDeleteCommand];
+
+/**
+ * Client data table
+ */
+type EmailInfiniteTableProviderProps<TData extends EmailColumn> = {
+  columns: TableColumnDef<TData>[];
+  commands?: CommandFor<TData[]>[];
+  filterOptions?: UseFiltersOptions<typeof emailsFilters>;
+  columnVisibility?: VisibilityState;
+};
+
+export function EmailPaginationTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+
+  children,
+}: PropsWithChildren<EmailInfiniteTableProviderProps<EmailColumn>>) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(emailsFilters, filterOptions);
+  const sorting = useSorting(emailTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseQuery(orpc.emails.list.queryOptions({ input }));
+
+  const queryData = useMemo(() => response.data.data ?? [], [response.data.data]);
+  const { total } = response.data.pagination;
+
+  /**
+   * Strategy
+   */
+  const strategy = usePaginationStrategy({ pagination, total });
+
+  /**
+   * Table
+   */
+  const config = createTableConfig<EmailColumn>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

package/dist/templates/spark/src/app/admin/emails/_components/toolbars.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";
+import { resolveFilterDescriptors } from "@tulip-systems/query";
+import { FilterSearch } from "@tulip-systems/query/client";
+import type { PropsWithChildren } from "react";
+import { emailsFilters } from "../_config/filters";
+
+const emailsFiltersDescriptors = resolveFilterDescriptors(emailsFilters);
+
+export function EmailTableToolbar({ children }: PropsWithChildren) {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <FilterSearch placeholder="Zoeken..." filter={emailsFiltersDescriptors.search} />
+      </TableToolbarList>
+
+      <TableToolbarList>{children}</TableToolbarList>
+    </TableToolbar>
+  );
+}

package/dist/templates/spark/src/app/admin/emails/_config/columns-data.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { formatDateTime } from "@tulip-systems/core";
+import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import { createTableSelectCell } from "@tulip-systems/data-tables/client";
+import Link from "next/link";
+import { Fragment } from "react";
+import type { Client } from "../../clients/_lib/validators";
+import type { Email } from "../_lib/validators";
+import { EmailStatusField } from "./status";
+
+export type EmailColumn = Email & { client: Client };
+
+export const emailColumns: TableColumnDef<EmailColumn>[] = [
+  createTableSelectCell(),
+  {
+    id: "subject",
+    accessorKey: "subject",
+    header: ({ column }) => <TableColumnHeader column={column} title="Onderwerp" />,
+    cell: ({ row }) => {
+      const id = row.original.id;
+      return (
+        <TableCell>
+          <Link href={`/admin/emails/${id}`} className="truncate hover:underline">
+            {row.getValue("subject")}
+          </Link>
+        </TableCell>
+      );
+    },
+  },
+  {
+    id: "recipients",
+    header: ({ column }) => <TableColumnHeader column={column} title="Ontvangers" />,
+    accessorFn: (row) => [...(row.to ?? []), ...(row.cc ?? []), ...(row.bcc ?? [])],
+    cell: ({ row }) => {
+      const recipients = [...new Set(row.getValue("recipients") as string[])];
+      return (
+        <TableCell className="min-w-64 truncate">
+          {recipients.flatMap((email, index) => (
+            <Fragment key={email}>
+              <a href={`mailto:${email}`} className="hover:underline">
+                {email}
+              </a>
+
+              {index < recipients.length - 1 ? ", " : ""}
+            </Fragment>
+          ))}
+        </TableCell>
+      );
+    },
+  },
+  {
+    id: "status",
+    accessorKey: "status",
+    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <EmailStatusField status={row.getValue("status")} />
+      </TableCell>
+    ),
+  },
+  {
+    id: "sentAt",
+    accessorKey: "sentAt",
+    header: ({ column }) => <TableColumnHeader column={column} title="Verzenddatum" />,
+    cell: ({ row }) => {
+      const sentAt = row.original.sentAt;
+      return <TableCell>{sentAt ? formatDateTime(sentAt) : ""}</TableCell>;
+    },
+  },
+];

package/dist/templates/spark/src/app/admin/emails/_config/commands.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { commandBuilder, ensureArray } from "@tulip-systems/commands";
+import {
+  ArchiveCommand,
+  CommandClick,
+  CommandLabel,
+  type CommandMutationMeta,
+  DeleteCommand,
+  RestoreCommand,
+} from "@tulip-systems/commands/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+
+type EmailBulkCommandItem = { id: string; isDeleted: boolean };
+
+const bulkEmailCommandBuilder = commandBuilder
+  .$type<EmailBulkCommandItem | EmailBulkCommandItem[]>()
+  .transform(ensureArray);
+
+export const emailCreateCommand = commandBuilder.permission({ email: ["create"] }).render(() => (
+  <CommandClick
+    variables={undefined}
+    mutation={orpc.emails.create.mutationOptions({
+      onSuccess: (data, _vars, _result, context) => {
+        toast.success("Nieuwe e-mail is aangemaakt");
+
+        const meta = context.meta as CommandMutationMeta;
+        if (data.id) meta.router.push(`/admin/emails/${data.id}`);
+      },
+    })}
+    label="Nieuwe e-mail"
+  >
+    <Icons.add className="size-4" />
+    <CommandLabel />
+  </CommandClick>
+));
+export const emailArchiveCommand = bulkEmailCommandBuilder
+  .permission({ email: ["archive"] })
+  .visibleWhen(({ data }) => data.every((item) => !item.isDeleted))
+  .render(({ data }) => (
+    <ArchiveCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.emails.archive.mutationOptions({
+        onSuccess: () => toast.success("Succesvol gearchiveerd"),
+      })}
+    />
+  ));
+export const emailRestoreCommand = bulkEmailCommandBuilder
+  .permission({ email: ["archive"] })
+  .visibleWhen(({ data }) => data.every((item) => item.isDeleted))
+  .render(({ data }) => (
+    <RestoreCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.emails.restore.mutationOptions({
+        onSuccess: () => toast.success("Succesvol hersteld"),
+      })}
+    />
+  ));
+export const emailDeleteCommand = bulkEmailCommandBuilder
+  .permission({ email: ["delete"] })
+  .visibleWhen(({ data }) => data.every((item) => item.isDeleted))
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.emails.delete.mutationOptions({
+        onSuccess: (_data, _vars, _result, context) => {
+          toast.success("Succesvol verwijderd");
+          const meta = context.meta as CommandMutationMeta;
+          meta.router.push("/admin/emails");
+        },
+      })}
+    />
+  ));

package/dist/templates/spark/src/app/admin/emails/_config/filters.ts

@@ -0,0 +1,48 @@
+import {
+  arrayFilter,
+  booleanFilter,
+  createFilteringParser,
+  defineFilters,
+  enumFilter,
+  resolveFiltersSchema,
+  stringFilter,
+} from "@tulip-systems/query";
+import { createDatabaseFiltersCompiler } from "@tulip-systems/query/drizzle";
+import type { z } from "zod";
+import { emailStatusEnum } from "../_lib/schema";
+
+export const emailsFilters = defineFilters({
+  search: stringFilter.build((value) =>
+    value
+      ? {
+          or: [
+            { field: "to", operator: "ilike", value: `%${value}%` },
+            { field: "cc", operator: "ilike", value: `%${value}%` },
+            { field: "bcc", operator: "ilike", value: `%${value}%` },
+            { field: "subject", operator: "ilike", value: `%${value}%` },
+            { field: "body", operator: "ilike", value: `%${value}%` },
+          ],
+        }
+      : null,
+  ),
+  status: arrayFilter(enumFilter(emailStatusEnum.enumValues)).build((value) =>
+    value?.length ? { field: "status", operator: "in", value } : null,
+  ),
+  isDeleted: booleanFilter.build((value) => ({
+    field: "isDeleted",
+    operator: "eq",
+    value: value ?? false,
+  })),
+});
+
+/**
+ * Validators
+ */
+export const emailFiltersSchema = resolveFiltersSchema(emailsFilters);
+export type EmailFilters = z.input<typeof emailFiltersSchema>;
+
+/**
+ * Parser and compilers
+ */
+export const emailFiltersParser = createFilteringParser(emailsFilters);
+export const emailDatabaseFiltersCompiler = createDatabaseFiltersCompiler(emailsFilters);

package/dist/templates/spark/src/app/admin/emails/_config/sorting.ts

@@ -0,0 +1,33 @@
+import {
+  createSortingParser,
+  defineSorting,
+  resolveSortingSchema,
+  sortOption,
+} from "@tulip-systems/query";
+import { createDatabaseSortingCompiler } from "@tulip-systems/query/drizzle";
+import { createLocalSortingCompiler } from "@tulip-systems/query/tanstack-db";
+
+export const emailTableSorts = defineSorting({
+  subject: sortOption((direction) => ({ field: "subject", direction })),
+  status: sortOption((direction) => ({ field: "status", direction })),
+  sentAt: sortOption((direction) => ({ field: "sentAt", direction })),
+  createdAt: sortOption((direction) => ({ field: "createdAt", direction })),
+});
+
+/**
+ * Validators
+ */
+export const emailTableSortsSchema = resolveSortingSchema(emailTableSorts);
+
+/**
+ * Parsers
+ */
+export const emailTableSortsParser = createSortingParser(emailTableSorts, {
+  fallback: [
+    { key: "sentAt", direction: "desc" },
+    { key: "createdAt", direction: "desc" },
+  ],
+});
+
+export const emailTableLocalSortsCompiler = createLocalSortingCompiler(emailTableSorts);
+export const emailTableDatabaseSortsCompiler = createDatabaseSortingCompiler(emailTableSorts);