@tulip-systems/create-app 0.11.1

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

@@ -0,0 +1,90 @@
+"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 { quotationsFilters } from "../_config/filters";
+import { quotationStatusConfig } from "../_config/status";
+
+const quotationsFiltersDescriptors = resolveFilterDescriptors(quotationsFilters);
+
+export function QuotationTableToolbar({ children }: PropsWithChildren) {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <FilterSearch placeholder="Zoeken..." filter={quotationsFiltersDescriptors.search} />
+
+        <QuotationClientFilter />
+      </TableToolbarList>
+
+      <TableToolbarList>{children}</TableToolbarList>
+    </TableToolbar>
+  );
+}
+
+/**
+ * Filter
+ */
+export function QuotationClientFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(orpc.quotations.filterClients.queryOptions({ input }));
+
+  return (
+    <FilterCombobox title="Klant" filter={quotationsFiltersDescriptors.clientId} options={data} />
+  );
+}
+
+export function QuotationStatusFilter() {
+  return (
+    <FilterCombobox
+      title="Status"
+      filter={quotationsFiltersDescriptors.status}
+      options={quotationStatusConfig}
+    />
+  );
+}
+
+// import { getServerDataTableSearchParams } from "@tulip-systems/data-tables/drizzle/server";
+// import { SQL } from "drizzle-orm";
+
+// /**
+//  * Get quotation table filters
+//  */
+// export function getQuotationFilters(): SQL {
+//   const query = getServerDataTableSearchParams();
+//   if(!query) return null
+
+//   const status = convertFilterValue<QuotationStatus>(searchParams.status);
+//   const supplier = convertFilterValue(searchParams.supplier);
+
+//   return {
+//     isDeleted: !!searchParams.isDeleted,
+//     ...(status && { status: { in: status } }),
+//     ...(supplier && { supplier: { id: { in: supplier } } }),
+//   };
+// }
+
+// /**
+//  * Quotation client filter
+//  */
+// export async function QuotationClientFilter(props: { searchParams: PageSearchParams }) {
+//   const filters = getQuotationFilters(props.searchParams);
+
+//   const suppliers = await prisma.supplier.findMany({
+//     where: { quotations: { some: filters } },
+//     orderBy: { name: "asc" },
+//     include: { _count: true },
+//   });
+
+//   const options: ServerDataTableFilterOption[] = suppliers.map((supplier) => {
+//     return { value: supplier.id, label: supplier.name, total: supplier._count.quotations };
+//   });
+
+//   return <ServerDataTableFilter id="supplier" title="Leveranciers" options={options} />;
+// }

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

@@ -0,0 +1,135 @@
+"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 Link from "next/link";
+import { Fragment } from "react";
+import { calculateNetAmount } from "@/lib/helpers/calculate";
+import { generateClientHref } from "../../clients/_lib/helpers";
+import { EmailStatusField } from "../../emails/_config/status";
+import type { QuotationEmailTableData, QuotationTableData } from "../_components/tables";
+import { QuotationStatusField } from "./status";
+
+export const quotationColumns: TableColumnDef<QuotationTableData>[] = [
+  createTableSelectCell(),
+  {
+    accessorKey: "number",
+    header: ({ column }) => <TableColumnHeader column={column} title="Nummer" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <Link href={`/admin/quotations/${row.original.id}`} className="hover:underline">
+          {row.getValue("number")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "title",
+    header: ({ column }) => <TableColumnHeader column={column} title="Titel" />,
+    cell: ({ row }) => (
+      <TableCell className="line-clamp-1 max-w-[500px] truncate">{row.getValue("title")}</TableCell>
+    ),
+  },
+  {
+    id: "clientName",
+    header: ({ column }) => <TableColumnHeader column={column} title="Klant" />,
+    accessorFn: (row) => row.client?.name ?? "",
+    cell: ({ row }) => (
+      <TableCell>
+        <Link
+          href={generateClientHref(row.original.client)}
+          className="w-fit max-w-[500px] truncate hover:underline"
+        >
+          {row.getValue("clientName")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <QuotationStatusField status={row.getValue("status")} />
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "deadline",
+    header: ({ column }) => <TableColumnHeader column={column} title="Deadline" />,
+    cell: ({ row }) => <TableCell>{formatDate(row.getValue("deadline"))}</TableCell>,
+  },
+  {
+    accessorKey: "total",
+    header: ({ column }) => <TableColumnHeader column={column} title="Totaal" />,
+    accessorFn: (row) => calculateNetAmount(row.items),
+    cell: ({ row }) => (
+      <TableCell className="max-w-[500px] truncate">
+        {formatCurrency(row.getValue("total"))}
+      </TableCell>
+    ),
+  },
+];
+
+/**
+ * Quotation emails
+ */
+export const quotationEmailsColumns: TableColumnDef<QuotationEmailTableData>[] = [
+  createTableSelectCell(),
+  {
+    id: "subject",
+    accessorKey: "subject",
+    header: ({ column }) => <TableColumnHeader column={column} title="Onderwerp" />,
+    cell: async ({ row }) => (
+      <TableCell>
+        <Link
+          href={`/admin/quotations/${row.original.quotationId}/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>;
+    },
+  },
+];

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

@@ -0,0 +1,244 @@
+"use client";
+
+import { commandBuilder, ensureArray } from "@tulip-systems/commands";
+import {
+  ArchiveCommand,
+  CommandClick,
+  CommandDropdown,
+  CommandDropdownContent,
+  CommandDropdownItem,
+  CommandDropdownTrigger,
+  CommandLabel,
+  type CommandMutationMeta,
+  DeleteCommand,
+  RestoreCommand,
+} from "@tulip-systems/commands/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { ClipboardPlusIcon, Grid2X2PlusIcon, MailPlusIcon } from "lucide-react";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+import {
+  CreateSalesOrderCommand,
+  CreateSalesOrderCommandTrigger,
+} from "../../sales-orders/_components/create-command";
+import {
+  CreateQuotationCommand,
+  CreateQuotationCommandTrigger,
+} from "../_components/create-command";
+import {
+  CreateProjectFromQuotationCommand,
+  CreateProjectFromQuotationCommandTrigger,
+} from "../_components/create-project-command";
+import {
+  QuotationPDFDownloadCommand,
+  QuotationPdfViewerCommand,
+} from "../_components/pdf-commands";
+
+type QuotationBulkCommandItem = { id: string; isDeleted: boolean };
+type QuotationCreateSalesOrderCommandItem = QuotationBulkCommandItem & {
+  title: string;
+  clientId: string;
+  status: string;
+  salesOrder?: { id: string } | null;
+};
+type QuotationCreateProjectCommandItem = QuotationBulkCommandItem & {
+  title: string;
+  clientId: string;
+  status: string;
+  project?: { id: string } | null;
+};
+
+import { QuotationStatusField, quotationStatusConfig } from "./status";
+
+const bulkQuotationCommandBuilder = commandBuilder
+  .$type<QuotationBulkCommandItem | QuotationBulkCommandItem[]>()
+  .transform(ensureArray);
+
+export const quotationPreviewCommand = commandBuilder.$type<{ id: string }>().render(({ data }) => {
+  return <QuotationPdfViewerCommand id={data.id} />;
+});
+export const quotationDownloadCommand = commandBuilder
+  .$type<{ id: string }>()
+  .render(({ data }) => {
+    return <QuotationPDFDownloadCommand id={data.id} />;
+  });
+export const quotationCopyCommand = commandBuilder
+  .$type<QuotationBulkCommandItem>()
+  .permission({ quotation: ["create"] })
+  .visibleWhen(({ data }) => !data.isDeleted)
+  .render(({ data }) => (
+    <CommandClick
+      variables={{ id: data.id }}
+      mutation={orpc.quotations.copy.mutationOptions({
+        onSuccess: (result, _vars, _mutationResult, context) => {
+          toast.success("Offerte is gedupliceerd");
+          const meta = context.meta as CommandMutationMeta;
+          meta.router.push(`/admin/quotations/${result.id}`);
+        },
+      })}
+      label="Dupliceer"
+    >
+      <Icons.copy className="size-4" />
+      <CommandLabel />
+    </CommandClick>
+  ));
+export const quotationStatusCommand = bulkQuotationCommandBuilder.render(({ data }) => (
+  <CommandDropdown>
+    <CommandDropdownTrigger label="Status">
+      <Icons.edit className="w-4" />
+      <CommandLabel />
+    </CommandDropdownTrigger>
+
+    <CommandDropdownContent>
+      {quotationStatusConfig.flatMap((status) => (
+        <CommandDropdownItem
+          key={status.value}
+          variables={{ ids: data.map((item) => item.id), status: status.value }}
+          mutation={orpc.quotations.setStatus.mutationOptions({
+            onSuccess: () => {
+              toast.success(`Status is gewijzigd naar ${status.label.toLowerCase()}`);
+            },
+          })}
+        >
+          <QuotationStatusField status={status.value} />
+        </CommandDropdownItem>
+      ))}
+    </CommandDropdownContent>
+  </CommandDropdown>
+));
+export const quotationCreateEmailCommand = commandBuilder
+  .$type<{ id: string }>()
+
+  .permission({ email: ["create"] })
+  .render(({ data }) => (
+    <CommandClick
+      variables={{ quotationId: data.id }}
+      mutation={orpc.quotations.createEmail.mutationOptions({
+        onSuccess: (result, _vars, _mutationResult, context) => {
+          toast.success("Nieuwe e-mail is aangemaakt");
+
+          const meta = context.meta as CommandMutationMeta;
+          if (result.id) meta.router.push(`/admin/quotations/${data.id}/emails/${result.id}`);
+        },
+      })}
+      label="Nieuwe e-mail"
+    >
+      <MailPlusIcon />
+      <CommandLabel />
+    </CommandClick>
+  ));
+export const quotationCreateSalesOrderCommand = commandBuilder
+  .$type<QuotationCreateSalesOrderCommandItem>()
+
+  .permission({ salesOrder: ["update"] })
+  .visibleWhen(({ data }) => [data.status === "accepted", !data.salesOrder, !data.isDeleted])
+  .render(({ data }) => (
+    <CreateSalesOrderCommand
+      fieldVisibility={{ clientId: false }}
+      defaultValues={{
+        title: data.title,
+        clientId: data.clientId,
+        quotationId: data.id,
+      }}
+      variables={(values) => ({ ...values, quotationId: data.id })}
+      mutation={orpc.salesOrders.createFromQuotation.mutationOptions({
+        onSuccess: (result, _vars, _mutationResult, context) => {
+          toast.success("Verkoopbon succesvol aangemaakt");
+
+          const meta = context.meta as CommandMutationMeta;
+          if (result.id) meta.router.push(`/admin/sales-orders/${result.id}`);
+        },
+      })}
+    >
+      <CreateSalesOrderCommandTrigger label="Maak een verkoopbon" hotkey="mod+i">
+        <ClipboardPlusIcon />
+        <CommandLabel />
+      </CreateSalesOrderCommandTrigger>
+    </CreateSalesOrderCommand>
+  ));
+export const quotationCreateProjectCommand = commandBuilder
+  .$type<QuotationCreateProjectCommandItem>()
+
+  .permission({ project: ["create"] })
+  .visibleWhen(({ data }) => [data.status === "accepted", !data.project, !data.isDeleted])
+  .render(({ data }) => (
+    <CreateProjectFromQuotationCommand
+      fieldVisibility={{ clientId: false, quotationId: false }}
+      defaultValues={{
+        title: data.title,
+        clientId: data.clientId,
+        quotationId: data.id,
+      }}
+      variables={(values) => values}
+      mutation={orpc.projects.createFromQuotation.mutationOptions({
+        onSuccess: (result, _vars, _mutationResult, context) => {
+          toast.success("Project succesvol aangemaakt");
+
+          const meta = context.meta as CommandMutationMeta;
+          if (result.id) meta.router.push(`/admin/projects/${result.id}`);
+        },
+      })}
+    >
+      <CreateProjectFromQuotationCommandTrigger label="Maak een project" hotkey="mod+p">
+        <Grid2X2PlusIcon />
+        <CommandLabel />
+      </CreateProjectFromQuotationCommandTrigger>
+    </CreateProjectFromQuotationCommand>
+  ));
+export const quotationCreateCommand = commandBuilder
+
+  .permission({ quotation: ["update"] })
+  .render(() => (
+    <CreateQuotationCommand
+      variables={(values) => values}
+      mutation={orpc.quotations.create.mutationOptions({
+        onSuccess: (result, _vars, _mutationResult, context) => {
+          toast.success("Offerte succesvol toegevoegd");
+          const meta = context.meta as CommandMutationMeta;
+          meta.router.push(`/admin/quotations/${result.id}`);
+        },
+      })}
+    >
+      <CreateQuotationCommandTrigger label="Toevoegen" hotkey="mod+i">
+        <Icons.add />
+        <CommandLabel />
+      </CreateQuotationCommandTrigger>
+    </CreateQuotationCommand>
+  ));
+export const quotationArchiveCommand = bulkQuotationCommandBuilder
+  .permission({ quotation: ["archive"] })
+  .visibleWhen(({ data }) => data.every((item) => !item.isDeleted))
+  .render(({ data }) => (
+    <ArchiveCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.quotations.archive.mutationOptions({
+        onSuccess: () => toast.success("Succesvol gearchiveerd"),
+      })}
+    />
+  ));
+export const quotationRestoreCommand = bulkQuotationCommandBuilder
+  .permission({ quotation: ["archive"] })
+  .visibleWhen(({ data }) => data.every((item) => item.isDeleted))
+  .render(({ data }) => (
+    <RestoreCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.quotations.restore.mutationOptions({
+        onSuccess: () => toast.success("Succesvol hersteld"),
+      })}
+    />
+  ));
+export const quotationDeleteCommand = bulkQuotationCommandBuilder
+  .permission({ quotation: ["delete"] })
+  .visibleWhen(({ data }) => data.every((item) => item.isDeleted))
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.quotations.delete.mutationOptions({
+        onSuccess: (_result, _vars, _mutationResult, context) => {
+          toast.success("Succesvol verwijderd");
+          const meta = context.meta as CommandMutationMeta;
+          meta.router.push("/admin/quotations");
+        },
+      })}
+    />
+  ));

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

@@ -0,0 +1,79 @@
+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 { quotationStatusEnum } from "../_lib/schema";
+
+export const quotationsFilters = defineFilters({
+  search: stringFilter.build((value) =>
+    value
+      ? {
+          or: [
+            { field: "number", operator: "ilike", value: `%${value}%` },
+            { field: "notes", operator: "ilike", value: `%${value}%` },
+            { field: "title", operator: "ilike", value: `%${value}%` },
+          ],
+        }
+      : null,
+  ),
+  clientId: arrayFilter(stringFilter).build((value) =>
+    value?.length ? { field: "clientId", operator: "in", value } : null,
+  ),
+  projectId: arrayFilter(stringFilter).build((value) =>
+    value?.length ? { field: "projectId", operator: "in", value } : null,
+  ),
+  status: arrayFilter(enumFilter(quotationStatusEnum.enumValues)).build((value) =>
+    value?.length ? { field: "status", operator: "in", value } : null,
+  ),
+  isDeleted: booleanFilter.build((value) => ({
+    field: "isDeleted",
+    operator: "eq",
+    value: value ?? false,
+  })),
+});
+
+export const quotationsEmailsFilters = defineFilters({
+  search: stringFilter.build((value) =>
+    value
+      ? {
+          or: [
+            { field: "subject", operator: "ilike", value: `%${value}%` },
+            { field: "body", operator: "ilike", value: `%${value}%` },
+            { field: "to", operator: "ilike", value: `%${value}%` },
+            { field: "cc", operator: "ilike", value: `%${value}%` },
+            { field: "bcc", operator: "ilike", value: `%${value}%` },
+          ],
+        }
+      : null,
+  ),
+  quotationId: arrayFilter(stringFilter).build((value) =>
+    value?.length ? { field: "quotationId", operator: "in", value } : null,
+  ),
+});
+
+/**
+ * Validators
+ */
+export const quotationsFiltersSchema = resolveFiltersSchema(quotationsFilters);
+export type QuotationsFilters = z.input<typeof quotationsFiltersSchema>;
+
+export const quotationsEmailsFiltersSchema = resolveFiltersSchema(quotationsEmailsFilters);
+export type QuotationsEmailsFiltersSchemaFiltersSchema = z.input<
+  typeof quotationsEmailsFiltersSchema
+>;
+
+/**
+ * Parser and compilers
+ */
+export const quotationFiltersParser = createFilteringParser(quotationsFilters);
+export const quotationDatabaseFiltersCompiler = createDatabaseFiltersCompiler(quotationsFilters);
+export const quotationEmailFiltersParser = createFilteringParser(quotationsEmailsFilters);
+export const quotationEmailDatabaseFiltersCompiler =
+  createDatabaseFiltersCompiler(quotationsEmailsFilters);

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

@@ -0,0 +1,31 @@
+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 quotationTableSorts = defineSorting({
+  number: sortOption((direction) => ({ field: "number", direction })),
+  title: sortOption((direction) => ({ field: "title", direction })),
+  createdAt: sortOption((direction) => ({ field: "createdAt", direction })),
+  status: sortOption((direction) => ({ field: "status", direction })),
+});
+
+/**
+ * Validators
+ */
+export const quotationTableSortsSchema = resolveSortingSchema(quotationTableSorts);
+
+/**
+ * Parsers
+ */
+export const quotationTableSortsParser = createSortingParser(quotationTableSorts, {
+  fallback: [{ key: "number", direction: "desc" }],
+});
+
+export const quotationTableLocalSortsCompiler = createLocalSortingCompiler(quotationTableSorts);
+export const quotationTableDatabaseSortsCompiler =
+  createDatabaseSortingCompiler(quotationTableSorts);

package/dist/templates/spark/src/app/admin/quotations/_config/status.tsx

@@ -0,0 +1,56 @@
+import type { ConfigWithIcon } from "@tulip-systems/core";
+import { createStatusVariants, StatusBadge, StatusField } from "@tulip-systems/ui/status";
+import { cva } from "class-variance-authority";
+import { CheckCircle2Icon, PencilRuler, SendHorizonalIcon, XOctagonIcon } from "lucide-react";
+import type { QuotationStatus } from "../_lib/validators";
+
+export const quotationStatusConfig: ConfigWithIcon<QuotationStatus>[] = [
+  {
+    value: "draft",
+    label: "Concept",
+    icon: PencilRuler,
+    className: "stroke-foreground/50 text-foreground/50",
+  },
+  {
+    value: "sent",
+    label: "Verzonden",
+    icon: SendHorizonalIcon,
+    className: "stroke-yellow-500 text-yellow-500",
+  },
+  {
+    value: "accepted",
+    label: "Geaccepteerd",
+    icon: CheckCircle2Icon,
+    className: "stroke-green-500 text-green-500",
+  },
+  {
+    value: "rejected",
+    label: "Afgewezen",
+    icon: XOctagonIcon,
+    className: "stroke-destructive text-destructive",
+  },
+];
+
+export const quotationStatusVariants = cva("", {
+  variants: { status: createStatusVariants(quotationStatusConfig) },
+});
+
+export function QuotationStatusField(props: { status: QuotationStatus }) {
+  return (
+    <StatusField
+      config={quotationStatusConfig}
+      variants={quotationStatusVariants}
+      status={props.status}
+    />
+  );
+}
+
+export function QuotationStatusBadge(props: { status: QuotationStatus }) {
+  return (
+    <StatusBadge
+      config={quotationStatusConfig}
+      variants={quotationStatusVariants}
+      status={props.status}
+    />
+  );
+}