@tulip-systems/create-app 0.11.1

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

@@ -0,0 +1,82 @@
+"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 { Address } from "../../addresses/_lib/validators";
+import { companiesFilters } from "../_config/filters";
+import { companyTableSorts } from "../_config/sorting";
+import type { Company } from "../_lib/validators";
+
+export type CompanyTableData = Company & { clientsAddresses: { address: Address }[] };
+
+type CompanyTableProviderProps = PropsWithChildren<{
+  columns: TableColumnDef<CompanyTableData>[];
+  commands?: CommandFor<CompanyTableData[]>[];
+  filterOptions?: UseFiltersOptions<typeof companiesFilters>;
+  columnVisibility?: VisibilityState;
+}>;
+
+/**
+ * Pagination table
+ */
+export function CompanyPaginationTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+  children,
+}: CompanyTableProviderProps) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(companiesFilters, filterOptions);
+  const sorting = useSorting(companyTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseQuery(orpc.companies.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<CompanyTableData>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

package/dist/templates/spark/src/app/admin/companies/_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 { companiesFilters } from "../_config/filters";
+
+const companiesFiltersDescriptors = resolveFilterDescriptors(companiesFilters);
+
+export function CompanyTableToolbar({ children }: PropsWithChildren) {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <FilterSearch placeholder="Zoeken..." filter={companiesFiltersDescriptors.search} />
+      </TableToolbarList>
+
+      <TableToolbarList>{children}</TableToolbarList>
+    </TableToolbar>
+  );
+}

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

@@ -0,0 +1,81 @@
+"use client";
+
+import { formatPhone } 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 { formatAddress } from "../../addresses/_lib/helpers";
+import type { CompanyTableData } from "../_components/tables";
+
+export const companyColumns: TableColumnDef<CompanyTableData>[] = [
+  createTableSelectCell(),
+  {
+    id: "name",
+    accessorKey: "name",
+    header: ({ column }) => <TableColumnHeader column={column} title="Naam" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <Link href={`/admin/companies/${row.original.id}`} className="hover:underline">
+          {row.getValue("name")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    id: "email",
+    accessorKey: "email",
+    header: ({ column }) => <TableColumnHeader column={column} title="Email" />,
+    accessorFn: (row) => row.companyDetails?.email ?? "",
+    cell: ({ row }) => (
+      <TableCell>
+        <a
+          href={`mailto:${row.original.companyDetails?.email}`}
+          className="max-w-[500px] truncate hover:underline"
+          target="_blank"
+          rel="noreferrer"
+        >
+          {row.getValue("email")}
+        </a>
+      </TableCell>
+    ),
+  },
+  {
+    id: "phone",
+    accessorKey: "phone",
+    header: ({ column }) => <TableColumnHeader column={column} title="Telefoon" />,
+    accessorFn: (row) => row.companyDetails?.phone ?? "",
+    cell: ({ row }) => (
+      <TableCell>
+        <a
+          href={`tel:${row.original.companyDetails?.phone}`}
+          className="max-w-[500px] truncate hover:underline"
+          target="_blank"
+          rel="noreferrer"
+        >
+          {formatPhone(row.getValue("phone"))}
+        </a>
+      </TableCell>
+    ),
+  },
+  {
+    id: "vatNumber",
+    accessorKey: "vatNumber",
+    header: ({ column }) => <TableColumnHeader column={column} title="BTW-nummer" />,
+    accessorFn: (row) => row.companyDetails?.vatNumber ?? "",
+    cell: ({ row }) => (
+      <TableCell>
+        <span className="truncate">{row.getValue("vatNumber")}</span>
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "address",
+    header: ({ column }) => <TableColumnHeader column={column} title="Stad" />,
+    accessorFn: (row) => row.clientsAddresses?.[0]?.address,
+    cell: ({ row }) => (
+      <TableCell>
+        {row.getValue("address") ? formatAddress(row.getValue("address")) : null}
+      </TableCell>
+    ),
+  },
+];

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

@@ -0,0 +1,82 @@
+"use client";
+
+import { commandBuilder, ensureArray } from "@tulip-systems/commands";
+import {
+  ArchiveCommand,
+  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";
+import { CreateCompanyCommand, CreateCompanyCommandTrigger } from "../_components/create-command";
+
+type ClientBulkCommandItem = { id: string; isDeleted: boolean };
+
+const bulkClientCommandBuilder = commandBuilder
+  .$type<ClientBulkCommandItem | ClientBulkCommandItem[]>()
+  .transform(ensureArray);
+
+/**
+ * Company commands
+ */
+
+export const companyArchiveCommand = bulkClientCommandBuilder
+  .permission({ client: ["archive"] })
+  .visibleWhen(({ data }) => data.every((item) => !item.isDeleted))
+  .render(({ data }) => (
+    <ArchiveCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.clients.archive.mutationOptions({
+        onSuccess: () => toast.success("Succesvol gearchiveerd"),
+      })}
+    />
+  ));
+
+export const companyRestoreCommand = bulkClientCommandBuilder
+  .permission({ client: ["archive"] })
+  .visibleWhen(({ data }) => data.every((item) => item.isDeleted))
+  .render(({ data }) => (
+    <RestoreCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.clients.restore.mutationOptions({
+        onSuccess: () => toast.success("Succesvol hersteld"),
+      })}
+    />
+  ));
+
+export const companyDeleteCommand = bulkClientCommandBuilder
+  .permission({ client: ["delete"] })
+  .visibleWhen(({ data }) => data.every((item) => item.isDeleted))
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.clients.delete.mutationOptions({
+        onSuccess: (_data, _vars, _result, context) => {
+          toast.success("Succesvol verwijderd");
+          const meta = context.meta as CommandMutationMeta;
+          meta.router.push("/admin/clients");
+        },
+      })}
+    />
+  ));
+
+export const companyCreateCommand = commandBuilder.permission({ client: ["create"] }).render(() => (
+  <CreateCompanyCommand
+    variables={(values) => values}
+    mutation={orpc.companies.create.mutationOptions({
+      onSuccess: (data, _vars, _result, context) => {
+        toast.success("Bedrijf succesvol toegevoegd");
+        const meta = context.meta as CommandMutationMeta;
+        if (data.id) meta.router.push(`/admin/companies/${data.id}`);
+      },
+    })}
+  >
+    <CreateCompanyCommandTrigger label="Toevoegen" hotkey="mod+i">
+      <Icons.add className="size-4" />
+      <CommandLabel />
+    </CreateCompanyCommandTrigger>
+  </CreateCompanyCommand>
+));

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

@@ -0,0 +1,20 @@
+import { createFilteringParser, defineFilters, resolveFiltersSchema } from "@tulip-systems/query";
+import { createDatabaseFiltersCompiler } from "@tulip-systems/query/drizzle";
+import type { z } from "zod";
+import { clientsFilters } from "../../clients/_config/filters";
+
+export const companiesFilters = defineFilters({
+  ...clientsFilters,
+});
+
+/**
+ * Validators
+ */
+export const companyDetailsFiltersSchema = resolveFiltersSchema(companiesFilters);
+export type CompanyDetailsFilters = z.input<typeof companyDetailsFiltersSchema>;
+
+/**
+ * Parser and compilers
+ */
+export const companyFiltersParser = createFilteringParser(companiesFilters);
+export const companyDatabaseFiltersCompiler = createDatabaseFiltersCompiler(companiesFilters);

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

@@ -0,0 +1,27 @@
+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 companyTableSorts = defineSorting({
+  name: sortOption((direction) => ({ field: "name", direction })),
+});
+
+/**
+ * Validators
+ */
+export const companyTableSortsSchema = resolveSortingSchema(companyTableSorts);
+
+/**
+ * Parsers
+ */
+export const companyTableSortsParser = createSortingParser(companyTableSorts, {
+  fallback: [{ key: "name", direction: "asc" }],
+});
+
+export const companyTableLocalSortsCompiler = createLocalSortingCompiler(companyTableSorts);
+export const companyTableDatabaseSortsCompiler = createDatabaseSortingCompiler(companyTableSorts);

package/dist/templates/spark/src/app/admin/companies/_lib/router.ts

@@ -0,0 +1,125 @@
+import "server-cli-only";
+
+import { ORPCError } from "@orpc/server";
+import { offsetPaginationResponse, offsetPaginationSchema } from "@tulip-systems/query";
+import { and, asc, eq } from "drizzle-orm";
+import z from "zod";
+import { getTableData } from "@/lib/helpers/table-data.server";
+import { addresses, clients, companyDetails } from "@/server/db/schema";
+import { permissionMiddleware } from "@/server/router/middleware";
+import { protectedProcedure } from "@/server/router/procedures";
+import type { CompanyTableData } from "../_components/tables";
+import {
+  companyDatabaseFiltersCompiler,
+  companyDetailsFiltersSchema,
+  companyFiltersParser,
+} from "../_config/filters";
+import {
+  companyTableDatabaseSortsCompiler,
+  companyTableSortsParser,
+  companyTableSortsSchema,
+} from "../_config/sorting";
+import { createCompanySchema, updateCompanySchema } from "./validators";
+
+export const companiesRouter = {
+  list: protectedProcedure
+    .use(permissionMiddleware({ client: ["view"] }))
+    .input(
+      z.object({
+        pagination: offsetPaginationSchema,
+        filters: companyDetailsFiltersSchema,
+        sorts: companyTableSortsSchema,
+      }),
+    )
+    .handler(async ({ context, input }) => {
+      const parsedSorts = companyTableSortsParser.parse(input.sorts);
+      const orderBy = companyTableDatabaseSortsCompiler(clients).parse(parsedSorts);
+
+      const parsedFilters = companyFiltersParser.parse(input.filters);
+      const where = companyDatabaseFiltersCompiler(clients).parse(parsedFilters);
+
+      const { data, total } = await getTableData(context, clients, {
+        pagination: input.pagination,
+        where: and(eq(clients.type, "company"), where),
+        orderBy,
+        with: {
+          companyDetails: true,
+          clientsAddresses: { with: { address: { where: eq(addresses.type, "default") } } },
+        },
+      });
+
+      return offsetPaginationResponse({
+        data: data as CompanyTableData[],
+        pagination: input.pagination,
+        total,
+      });
+    }),
+  getAll: protectedProcedure.handler(async ({ context }) =>
+    context.db
+      .select()
+      .from(clients)
+      .orderBy(asc(clients.name))
+      .where(and(eq(clients.type, "company"), eq(clients.isDeleted, false))),
+  ),
+  getById: protectedProcedure
+    .input(z.object({ id: z.string() }))
+    .handler(async ({ context, input }) => {
+      const data = await context.db.query.clients.findFirst({
+        where: eq(clients.id, input.id),
+        with: {
+          companyDetails: true,
+          clientsAddresses: { with: { address: true } },
+          clientsContacts: { with: { contact: true } },
+        },
+      });
+
+      return data ?? null;
+    }),
+  create: protectedProcedure
+    .use(permissionMiddleware({ client: ["create"] }))
+    .input(createCompanySchema)
+    .handler(
+      async ({ context, input: { companyDetails: companyDetailsInput, ...clientInput } }) => {
+        const [result] = await context.db
+          .insert(clients)
+          .values({ ...clientInput, type: "company" })
+          .returning();
+
+        if (!result) {
+          throw new ORPCError("INTERNAL_SERVER_ERROR", {
+            message: "Klant kon niet worden aangemaakt",
+          });
+        }
+
+        await context.db.insert(companyDetails).values({
+          clientId: result.id,
+          ...companyDetailsInput,
+        });
+
+        return result;
+      },
+    ),
+  update: protectedProcedure
+    .use(permissionMiddleware({ client: ["update"] }))
+    .input(z.object({ id: z.string(), data: updateCompanySchema.partial() }))
+    .output(z.void())
+    .handler(async ({ context, input }) => {
+      const clientInput = input.data;
+      const companyDetailsInput = input.data.companyDetails;
+
+      const results = await Promise.allSettled([
+        context.db.update(clients).set(clientInput).where(eq(clients.id, input.id)).returning(),
+        context.db
+          .update(companyDetails)
+          .set({ ...companyDetailsInput, clientId: input.id })
+          .where(eq(companyDetails.clientId, input.id))
+          .returning(),
+      ]);
+
+      if (results.some((result) => result.status === "rejected")) {
+        throw new ORPCError("INTERNAL_SERVER_ERROR", {
+          message: "Klant kon niet worden gewijzigd",
+        });
+      }
+    }),
+};

package/dist/templates/spark/src/app/admin/companies/_lib/schema.ts

@@ -0,0 +1,29 @@
+import { relations } from "drizzle-orm";
+import { pgTable } from "drizzle-orm/pg-core";
+import { baseColumns } from "@/server/db/helpers";
+import { clients } from "../../clients/_lib/schema";
+
+/**
+ * Companys table
+ */
+export const companyDetails = pgTable("company_details", (t) => ({
+  ...baseColumns,
+  tradeName: t.varchar(),
+  vatNumber: t.varchar(),
+  email: t.varchar(),
+  phone: t.varchar(),
+  clientId: t
+    .uuid()
+    .references(() => clients.id, { onDelete: "cascade" })
+    .notNull(),
+}));
+
+/**
+ * Relations
+ */
+export const companyDetailsRelations = relations(companyDetails, ({ one }) => ({
+  client: one(clients, {
+    fields: [companyDetails.clientId],
+    references: [clients.id],
+  }),
+}));

package/dist/templates/spark/src/app/admin/companies/_lib/validators.ts

@@ -0,0 +1,79 @@
+import { createInsertSchema, createUpdateSchema } from "drizzle-zod";
+import { z } from "zod";
+import { type Client, createClientSchema, updateClientSchema } from "../../clients/_lib/validators";
+
+export type { CompanyDetailsFilters } from "../_config/filters";
+export { companyDetailsFiltersSchema } from "../_config/filters";
+
+import { companyDetails } from "./schema";
+
+const vatNumberRegex = /^(?:NL\d{9}B\d{2}|BE0?\d{9})$/;
+const phoneRegex = /^\+?[0-9][0-9()./\s-]*[0-9]$/;
+
+/**
+ * Contact type
+ */
+export type CompanyDetails = typeof companyDetails.$inferSelect;
+
+export type Company = Client & { companyDetails: CompanyDetails };
+
+/**
+ * Schema
+ */
+const createCompanyDetailsSchema = createInsertSchema(companyDetails);
+const updateCompanyDetailsSchema = createUpdateSchema(companyDetails).extend({
+  tradeName: z
+    .string({ error: "Handelsnaam is niet geldig" })
+    .trim()
+    .min(1, "Handelsnaam is verplicht")
+    .max(255, "Handelsnaam mag maximaal 255 tekens bevatten")
+    .nullable()
+    .optional(),
+  vatNumber: z
+    .string({ error: "BTW-nummer is niet geldig" })
+    .trim()
+    .min(1, "BTW-nummer is verplicht")
+    .max(50, "BTW-nummer mag maximaal 50 tekens bevatten")
+    .refine(
+      (value) => vatNumberRegex.test(value.replace(/[\s.-]/g, "").toUpperCase()),
+      "BTW-nummer is ongeldig. Gebruik bijvoorbeeld NL123456789B01 of BE0123456789",
+    )
+    .nullable()
+    .optional(),
+  email: z.email("E-mailadres is niet geldig").trim().nullable().optional(),
+  phone: z
+    .string({ error: "Telefoonnummer is niet geldig" })
+    .trim()
+    .min(1, "Telefoonnummer is verplicht")
+    .max(30, "Telefoonnummer mag maximaal 30 tekens bevatten")
+    .regex(phoneRegex, "Telefoonnummer is ongeldig")
+    .refine((value) => {
+      const digitCount = value.replace(/\D/g, "").length;
+      return digitCount >= 8 && digitCount <= 15;
+    }, "Telefoonnummer is ongeldig")
+    .nullable()
+    .optional(),
+});
+
+// type CreateCompanyDetailsInput = z.input<typeof createCompanyDetailsSchema>;
+// type CreateCompanyDetailsSchema = z.infer<typeof createCompanyDetailsSchema>;
+
+// type UpdateCompanyDetailsInput = z.input<typeof updateCompanyDetailsSchema>;
+// type UpdateCompanyDetailsSchema = z.infer<typeof updateCompanyDetailsSchema>;
+
+/**
+ * Schema
+ */
+export const createCompanySchema = createClientSchema.extend({
+  companyDetails: createCompanyDetailsSchema.omit({ clientId: true }).optional(),
+});
+
+export const updateCompanySchema = updateClientSchema.extend({
+  companyDetails: updateCompanyDetailsSchema.omit({ clientId: true }).optional(),
+});
+
+export type CreateCompanySchema = z.infer<typeof createCompanySchema>;
+export type CreateCompanyInput = z.input<typeof createCompanySchema>;
+
+export type UpdateCompanySchema = z.infer<typeof updateCompanySchema>;
+export type UpdateCompanyInput = z.input<typeof updateCompanySchema>;