@tulip-systems/create-app 0.11.1

package/dist/templates/code/src/app/admin/employees/_components/combobox-dropdown.tsx

@@ -0,0 +1,123 @@
+import "client-only";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@tulip-systems/ui/avatar";
+import { Button } from "@tulip-systems/ui/button";
+import { cn } from "@tulip-systems/ui/cn";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@tulip-systems/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@tulip-systems/ui/popover";
+import { Check, ChevronsUpDownIcon } from "lucide-react";
+import type { User } from "@/server/auth/schema";
+import type { Employee } from "../_lib/validators";
+
+export type EmployeeComboboxDropdownFieldProps = {
+  values: string[];
+  employees: (Employee & { user: User })[];
+  onSelect: (employeeIds: string[]) => void;
+};
+
+export function EmployeeComboboxDropdown({
+  values,
+  employees,
+  onSelect,
+}: EmployeeComboboxDropdownFieldProps) {
+  const selectedValues = new Set(values);
+
+  const maxAvatars = 6;
+  const selectedEmployees = employees.filter(({ id }) => selectedValues.has(id));
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button type="button" variant="outline" className="flex h-10 w-full justify-between px-3">
+          <span className="flex">
+            {selectedEmployees?.slice(0, maxAvatars).map(({ user }, index) => (
+              <Avatar
+                key={user.id}
+                className="-m-1 h-8 w-8 text-xs"
+                style={{ zIndex: selectedEmployees.length - index }}
+              >
+                <AvatarImage src={user.image || ""} alt={user.name} />
+                <AvatarFallback className="border">{user.name?.[0] || ""}</AvatarFallback>
+              </Avatar>
+            ))}
+
+            {selectedEmployees.length > maxAvatars && (
+              <Avatar
+                className="h-7 w-7 text-xs"
+                style={{
+                  marginLeft: `-${(selectedEmployees.length - maxAvatars) * 5}px`,
+                }}
+              >
+                <AvatarImage />
+                <AvatarFallback className="border">
+                  +{selectedEmployees.length - maxAvatars}
+                </AvatarFallback>
+              </Avatar>
+            )}
+
+            {selectedEmployees.length === 0 && (
+              <span className="text-muted-foreground">Geen werknemers geselecteerd</span>
+            )}
+          </span>
+
+          <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="Zoeken..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {employees.map(({ id, user: { name } }) => {
+                const isSelected = selectedValues.has(id);
+                return (
+                  <CommandItem
+                    key={id}
+                    onSelect={() => {
+                      if (isSelected) selectedValues.delete(id);
+                      else selectedValues.add(id);
+                      const filterValues = Array.from(selectedValues);
+                      onSelect(filterValues);
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                        isSelected
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible",
+                      )}
+                    >
+                      <Check className={cn("h-4 w-4")} />
+                    </div>
+
+                    <span>{name}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem onSelect={() => onSelect([])} className="justify-center text-center">
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,175 @@
+"use client";
+
+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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@tulip-systems/ui/select";
+import type React from "react";
+import { useForm } from "react-hook-form";
+import { employeeRolesConfig } from "../_config/roles";
+import {
+  type CreateEmployeeInput,
+  type CreateEmployeeSchema,
+  createEmployeeSchema,
+} from "../_lib/validators";
+
+export type CreateEmployeeCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: CreateEmployeeSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: Partial<CreateEmployeeInput>;
+  children?: React.ReactNode;
+};
+
+export function CreateEmployeeCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  defaultValues,
+  children,
+}: CreateEmployeeCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<CreateEmployeeInput>({
+    resolver: standardSchemaResolver(createEmployeeSchema),
+    defaultValues,
+  });
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Employee Toevoegen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="user.firstName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Voornaam</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="user.lastName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Achternaam</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="user.email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="user.password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Wachtwoord</FormLabel>
+                  <FormControl>
+                    <Input type="password" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="user.role"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Role</FormLabel>
+
+                  <Select onValueChange={field.onChange} defaultValue="user">
+                    <FormControl>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Kies een rol" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {employeeRolesConfig.map(({ value, label }) => (
+                        <SelectItem key={value} value={value}>
+                          {label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Toevoegen</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </Form>
+    </CommandFormDialog>
+  );
+}
+
+export const CreateEmployeeCommandTrigger = CommandFormDialogTrigger;

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

@@ -0,0 +1,82 @@
+"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 type { User } from "@/server/auth/schema";
+import { orpc } from "@/server/router/client";
+import { employeesFilters } from "../_config/filters";
+import { employeeTableSorts } from "../_config/sorting";
+import type { Employee } from "../_lib/validators";
+
+export type EmployeeTableData = Employee & { user: User };
+
+type EmployeeTableProviderProps = PropsWithChildren<{
+  columns: TableColumnDef<EmployeeTableData>[];
+  commands?: CommandFor<EmployeeTableData[]>[];
+  filterOptions?: UseFiltersOptions<typeof employeesFilters>;
+  columnVisibility?: VisibilityState;
+}>;
+
+/**
+ * Pagination table
+ */
+export function EmployeePaginationTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+  children,
+}: EmployeeTableProviderProps) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(employeesFilters, filterOptions);
+  const sorting = useSorting(employeeTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseQuery(orpc.employees.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<EmployeeTableData>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

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

@@ -0,0 +1,27 @@
+"use client";
+
+import { TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";
+import { resolveFilterDescriptors } from "@tulip-systems/query";
+import { FilterCombobox, FilterSearch } from "@tulip-systems/query/client";
+import type { PropsWithChildren } from "react";
+import { employeesFilters } from "../_config/filters";
+import { employeeRolesConfig } from "../_config/roles";
+
+const employeesFiltersDescriptors = resolveFilterDescriptors(employeesFilters);
+
+export function EmployeeTableToolbar({ children }: PropsWithChildren) {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <FilterSearch placeholder="Zoeken..." filter={employeesFiltersDescriptors.search} />
+        <FilterCombobox
+          title="Rol"
+          filter={employeesFiltersDescriptors.role}
+          options={employeeRolesConfig}
+        />
+      </TableToolbarList>
+
+      <TableToolbarList>{children}</TableToolbarList>
+    </TableToolbar>
+  );
+}

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

@@ -0,0 +1,38 @@
+"use client";
+
+import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import { createTableSelectCell } from "@tulip-systems/data-tables/client";
+import Link from "next/link";
+import type { EmployeeTableData } from "../_components/tables";
+
+export const employeeColumns: TableColumnDef<EmployeeTableData>[] = [
+  createTableSelectCell(),
+  {
+    id: "userName",
+    header: ({ column }) => <TableColumnHeader column={column} title="Naam" />,
+    accessorFn: (row) => row.user.name,
+    cell: ({ row }) => (
+      <TableCell>
+        <Link href={`/admin/employees/${row.original.id}`} className="truncate hover:underline">
+          {row.getValue("userName")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    id: "userEmail",
+    header: ({ column }) => <TableColumnHeader column={column} title="Email" />,
+    accessorFn: (row) => row.user.email,
+    cell: ({ row }) => (
+      <TableCell>
+        <Link
+          href={`mailto:${row.getValue("userEmail")}`}
+          className="truncate hover:underline"
+          target="_blank"
+        >
+          {row.getValue("userEmail")}
+        </Link>
+      </TableCell>
+    ),
+  },
+];

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

@@ -0,0 +1,144 @@
+"use client";
+
+import { commandBuilder, ensureArray } from "@tulip-systems/commands";
+import {
+  ArchiveCommand,
+  CommandClick,
+  CommandLabel,
+  type CommandMutationMeta,
+  DeleteCommand,
+  RestoreCommand,
+  UpdatePasswordCommand,
+  UpdatePasswordCommandTrigger,
+} from "@tulip-systems/commands/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { KeyRoundIcon, LockIcon, LockOpenIcon } from "lucide-react";
+import { Icons } from "@/components/icons";
+import { authClient } from "@/server/auth/client";
+import type { User } from "@/server/auth/schema";
+import { orpc } from "@/server/router/client";
+import { CreateEmployeeCommand, CreateEmployeeCommandTrigger } from "../_components/create-command";
+
+type EmployeeCommandItem = { id: string; isDeleted: boolean; user: Pick<User, "id" | "banned"> };
+
+export const employeeBanCommand = commandBuilder
+  .$type<EmployeeCommandItem | EmployeeCommandItem[]>()
+  .transform(ensureArray)
+  .permission({ employee: ["ban"] })
+  .visibleWhen(({ data }) => !data.every((item) => item.user.banned))
+  .render(({ data }) => (
+    <CommandClick
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.employees.ban.mutationOptions({
+        onSuccess: () => toast.success("Succesvol gedeactiveerd"),
+      })}
+      label="Deactiveer"
+    >
+      <LockIcon className="size-4" />
+      <CommandLabel />
+    </CommandClick>
+  ));
+
+export const employeeUnbanCommand = commandBuilder
+  .$type<EmployeeCommandItem | EmployeeCommandItem[]>()
+  .transform(ensureArray)
+  .permission({ employee: ["ban"] })
+  .visibleWhen(({ data }) => data.every((item) => item.user.banned))
+  .render(({ data }) => (
+    <CommandClick
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.employees.unban.mutationOptions({
+        onSuccess: () => toast.success("Succesvol geactiveerd"),
+      })}
+      label="Activeer"
+    >
+      <LockOpenIcon className="size-4" />
+      <CommandLabel />
+    </CommandClick>
+  ));
+
+export const employeeUpdatePasswordCommand = commandBuilder
+  .$type<{ user: Pick<User, "id"> }>()
+  .permission({ employee: ["update"] })
+  .render(({ data }) => (
+    <UpdatePasswordCommand
+      variables={(values) => ({
+        userId: data.user.id,
+        newPassword: values.password,
+      })}
+      mutation={{
+        mutationFn: (data) => authClient.admin.setUserPassword(data),
+        onSuccess: () => toast.success("Succesvol gewijzigd"),
+      }}
+    >
+      <UpdatePasswordCommandTrigger className="flex items-center gap-2" label="Wachtwoord">
+        <KeyRoundIcon className="size-4" />
+        <CommandLabel />
+      </UpdatePasswordCommandTrigger>
+    </UpdatePasswordCommand>
+  ));
+
+export const employeeArchiveCommand = commandBuilder
+  .$type<EmployeeCommandItem | EmployeeCommandItem[]>()
+  .transform(ensureArray)
+  .permission({ employee: ["archive"] })
+  .visibleWhen(({ data }) => data.every((item) => !item.isDeleted))
+  .render(({ data }) => (
+    <ArchiveCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.employees.archive.mutationOptions({
+        onSuccess: () => toast.success("Succesvol gearchiveerd"),
+      })}
+    />
+  ));
+
+export const employeeRestoreCommand = commandBuilder
+  .$type<EmployeeCommandItem | EmployeeCommandItem[]>()
+  .transform(ensureArray)
+  .permission({ employee: ["archive"] })
+  .visibleWhen(({ data }) => data.every((item) => item.isDeleted))
+  .render(({ data }) => (
+    <RestoreCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.employees.restore.mutationOptions({
+        onSuccess: () => toast.success("Succesvol hersteld"),
+      })}
+    />
+  ));
+
+export const employeeDeleteCommand = commandBuilder
+  .$type<EmployeeCommandItem | EmployeeCommandItem[]>()
+  .transform(ensureArray)
+  .permission({ employee: ["delete"] })
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.employees.delete.mutationOptions({
+        onSuccess: (_data, _vars, _result, context) => {
+          toast.success("Succesvol verwijderd");
+          const meta = context.meta as CommandMutationMeta;
+          meta.router.push("/admin/employees");
+        },
+      })}
+    />
+  ));
+
+export const employeeCreateCommand = commandBuilder
+  .permission({ employee: ["create"] })
+  .render(() => (
+    <CreateEmployeeCommand
+      variables={(values) => values}
+      mutation={orpc.employees.create.mutationOptions({
+        onSuccess: (data, _vars, _result, context) => {
+          toast.success("Werknemer succesvol toegevoegd");
+          const meta = context.meta as CommandMutationMeta;
+          if (data.id) meta.router.push(`/admin/employees/${data.id}`);
+        },
+      })}
+    >
+      <CreateEmployeeCommandTrigger label="Toevoegen" hotkey="mod+i">
+        <Icons.add className="size-4" />
+        <CommandLabel />
+      </CreateEmployeeCommandTrigger>
+    </CreateEmployeeCommand>
+  ));

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

@@ -0,0 +1,49 @@
+import {
+  arrayFilter,
+  booleanFilter,
+  createFilteringParser,
+  defineFilters,
+  enumFilter,
+  resolveFiltersSchema,
+  stringFilter,
+} from "@tulip-systems/query";
+import { createDatabaseFiltersCompiler } from "@tulip-systems/query/drizzle";
+import { createLocalFiltersCompiler } from "@tulip-systems/query/tanstack-db";
+import type z from "zod";
+
+export const employeeRoleValues = ["worker", "admin"] as const;
+
+export const employeesFilters = defineFilters({
+  search: stringFilter.build((value) =>
+    value
+      ? {
+          or: [
+            { field: "userName", operator: "ilike", value: `%${value}%` },
+            { field: "userEmail", operator: "ilike", value: `%${value}%` },
+          ],
+        }
+      : null,
+  ),
+  isDeleted: booleanFilter.build((value) => ({
+    field: "isDeleted",
+    operator: "eq",
+    value: value ?? false,
+  })),
+  role: arrayFilter(enumFilter(employeeRoleValues)).build((value) =>
+    value?.length ? { field: "role", operator: "in", value } : null,
+  ),
+});
+
+/**
+ * Validators
+ */
+export const employeeFiltersSchema = resolveFiltersSchema(employeesFilters);
+
+export type EmployeeFiltersSchema = z.infer<typeof employeeFiltersSchema>;
+
+/**
+ * Parser and compilers
+ */
+export const employeeFiltersParser = createFilteringParser(employeesFilters);
+export const employeeLocalFiltersCompiler = createLocalFiltersCompiler(employeesFilters);
+export const employeeDatabaseFiltersCompiler = createDatabaseFiltersCompiler(employeesFilters);

package/dist/templates/code/src/app/admin/employees/_config/roles.tsx

@@ -0,0 +1,15 @@
+import type { Role } from "@/server/auth/permissions";
+
+/**
+ * Project statuses
+ */
+export const employeeRolesConfig: { value: Role; label: string }[] = [
+  {
+    value: "worker",
+    label: "Medewerker",
+  },
+  {
+    value: "admin",
+    label: "Beheerder",
+  },
+];

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

@@ -0,0 +1,29 @@
+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 employeeTableSorts = defineSorting({
+  userName: sortOption((direction) => ({ field: "userName", direction })),
+  userEmail: sortOption((direction) => ({ field: "userEmail", direction })),
+  createdAt: sortOption((direction) => ({ field: "createdAt", direction })),
+});
+
+/**
+ * Validators
+ */
+export const employeeTableSortsSchema = resolveSortingSchema(employeeTableSorts);
+
+/**
+ * Parsers
+ */
+export const employeeTableSortsParser = createSortingParser(employeeTableSorts, {
+  fallback: [{ key: "createdAt", direction: "desc" }],
+});
+
+export const employeeTableLocalSortsCompiler = createLocalSortingCompiler(employeeTableSorts);
+export const employeeTableDatabaseSortsCompiler = createDatabaseSortingCompiler(employeeTableSorts);