@tulip-systems/create-app 0.11.1

package/dist/templates/code/src/app/admin/tasks/_components/command-import-excel.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { useSuspenseQueries } from "@tanstack/react-query";
+import {
+  CommandFormDialog,
+  CommandFormDialogCancel,
+  CommandFormDialogContent,
+  CommandFormDialogFields,
+  CommandFormDialogFooter,
+  CommandFormDialogHeader,
+  CommandFormDialogSubmit,
+  CommandFormDialogTitle,
+  CommandFormDialogTrigger,
+} from "@tulip-systems/commands/client";
+import { Dropzone, DropzoneContent, DropzoneEmptyState } from "@tulip-systems/storage/client";
+import { ComboboxDropdown } from "@tulip-systems/ui/combobox-dropdown";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@tulip-systems/ui/react-hook-form";
+import { toast } from "@tulip-systems/ui/sonner";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { read, utils } from "xlsx";
+import { orpc } from "@/server/router/client";
+import {
+  type ImportExcelTasksInput,
+  type ImportExcelTasksSchema,
+  importExcelTasksSchema,
+} from "../_lib/validators";
+
+export type ImportExcelTasksCommandDefaultValues = Pick<ImportExcelTasksSchema, "projectId"> &
+  Partial<Pick<ImportExcelTasksSchema, "initiativeId" | "domainId">>;
+
+export type ImportExcelTasksCommandProps = {
+  defaultValues: ImportExcelTasksCommandDefaultValues;
+  children?: React.ReactNode;
+};
+
+export function ImportExcelTasksCommand({ defaultValues, children }: ImportExcelTasksCommandProps) {
+  const [files, setFiles] = useState<File[]>([]);
+
+  const projectId = defaultValues.projectId;
+
+  const [initiativesQuery, domainsQuery] = useSuspenseQueries({
+    queries: [
+      orpc.initiatives.getAll.queryOptions({
+        input: { filters: { projectId: [projectId] } },
+      }),
+      orpc.domains.getAll.queryOptions({
+        input: { filters: { projectId: [projectId] } },
+      }),
+    ],
+  });
+
+  const firstInitiative = initiativesQuery.data.at(0);
+
+  /**
+   * Import Excel file to sales order item action
+   */
+  const form = useForm<ImportExcelTasksInput>({
+    resolver: standardSchemaResolver(importExcelTasksSchema),
+    defaultValues: {
+      ...defaultValues,
+      initiativeId: defaultValues.initiativeId ?? firstInitiative?.id,
+    },
+  });
+
+  const selectedInitiative = initiativesQuery.data.find(
+    ({ id }) => id === form.getValues("initiativeId"),
+  );
+
+  const selectedDomain = domainsQuery.data.find(({ id }) => id === form.getValues("domainId"));
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent
+          variables={(values: ImportExcelTasksInput) => values}
+          mutation={orpc.tasks.importExcel.mutationOptions({
+            onSuccess: () => toast.success("Excel bestand geïmporteerd"),
+          })}
+        >
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Excel Importeren</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="initiativeId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Initiative</FormLabel>
+                  <FormControl>
+                    <ComboboxDropdown
+                      {...field}
+                      selectedItem={
+                        selectedInitiative && {
+                          id: selectedInitiative.id,
+                          value: selectedInitiative.title,
+                        }
+                      }
+                      items={initiativesQuery.data.map(({ id, title }) => ({ id, value: title }))}
+                      onSelect={(value) => value && field.onChange(value.id)}
+                      placeholder="Select an initiative"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="domainId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Domain</FormLabel>
+                  <FormControl>
+                    <ComboboxDropdown
+                      {...field}
+                      selectedItem={
+                        selectedDomain && {
+                          id: selectedDomain.id,
+                          value: selectedDomain.title,
+                        }
+                      }
+                      items={domainsQuery.data.map(({ id, title }) => ({ id, value: title }))}
+                      onSelect={(value) => value && field.onChange(value.id)}
+                      placeholder="Select an domain"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="items"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Dropzone
+                      src={files}
+                      maxFiles={1}
+                      onDrop={(files) => {
+                        const file = files?.[0];
+                        if (!file) return;
+
+                        const reader = new FileReader();
+
+                        reader.onload = (e) => {
+                          if (!e.target) return;
+
+                          // Read Excel file
+                          const data = new Uint8Array(e.target.result as ArrayBuffer);
+                          const workbook = read(data, { type: "array" });
+
+                          // Get worksheet
+                          const worksheet = workbook.Sheets.IMPORT;
+
+                          // Check if worksheet named 'IMPORT' exists
+                          if (!worksheet) {
+                            toast.error("Fout bij het importeren", {
+                              description: "Blad 'IMPORT' niet gevonden",
+                            });
+                            return;
+                          }
+
+                          // Convert worksheet to JSON
+                          const jsonData = utils.sheet_to_json(worksheet);
+
+                          // Convert JSON and parse
+                          const parsed = importExcelTasksSchema
+                            .pick({ items: true })
+                            .safeParse({ items: JSON.parse(JSON.stringify(jsonData)) });
+
+                          // Check if error
+                          if (parsed.error) {
+                            toast.error("Fout bij het importeren", {
+                              description: parsed.error.message,
+                            });
+
+                            return;
+                          }
+
+                          // Update form
+                          field.onChange(parsed.data.items);
+                        };
+
+                        reader.readAsArrayBuffer(file);
+                        setFiles([file]);
+                      }}
+                    >
+                      <DropzoneEmptyState />
+                      <DropzoneContent />
+
+                      {field.value && (
+                        <p className="text-muted-foreground text-sm">
+                          {field.value.length} rijen gevonden
+                        </p>
+                      )}
+                    </Dropzone>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Importeren</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </Form>
+    </CommandFormDialog>
+  );
+}
+
+export const ImportExcelTasksCommandTrigger = CommandFormDialogTrigger;

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

@@ -0,0 +1,206 @@
+import "client-only";
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { type DefaultError, type MutationOptions, useSuspenseQueries } 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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@tulip-systems/ui/select";
+import type React from "react";
+import { useForm } from "react-hook-form";
+import { orpc } from "@/server/router/client";
+import { TaskStatusField, taskStatusConfig } from "../_config/status";
+import { type CreateTaskInput, type CreateTaskSchema, createTaskSchema } from "../_lib/validators";
+
+export type CreateTaskCommandDefaultValues = Pick<CreateTaskSchema, "projectId"> &
+  Partial<Pick<CreateTaskSchema, "initiativeId" | "domainId" | "parentId">>;
+
+export type CreateTaskCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: CreateTaskSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues: Omit<Partial<CreateTaskInput>, "projectId" | "parentId"> &
+    CreateTaskCommandDefaultValues;
+  children?: React.ReactNode;
+};
+
+export function CreateTaskCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  defaultValues,
+  children,
+}: CreateTaskCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const projectId = defaultValues.projectId;
+
+  const [initiativesQuery, domainsQuery] = useSuspenseQueries({
+    queries: [
+      orpc.initiatives.getAll.queryOptions({
+        input: { filters: { projectId: [projectId] } },
+      }),
+      orpc.domains.getAll.queryOptions({
+        input: { filters: { projectId: [projectId] } },
+      }),
+    ],
+  });
+
+  const firstInitiative = initiativesQuery.data.at(0);
+
+  const form = useForm<CreateTaskInput>({
+    resolver: standardSchemaResolver(createTaskSchema),
+    defaultValues: {
+      ...defaultValues,
+      initiativeId: defaultValues.initiativeId ?? firstInitiative?.id,
+    },
+  });
+
+  const selectedInitiative = initiativesQuery.data.find(
+    ({ id }) => id === form.getValues("initiativeId"),
+  );
+
+  const selectedDomain = domainsQuery.data.find(({ id }) => id === form.getValues("domainId"));
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Add Task</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="initiativeId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Initiative</FormLabel>
+                  <FormControl>
+                    <ComboboxDropdown
+                      {...field}
+                      selectedItem={
+                        selectedInitiative && {
+                          id: selectedInitiative.id,
+                          value: selectedInitiative.title,
+                        }
+                      }
+                      items={initiativesQuery.data.map(({ id, title }) => ({ id, value: title }))}
+                      onSelect={(value) => value && field.onChange(value.id)}
+                      placeholder="Select an initiative"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Status</FormLabel>
+                  <Select onValueChange={field.onChange} defaultValue="backlog">
+                    <FormControl>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select a status" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {taskStatusConfig.flatMap((status) => (
+                        <SelectItem key={status.value} value={status.value}>
+                          <TaskStatusField status={status.value} />
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="domainId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Domain</FormLabel>
+                  <FormControl>
+                    <ComboboxDropdown
+                      {...field}
+                      selectedItem={
+                        selectedDomain && {
+                          id: selectedDomain.id,
+                          value: selectedDomain.title,
+                        }
+                      }
+                      items={domainsQuery.data.map(({ id, title }) => ({ id, value: title }))}
+                      onSelect={(value) => value && field.onChange(value.id)}
+                      placeholder="Select an domain"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Toevoegen</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </Form>
+    </CommandFormDialog>
+  );
+}
+
+export const CreateTaskCommandTrigger = CommandFormDialogTrigger;

package/dist/templates/code/src/app/admin/tasks/_components/domains-tabs-grid.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import type { Tab } from "@tulip-systems/app/components";
+import { buttonVariants } from "@tulip-systems/ui/button";
+import { cn } from "@tulip-systems/ui/cn";
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+import Link from "next/link";
+import { useSelectedLayoutSegment } from "next/navigation";
+
+type TaskSubprojectTabGridProps = {
+  tabs: Tab[];
+};
+
+/**
+ * Task Domain Tabs Grid
+ */
+export function TaskDomainTabsGrid({ tabs }: TaskSubprojectTabGridProps) {
+  const currentSegment = useSelectedLayoutSegment();
+
+  const selectedTab = tabs.find((tab) => tab.segment === currentSegment) ?? tabs[0];
+
+  return (
+    <div className="grid grid-flow-row-dense grid-cols-[repeat(auto-fill,_minmax(12rem,_1fr))] gap-2">
+      {tabs.flatMap((tab) => (
+        <Link
+          key={tab.segment}
+          href={tab.href}
+          className={cn(
+            "border border-transparent",
+            buttonVariants({
+              variant: tab.segment === selectedTab?.segment ? "default" : "outline",
+              className: "h-14 items-center justify-center",
+            }),
+          )}
+        >
+          <span className="line-clamp-2 overflow-hidden whitespace-normal">{tab.name}</span>
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Task Domain Tabs Grid Loading State
+ */
+export function TaskDomainTabsGridLoading() {
+  return (
+    <div className="grid grid-flow-row-dense grid-cols-[repeat(auto-fill,_minmax(12rem,_1fr))] gap-2">
+      {Array.from({ length: 21 }).flatMap((_, index) => (
+        <Skeleton key={index} className="h-14" />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,177 @@
+"use client";
+import { useSuspenseInfiniteQuery, 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,
+  useInfiniteStrategy,
+  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 type { User } from "@/server/auth/schema";
+import { orpc } from "@/server/router/client";
+import type { Domain } from "../../domains/_lib/validators";
+import type { Employee } from "../../employees/_lib/validators";
+import type { Initiative } from "../../initiatives/_lib/validators";
+import type { Project } from "../../projects/_lib/validators";
+import { tasksFilters } from "../_config/filters";
+import { taskTableSorts } from "../_config/sorting";
+import type { Task } from "../_lib/validators";
+
+export type TaskTableData = Task & {
+  project: Project;
+  assignee?: (Partial<Employee> & { user?: Partial<User> | null }) | null;
+  parent?: Partial<Task> | null;
+  domain?: Partial<Domain> | null;
+  initiative: Initiative;
+};
+
+export type TaskTableMeta = {
+  employees: (Employee & { user: User })[];
+  domains: Domain[];
+  initiatives: Initiative[];
+};
+
+/**
+ * Client data table
+ */
+type TaskTableProviderProps = PropsWithChildren<{
+  columns: TableColumnDef<TaskTableData>[];
+  commands?: CommandFor<TaskTableData[]>[];
+  filterOptions?: UseFiltersOptions<typeof tasksFilters>;
+  columnVisibility?: VisibilityState;
+  meta?: TaskTableMeta;
+}>;
+
+/**
+ * Infinite table
+ */
+export function TaskInfiniteTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+  meta,
+  children,
+}: TaskTableProviderProps) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(tasksFilters, filterOptions);
+  const sorting = useSorting(taskTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseInfiniteQuery(
+    orpc.tasks.list.infiniteOptions({
+      initialPageParam: 0,
+      input: (page: number | undefined) => ({
+        ...input,
+        pagination: { ...input.pagination, page: page ?? input.pagination.page },
+      }),
+      getNextPageParam: ({ pagination }) => pagination.nextPage,
+      getPreviousPageParam: ({ pagination }) => pagination.previousPage,
+    }),
+  );
+
+  const { total } = response.data.pages.at(-1)?.pagination ?? {};
+
+  /**
+   * Strategy
+   */
+  const strategy = useInfiniteStrategy({
+    pagination,
+    total,
+    fetchNextPage: response.fetchNextPage,
+    isFetching: response.isFetching,
+    isFetchingNextPage: response.isFetchingNextPage,
+  });
+
+  const queryData = useMemo(
+    () => response.data.pages.flatMap(({ data }) => data) ?? [],
+    [response.data],
+  );
+
+  /**
+   * Table
+   */
+  const config = createTableConfig<TaskTableData>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+    meta,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}
+
+/**
+ * Pagination table
+ */
+export function TaskPaginationTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+  meta,
+  children,
+}: TaskTableProviderProps) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(tasksFilters, filterOptions);
+  const sorting = useSorting(taskTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseQuery(orpc.tasks.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<TaskTableData>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+    meta,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}