@tulip-systems/create-app 0.11.1

package/dist/templates/code/src/app/admin/projects/[id]/tasks/[domain_id]/page.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useSuspenseQueries } from "@tanstack/react-query";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { ResponsiveCommandMenu } from "@tulip-systems/commands/client";
+import { DataTable, SortableRows } from "@tulip-systems/data-tables/client";
+import { notFound } from "next/navigation";
+import { use, useMemo } from "react";
+import { TaskInfiniteTableProvider } from "@/app/admin/tasks/_components/tables";
+import { TaskTableToolbar } from "@/app/admin/tasks/_components/toolbars";
+import { taskInlineTableColumns } from "@/app/admin/tasks/_config/columns-inline";
+import {
+  taskCreateCommand,
+  taskDeleteCommand,
+  taskImportExcelCommand,
+  taskUpdateAssigneeCommand,
+  taskUpdateStatusCommand,
+} from "@/app/admin/tasks/_config/commands";
+import { orpc } from "@/server/router/client";
+
+export default function ProductDetailPage(
+  props: PageProps<"/admin/projects/[id]/tasks/[domain_id]">,
+) {
+  const params = use(props.params);
+
+  const projectId = params.id?.toString();
+  const domainId = params.domain_id?.toString();
+  if (!projectId || !domainId) notFound();
+
+  const filters = useMemo(
+    () => ({ projectId: [projectId], domainId: [domainId] }),
+    [domainId, projectId],
+  );
+
+  const [initiativesQuery, employeesQuery] = useSuspenseQueries({
+    queries: [
+      orpc.initiatives.getAll.queryOptions({ input: { filters: { projectId: [projectId] } } }),
+      orpc.employees.getAll.queryOptions(),
+    ],
+  });
+  const meta = useMemo(
+    () => ({
+      employees: employeesQuery.data,
+      initiatives: initiativesQuery.data,
+      domains: [],
+    }),
+    [employeesQuery.data, initiativesQuery.data],
+  );
+
+  return (
+    <Allowed permission={{ task: ["view"] }}>
+      <TaskInfiniteTableProvider
+        columns={taskInlineTableColumns}
+        commands={[taskUpdateStatusCommand, taskUpdateAssigneeCommand, taskDeleteCommand]}
+        filterOptions={{ constraints: filters }}
+        columnVisibility={{ projectTitle: false, domainId: false }}
+        meta={meta}
+      >
+        <TaskTableToolbar filtersVisibility={{ projectId: false, domainId: false }}>
+          <ResponsiveCommandMenu
+            data={{ projectId, domainId }}
+            commands={[taskCreateCommand, taskImportExcelCommand]}
+          />
+        </TaskTableToolbar>
+
+        <SortableRows
+          mutationOptions={{ mutationFn: (input) => orpc.tasks.move.call({ ...input, filters }) }}
+        >
+          <DataTable />
+        </SortableRows>
+      </TaskInfiniteTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/code/src/app/admin/projects/[id]/tasks/layout.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { TableLayout } from "@tulip-systems/data-tables";
+import type { Route } from "next";
+import { notFound } from "next/navigation";
+import { Suspense, use } from "react";
+import {
+  TaskDomainTabsGrid,
+  TaskDomainTabsGridLoading,
+} from "@/app/admin/tasks/_components/domains-tabs-grid";
+import { orpc } from "@/server/router/client";
+
+export default function ListLayout(props: LayoutProps<"/admin/projects/[id]/tasks">) {
+  const params = use(props.params);
+  const projectId = params.id?.toString();
+  if (!projectId) notFound();
+
+  const domainsQuery = useSuspenseQuery(
+    orpc.domains.getAll.queryOptions({ input: { filters: { projectId: [projectId] } } }),
+  );
+
+  return (
+    <div className="space-y-10 p-content">
+      <Suspense fallback={<TaskDomainTabsGridLoading />}>
+        <TaskDomainTabsGrid
+          tabs={[
+            {
+              name: "Overzicht",
+              href: `/admin/projects/${projectId}/tasks` as Route,
+              segment: "(default)",
+            },
+            ...domainsQuery.data.flatMap((domain) => ({
+              name: domain.title,
+              href: `/admin/projects/${projectId}/tasks/${domain.id}` as Route,
+              segment: domain.id,
+            })),
+          ]}
+        />
+      </Suspense>
+
+      <TableLayout>{props.children}</TableLayout>
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/projects/[id]/tasks/loading.tsx

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

package/dist/templates/code/src/app/admin/projects/[id]/timeline/loading.tsx

@@ -0,0 +1,26 @@
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="grid h-[calc(100dvh-var(--header-top-bar-height))] @4xl/admin:grid-cols-[22rem_minmax(0,1fr)] gap-0">
+      <div className="space-y-4 @4xl/admin:border-r border-b @4xl/admin:border-b-0 p-4">
+        <div className="flex gap-2">
+          <Skeleton className="h-9 w-9" />
+          <Skeleton className="h-9 flex-1" />
+          <Skeleton className="h-9 w-9" />
+        </div>
+
+        {Array.from({ length: 6 }, (_, index) => `timeline-sidebar-${index + 1}`).map((id) => (
+          <Skeleton key={id} className="h-10 w-full" />
+        ))}
+      </div>
+
+      <div className="min-w-0 space-y-4 p-4">
+        <Skeleton className="h-10 w-full" />
+        {Array.from({ length: 8 }, (_, index) => `timeline-row-${index + 1}`).map((id) => (
+          <Skeleton key={id} className="h-12 w-full" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/projects/[id]/timeline/page.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { Temporal } from "@js-temporal/polyfill";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Button } from "@tulip-systems/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "@tulip-systems/ui/select";
+import { findStatus } from "@tulip-systems/ui/status";
+import { MinusIcon, PlusIcon } from "lucide-react";
+import Link from "next/link";
+import { parseAsStringEnum, useQueryState } from "nuqs";
+import { use, useState } from "react";
+import { initiativeStatusConfig } from "@/app/admin/initiatives/_config/status";
+import type { InitiativeStatus } from "@/app/admin/initiatives/_lib/validators";
+import {
+  type GanttFeature,
+  GanttFeatureList,
+  GanttFeatureRow,
+  GanttHeader,
+  GanttProvider,
+  GanttSidebar,
+  GanttSidebarContent,
+  GanttSidebarHeader,
+  GanttSidebarItem,
+  GanttTimeline,
+  GanttToday,
+} from "@/components/gantt/components";
+import { orpc } from "@/server/router/client";
+
+export default function Page(props: PageProps<"/admin/projects/[id]/timeline">) {
+  const params = use(props.params);
+  const projectId = params.id?.toString();
+
+  const [zoom, setZoom] = useState(100);
+
+  const [range] = useQueryState(
+    "range",
+    parseAsStringEnum(["daily", "quarterly", "monthly"]).withDefault("monthly"),
+  );
+
+  const { data } = useSuspenseQuery(
+    orpc.projects.getTimelineById.queryOptions({
+      input: { id: projectId },
+      select: (project) => {
+        if (!project) return null;
+
+        return {
+          id: project.id,
+          title: project.title,
+          features: project.initiatives.flatMap((initiative): GanttFeature[] => {
+            if (!initiative.startDate || !initiative.deadline) return [];
+
+            const status = findStatus(initiativeStatusConfig, initiative.status);
+            if (!status) return [];
+
+            return [
+              {
+                id: initiative.id,
+                name: initiative.title,
+                startAt: Temporal.PlainDate.from(initiative.startDate),
+                endAt: initiative.endDate
+                  ? Temporal.PlainDate.from(initiative.endDate)
+                  : Temporal.PlainDate.from(initiative.deadline),
+                status: {
+                  id: status.value as InitiativeStatus,
+                  name: status.label,
+                  icon: status.icon,
+                  className: status.className,
+                },
+              },
+            ];
+          }),
+        };
+      },
+    }),
+  );
+
+  const clampZoom = (value: number) => Math.min(200, Math.max(50, value));
+  const handleZoomOut = () => setZoom(clampZoom(zoom - 10));
+  const handleZoomIn = () => setZoom(clampZoom(zoom + 10));
+
+  return (
+    <GanttProvider
+      className="h-[calc(100dvh-var(--header-top-bar-height))]"
+      range={range}
+      zoom={zoom}
+      autoScrollToTodayOnRangeChange
+    >
+      <GanttSidebar>
+        <GanttSidebarHeader className="flex items-center gap-2">
+          {/* <GanttTodayButton label="Vandaag" /> */}
+
+          <Button onClick={handleZoomOut} type="button" variant="outline" size="icon">
+            <MinusIcon />
+          </Button>
+
+          <Select value={zoom.toString()} onValueChange={(value) => setZoom(Number(value))}>
+            <SelectTrigger className="flex-1">{zoom}%</SelectTrigger>
+            <SelectContent>
+              {[25, 50, 75, 100, 150, 200].map((level) => (
+                <SelectItem key={level.toString()} value={level.toString()}>
+                  {level}%
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Button onClick={handleZoomIn} type="button" variant="outline" size="icon">
+            <PlusIcon />
+          </Button>
+        </GanttSidebarHeader>
+
+        <GanttSidebarContent>
+          {data?.features.map((feature: GanttFeature) => (
+            <GanttSidebarItem key={feature.id} feature={feature} className="w-full" />
+          ))}
+        </GanttSidebarContent>
+      </GanttSidebar>
+
+      <GanttTimeline>
+        <GanttHeader />
+        <GanttFeatureList>
+          {data?.features.map((feature: GanttFeature) => (
+            <div key={feature.id}>
+              <GanttFeatureRow features={[feature]}>
+                {(item) => (
+                  <Link
+                    href={`/admin/initiatives/${item.id}`}
+                    className="truncate hover:underline"
+                    target="_blank"
+                  >
+                    {item.name}
+                  </Link>
+                )}
+              </GanttFeatureRow>
+            </div>
+          ))}
+        </GanttFeatureList>
+
+        <GanttToday />
+      </GanttTimeline>
+    </GanttProvider>
+  );
+}

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

@@ -0,0 +1,143 @@
+import "client-only";
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
+import { 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 CreateProjectInput,
+  type CreateProjectSchema,
+  createProjectSchema,
+} from "../_lib/validators";
+
+export type CreateProjectCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: CreateProjectSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: Partial<CreateProjectSchema>;
+  children?: React.ReactNode;
+};
+
+export function CreateProjectCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  defaultValues,
+  children,
+}: CreateProjectCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const { data: customers } = useSuspenseQuery(orpc.customers.getAll.queryOptions());
+
+  const form = useForm<CreateProjectInput>({
+    resolver: standardSchemaResolver(createProjectSchema),
+    defaultValues,
+  });
+
+  const selectedCustomer = customers.find(({ id }) => id === form.getValues("customerId"));
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Project Toevoegen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="key"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Code</FormLabel>
+                  <FormControl>
+                    <Input {...field} autoCapitalize="characters" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Titel</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="customerId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Klant</FormLabel>
+                  <FormControl>
+                    <ComboboxDropdown
+                      {...field}
+                      selectedItem={
+                        selectedCustomer && {
+                          id: selectedCustomer.id,
+                          value: selectedCustomer.name,
+                        }
+                      }
+                      items={customers.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 CreateProjectCommandTrigger = CommandFormDialogTrigger;

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

@@ -0,0 +1,76 @@
+"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 { ProjectColumn } from "../_config/columns-data";
+import { projectsFilters } from "../_config/filters";
+import { projectTableSorts } from "../_config/sorting";
+
+/**
+ * Client data table
+ */
+type ProjectInfiniteTableProviderProps<TData extends ProjectColumn> = {
+  columns: TableColumnDef<TData>[];
+  commands?: CommandFor<TData[]>[];
+  columnVisibility?: VisibilityState;
+  filterOptions?: UseFiltersOptions<typeof projectsFilters>;
+};
+
+export function ProjectPaginationTableProvider({
+  columns,
+  commands,
+  columnVisibility,
+  filterOptions,
+  children,
+}: PropsWithChildren<ProjectInfiniteTableProviderProps<ProjectColumn>>) {
+  const filtering = useFilters(projectsFilters, filterOptions);
+  const sorting = useSorting(projectTableSorts);
+  const pagination = usePagination(offsetPagination);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  const response = useSuspenseQuery(orpc.projects.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<ProjectColumn>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

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

@@ -0,0 +1,57 @@
+"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 { projectsFilters } from "../_config/filters";
+import { projectStatusConfig } from "../_config/status";
+
+const projectsFiltersDescriptors = resolveFilterDescriptors(projectsFilters);
+
+export function ProjectTableToolbar({ children }: PropsWithChildren) {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <FilterSearch placeholder="Zoeken..." filter={projectsFiltersDescriptors.search} />
+
+        <Suspense>
+          <ProjectCustomerFilter />
+          <ProjectStatusFilter />
+        </Suspense>
+      </TableToolbarList>
+
+      <TableToolbarList>{children}</TableToolbarList>
+    </TableToolbar>
+  );
+}
+
+/**
+ * Project client filter
+ */
+export function ProjectCustomerFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(orpc.projects.filterCustomers.queryOptions({ input }));
+
+  return (
+    <FilterCombobox title="Klanten" filter={projectsFiltersDescriptors.customerId} options={data} />
+  );
+}
+
+/**
+ * Project status filter
+ */
+export function ProjectStatusFilter() {
+  return (
+    <FilterCombobox
+      title="Status"
+      filter={projectsFiltersDescriptors.status}
+      options={projectStatusConfig}
+    />
+  );
+}

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

@@ -0,0 +1,53 @@
+"use client";
+
+import { type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import {
+  createTableSelectCell,
+  TableStatusCell,
+  TableTextCell,
+} from "@tulip-systems/data-tables/client";
+import Link from "next/link";
+import type { Customer } from "../../customers/_lib/validators";
+import type { Project } from "../_lib/validators";
+import { ProjectStatusField } from "./status";
+
+export type ProjectColumn = Project & { customer: Customer };
+
+export const projectColumns: TableColumnDef<ProjectColumn>[] = [
+  createTableSelectCell(),
+  {
+    id: "title",
+    accessorKey: "title",
+    header: ({ column }) => <TableColumnHeader column={column} title="Naam" />,
+    cell: ({ row }) => (
+      <TableTextCell>
+        <Link href={`/admin/projects/${row.original.id}`} className="truncate hover:underline">
+          {row.getValue("title")}
+        </Link>
+      </TableTextCell>
+    ),
+  },
+  {
+    id: "customer.name",
+    header: ({ column }) => <TableColumnHeader column={column} title="Klant" />,
+    accessorFn: (row) => row.customer.name,
+    cell: ({ row }) => (
+      <TableTextCell>
+        <Link href={`/admin/customers/${row.original.customer.id}`} className="hover:underline">
+          {row.getValue("customer.name")}
+        </Link>
+      </TableTextCell>
+    ),
+    enableSorting: false,
+  },
+  {
+    id: "status",
+    accessorKey: "status",
+    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => (
+      <TableStatusCell>
+        <ProjectStatusField status={row.getValue("status")} />
+      </TableStatusCell>
+    ),
+  },
+];