@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/assignments/(list)/active/page.tsx

@@ -0,0 +1,23 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import {
+  AssignmentPaginationTableProvider,
+  assignmentTableCommands,
+} from "../../_components/tables";
+import { AssignmentTableToolbar } from "../../_components/toolbars";
+import { assignmentColumns } from "../../_config/columns-data";
+
+export default async function Page() {
+  return (
+    <Allowed permission={{ assignment: ["view"] }}>
+      <AssignmentPaginationTableProvider
+        columns={assignmentColumns}
+        commands={assignmentTableCommands}
+        filterOptions={{ constraints: { status: ["active"] } }}
+      >
+        <AssignmentTableToolbar />
+        <DataTable />
+      </AssignmentPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/assignments/(list)/archive/page.tsx

@@ -0,0 +1,21 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import {
+  AssignmentPaginationTableProvider,
+  assignmentTableCommands,
+} from "../../_components/tables";
+import { assignmentColumns } from "../../_config/columns-data";
+
+export default async function Page() {
+  return (
+    <Allowed permission={{ assignment: ["view"] }}>
+      <AssignmentPaginationTableProvider
+        columns={assignmentColumns}
+        commands={assignmentTableCommands}
+        filterOptions={{ constraints: { isDeleted: true } }}
+      >
+        <DataTable />
+      </AssignmentPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/assignments/(list)/finished/page.tsx

@@ -0,0 +1,23 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import {
+  AssignmentPaginationTableProvider,
+  assignmentTableCommands,
+} from "../../_components/tables";
+import { AssignmentTableToolbar } from "../../_components/toolbars";
+import { assignmentColumns } from "../../_config/columns-data";
+
+export default async function Page() {
+  return (
+    <Allowed permission={{ assignment: ["view"] }}>
+      <AssignmentPaginationTableProvider
+        columns={assignmentColumns}
+        commands={assignmentTableCommands}
+        filterOptions={{ constraints: { status: ["finished"] } }}
+      >
+        <AssignmentTableToolbar />
+        <DataTable />
+      </AssignmentPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/assignments/(list)/in_review/page.tsx

@@ -0,0 +1,23 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import {
+  AssignmentPaginationTableProvider,
+  assignmentTableCommands,
+} from "../../_components/tables";
+import { AssignmentTableToolbar } from "../../_components/toolbars";
+import { assignmentColumns } from "../../_config/columns-data";
+
+export default async function Page() {
+  return (
+    <Allowed permission={{ assignment: ["view"] }}>
+      <AssignmentPaginationTableProvider
+        columns={assignmentColumns}
+        commands={assignmentTableCommands}
+        filterOptions={{ constraints: { status: ["finished"] } }}
+      >
+        <AssignmentTableToolbar />
+        <DataTable />
+      </AssignmentPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/assignments/(list)/layout.tsx

@@ -0,0 +1,60 @@
+import {
+  BottomBar,
+  BottomBarLinks,
+  Header,
+  Topbar,
+  TopbarTitle,
+  TopbarTools,
+} from "@tulip-systems/app/components/client";
+import { InlineCommandMenu, InlineCommandMenuLoading } from "@tulip-systems/commands/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+import { Suspense } from "react";
+import { assignmentCreateCommand } from "../_config/commands";
+import { assignmentStatusConfig } from "../_config/status";
+
+export default function Layout({ children }: LayoutProps<"/admin/assignments">) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Opdrachten" }]} />
+
+          <TopbarTools>
+            <Suspense fallback={<InlineCommandMenuLoading />}>
+              <InlineCommandMenu data={null} commands={[assignmentCreateCommand]} />
+            </Suspense>
+          </TopbarTools>
+        </Topbar>
+
+        <BottomBar>
+          <BottomBarLinks
+            paths={[
+              {
+                name: "Overzicht",
+                href: "/admin/assignments",
+                segment: "(default)",
+              },
+              ...assignmentStatusConfig.flatMap((status) => ({
+                name: status.label,
+                href: `/admin/assignments/${status.value}`,
+                segment: status.value,
+              })),
+            ]}
+          />
+
+          <BottomBarLinks
+            paths={[
+              {
+                name: "Archief",
+                href: "/admin/assignments/archive",
+                segment: "archive",
+              },
+            ]}
+          />
+        </BottomBar>
+      </Header>
+
+      <TableLayout className="p-content">{children}</TableLayout>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/assignments/(list)/loading.tsx

@@ -0,0 +1,5 @@
+import { TableSkeleton } from "@tulip-systems/data-tables";
+
+export default function Loading() {
+  return <TableSkeleton />;
+}

package/dist/templates/spark/src/app/admin/assignments/[id]/(default)/(executions)/loading.tsx

@@ -0,0 +1,5 @@
+import { TableSkeleton } from "@tulip-systems/data-tables";
+
+export default function Loading() {
+  return <TableSkeleton />;
+}

package/dist/templates/spark/src/app/admin/assignments/[id]/(default)/(executions)/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { InlineCommandMenu, InlineCommandMenuLoading } from "@tulip-systems/commands/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { Suspense, use } from "react";
+import { ExecutionPaginationTableProvider } from "@/app/admin/executions/_components/tables";
+import { ExecutionTableToolbar } from "@/app/admin/executions/_components/toolbars";
+import { executionTableColumns } from "@/app/admin/executions/_config/columns-data";
+import {
+  executionCreateForAssignmentCommand,
+  executionDeleteCommand,
+  executionFinishCommand,
+  executionUpdateStatusCommand,
+} from "@/app/admin/executions/_config/commands";
+
+export default function AssignmentDetailPage(props: PageProps<"/admin/assignments/[id]">) {
+  const params = use(props.params);
+  const assignmentId = params.id?.toString();
+
+  return (
+    <Allowed permission={{ execution: ["view"] }}>
+      <TableLayout>
+        <ExecutionPaginationTableProvider
+          columns={executionTableColumns}
+          commands={[executionFinishCommand, executionUpdateStatusCommand, executionDeleteCommand]}
+          filterOptions={{ constraints: { assignmentId: [assignmentId] } }}
+          columnVisibility={{ assignmentName: false, assignmentClientName: false }}
+        >
+          <ExecutionTableToolbar filtersVisibility={{ assignmentId: false }}>
+            <Suspense fallback={<InlineCommandMenuLoading />}>
+              <InlineCommandMenu
+                data={{ assignmentId }}
+                commands={[executionCreateForAssignmentCommand]}
+              />
+            </Suspense>
+          </ExecutionTableToolbar>
+          <DataTable />
+        </ExecutionPaginationTableProvider>
+      </TableLayout>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/assignments/[id]/(default)/@dashboard/default.tsx

@@ -0,0 +1 @@
+export { default } from "./page";

package/dist/templates/spark/src/app/admin/assignments/[id]/(default)/@dashboard/page.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { formatDate, formatDuration } from "@tulip-systems/core";
+import { EditorContent, EditorMenuBubble } from "@tulip-systems/editor/client";
+import {
+  InlineComboboxDropdown,
+  InlineEditor,
+  InlineField,
+  InlineFieldError,
+  InlineFieldLabel,
+  InlineProvider,
+  InlineStringInput,
+} from "@tulip-systems/inline/client";
+import { buttonVariants } from "@tulip-systems/ui/button";
+import { DataList, DataListItem, DataListTitle, DataListValue } from "@tulip-systems/ui/data-list";
+import { DataStackLayout, DataStackRow } from "@tulip-systems/ui/data-stack";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Suspense, use } from "react";
+import { z } from "zod";
+import { generateClientHref } from "@/app/admin/clients/_lib/helpers";
+import { EmployeeAvatars, EmployeeAvatarsLoading } from "@/app/admin/employees/_components/avatars";
+import { calculateTotalDuration } from "@/app/admin/registrations/_lib/helpers";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+
+export default function AssignmentDetailPage(props: PageProps<"/admin/assignments/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.assignments.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  const { title, clientId, notes, executions } = data;
+
+  /**
+   * Dates
+   */
+  const startDate = executions.at(0)?.scheduledAt;
+  const endDate = executions.at(-1)?.scheduledAt;
+
+  /**
+   * Registrations
+   */
+  const scheduledRegistrations = executions
+    .filter((execution) => execution.status === "scheduled")
+    .flatMap((execution) => execution.executionsRegistrations)
+    .flatMap((executionsRegistrations) => executionsRegistrations.registration);
+
+  const finishedRegistrations = executions
+    .filter((execution) => execution.status === "finished")
+    .flatMap((execution) => execution.executionsRegistrations)
+    .flatMap((executionsRegistrations) => executionsRegistrations.registration);
+
+  const registrations = [...scheduledRegistrations, ...finishedRegistrations];
+
+  /**
+   * Duration
+   */
+  const finishedDuration = calculateTotalDuration(finishedRegistrations);
+  const totalDuration = calculateTotalDuration(registrations);
+
+  /**
+   * Employees
+   */
+  const employeeIds = registrations.flatMap((registration) => registration.employeeId);
+
+  return (
+    <Allowed permission={{ assignment: ["view"] }}>
+      <InlineProvider permission={{ assignment: ["update"] }}>
+        <div className="grid gap-x-20 gap-y-8 lg:grid-cols-3">
+          <DataStackLayout className="lg:col-span-2">
+            <DataStackRow>
+              <InlineField>
+                <InlineFieldLabel>Naam</InlineFieldLabel>
+                <InlineStringInput
+                  initialValue={title}
+                  variables={(value) => ({ id, data: { title: value ?? undefined } })}
+                  mutation={orpc.assignments.update.mutationOptions()}
+                  strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+                />
+                <InlineFieldError />
+              </InlineField>
+
+              <Allowed permission={{ client: ["view"] }}>
+                <AssignmentClientField id={id} clientId={clientId} />
+              </Allowed>
+            </DataStackRow>
+
+            <InlineField>
+              <InlineEditor
+                initialValue={notes ?? undefined}
+                variables={(value) => ({ id, data: { notes: value } })}
+                mutation={orpc.assignments.update.mutationOptions()}
+                strategy={{
+                  mutate: { on: "change", debounceMs: 700 },
+                  validate: { change: z.any() },
+                }}
+                className="min-h-24"
+              >
+                <EditorMenuBubble />
+                <EditorContent />
+              </InlineEditor>
+              <InlineFieldError />
+            </InlineField>
+          </DataStackLayout>
+
+          <DataList>
+            <DataListItem>
+              <DataListTitle>Gepresteerde uren</DataListTitle>
+              <DataListValue>
+                {formatDuration(finishedDuration)}
+                {"  "}
+                <small> / {formatDuration(totalDuration)}</small>
+              </DataListValue>
+            </DataListItem>
+
+            <DataListItem>
+              <DataListTitle>Werknemers</DataListTitle>
+              <DataListValue>
+                <Suspense fallback={<EmployeeAvatarsLoading />}>
+                  <EmployeeAvatars ids={employeeIds} />
+                </Suspense>
+              </DataListValue>
+            </DataListItem>
+
+            <DataListItem>
+              <DataListTitle>Planning</DataListTitle>
+              <DataListValue>
+                {formatDate(startDate)} - {formatDate(endDate)}
+              </DataListValue>
+            </DataListItem>
+          </DataList>
+        </div>
+      </InlineProvider>
+    </Allowed>
+  );
+}
+
+function AssignmentClientField(props: { id: string; clientId: string }) {
+  const clientsQuery = useSuspenseQuery(orpc.clients.getAll.queryOptions());
+  const client = clientsQuery.data.find((client) => client.id === props.clientId);
+
+  return (
+    <InlineField>
+      <InlineFieldLabel>Klant</InlineFieldLabel>
+
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <InlineComboboxDropdown
+            initialValue={props.clientId}
+            variables={(value) => ({ id: props.id, data: { clientId: value ?? undefined } })}
+            mutation={orpc.projects.update.mutationOptions()}
+            strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+            items={clientsQuery.data.map((client) => ({
+              id: client.id,
+              value: client.name,
+              label: client.name,
+            }))}
+            className="flex-1"
+            placeholder="Kies een klant"
+          />
+          <InlineFieldError />
+        </div>
+
+        {client && (
+          <Link
+            href={generateClientHref(client)}
+            className={buttonVariants({ variant: "outline" })}
+            target="_blank"
+          >
+            <Icons.externalLink className="size-4" />
+          </Link>
+        )}
+      </div>
+    </InlineField>
+  );
+}

package/dist/templates/spark/src/app/admin/assignments/[id]/(default)/layout.tsx

@@ -0,0 +1,8 @@
+export default function Layout(props: LayoutProps<"/admin/assignments/[id]">) {
+  return (
+    <div className="space-y-20">
+      {props.dashboard}
+      {props.children}
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/assignments/[id]/layout.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import {
+  BottomBar,
+  BottomBarLinks,
+  Header,
+  Topbar,
+  TopbarTitle,
+  TopbarTools,
+} from "@tulip-systems/app/components/client";
+import { ResponsiveCommandMenu } from "@tulip-systems/commands/client";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { orpc } from "@/server/router/client";
+import {
+  assignmentArchiveCommand,
+  assignmentDeleteCommand,
+  assignmentRestoreCommand,
+  assignmentUpdateStatusCommand,
+} from "../_config/commands";
+import { AssignmentStatusBadge } from "../_config/status";
+
+export default function AssignmentDetailLayout(props: LayoutProps<"/admin/assignments/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.assignments.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle
+            badge={<AssignmentStatusBadge status={data.status} />}
+            breadcrumbs={[
+              { label: "Opdrachten", href: "/admin/assignments" },
+              { label: data.title },
+            ]}
+          />
+
+          <TopbarTools>
+            <ResponsiveCommandMenu
+              data={data}
+              commands={[
+                assignmentUpdateStatusCommand,
+                assignmentArchiveCommand,
+                assignmentRestoreCommand,
+                assignmentDeleteCommand,
+              ]}
+            />
+          </TopbarTools>
+        </Topbar>
+
+        <BottomBar>
+          <BottomBarLinks
+            paths={[
+              {
+                name: "Dashboard",
+                href: `/admin/assignments/${id}`,
+                segment: "(default)",
+                permission: { assignment: ["view"] },
+              },
+              {
+                name: "Verkoopbonnen",
+                href: `/admin/assignments/${id}/sales-orders`,
+                segment: "sales-orders",
+                permission: { salesOrder: ["view"] },
+              },
+            ]}
+          />
+        </BottomBar>
+      </Header>
+
+      <div className="p-content">{props.children}</div>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/assignments/[id]/sales-orders/loading.tsx

@@ -0,0 +1,5 @@
+import { TableSkeleton } from "@tulip-systems/data-tables";
+
+export default function Loading() {
+  return <TableSkeleton />;
+}

package/dist/templates/spark/src/app/admin/assignments/[id]/sales-orders/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { use } from "react";
+import { SalesOrderPaginationTableProvider } from "@/app/admin/sales-orders/_components/tables";
+import { SalesOrderTableToolbar } from "@/app/admin/sales-orders/_components/toolbars";
+import { salesOrderColumns } from "@/app/admin/sales-orders/_config/columns-data";
+
+export default function AssignmentDetailPage(
+  props: PageProps<"/admin/assignments/[id]/sales-orders">,
+) {
+  const params = use(props.params);
+  const assignmentId = params.id?.toString();
+
+  return (
+    <Allowed permission={{ salesOrder: ["view"] }}>
+      <TableLayout>
+        <SalesOrderPaginationTableProvider
+          columns={salesOrderColumns}
+          filterOptions={{ constraints: { assignmentId: [assignmentId] } }}
+        >
+          <SalesOrderTableToolbar />
+          <DataTable />
+        </SalesOrderPaginationTableProvider>
+      </TableLayout>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/assignments/_components/create-command.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { type DefaultError, type MutationOptions, useSuspenseQuery } from "@tanstack/react-query";
+import {
+  CommandFormDialog,
+  CommandFormDialogCancel,
+  CommandFormDialogContent,
+  CommandFormDialogFields,
+  CommandFormDialogFooter,
+  CommandFormDialogHeader,
+  CommandFormDialogSubmit,
+  CommandFormDialogTitle,
+  CommandFormDialogTrigger,
+} from "@tulip-systems/commands/client";
+import { ComboboxDropdown } from "@tulip-systems/ui/combobox-dropdown";
+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 { orpc } from "@/server/router/client";
+import {
+  type CreateAssignmentInput,
+  type CreateAssignmentSchema,
+  createAssignmentSchema,
+} from "../_lib/validators";
+
+export type CreateAssignmentCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: CreateAssignmentSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: Partial<CreateAssignmentInput>;
+  children?: React.ReactNode;
+};
+
+export function CreateAssignmentCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  defaultValues,
+  children,
+}: CreateAssignmentCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const clientsQuery = useSuspenseQuery(orpc.clients.getAll.queryOptions());
+
+  const form = useForm<CreateAssignmentInput>({
+    resolver: standardSchemaResolver(createAssignmentSchema),
+    defaultValues,
+  });
+
+  const selectedClient = clientsQuery.data.find(({ id }) => id === form.getValues("clientId"));
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Opdracht Toevoegen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Titel</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="clientId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Klant</FormLabel>
+                  <FormControl>
+                    <ComboboxDropdown
+                      {...field}
+                      selectedItem={
+                        selectedClient && {
+                          id: selectedClient.id,
+                          value: selectedClient.name,
+                        }
+                      }
+                      items={clientsQuery.data.map(({ id, name }) => ({ id, value: name }))}
+                      onSelect={(value) => value && field.onChange(value.id)}
+                      placeholder="Kies een klant"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Toevoegen</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </Form>
+    </CommandFormDialog>
+  );
+}
+
+export const CreateAssignmentCommandTrigger = CommandFormDialogTrigger;