@tulip-systems/create-app 0.11.1

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

@@ -0,0 +1,109 @@
+"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 { Client } from "../../clients/_lib/validators";
+import type { Execution, ExecutionRegistration } from "../../executions/_lib/validators";
+import type { Registration } from "../../registrations/_lib/validators";
+import {
+  assignmentArchiveCommand,
+  assignmentDeleteCommand,
+  assignmentRestoreCommand,
+  assignmentUpdateStatusCommand,
+} from "../_config/commands";
+import { assignmentsFilters } from "../_config/filters";
+import { assignmentTableSorts } from "../_config/sorting";
+import type { Assignment } from "../_lib/validators";
+
+/**
+ * Table data
+ */
+export type AssignmentTableData = Assignment & {
+  client: Client;
+  executions: (Execution & {
+    executionsRegistrations: (ExecutionRegistration & { registration: Registration })[];
+  })[];
+};
+
+/**
+ * Table commands
+ */
+export const assignmentTableCommands = [
+  assignmentUpdateStatusCommand,
+  assignmentArchiveCommand,
+  assignmentRestoreCommand,
+  assignmentDeleteCommand,
+];
+
+/**
+ * Client data table
+ */
+type AssignmentInfiniteTableProviderProps<TData extends AssignmentTableData> = {
+  columns: TableColumnDef<TData>[];
+  commands?: CommandFor<TData[]>[];
+  filterOptions?: UseFiltersOptions<typeof assignmentsFilters>;
+  columnVisibility?: VisibilityState;
+};
+
+export function AssignmentPaginationTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+
+  children,
+}: PropsWithChildren<AssignmentInfiniteTableProviderProps<AssignmentTableData>>) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(assignmentsFilters, filterOptions);
+  const sorting = useSorting(assignmentTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseQuery(orpc.assignments.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<AssignmentTableData>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

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

@@ -0,0 +1,61 @@
+"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, Suspense, useDeferredValue } from "react";
+import { orpc } from "@/server/router/client";
+import { assignmentsFilters } from "../_config/filters";
+import { assignmentStatusConfig } from "../_config/status";
+
+const assignmentsFiltersDescriptors = resolveFilterDescriptors(assignmentsFilters);
+
+export function AssignmentTableToolbar({ children }: PropsWithChildren) {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <FilterSearch placeholder="Zoeken..." filter={assignmentsFiltersDescriptors.search} />
+
+        <Suspense>
+          <AssignmentCustomerFilter />
+          <AssignmentStatusFilter />
+        </Suspense>
+      </TableToolbarList>
+
+      <TableToolbarList>{children}</TableToolbarList>
+    </TableToolbar>
+  );
+}
+
+/**
+ * Assignment client filter
+ */
+export function AssignmentCustomerFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(orpc.assignments.filterCustomers.queryOptions({ input }));
+
+  return (
+    <FilterCombobox
+      title="Klanten"
+      filter={assignmentsFiltersDescriptors.clientId}
+      options={data}
+    />
+  );
+}
+
+/**
+ * Assignment status filter
+ */
+export function AssignmentStatusFilter() {
+  return (
+    <FilterCombobox
+      title="Status"
+      filter={assignmentsFiltersDescriptors.status}
+      options={assignmentStatusConfig}
+    />
+  );
+}

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

@@ -0,0 +1,123 @@
+"use client";
+
+import { formatDate, formatDuration } 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 { generateClientHref } from "../../clients/_lib/helpers";
+import { calculateTotalDuration } from "../../registrations/_lib/helpers";
+import type { AssignmentTableData } from "../_components/tables";
+import { AssignmentStatusField } from "./status";
+
+export const assignmentColumns: TableColumnDef<AssignmentTableData>[] = [
+  createTableSelectCell(),
+  {
+    id: "title",
+    accessorKey: "title",
+    header: ({ column }) => <TableColumnHeader column={column} title="Titel" />,
+    cell: ({ row }) => (
+      <TableCell className="min-w-64">
+        <Link href={`/admin/assignments/${row.original.id}`} className="truncate hover:underline">
+          {row.getValue("title")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    id: "client.name",
+    header: ({ column }) => <TableColumnHeader column={column} title="Klant" />,
+    accessorFn: (row) => row.client.name,
+    cell: ({ row }) => (
+      <TableCell className="min-w-64">
+        <Link href={generateClientHref(row.original.client)} className="hover:underline">
+          {row.getValue("client.name")}
+        </Link>
+      </TableCell>
+    ),
+    enableSorting: false,
+  },
+  {
+    id: "status",
+    accessorKey: "status",
+    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => (
+      <TableCell className="min-w-28">
+        <AssignmentStatusField status={row.getValue("status")} />
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "executions",
+    header: ({ column }) => <TableColumnHeader column={column} title="Prestaties" />,
+    accessorFn: (row) => {
+      const finishedExecutions = row.executions.filter(
+        (execution) => execution.status === "finished",
+      );
+
+      return [finishedExecutions.length, row.executions.length];
+    },
+    cell: ({ row }) => {
+      const [finishedExecutions, totalExecutions] = row.getValue("executions") as [number, number];
+
+      return (
+        <TableCell className="max-w-28 truncate">
+          {finishedExecutions}
+          <small> / {totalExecutions}</small>
+        </TableCell>
+      );
+    },
+    enableSorting: false,
+  },
+  {
+    accessorKey: "duration",
+    header: ({ column }) => <TableColumnHeader column={column} title="Gepresteerde uren" />,
+    accessorFn: (row) => {
+      const registrations = row.executions
+        .flatMap((execution) => execution.executionsRegistrations)
+        .flatMap((executionsRegistrations) => executionsRegistrations.registration);
+
+      const finishedRegistrations = row.executions
+        .filter((execution) => execution.status === "finished")
+        .flatMap((execution) => execution.executionsRegistrations)
+        .flatMap((executionsRegistrations) => executionsRegistrations.registration);
+
+      const finishedDuration = calculateTotalDuration(finishedRegistrations);
+      const totalDuration = calculateTotalDuration(registrations);
+
+      return [finishedDuration, totalDuration];
+    },
+    cell: ({ row }) => {
+      const [finishedDuration, totalDuration] = row.getValue("duration") as [number, number];
+
+      return (
+        <TableCell className="max-w-28 truncate">
+          {formatDuration(finishedDuration)}
+          <small> / {formatDuration(totalDuration)}</small>
+        </TableCell>
+      );
+    },
+    enableSorting: false,
+  },
+  {
+    accessorKey: "planning",
+    header: ({ column }) => <TableColumnHeader column={column} title="Planning" />,
+    accessorFn: (row) => {
+      const sortedExecutions = row.executions
+        .filter((execution) => execution.scheduledAt)
+        .toSorted((a, b) =>
+          a.scheduledAt && b.scheduledAt
+            ? new Date(a.scheduledAt).getTime() - new Date(b.scheduledAt).getTime()
+            : 0,
+        );
+
+      const startDate = sortedExecutions.at(0)?.scheduledAt;
+      const endDate = sortedExecutions.at(-1)?.scheduledAt;
+
+      return `${formatDate(startDate)} - ${formatDate(endDate)}`;
+    },
+    cell: ({ row }) => (
+      <TableCell className="max-w-42 truncate">{row.getValue("planning")}</TableCell>
+    ),
+    enableSorting: false,
+  },
+];

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

@@ -0,0 +1,146 @@
+"use client";
+
+import { commandBuilder, ensureArray } from "@tulip-systems/commands";
+import {
+  ArchiveCommand,
+  CommandDropdown,
+  CommandDropdownContent,
+  CommandDropdownItem,
+  CommandDropdownTrigger,
+  CommandLabel,
+  type CommandMutationMeta,
+  DeleteCommand,
+  RestoreCommand,
+} from "@tulip-systems/commands/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { ClipboardPlusIcon } from "lucide-react";
+import type z from "zod";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+import {
+  CreateSalesOrderCommand,
+  CreateSalesOrderCommandTrigger,
+} from "../../sales-orders/_components/create-command";
+import {
+  CreateAssignmentCommand,
+  CreateAssignmentCommandTrigger,
+} from "../_components/create-command";
+import type { selectAssignmentSchema } from "../_lib/validators";
+import { AssignmentStatusField, assignmentStatusConfig } from "./status";
+
+type AssignmentBulkCommandItem = { id: string; isDeleted: boolean };
+
+const bulkCommandBuilder = commandBuilder
+  .$type<AssignmentBulkCommandItem | AssignmentBulkCommandItem[]>()
+  .transform(ensureArray);
+
+export const assignmentUpdateStatusCommand = bulkCommandBuilder
+  .permission({ assignment: ["update"] })
+  .render(({ data }) => (
+    <CommandDropdown>
+      <CommandDropdownTrigger label="Status">
+        <Icons.edit className="w-4" />
+        <CommandLabel />
+      </CommandDropdownTrigger>
+
+      <CommandDropdownContent>
+        {assignmentStatusConfig.flatMap((status) => (
+          <CommandDropdownItem
+            key={status.value}
+            variables={{ ids: data.map((item) => item.id), status: status.value }}
+            mutation={orpc.assignments.setStatus.mutationOptions({
+              onSuccess: () => {
+                toast.success(`Status is gewijzigd naar ${status.label.toLowerCase()}`);
+              },
+            })}
+          >
+            <AssignmentStatusField status={status.value} />
+          </CommandDropdownItem>
+        ))}
+      </CommandDropdownContent>
+    </CommandDropdown>
+  ));
+export const assignmentCreateSalesOrderCommand = commandBuilder
+  .$type<z.infer<typeof selectAssignmentSchema>>()
+
+  .permission({ salesOrder: ["create"] })
+  .visibleWhen(({ data }) => [data.status === "finished", !data.isDeleted])
+  .render(({ data }) => (
+    <CreateSalesOrderCommand
+      fieldVisibility={{ clientId: false }}
+      defaultValues={{ title: data.title, clientId: data.clientId }}
+      variables={(values) => ({ ...values, assignmentId: data.id })}
+      mutation={orpc.salesOrders.createFromAssignment.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}/executions`);
+        },
+      })}
+    >
+      <CreateSalesOrderCommandTrigger label="Maak een verkoopbon" hotkey="mod+i">
+        <ClipboardPlusIcon />
+        <CommandLabel />
+      </CreateSalesOrderCommandTrigger>
+    </CreateSalesOrderCommand>
+  ));
+export const assignmentCreateCommand = commandBuilder
+
+  .permission({ assignment: ["create"] })
+  .render(() => (
+    <CreateAssignmentCommand
+      variables={(values) => values}
+      mutation={orpc.assignments.create.mutationOptions({
+        onSuccess: (data, _vars, _result, context) => {
+          toast.success("Opdracht succesvol toegevoegd");
+
+          const meta = context.meta as CommandMutationMeta;
+          if (data.id) meta.router.push(`/admin/assignments/${data.id}`);
+        },
+      })}
+    >
+      <CreateAssignmentCommandTrigger label="Toevoegen" hotkey="mod+i">
+        <Icons.add className="size-4" />
+        <CommandLabel />
+      </CreateAssignmentCommandTrigger>
+    </CreateAssignmentCommand>
+  ));
+export const assignmentArchiveCommand = bulkCommandBuilder
+  .permission({ assignment: ["archive"] })
+  .visibleWhen(({ data }) => data.every((item) => !item.isDeleted))
+  .render(({ data }) => (
+    <ArchiveCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.assignments.archive.mutationOptions({
+        onSuccess: () => toast.success("Succesvol gearchiveerd"),
+      })}
+    />
+  ));
+export const assignmentRestoreCommand = bulkCommandBuilder
+  .permission({ assignment: ["archive"] })
+  .visibleWhen(({ data }) => data.every((item) => item.isDeleted))
+  .render(({ data }) => (
+    <RestoreCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.assignments.restore.mutationOptions({
+        onSuccess: () => toast.success("Succesvol hersteld"),
+      })}
+    />
+  ));
+export const assignmentDeleteCommand = bulkCommandBuilder
+  .permission({ assignment: ["delete"] })
+  .visibleWhen(({ data }) => data.every((item) => item.isDeleted))
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.assignments.delete.mutationOptions({
+        onSuccess: (_result, _vars, _mutationResult, context) => {
+          toast.success("Succesvol verwijderd");
+
+          const meta = context.meta as CommandMutationMeta;
+          meta.router.push("/admin/assignments");
+        },
+      })}
+    />
+  ));

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

@@ -0,0 +1,48 @@
+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 { assignmentEnum } from "../_lib/schema";
+
+export const assignmentsFilters = defineFilters({
+  search: stringFilter.build((value) =>
+    value
+      ? {
+          or: [
+            { field: "title", operator: "ilike", value: `%${value}%` },
+            { field: "notes", operator: "ilike", value: `%${value}%` },
+          ],
+        }
+      : null,
+  ),
+  clientId: arrayFilter(stringFilter).build((value) =>
+    value?.length ? { field: "clientId", operator: "in", value } : null,
+  ),
+  status: arrayFilter(enumFilter(assignmentEnum.enumValues)).build((value) =>
+    value?.length ? { field: "status", operator: "in", value } : null,
+  ),
+  isDeleted: booleanFilter.build((value) => ({
+    field: "isDeleted",
+    operator: "eq",
+    value: value ?? false,
+  })),
+});
+
+/**
+ * Validators
+ */
+export const assignmentFiltersSchema = resolveFiltersSchema(assignmentsFilters);
+export type AssignmentFilters = z.input<typeof assignmentFiltersSchema>;
+
+/**
+ * Parser and compilers
+ */
+export const assignmentFiltersParser = createFilteringParser(assignmentsFilters);
+export const assignmentDatabaseFiltersCompiler = createDatabaseFiltersCompiler(assignmentsFilters);

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

@@ -0,0 +1,30 @@
+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 assignmentTableSorts = defineSorting({
+  title: sortOption((direction) => ({ field: "title", direction })),
+  status: sortOption((direction) => ({ field: "status", direction })),
+  createdAt: sortOption((direction) => ({ field: "createdAt", direction })),
+});
+
+/**
+ * Validators
+ */
+export const assignmentTableSortsSchema = resolveSortingSchema(assignmentTableSorts);
+
+/**
+ * Parsers
+ */
+export const assignmentTableSortsParser = createSortingParser(assignmentTableSorts, {
+  fallback: [{ key: "createdAt", direction: "desc" }],
+});
+
+export const assignmentTableLocalSortsCompiler = createLocalSortingCompiler(assignmentTableSorts);
+export const assignmentTableDatabaseSortsCompiler =
+  createDatabaseSortingCompiler(assignmentTableSorts);

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

@@ -0,0 +1,67 @@
+import {
+  type CreateStatusComponentProps,
+  createStatusConfig,
+  createStatusVariants,
+  StatusBadge,
+  StatusField,
+} from "@tulip-systems/ui/status";
+import { cva } from "class-variance-authority";
+import { CheckCircle2Icon, CircleDashedIcon, RefreshCcwIcon } from "lucide-react";
+import type { AssignmentStatus } from "../_lib/validators";
+
+/**
+ * Assignment statuses
+ */
+export const assignmentStatusConfig = createStatusConfig<AssignmentStatus>([
+  {
+    value: "active",
+    label: "Actief",
+    icon: RefreshCcwIcon,
+    className: "stroke-foreground text-foreground",
+  },
+  {
+    value: "in_review",
+    label: "In Review",
+    icon: CircleDashedIcon,
+    className: "stroke-blue-500 text-blue-500",
+  },
+  {
+    value: "finished",
+    label: "Afgelopen",
+    icon: CheckCircle2Icon,
+    className: "stroke-green-500 text-green-500",
+  },
+]);
+
+/**
+ * Assignment status variants
+ */
+export const assignmentStatusVariants = cva("", {
+  variants: { status: createStatusVariants(assignmentStatusConfig) },
+});
+
+/**
+ * Assignment status column
+ */
+export function AssignmentStatusField(props: CreateStatusComponentProps<AssignmentStatus>) {
+  return (
+    <StatusField
+      config={assignmentStatusConfig}
+      variants={assignmentStatusVariants}
+      status={props.status}
+    />
+  );
+}
+
+/**
+ * Assignment status badge
+ */
+export function AssignmentStatusBadge(props: CreateStatusComponentProps<AssignmentStatus>) {
+  return (
+    <StatusBadge
+      config={assignmentStatusConfig}
+      variants={assignmentStatusVariants}
+      status={props.status}
+    />
+  );
+}