@tulip-systems/create-app 0.12.3 → 0.12.4

package/dist/templates/code/src/app/admin/quotations/_blocks/totals/create.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import type { DefaultError } from "@tanstack/react-query";
+import type { BlockCreateComponentProps } from "@tulip-systems/blocks";
+import {
+  CreateBlock,
+  CreateBlockCancel,
+  CreateBlockContent,
+  CreateBlockDescription,
+  CreateBlockFields,
+  CreateBlockFooter,
+  CreateBlockHeader,
+  CreateBlockSubmit,
+  CreateBlockTitle,
+  CreateBlockTrigger,
+  CreateBlockTriggerContent,
+  CreateBlockTriggerDescription,
+  CreateBlockTriggerIcon,
+  CreateBlockTriggerTitle,
+} from "@tulip-systems/blocks/client";
+import { Input } from "@tulip-systems/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@tulip-systems/ui/react-hook-form";
+import { BlocksIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { quotationTotalsBlock } from "./config";
+
+export type QuotationTotalsCreateValues = z.input<typeof quotationTotalsBlock.schema>;
+
+const totalsCreateFormSchema = z.object({
+  currency: quotationTotalsBlock.schema.shape.currency,
+  itemLabel: quotationTotalsBlock.schema.shape.items.element.shape.label,
+  itemAmount: quotationTotalsBlock.schema.shape.items.element.shape.amount,
+});
+
+type QuotationTotalsFormValues = z.input<typeof totalsCreateFormSchema>;
+
+type QuotationTotalsCreateBlockInput = {
+  slug: typeof quotationTotalsBlock.slug;
+  data: QuotationTotalsCreateValues;
+};
+
+type QuotationTotalsCreateBlockProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = BlockCreateComponentProps<
+  QuotationTotalsCreateBlockInput,
+  TData,
+  TError,
+  TVariables,
+  TOnMutateResult
+>;
+
+export function QuotationTotalsCreateBlock<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+}: QuotationTotalsCreateBlockProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<QuotationTotalsFormValues>({
+    resolver: standardSchemaResolver(totalsCreateFormSchema),
+    defaultValues: {
+      currency: "EUR",
+      itemLabel: "Implementatie",
+      itemAmount: 0,
+    },
+  });
+
+  return (
+    <CreateBlock>
+      <CreateBlockTrigger>
+        <CreateBlockTriggerIcon>
+          <BlocksIcon />
+        </CreateBlockTriggerIcon>
+
+        <CreateBlockTriggerContent>
+          <CreateBlockTriggerTitle>{quotationTotalsBlock.label}</CreateBlockTriggerTitle>
+          <CreateBlockTriggerDescription>
+            {quotationTotalsBlock.description}
+          </CreateBlockTriggerDescription>
+        </CreateBlockTriggerContent>
+      </CreateBlockTrigger>
+
+      <Form {...form}>
+        <CreateBlockContent
+          className="sm:max-w-xl"
+          variables={(values: QuotationTotalsFormValues) =>
+            variables({
+              slug: quotationTotalsBlock.slug,
+              data: {
+                currency: values.currency,
+                items: [{ label: values.itemLabel, amount: values.itemAmount }],
+                total: values.itemAmount,
+              },
+            })
+          }
+          mutation={mutation}
+        >
+          <CreateBlockHeader>
+            <CreateBlockTitle>{quotationTotalsBlock.label} toevoegen</CreateBlockTitle>
+            <CreateBlockDescription>
+              Vul de verplichte velden in om het blok toe te voegen.
+            </CreateBlockDescription>
+          </CreateBlockHeader>
+
+          <CreateBlockFields>
+            <FormField
+              control={form.control}
+              name="currency"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Valuta</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="itemLabel"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Regel</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="itemAmount"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Bedrag</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        type="number"
+                        onChange={(event) => field.onChange(event.currentTarget.valueAsNumber || 0)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </CreateBlockFields>
+
+          <CreateBlockFooter>
+            <CreateBlockCancel>Annuleren</CreateBlockCancel>
+            <CreateBlockSubmit>Blok toevoegen</CreateBlockSubmit>
+          </CreateBlockFooter>
+        </CreateBlockContent>
+      </Form>
+    </CreateBlock>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/_blocks/totals/inline.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import type { BlockComponentProps } from "@tulip-systems/blocks";
+import {
+  InlineBlock,
+  InlineBlockContent,
+  InlineBlockDragHandle,
+  InlineBlockHeader,
+  InlineBlockSortable,
+  InlineBlockTrigger,
+} from "@tulip-systems/blocks/client";
+import { DropdownCommandMenu } from "@tulip-systems/commands/client";
+import {
+  InlineField,
+  InlineFieldError,
+  InlineFieldLabel,
+  InlineNumberInput,
+  InlineStringInput,
+} from "@tulip-systems/inline/client";
+import { GripIcon } from "lucide-react";
+import { z } from "zod";
+import { orpc } from "@/server/router/client";
+import { quotationInlineBlockCommands } from "../commands";
+import { quotationTotalsBlock } from "./config";
+
+const totalsMutation = orpc.quotationBlocks.update.mutationOptions({
+  meta: { invalidates: [orpc.quotationBlocks.key()] },
+});
+
+export function QuotationTotalsInlineBlock({
+  block,
+}: BlockComponentProps<typeof quotationTotalsBlock>) {
+  return (
+    <InlineBlockSortable id={block.id}>
+      <InlineBlock>
+        <InlineBlockHeader>
+          <InlineBlockDragHandle>
+            <GripIcon className="h-4 w-4" />
+            <span className="sr-only">Blok verplaatsen</span>
+          </InlineBlockDragHandle>
+          <InlineBlockTrigger>{quotationTotalsBlock.label}</InlineBlockTrigger>
+          <DropdownCommandMenu
+            data={{ id: block.id }}
+            commands={quotationInlineBlockCommands}
+            className="ml-2 size-7"
+          />
+        </InlineBlockHeader>
+
+        <InlineBlockContent className="grid gap-4 md:grid-cols-2">
+          <InlineField>
+            <InlineFieldLabel>Valuta</InlineFieldLabel>
+            <InlineStringInput
+              initialValue={block.data.currency}
+              variables={(value) => ({ id: block.id, data: { currency: value ?? "EUR" } })}
+              mutation={totalsMutation}
+              strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().min(1) } }}
+            />
+            <InlineFieldError />
+          </InlineField>
+
+          <InlineField>
+            <InlineFieldLabel>Totaal</InlineFieldLabel>
+            <InlineNumberInput
+              initialValue={block.data.total}
+              variables={(value) => ({ id: block.id, data: { total: value ?? 0 } })}
+              mutation={totalsMutation}
+              strategy={{ mutate: { on: "blur" }, validate: { blur: z.number().min(0) } }}
+            />
+            <InlineFieldError />
+          </InlineField>
+
+          {block.data.items.slice(0, 2).map((item, index) => (
+            <InlineField key={item.label}>
+              <InlineFieldLabel>Regel {index + 1}</InlineFieldLabel>
+              <InlineStringInput
+                initialValue={`${item.label}: ${item.amount}`}
+                variables={(value) => ({
+                  id: block.id,
+                  data: {
+                    items: block.data.items.with(index, {
+                      ...item,
+                      label: value?.split(":")[0]?.trim() || item.label,
+                    }),
+                  },
+                })}
+                mutation={totalsMutation}
+                strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().min(1) } }}
+              />
+              <InlineFieldError />
+            </InlineField>
+          ))}
+        </InlineBlockContent>
+      </InlineBlock>
+    </InlineBlockSortable>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/_blocks/totals/preview.tsx

@@ -0,0 +1,32 @@
+import type { BlockComponentProps } from "@tulip-systems/blocks";
+import type { quotationTotalsBlock } from "./config";
+
+function formatCurrency(value: number, currency: string) {
+  return new Intl.NumberFormat("nl-BE", { style: "currency", currency }).format(value);
+}
+
+export function QuotationTotalsPreview({
+  block,
+}: BlockComponentProps<typeof quotationTotalsBlock>) {
+  const { currency, items, total } = block.data;
+
+  return (
+    <section className="rounded-3xl border bg-card p-8 shadow-sm">
+      <h2 className="font-semibold text-2xl tracking-tight">Prijsopbouw</h2>
+
+      <div className="mt-6 divide-y rounded-2xl border">
+        {items.map((item) => (
+          <div key={item.label} className="flex items-center justify-between gap-4 p-4">
+            <span className="text-muted-foreground">{item.label}</span>
+            <span className="font-medium">{formatCurrency(item.amount, currency)}</span>
+          </div>
+        ))}
+
+        <div className="flex items-center justify-between gap-4 bg-muted/40 p-4 font-semibold text-lg">
+          <span>Totaal</span>
+          <span>{formatCurrency(total, currency)}</span>
+        </div>
+      </div>
+    </section>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/_components/create-command.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
+import {
+  CommandFormDialog,
+  CommandFormDialogCancel,
+  CommandFormDialogContent,
+  CommandFormDialogFields,
+  CommandFormDialogFooter,
+  CommandFormDialogHeader,
+  CommandFormDialogSubmit,
+  CommandFormDialogTitle,
+  CommandFormDialogTrigger,
+} from "@tulip-systems/commands/client";
+import { Input } from "@tulip-systems/ui/input";
+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 {
+  type CreateQuotationInput,
+  type CreateQuotationSchema,
+  createQuotationSchema,
+} from "../_lib/validators";
+
+export type CreateQuotationCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: CreateQuotationSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: Partial<CreateQuotationInput>;
+  children?: React.ReactNode;
+};
+
+export function CreateQuotationCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  defaultValues,
+  children,
+}: CreateQuotationCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<CreateQuotationInput>({
+    resolver: standardSchemaResolver(createQuotationSchema),
+    defaultValues,
+  });
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Offerte Toevoegen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Titel</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Toevoegen</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </Form>
+    </CommandFormDialog>
+  );
+}
+
+export const CreateQuotationCommandTrigger = CommandFormDialogTrigger;

package/dist/templates/code/src/app/admin/quotations/_components/tables.tsx

@@ -0,0 +1,68 @@
+"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 } from "react";
+import { orpc } from "@/server/router/client";
+import type { QuotationColumn } from "../_config/columns-data";
+import { quotationFilters } from "../_config/filters";
+import { quotationTableSorts } from "../_config/sorting";
+
+type QuotationTableProviderProps = PropsWithChildren<{
+  columns: TableColumnDef<QuotationColumn>[];
+  commands?: CommandFor<QuotationColumn[]>[];
+  filterOptions?: UseFiltersOptions<typeof quotationFilters>;
+  columnVisibility?: VisibilityState;
+}>;
+
+export function QuotationPaginationTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+  children,
+}: QuotationTableProviderProps) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(quotationFilters, filterOptions);
+  const sorting = useSorting(quotationTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  const response = useSuspenseQuery(orpc.quotations.list.queryOptions({ input }));
+
+  const queryData = response.data.data as QuotationColumn[];
+  const { total } = response.data.pagination;
+
+  const strategy = usePaginationStrategy({ pagination, total });
+
+  const config = createTableConfig<QuotationColumn>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

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

@@ -0,0 +1,18 @@
+"use client";
+
+import { TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";
+import { resolveFilterDescriptors } from "@tulip-systems/query";
+import { FilterSearch } from "@tulip-systems/query/client";
+import { quotationFilters } from "../_config/filters";
+
+const quotationFilterDescriptors = resolveFilterDescriptors(quotationFilters);
+
+export function QuotationTableToolbar() {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <FilterSearch placeholder="Zoeken..." filter={quotationFilterDescriptors.search} />
+      </TableToolbarList>
+    </TableToolbar>
+  );
+}

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

@@ -0,0 +1,35 @@
+"use client";
+
+import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import { createTableSelectCell } from "@tulip-systems/data-tables/client";
+import { format } from "date-fns";
+import Link from "next/link";
+import type { Quotation } from "../_lib/validators";
+
+export type QuotationColumn = Quotation;
+
+export const quotationColumns: TableColumnDef<QuotationColumn>[] = [
+  createTableSelectCell(),
+  {
+    id: "title",
+    accessorKey: "title",
+    header: ({ column }) => <TableColumnHeader column={column} title="Titel" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <Link href={`/admin/quotations/${row.original.id}`} className="truncate hover:underline">
+          {row.getValue("title")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    id: "createdAt",
+    accessorKey: "createdAt",
+    header: ({ column }) => <TableColumnHeader column={column} title="Aangemaakt" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <span className="truncate">{format(row.original.createdAt, "dd/MM/yyyy")}</span>
+      </TableCell>
+    ),
+  },
+];

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { commandBuilder, ensureArray } from "@tulip-systems/commands";
+import {
+  CommandEmpty,
+  CommandLabel,
+  type CommandMutationMeta,
+  DeleteCommand,
+} from "@tulip-systems/commands/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { EyeIcon } from "lucide-react";
+import Link from "next/link";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+import {
+  CreateQuotationCommand,
+  CreateQuotationCommandTrigger,
+} from "../_components/create-command";
+import type { CreateQuotationSchema, Quotation } from "../_lib/validators";
+
+type QuotationCommandItem = Pick<Quotation, "id">;
+
+export const quotationCreateCommand = commandBuilder
+  .$type<Partial<CreateQuotationSchema>>()
+  .permission({ quotation: ["create"] })
+  .render(() => (
+    <CreateQuotationCommand
+      variables={(values) => values}
+      mutation={orpc.quotations.create.mutationOptions({
+        onSuccess: (data, _vars, _result, context) => {
+          toast.success("Offerte succesvol toegevoegd");
+          const meta = context.meta as CommandMutationMeta;
+          if (data.id) meta.router.push(`/admin/quotations/${data.id}`);
+        },
+      })}
+    >
+      <CreateQuotationCommandTrigger label="Toevoegen" hotkey="mod+i">
+        <Icons.add className="size-4" />
+        <CommandLabel />
+      </CreateQuotationCommandTrigger>
+    </CreateQuotationCommand>
+  ));
+
+export const quotationPreviewCommand = commandBuilder
+  .$type<QuotationCommandItem>()
+  .permission({ quotation: ["view"] })
+  .render(({ data }) => (
+    <Link href={`/admin/quotations/${data.id}/preview`} target="_blank" rel="noopener noreferrer">
+      <CommandEmpty label="Preview">
+        <EyeIcon className="size-4" />
+        <CommandLabel />
+      </CommandEmpty>
+    </Link>
+  ));
+
+export const quotationDeleteCommand = commandBuilder
+  .$type<QuotationCommandItem | QuotationCommandItem[]>()
+  .transform(ensureArray)
+  .permission({ quotation: ["delete"] })
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.quotations.delete.mutationOptions({
+        onSuccess: (_data, _vars, _result, context) => {
+          toast.success("Offerte succesvol verwijderd");
+          const meta = context.meta as CommandMutationMeta;
+          meta.router.push("/admin/quotations");
+        },
+      })}
+    />
+  ));

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

@@ -0,0 +1,22 @@
+import {
+  createFilteringParser,
+  defineFilters,
+  resolveFiltersSchema,
+  stringFilter,
+} from "@tulip-systems/query";
+import { createDatabaseFiltersCompiler } from "@tulip-systems/query/drizzle";
+import { createLocalFiltersCompiler } from "@tulip-systems/query/tanstack-db";
+import type z from "zod";
+
+export const quotationFilters = defineFilters({
+  search: stringFilter.build((value) =>
+    value ? { field: "title", operator: "ilike", value: `%${value}%` } : null,
+  ),
+});
+
+export const quotationFiltersSchema = resolveFiltersSchema(quotationFilters);
+export type QuotationFilters = z.input<typeof quotationFiltersSchema>;
+
+export const quotationFiltersParser = createFilteringParser(quotationFilters);
+export const quotationDatabaseFiltersCompiler = createDatabaseFiltersCompiler(quotationFilters);
+export const quotationLocalFiltersCompiler = createLocalFiltersCompiler(quotationFilters);

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

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