@tulip-systems/create-app 0.11.1

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

@@ -0,0 +1,98 @@
+import "client-only";
+
+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 { useForm } from "react-hook-form";
+import {
+  type CreateInitiativeInput,
+  type CreateInitiativeSchema,
+  createInitiativeSchema,
+} from "../_lib/validators";
+
+export type CreateInitiativeCommandDefaultValues = Pick<CreateInitiativeSchema, "projectId">;
+
+export type CreateInitiativeCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: CreateInitiativeSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: Partial<CreateInitiativeSchema>;
+  children?: React.ReactNode;
+};
+
+export function CreateInitiativeCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  defaultValues,
+  children,
+}: CreateInitiativeCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<CreateInitiativeInput>({
+    resolver: standardSchemaResolver(createInitiativeSchema),
+    defaultValues,
+  });
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Initiative 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 CreateInitiativeCommandTrigger = CommandFormDialogTrigger;

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

@@ -0,0 +1,71 @@
+"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 { InitiativeTableData } from "../_config/columns-data";
+import { initiativesFilters } from "../_config/filters";
+import { initiativeTableSorts } from "../_config/sorting";
+
+/**
+ * Client data table
+ */
+type InitiativeTableProviderProps<TData extends InitiativeTableData> = {
+  columns: TableColumnDef<TData>[];
+  commands?: CommandFor<TData[]>[];
+  filterOptions?: UseFiltersOptions<typeof initiativesFilters>;
+  columnVisibility?: VisibilityState;
+};
+
+export function InitiativePaginationTableProvider({
+  columns,
+  commands,
+  columnVisibility,
+  filterOptions,
+  children,
+}: PropsWithChildren<InitiativeTableProviderProps<InitiativeTableData>>) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(initiativesFilters, filterOptions);
+  const sorting = useSorting(initiativeTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  const response = useSuspenseQuery(orpc.initiatives.list.queryOptions({ input }));
+
+  const queryData = useMemo(() => response.data.data ?? [], [response.data.data]);
+  const { total } = response.data.pagination;
+
+  const strategy = usePaginationStrategy({ pagination, total });
+
+  const config = createTableConfig<InitiativeTableData>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

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

@@ -0,0 +1,50 @@
+"use client";
+
+import { TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";
+import { parseFiltersVisibility, resolveFilterDescriptors } from "@tulip-systems/query";
+import { FilterCombobox, FilterSearch } from "@tulip-systems/query/client";
+import { type PropsWithChildren, Suspense } from "react";
+import { initiativesFilters } from "../_config/filters";
+import { initiativeStatusConfig } from "../_config/status";
+
+const initiativesFiltersDescriptors = resolveFilterDescriptors(initiativesFilters);
+
+const filtersVisibilityConfig = [
+  "search",
+  "status",
+] satisfies (keyof typeof initiativesFiltersDescriptors)[];
+
+export function InitiativeTableToolbar(
+  props: PropsWithChildren<{
+    filtersVisibility?: Partial<Record<(typeof filtersVisibilityConfig)[number], boolean>>;
+  }>,
+) {
+  const visibilityState = parseFiltersVisibility(filtersVisibilityConfig, props.filtersVisibility);
+
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        {visibilityState.search && (
+          <FilterSearch placeholder="Zoeken..." filter={initiativesFiltersDescriptors.search} />
+        )}
+
+        <Suspense>{visibilityState.status && <InitiativeStatusFilter />}</Suspense>
+      </TableToolbarList>
+
+      <TableToolbarList>{props.children}</TableToolbarList>
+    </TableToolbar>
+  );
+}
+
+/**
+ * initiative status filter
+ */
+export function InitiativeStatusFilter() {
+  return (
+    <FilterCombobox
+      title="Status"
+      filter={initiativesFiltersDescriptors.status}
+      options={initiativeStatusConfig}
+    />
+  );
+}

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

@@ -0,0 +1,67 @@
+"use client";
+
+import { formatCurrency, formatDate } from "@tulip-systems/core";
+import { type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import {
+  createTableSelectCell,
+  TableDateCell,
+  TableNumberCell,
+  TableStatusCell,
+  TableTextCell,
+} from "@tulip-systems/data-tables/client";
+import Link from "next/link";
+import type { Initiative } from "../_lib/validators";
+import { InitiativeStatusField } from "./status";
+
+export type InitiativeTableData = Initiative;
+
+export const initiativeColumns: TableColumnDef<InitiativeTableData>[] = [
+  createTableSelectCell(),
+  {
+    id: "title",
+    accessorKey: "title",
+    header: ({ column }) => <TableColumnHeader column={column} title="Naam" />,
+    cell: ({ row }) => (
+      <TableTextCell>
+        <Link href={`/admin/initiatives/${row.original.id}`} className="truncate hover:underline">
+          {row.getValue("title")}
+        </Link>
+      </TableTextCell>
+    ),
+  },
+  {
+    id: "status",
+    accessorKey: "status",
+    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => (
+      <TableStatusCell>
+        <InitiativeStatusField status={row.getValue("status")} />
+      </TableStatusCell>
+    ),
+  },
+  {
+    id: "budget",
+    accessorKey: "budget",
+    permissions: { initiative: ["view.budget"] },
+    header: ({ column }) => <TableColumnHeader column={column} title="Budget" />,
+    cell: ({ row }) => <TableNumberCell>{formatCurrency(row.getValue("budget"))}</TableNumberCell>,
+  },
+  {
+    id: "startDate",
+    accessorKey: "startDate",
+    header: ({ column }) => <TableColumnHeader column={column} title="Startdatum" />,
+    cell: ({ row }) => <TableDateCell>{formatDate(row.getValue("startDate"))}</TableDateCell>,
+  },
+  {
+    id: "deadline",
+    accessorKey: "deadline",
+    header: ({ column }) => <TableColumnHeader column={column} title="Deadline" />,
+    cell: ({ row }) => <TableDateCell>{formatDate(row.getValue("deadline"))}</TableDateCell>,
+  },
+  {
+    id: "endDate",
+    accessorKey: "endDate",
+    header: ({ column }) => <TableColumnHeader column={column} title="Einddatum" />,
+    cell: ({ row }) => <TableDateCell>{formatDate(row.getValue("endDate"))}</TableDateCell>,
+  },
+];

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

@@ -0,0 +1,99 @@
+"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 type z from "zod";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+import {
+  CreateInitiativeCommand,
+  type CreateInitiativeCommandDefaultValues,
+  CreateInitiativeCommandTrigger,
+} from "../_components/create-command";
+import type { createInitiativeSchema } from "../_lib/validators";
+import { InitiativeStatusField, initiativeStatusConfig } from "./status";
+
+/**
+ *
+ *
+ * Initiative commands
+ */
+export const initiativeCreateCommand = commandBuilder
+  .$type<Partial<z.input<typeof createInitiativeSchema>>>()
+  .permission({ initiative: ["create"] })
+  .render(({ data }) => (
+    <CreateInitiativeCommand
+      defaultValues={data as CreateInitiativeCommandDefaultValues}
+      variables={(values) => values}
+      mutation={orpc.initiatives.create.mutationOptions({
+        onSuccess: (data, _vars, _result, context) => {
+          toast.success("Initiative succesvol toegevoegd");
+          const meta = context.meta as CommandMutationMeta;
+          if (data.id) meta.router.push(`/admin/initiatives/${data.id}`);
+        },
+      })}
+    >
+      <CreateInitiativeCommandTrigger label="Toevoegen" hotkey="mod+i">
+        <Icons.add className="size-4" />
+        <CommandLabel />
+      </CreateInitiativeCommandTrigger>
+    </CreateInitiativeCommand>
+  ));
+
+export const initiativeUpdateStatusCommand = commandBuilder
+  .$type<{ id: string } | { id: string }[]>()
+  .transform(ensureArray)
+  .permission({ initiative: ["update"] })
+  .render(({ data }) => (
+    <CommandDropdown>
+      <CommandDropdownTrigger label="Status">
+        <Icons.edit className="w-4" />
+        <CommandLabel />
+      </CommandDropdownTrigger>
+
+      <CommandDropdownContent>
+        {initiativeStatusConfig.flatMap((status) => (
+          <CommandDropdownItem
+            key={status.value}
+            variables={{ ids: data.map((item) => item.id), status: status.value }}
+            mutation={orpc.initiatives.setStatus.mutationOptions({
+              onSuccess: () =>
+                toast.success(`Status is gewijzigd naar ${status.label.toLowerCase()}`),
+            })}
+          >
+            <InitiativeStatusField status={status.value} />
+          </CommandDropdownItem>
+        ))}
+      </CommandDropdownContent>
+    </CommandDropdown>
+  ));
+
+export const initiativeDeleteCommand = commandBuilder
+  .$type<{ id: string; projectId: string } | { id: string; projectId: string }[]>()
+  .transform(ensureArray)
+  .permission({ initiative: ["delete"] })
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.initiatives.delete.mutationOptions({
+        onSuccess: (_data, _vars, _result, context) => {
+          toast.success("Succesvol verwijderd");
+
+          const meta = context.meta as CommandMutationMeta;
+          const targetProjectId = data[0]?.projectId;
+          if (targetProjectId) {
+            meta.router.push(`/admin/projects/${targetProjectId}/initiatives`);
+          }
+        },
+      })}
+    />
+  ));

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

@@ -0,0 +1,26 @@
+import {
+  arrayFilter,
+  createFilteringParser,
+  defineFilters,
+  enumFilter,
+  stringFilter,
+} from "@tulip-systems/query";
+import { createDatabaseFiltersCompiler } from "@tulip-systems/query/drizzle";
+import { createLocalFiltersCompiler } from "@tulip-systems/query/tanstack-db";
+import { initiativeStatusEnum } from "../_lib/schema";
+
+export const initiativesFilters = defineFilters({
+  search: stringFilter.build((value) =>
+    value ? { field: "title", operator: "ilike", value: `%${value}%` } : null,
+  ),
+  status: arrayFilter(enumFilter(initiativeStatusEnum.enumValues)).build((value) =>
+    value?.length ? { field: "status", operator: "in", value } : null,
+  ),
+  projectId: arrayFilter(stringFilter).build((value) =>
+    value?.length ? { field: "projectId", operator: "in", value } : null,
+  ),
+});
+
+export const initiativeFiltersParser = createFilteringParser(initiativesFilters);
+export const initiativeDatabaseFiltersCompiler = createDatabaseFiltersCompiler(initiativesFilters);
+export const initiativeLocalFiltersCompiler = createLocalFiltersCompiler(initiativesFilters);

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

@@ -0,0 +1,37 @@
+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 initiativeTableSorts = defineSorting({
+  title: sortOption((direction) => ({ field: "title", direction })),
+  status: sortOption((direction) => ({ field: "status", direction })),
+  budget: sortOption((direction) => ({ field: "budget", direction })),
+  startDate: sortOption((direction) => ({ field: "startDate", direction })),
+  deadline: sortOption((direction) => ({ field: "deadline", direction })),
+  endDate: sortOption((direction) => ({ field: "endDate", direction })),
+});
+
+/**
+ * Validators
+ */
+export const initiativeTableSortsSchema = resolveSortingSchema(initiativeTableSorts);
+
+/**
+ * Parsers
+ */
+export const initiativeTableSortsParser = createSortingParser(initiativeTableSorts, {
+  fallback: [
+    { key: "status", direction: "asc" },
+    { key: "startDate", direction: "desc" },
+    { key: "endDate", direction: "desc" },
+  ],
+});
+
+export const initiativeTableLocalSortsCompiler = createLocalSortingCompiler(initiativeTableSorts);
+export const initiativeTableDatabaseSortsCompiler =
+  createDatabaseSortingCompiler(initiativeTableSorts);

package/dist/templates/code/src/app/admin/initiatives/_config/status.tsx

@@ -0,0 +1,73 @@
+import {
+  type CreateStatusComponentProps,
+  createStatusConfig,
+  createStatusVariants,
+  StatusBadge,
+  StatusField,
+} from "@tulip-systems/ui/status";
+import { cva } from "class-variance-authority";
+import { CheckCircle2Icon, CircleDotIcon, CircleIcon, CircleXIcon } from "lucide-react";
+import type { InitiativeStatus } from "../_lib/validators";
+
+/**
+ * Initiative statuses
+ */
+export const initiativeStatusConfig = createStatusConfig<InitiativeStatus>([
+  {
+    value: "planned",
+    label: "Planned",
+    icon: CircleIcon,
+    className: "stroke-foreground text-foreground",
+  },
+  {
+    value: "active",
+    label: "Active",
+    icon: CircleDotIcon,
+    className: "stroke-yellow-500 text-yellow-500",
+  },
+  {
+    value: "completed",
+    label: "Completed",
+    icon: CheckCircle2Icon,
+    className: "stroke-blue-500 text-blue-500",
+  },
+  {
+    value: "canceled",
+    label: "Canceled",
+    icon: CircleXIcon,
+    className: "stroke-foreground/50 text-foreground/50",
+  },
+]);
+
+/**
+ * Initiative status variants
+ */
+export const initiativeStatusVariants = cva("", {
+  variants: { status: createStatusVariants(initiativeStatusConfig) },
+});
+
+/**
+ * Initiative status column
+ */
+export function InitiativeStatusField(props: CreateStatusComponentProps<InitiativeStatus>) {
+  return (
+    <StatusField
+      config={initiativeStatusConfig}
+      variants={initiativeStatusVariants}
+      status={props.status}
+    />
+  );
+}
+
+/**
+ * Initiative status badge
+ */
+export function InitiativeStatusBadge(props: CreateStatusComponentProps<InitiativeStatus>) {
+  return (
+    <StatusBadge
+      config={initiativeStatusConfig}
+      variants={initiativeStatusVariants}
+      status={props.status}
+    />
+  );
+}