@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/sales-invoices/_components/toolbars.tsx

@@ -0,0 +1,55 @@
+"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 { salesInvoicesFilters } from "../_config/filters";
+import { salesInvoiceStatusConfig } from "../_config/status";
+
+const salesInvoicesFiltersDescriptors = resolveFilterDescriptors(salesInvoicesFilters);
+
+export function SalesInvoiceTableToolbar({ children }: PropsWithChildren) {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <FilterSearch placeholder="Zoeken..." filter={salesInvoicesFiltersDescriptors.search} />
+
+        <SalesInvoiceClientFilter />
+      </TableToolbarList>
+
+      <TableToolbarList>{children}</TableToolbarList>
+    </TableToolbar>
+  );
+}
+
+/**
+ * Filter
+ */
+export function SalesInvoiceClientFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(orpc.salesInvoices.filterClients.queryOptions({ input }));
+
+  return (
+    <FilterCombobox
+      title="Klant"
+      filter={salesInvoicesFiltersDescriptors.clientId}
+      options={data}
+    />
+  );
+}
+
+export function SalesInvoiceStatusFilter() {
+  return (
+    <FilterCombobox
+      title="Status"
+      filter={salesInvoicesFiltersDescriptors.status}
+      options={salesInvoiceStatusConfig}
+    />
+  );
+}

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

@@ -0,0 +1,92 @@
+"use client";
+
+import { formatCurrency, formatDate } 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 { calculateNetAmount } from "@/lib/helpers/calculate";
+import { generateClientHref } from "../../clients/_lib/helpers";
+import type { SalesInvoiceTableData } from "../_components/tables";
+import { formatSalesInvoicePaymentStatement } from "../_lib/helpers";
+import { SalesInvoiceStatusField } from "./status";
+
+export const salesInvoiceColumns: TableColumnDef<SalesInvoiceTableData>[] = [
+  createTableSelectCell(),
+  {
+    accessorKey: "number",
+    header: ({ column }) => <TableColumnHeader column={column} title="Nummer" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <Link href={`/admin/sales-invoices/${row.original.id}`} className="hover:underline">
+          {row.getValue("number")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "title",
+    header: ({ column }) => <TableColumnHeader column={column} title="Titel" />,
+    cell: ({ row }) => <TableCell className="min-w-40">{row.getValue("title")}</TableCell>,
+  },
+  {
+    accessorKey: "createdAt",
+    header: ({ column }) => <TableColumnHeader column={column} title="Datum" />,
+    cell: ({ row }) => <TableCell>{formatDate(row.getValue("createdAt"))}</TableCell>,
+  },
+  {
+    id: "clientName",
+    header: ({ column }) => <TableColumnHeader column={column} title="Klant" />,
+    accessorFn: (row) => row.client?.name ?? "",
+    cell: ({ row }) => (
+      <TableCell className="min-w-40 truncate">
+        <Link
+          href={generateClientHref(row.original.client)}
+          className="w-fit max-w-24 truncate hover:underline"
+        >
+          {row.getValue("clientName")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    id: "salesOrderNumber",
+    header: ({ column }) => <TableColumnHeader column={column} title="Verkoopobon" />,
+    accessorFn: (row) => row.salesOrder?.number ?? "",
+    cell: ({ row }) => (
+      <TableCell className="min-w-40 truncate">
+        <Link
+          href={`/admin/sales-orders/${row.original.salesOrder.id}`}
+          className="w-fit max-w-24 truncate hover:underline"
+        >
+          {row.getValue("salesOrderNumber")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "paymentStatement",
+    header: ({ column }) => <TableColumnHeader column={column} title="Mededeling" />,
+    cell: ({ row }) => (
+      <TableCell className="min-w-40 truncate">
+        {formatSalesInvoicePaymentStatement(row.getValue("paymentStatement"))}
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <SalesInvoiceStatusField status={row.getValue("status")} />
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "total",
+    header: ({ column }) => <TableColumnHeader column={column} title="Totaal" />,
+    accessorFn: (row) => calculateNetAmount(row.items),
+    cell: ({ row }) => (
+      <TableCell className="max-w-24 truncate">{formatCurrency(row.getValue("total"))}</TableCell>
+    ),
+  },
+];

package/dist/templates/spark/src/app/admin/sales-invoices/_config/commands.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { commandBuilder, ensureArray } from "@tulip-systems/commands";
+import {
+  CommandDropdown,
+  CommandDropdownContent,
+  CommandDropdownItem,
+  CommandDropdownTrigger,
+  CommandLabel,
+  type CommandMutationMeta,
+  DeleteCommand,
+} from "@tulip-systems/commands/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+import {
+  SalesInvoicePDFDownloadCommand,
+  SalesInvoicePdfViewerCommand,
+} from "../_components/pdf-commands";
+import { SalesInvoiceStatusField, salesInvoiceStatusConfig } from "./status";
+
+export const salesInvoicePreviewCommand = commandBuilder
+  .$type<{ id: string }>()
+  .render(({ data }) => {
+    return <SalesInvoicePdfViewerCommand id={data.id} />;
+  });
+export const salesInvoiceDownloadCommand = commandBuilder
+  .$type<{ id: string }>()
+  .render(({ data }) => {
+    return <SalesInvoicePDFDownloadCommand id={data.id} />;
+  });
+export const salesInvoiceStatusCommand = commandBuilder
+  .$type<{ id: string } | { id: string }[]>()
+  .transform(ensureArray)
+
+  .render(({ data }) => (
+    <CommandDropdown>
+      <CommandDropdownTrigger label="Status">
+        <Icons.edit className="w-4" />
+        <CommandLabel />
+      </CommandDropdownTrigger>
+
+      <CommandDropdownContent>
+        {salesInvoiceStatusConfig.flatMap((status) => (
+          <CommandDropdownItem
+            key={status.value}
+            variables={{ ids: data.map((item) => item.id), status: status.value }}
+            mutation={orpc.salesInvoices.setStatus.mutationOptions({
+              onSuccess: () => {
+                toast.success(`Status is gewijzigd naar ${status.label.toLowerCase()}`);
+              },
+            })}
+          >
+            <SalesInvoiceStatusField status={status.value} />
+          </CommandDropdownItem>
+        ))}
+      </CommandDropdownContent>
+    </CommandDropdown>
+  ));
+export const salesInvoiceDeleteCommand = commandBuilder
+  .$type<{ id: string }>()
+
+  .permission({ salesInvoice: ["delete"] })
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ id: data.id }}
+      mutation={orpc.salesInvoices.delete.mutationOptions({
+        onSuccess: (_result, _vars, _mutationResult, context) => {
+          toast.success("Succesvol verwijderd");
+          const meta = context.meta as CommandMutationMeta;
+          meta.router.push("/admin/sales-invoices");
+        },
+      })}
+    />
+  ));

package/dist/templates/spark/src/app/admin/sales-invoices/_config/filters.ts

@@ -0,0 +1,44 @@
+import {
+  arrayFilter,
+  createFilteringParser,
+  defineFilters,
+  enumFilter,
+  resolveFiltersSchema,
+  stringFilter,
+} from "@tulip-systems/query";
+import { createDatabaseFiltersCompiler } from "@tulip-systems/query/drizzle";
+import type { z } from "zod";
+import { salesInvoiceStatusEnum } from "../_lib/schema-enums";
+
+export const salesInvoicesFilters = defineFilters({
+  search: stringFilter.build((value) =>
+    value
+      ? {
+          or: [
+            { field: "number", operator: "ilike", value: `%${value}%` },
+            { field: "title", operator: "ilike", value: `%${value}%` },
+            { field: "paymentStatement", operator: "ilike", value: `%${value}%` },
+          ],
+        }
+      : null,
+  ),
+  clientId: arrayFilter(stringFilter).build((value) =>
+    value?.length ? { field: "clientId", operator: "in", value } : null,
+  ),
+  status: arrayFilter(enumFilter(salesInvoiceStatusEnum.enumValues)).build((value) =>
+    value?.length ? { field: "status", operator: "in", value } : null,
+  ),
+});
+
+/**
+ * Validators
+ */
+export const salesInvoicesFiltersSchema = resolveFiltersSchema(salesInvoicesFilters);
+export type SalesInvoicesFilters = z.input<typeof salesInvoicesFiltersSchema>;
+
+/**
+ * Parser and compilers
+ */
+export const salesInvoiceFiltersParser = createFilteringParser(salesInvoicesFilters);
+export const salesInvoiceDatabaseFiltersCompiler =
+  createDatabaseFiltersCompiler(salesInvoicesFilters);

package/dist/templates/spark/src/app/admin/sales-invoices/_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 salesInvoiceTableSorts = defineSorting({
+  number: sortOption((direction) => ({ field: "number", direction })),
+  title: sortOption((direction) => ({ field: "title", direction })),
+  createdAt: sortOption((direction) => ({ field: "createdAt", direction })),
+  paymentStatement: sortOption((direction) => ({ field: "paymentStatement", direction })),
+  status: sortOption((direction) => ({ field: "status", direction })),
+});
+
+/**
+ * Validators
+ */
+export const salesInvoiceTableSortsSchema = resolveSortingSchema(salesInvoiceTableSorts);
+
+/**
+ * Parsers
+ */
+export const salesInvoiceTableSortsParser = createSortingParser(salesInvoiceTableSorts, {
+  fallback: [{ key: "number", direction: "desc" }],
+});
+
+export const salesInvoiceTableLocalSortsCompiler =
+  createLocalSortingCompiler(salesInvoiceTableSorts);
+export const salesInvoiceTableDatabaseSortsCompiler =
+  createDatabaseSortingCompiler(salesInvoiceTableSorts);

package/dist/templates/spark/src/app/admin/sales-invoices/_config/status.tsx

@@ -0,0 +1,53 @@
+import type { ConfigWithIcon } from "@tulip-systems/core";
+import { createStatusVariants, StatusBadge, StatusField } from "@tulip-systems/ui/status";
+import { cva } from "class-variance-authority";
+import { EuroIcon, PencilRuler, SendHorizonalIcon } from "lucide-react";
+import type { SalesInvoiceStatus } from "../_lib/validators";
+
+/**
+ * Status
+ */
+export const salesInvoiceStatusConfig: ConfigWithIcon<SalesInvoiceStatus>[] = [
+  {
+    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: "paid",
+    label: "Betaald",
+    icon: EuroIcon,
+    className: "stroke-green-500 text-green-500",
+  },
+];
+
+export const salesInvoiceStatusVariants = cva("", {
+  variants: { status: createStatusVariants(salesInvoiceStatusConfig) },
+});
+
+export function SalesInvoiceStatusField(props: { status: SalesInvoiceStatus }) {
+  return (
+    <StatusField
+      config={salesInvoiceStatusConfig}
+      variants={salesInvoiceStatusVariants}
+      status={props.status}
+    />
+  );
+}
+
+export function SalesInvoiceStatusBadge(props: { status: SalesInvoiceStatus }) {
+  return (
+    <StatusBadge
+      config={salesInvoiceStatusConfig}
+      variants={salesInvoiceStatusVariants}
+      status={props.status}
+    />
+  );
+}

package/dist/templates/spark/src/app/admin/sales-invoices/_lib/helpers.server.ts

@@ -0,0 +1,30 @@
+import { format } from "date-fns";
+import { desc, like } from "drizzle-orm";
+import type { NodePgDatabase } from "drizzle-orm/node-postgres";
+import { generateSequentialNumber } from "@/lib/helpers/sequential-number";
+import { salesInvoices } from "./schema";
+
+/**
+ * Generate a random order number
+ * @returns {Promise<string>}
+ */
+export async function generateSalesInvoiceNumber<TSchema extends Record<string, unknown>>({
+  db,
+}: {
+  db: NodePgDatabase<TSchema>;
+}): Promise<string> {
+  const year = format(new Date(), "yyyy");
+  const prefix = `FA-${year}`;
+
+  const [lastSalesInvoice] = await db
+    .select({ number: salesInvoices.number })
+    .from(salesInvoices)
+    .where(like(salesInvoices.number, `${prefix}%`))
+    .limit(1)
+    .orderBy(desc(salesInvoices.number));
+
+  const lastDigit = lastSalesInvoice?.number?.split("-")?.[2];
+
+  const lastNumber = lastDigit ? Number(lastDigit) : 80;
+  return generateSequentialNumber({ lastNumber, prefix });
+}

package/dist/templates/spark/src/app/admin/sales-invoices/_lib/helpers.ts

@@ -0,0 +1,67 @@
+import { formatDuration } from "@tulip-systems/core";
+import type { EditorJSONContent } from "@tulip-systems/editor";
+import { calculateNumberTotal } from "@/lib/helpers/calculate";
+
+/**
+ * Generate a payment statement from a sales invoice number
+ * @param {string} input
+ * @returns {string}
+ */
+export function generateSalesInvoicePaymentStatement(input: string) {
+  const number = `33${input}`
+    .replace(/[^0-9]/g, "")
+    .split("-")
+    .join("")
+    .slice(0, 10);
+
+  const modulo = Number(number) % 97;
+  const controlNumber = modulo === 0 ? "97" : modulo.toString().padStart(2, "0");
+  return `${number}${controlNumber}`;
+}
+
+/**
+ * Format sales invoice payment statement
+ * @param {string} statement
+ * @returns {string}
+ */
+export function formatSalesInvoicePaymentStatement(statement: string): string {
+  if (!statement) return "";
+  return `+++${statement.slice(0, 3)}/${statement.slice(3, 7)}/${statement.slice(7)}+++`;
+}
+
+/**
+ * Generate sales invoice executions description
+ */
+export function generateSalesInvoiceExecutionsDescription(props: {
+  salesOrder: { title: string; number: string; executions: { quantitySeconds: number | null }[] };
+}): EditorJSONContent {
+  const totalDuration = calculateNumberTotal(
+    props.salesOrder.executions.map((execution) => execution.quantitySeconds),
+  );
+
+  return {
+    type: "doc",
+    content: [
+      {
+        type: "paragraph",
+        content: [
+          {
+            text: props.salesOrder.title,
+            type: "text",
+            marks: [{ type: "bold" }],
+          },
+          { type: "hardBreak" },
+          {
+            text: `Bon nr.: ${props.salesOrder.number}`,
+            type: "text",
+          },
+          { type: "hardBreak" },
+          {
+            text: `Gepresteerde uren: ${formatDuration(totalDuration)}`,
+            type: "text",
+          },
+        ],
+      },
+    ],
+  };
+}