@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/purchase-orders/_components/create-command.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { type DefaultError, type MutationOptions, useSuspenseQueries } from "@tanstack/react-query";
+import {
+  CommandFormDialog,
+  CommandFormDialogCancel,
+  CommandFormDialogContent,
+  CommandFormDialogFields,
+  CommandFormDialogFooter,
+  CommandFormDialogHeader,
+  CommandFormDialogSubmit,
+  CommandFormDialogTitle,
+  CommandFormDialogTrigger,
+} from "@tulip-systems/commands/client";
+import { ComboboxDropdown } from "@tulip-systems/ui/combobox-dropdown";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@tulip-systems/ui/react-hook-form";
+import type React from "react";
+import { useForm } from "react-hook-form";
+import { orpc } from "@/server/router/client";
+import {
+  type CreatePurchaseOrderInput,
+  type CreatePurchaseOrderSchema,
+  createPurchaseOrderSchema,
+} from "../_lib/validators";
+
+export type CreatePurchaseOrderCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: CreatePurchaseOrderSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: Partial<CreatePurchaseOrderInput>;
+  children?: React.ReactNode;
+};
+
+export function CreatePurchaseOrderCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  defaultValues,
+  children,
+}: CreatePurchaseOrderCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const [suppliers, projects] = useSuspenseQueries({
+    queries: [orpc.suppliers.getAll.queryOptions(), orpc.projects.getAll.queryOptions()],
+  });
+
+  const form = useForm<CreatePurchaseOrderInput>({
+    resolver: standardSchemaResolver(createPurchaseOrderSchema),
+    defaultValues,
+  });
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Bestelling Toevoegen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="supplierId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Leverancier</FormLabel>
+                  <FormControl>
+                    <ComboboxDropdown
+                      items={suppliers.data.map(({ id, name }) => ({ id, value: name }))}
+                      onSelect={(value) => value && field.onChange(value.id)}
+                      placeholder="Kies een leverancier"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="projectId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Project</FormLabel>
+                  <FormControl>
+                    <ComboboxDropdown
+                      items={projects.data.map(({ id, title }) => ({ id, value: title }))}
+                      onSelect={(value) => value && field.onChange(value.id)}
+                      placeholder="Kies een project"
+                    />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Toevoegen</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </Form>
+    </CommandFormDialog>
+  );
+}
+
+export const CreatePurchaseOrderCommandTrigger = CommandFormDialogTrigger;

package/dist/templates/spark/src/app/admin/purchase-orders/_components/pdf-commands.tsx

@@ -0,0 +1,57 @@
+// "use client";
+
+import { PDFDownloadLink, PDFViewer } from "@react-pdf/renderer";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import {
+  CommandDialog,
+  CommandDialogContent,
+  CommandDialogTrigger,
+  CommandEmpty,
+  CommandLabel,
+} from "@tulip-systems/commands/client";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+import { PurchaseOrderPdf } from "./pdf-document";
+
+export function PurchaseOrderPdfViewerCommand({ id }: { id: string }) {
+  const { data, isError, error } = useSuspenseQuery(
+    orpc.purchaseOrders.getPDFData.queryOptions({ input: { id } }),
+  );
+
+  if (!data || isError) {
+    console.error(error);
+    return null;
+  }
+
+  return (
+    <CommandDialog>
+      <CommandDialogTrigger className="flex items-center gap-2" label="Preview">
+        <Icons.preview className="w-4" />
+        <CommandLabel />
+      </CommandDialogTrigger>
+
+      <CommandDialogContent className="h-[90dvh] overflow-y-hidden sm:max-w-[85vw]">
+        <PDFViewer className="h-dvh w-full">
+          <PurchaseOrderPdf data={data} />
+        </PDFViewer>
+      </CommandDialogContent>
+    </CommandDialog>
+  );
+}
+
+export function PurchaseOrderPDFDownloadCommand({ id }: { id: string }) {
+  const { data, isError } = useSuspenseQuery(
+    orpc.purchaseOrders.getPDFData.queryOptions({ input: { id } }),
+  );
+
+  if (!data || isError) return null;
+
+  return (
+    <PDFDownloadLink document={<PurchaseOrderPdf data={data} />} fileName={`${data.number}.pdf`}>
+      <CommandEmpty label="Download">
+        <Icons.download className="w-4" />
+        <CommandLabel />
+      </CommandEmpty>
+    </PDFDownloadLink>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/_components/pdf-document.tsx

@@ -0,0 +1,112 @@
+import "@/components/pdf/pdf-config";
+import { Document, Page, Text, View } from "@react-pdf/renderer";
+import { formatCurrency, formatDate } from "@tulip-systems/core";
+import { tw } from "@/components/pdf/pdf-config";
+import { PDFTTotalFooter, PdfContactFooter, PdfPageNumber } from "@/components/pdf/pdf-footer";
+import { PdfContactSection, PdfTopBar } from "@/components/pdf/pdf-header";
+import { PDFRichtext } from "@/components/pdf/pdf-richtext";
+import {
+  PDFTable,
+  PDFTableCellText,
+  PDFTableHeader,
+  PDFTableHeaderTitle,
+  PDFTableRow,
+} from "@/components/pdf/pdf-table";
+import type { RouterOutputs } from "@/server/router/router";
+import { calculatePurchaseOrderTotal } from "../_lib/helpers";
+
+export type PurchaseOrderPdfProps = {
+  data: RouterOutputs["purchaseOrders"]["getPDFData"];
+};
+
+export function PurchaseOrderPdf({ data }: PurchaseOrderPdfProps) {
+  if (!data) return null;
+
+  const subtotal = calculatePurchaseOrderTotal(data.items);
+
+  return (
+    <Document title={data?.number}>
+      <Page size="A4" style={tw("text-[7px]")}>
+        <PdfTopBar title="Bestelling" />
+
+        {/* 
+        
+            Order Header
+        */}
+        <View style={tw("flex flex-row mb-10 px-8")}>
+          <PdfContactSection
+            title="Leverancier"
+            name={data.supplier.name}
+            vatNumber={data.supplier.vatNumber}
+            addresses={data.supplier.suppliersAddresses.flatMap(({ address }) => address)}
+          />
+
+          {data.notes && (
+            <View style={tw("w-1/2 text-xs leading-relaxed")}>
+              <Text style={tw("text-xs font-bold mb-2.5")}>Opmerking</Text>
+              <PDFRichtext className="text-xs" content={data?.notes} />
+            </View>
+          )}
+        </View>
+
+        {/* Order information */}
+        <View style={tw("flex flex-row text-xs gap-16 px-8 mb-3")}>
+          <View style={tw("flex flex-row gap-2")}>
+            <Text style={tw("text-xs font-bold")}>Bestelnummer:</Text>
+            <Text style={tw("text-xs font-normal")}>{data?.number}</Text>
+          </View>
+
+          <View style={tw("flex flex-row gap-2")}>
+            <Text style={tw("text-xs font-bold")}>Besteldatum:</Text>
+            <Text style={tw("text-xs font-normal")}>{formatDate(new Date())}</Text>
+          </View>
+
+          {data?.project && (
+            <View style={tw("flex flex-row gap-2")}>
+              <Text style={tw("text-xs font-bold")}>Project:</Text>
+              <Text style={tw("text-xs font-normal")}>{data?.project.title}</Text>
+            </View>
+          )}
+        </View>
+
+        {/* 
+          
+            Order Items
+          */}
+        <PDFTable>
+          <PDFTableHeader>
+            <PDFTableHeaderTitle className="basis-[15%]">Nr.</PDFTableHeaderTitle>
+            <PDFTableHeaderTitle className="basis-[50%]">Omschrijving</PDFTableHeaderTitle>
+            <PDFTableHeaderTitle className="basis-[10%]">Aantal</PDFTableHeaderTitle>
+            <PDFTableHeaderTitle className="basis-[12%]">Prijs</PDFTableHeaderTitle>
+            <PDFTableHeaderTitle className="basis-[13%] text-right">Totaal</PDFTableHeaderTitle>
+          </PDFTableHeader>
+
+          {data?.items?.map((item) => (
+            <PDFTableRow key={item.id}>
+              <PDFTableCellText className="basis-[15%]">
+                {item.product.articleNumber}
+              </PDFTableCellText>
+              <PDFTableCellText className="basis-[50%]">{item.product.name}</PDFTableCellText>
+              <PDFTableCellText className="basis-[10%]">{item?.quantity}</PDFTableCellText>
+              <PDFTableCellText className="basis-[12%]">
+                {formatCurrency(item.price)}
+              </PDFTableCellText>
+              <PDFTableCellText className="basis-[13%] pr-0 text-right font-bold">
+                {formatCurrency(item.total)}
+              </PDFTableCellText>
+            </PDFTableRow>
+          ))}
+        </PDFTable>
+
+        {/* 
+          
+          Order footer
+          */}
+        <PDFTTotalFooter subtotal={subtotal} vatRate={21} />
+        <PdfPageNumber />
+        <PdfContactFooter />
+      </Page>
+    </Document>
+  );
+}

package/dist/templates/spark/src/app/admin/purchase-orders/_components/tables.tsx

@@ -0,0 +1,141 @@
+"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 { emailsFilters } from "../../emails/_config/filters";
+import { emailTableSorts } from "../../emails/_config/sorting";
+import type { Email } from "../../emails/_lib/validators";
+import type { PurchaseOrderColumn } from "../_config/columns-data";
+import { purchaseOrdersFilters } from "../_config/filters";
+import { purchaseOrderTableSorts } from "../_config/sorting";
+
+/**
+ * Client data table
+ */
+type PurchaseOrderInfiniteTableProviderProps<TData extends PurchaseOrderColumn> = {
+  columns: TableColumnDef<TData>[];
+  commands?: CommandFor<TData[]>[];
+  filterOptions?: UseFiltersOptions<typeof purchaseOrdersFilters>;
+  columnVisibility?: VisibilityState;
+};
+
+export function PurchaseOrderPaginationTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+  children,
+}: PropsWithChildren<PurchaseOrderInfiniteTableProviderProps<PurchaseOrderColumn>>) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(purchaseOrdersFilters, filterOptions);
+  const sorting = useSorting(purchaseOrderTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseQuery(orpc.purchaseOrders.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<PurchaseOrderColumn>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}
+
+/**
+ * PurchaseOrder Emails data table
+ */
+export type PurchaseOrderEmailTableData = Email & { purchaseOrderId: string };
+
+type PurchaseOrderEmailsInfiniteTableProviderProps<TData extends PurchaseOrderEmailTableData> = {
+  columns: TableColumnDef<TData>[];
+  commands?: CommandFor<TData[]>[];
+  filterOptions?: UseFiltersOptions<typeof emailsFilters>;
+  columnVisibility?: VisibilityState;
+};
+
+export function PurchaseOrderEmailsPaginationTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+
+  children,
+}: PropsWithChildren<PurchaseOrderEmailsInfiniteTableProviderProps<PurchaseOrderEmailTableData>>) {
+  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.purchaseOrders.listEmails.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<PurchaseOrderEmailTableData>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

package/dist/templates/spark/src/app/admin/purchase-orders/_components/toolbars.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";
+import { useTableConfigContext } from "@tulip-systems/data-tables/client";
+import { resolveFilterDescriptors } from "@tulip-systems/query";
+import { FilterCombobox, FilterSearch } from "@tulip-systems/query/client";
+import { type PropsWithChildren, useDeferredValue } from "react";
+import { orpc } from "@/server/router/client";
+import { purchaseOrdersFilters } from "../_config/filters";
+import { purchaseOrderStatusConfig } from "../_config/status";
+
+const purchaseOrdersFiltersDescriptors = resolveFilterDescriptors(purchaseOrdersFilters);
+
+export function PurchaseOrderTableToolbar({ children }: PropsWithChildren) {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <FilterSearch placeholder="Zoeken..." filter={purchaseOrdersFiltersDescriptors.search} />
+
+        <PurchaseOrderSupplierFilter />
+      </TableToolbarList>
+
+      <TableToolbarList>{children}</TableToolbarList>
+    </TableToolbar>
+  );
+}
+
+/**
+ * Filter
+ */
+export function PurchaseOrderSupplierFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(orpc.purchaseOrders.filterSuppliers.queryOptions({ input }));
+
+  return (
+    <FilterCombobox
+      title="Leverancier"
+      filter={purchaseOrdersFiltersDescriptors.supplierId}
+      options={data}
+    />
+  );
+}
+
+export function PurchaseOrderStatusFilter() {
+  return (
+    <FilterCombobox
+      title="Status"
+      filter={purchaseOrdersFiltersDescriptors.status}
+      options={purchaseOrderStatusConfig}
+    />
+  );
+}
+
+// import { getServerDataTableSearchParams } from "@tulip-systems/data-tables/drizzle/server";
+// import { SQL } from "drizzle-orm";
+
+// /**
+//  * Get purchaseOrder table filters
+//  */
+// export function getPurchaseOrderFilters(): SQL {
+//   const query = getServerDataTableSearchParams();
+//   if(!query) return null
+
+//   const status = convertFilterValue<PurchaseOrderStatus>(searchParams.status);
+//   const supplier = convertFilterValue(searchParams.supplier);
+
+//   return {
+//     isDeleted: !!searchParams.isDeleted,
+//     ...(status && { status: { in: status } }),
+//     ...(supplier && { supplier: { id: { in: supplier } } }),
+//   };
+// }
+
+// /**
+//  * PurchaseOrder client filter
+//  */
+// export async function PurchaseOrderSupplierFilter(props: { searchParams: PageSearchParams }) {
+//   const filters = getPurchaseOrderFilters(props.searchParams);
+
+//   const suppliers = await prisma.supplier.findMany({
+//     where: { purchaseOrders: { some: filters } },
+//     orderBy: { name: "asc" },
+//     include: { _count: true },
+//   });
+
+//   const options: ServerDataTableFilterOption[] = suppliers.map((supplier) => {
+//     return { value: supplier.id, label: supplier.name, total: supplier._count.purchaseOrders };
+//   });
+
+//   return <ServerDataTableFilter id="supplier" title="Leveranciers" options={options} />;
+// }

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

@@ -0,0 +1,164 @@
+"use client";
+
+import { formatCurrency, formatDate, formatDateTime } from "@tulip-systems/core";
+import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import { createTableSelectCell } from "@tulip-systems/data-tables/client";
+import { Editor, EditorContent } from "@tulip-systems/editor/client";
+import Link from "next/link";
+import { Fragment } from "react";
+import { EmailStatusField } from "../../emails/_config/status";
+import type { Project } from "../../projects/_lib/validators";
+import type { PurchaseOrderItem } from "../../purchase-order-items/_lib/validators";
+import type { Supplier } from "../../suppliers/_lib/validators";
+import type { PurchaseOrderEmailTableData } from "../_components/tables";
+import { calculatePurchaseOrderTotal } from "../_lib/helpers";
+import type { PurchaseOrder } from "../_lib/validators";
+import { PurchaseOrderStatusField } from "./status";
+
+export type PurchaseOrderColumn = PurchaseOrder & {
+  supplier: Supplier;
+  project: Project;
+  items: PurchaseOrderItem[];
+};
+
+export const purchaseOrderColumns: TableColumnDef<PurchaseOrderColumn>[] = [
+  createTableSelectCell(),
+  {
+    accessorKey: "number",
+    header: ({ column }) => <TableColumnHeader column={column} title="Nummer" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <Link href={`/admin/purchase-orders/${row.original.id}`} className="hover:underline">
+          {row.getValue("number")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "note",
+    header: ({ column }) => <TableColumnHeader column={column} title="Notitie" />,
+    cell: ({ row }) => (
+      <TableCell className="line-clamp-1 max-w-[500px] truncate">
+        <Editor value={row.original.notes} variant="preview" disabled>
+          <EditorContent />
+        </Editor>
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "createdAt",
+    header: ({ column }) => <TableColumnHeader column={column} title="Datum" />,
+    cell: ({ row }) => <TableCell>{formatDate(row.getValue("createdAt"))}</TableCell>,
+  },
+  {
+    accessorKey: "supplier_name",
+    header: ({ column }) => <TableColumnHeader column={column} title="Leverancier" />,
+    accessorFn: (row) => row.supplier?.name ?? "",
+    cell: ({ row }) => (
+      <TableCell>
+        <Link
+          href={`/admin/suppliers/${row.original.supplier.id}`}
+          className="w-fit max-w-[500px] truncate hover:underline"
+        >
+          {row.getValue("supplier_name")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    id: "projectTitle",
+    header: ({ column }) => <TableColumnHeader column={column} title="Project" />,
+    accessorFn: (row) => row.project?.title ?? "",
+    cell: ({ row }) => (
+      <TableCell>
+        <Link
+          href={`/admin/projects/${row.original.project?.id}`}
+          className="max-w-[500px] truncate hover:underline"
+        >
+          {row.getValue("projectTitle")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <PurchaseOrderStatusField status={row.getValue("status")} />
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "total",
+    header: ({ column }) => <TableColumnHeader column={column} title="Totaal" />,
+    accessorFn: (row) => calculatePurchaseOrderTotal(row.items),
+    cell: ({ row }) => (
+      <TableCell className="max-w-[500px] truncate">
+        {formatCurrency(row.getValue("total"))}
+      </TableCell>
+    ),
+  },
+];
+
+/**
+ * PurchaseOrder emails
+ */
+export const purchaseOrderEmailsColumns: TableColumnDef<PurchaseOrderEmailTableData>[] = [
+  createTableSelectCell(),
+  {
+    id: "subject",
+    accessorKey: "subject",
+    header: ({ column }) => <TableColumnHeader column={column} title="Onderwerp" />,
+    cell: async ({ row }) => (
+      <TableCell>
+        <Link
+          href={`/admin/purchase-orders/${row.original.purchaseOrderId}/emails/${row.original.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>;
+    },
+  },
+];