@tulip-systems/create-app 0.11.1

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

@@ -0,0 +1,151 @@
+"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 CreateProductInput,
+  type CreateProductSchema,
+  createProductSchema,
+} from "../_lib/validators";
+
+export type CreateProductCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: CreateProductSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: Partial<CreateProductInput>;
+  children?: React.ReactNode;
+};
+
+export function CreateProductCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  defaultValues,
+  children,
+}: CreateProductCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const categoriesQuery = useSuspenseQuery(orpc.products.getCategories.queryOptions());
+
+  const form = useForm<CreateProductInput>({
+    resolver: standardSchemaResolver(createProductSchema),
+    defaultValues,
+  });
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Product Toevoegen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Naam</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="articleNumber"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Artikelnummer</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="buyPrice"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Aankoop prijs</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="number"
+                      value={field.value ?? ""}
+                      onChange={(e) => field.onChange(e.target.valueAsNumber)}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="categoryId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Categorie</FormLabel>
+                  <FormControl>
+                    <ComboboxDropdown
+                      items={categoriesQuery.data.map(({ id, name }) => ({ id, value: name }))}
+                      onSelect={(value) => value && field.onChange(value.id)}
+                      placeholder="Kies een categorie"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Toevoegen</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </Form>
+    </CommandFormDialog>
+  );
+}
+
+export const CreateProductCommandTrigger = CommandFormDialogTrigger;

package/dist/templates/spark/src/app/admin/products/_components/image-card.tsx

@@ -0,0 +1,41 @@
+import { getAssetURL, imageLoader } from "@tulip-systems/storage";
+import { cn } from "@tulip-systems/ui/cn";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@tulip-systems/ui/hover-card";
+import Image from "next/image";
+import type { HTMLAttributes } from "react";
+import type { ProductImage } from "../_lib/validators";
+import { FALLBACK_URL } from "./image-carousel";
+
+export type ProductImageCardProps = HTMLAttributes<HTMLDivElement> & {
+  image: ProductImage | null | undefined;
+};
+
+export function ProductImageCard({ image, className, ...props }: ProductImageCardProps) {
+  return (
+    <HoverCard>
+      <HoverCardTrigger>
+        <div {...props} className={cn("relative aspect-square w-full", className)}>
+          <Image
+            src={image?.assetId ? getAssetURL(image.assetId) : FALLBACK_URL}
+            alt="Product Image"
+            width={100}
+            height={100}
+            className="absolute inset-0 h-full w-full cursor-pointer rounded-lg bg-muted object-contain"
+            loader={imageLoader}
+          />
+        </div>
+      </HoverCardTrigger>
+
+      <HoverCardContent className="flex w-[10vw] flex-col gap-2 rounded-lg">
+        <Image
+          src={image?.assetId ? getAssetURL(image.assetId) : FALLBACK_URL}
+          alt="Product Image"
+          width={100}
+          height={100}
+          className="w-full cursor-pointer rounded-lg bg-muted object-contain"
+          loader={image?.assetId ? imageLoader : undefined}
+        />
+      </HoverCardContent>
+    </HoverCard>
+  );
+}

package/dist/templates/spark/src/app/admin/products/_components/image-carousel.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { getAssetURL, imageLoader } from "@tulip-systems/storage";
+import { Card, CardContent } from "@tulip-systems/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@tulip-systems/ui/carousel";
+import { cn } from "@tulip-systems/ui/cn";
+import Image from "next/image";
+import { type ComponentProps, useState } from "react";
+import type { RouterOutputs } from "@/server/router/router";
+
+export const FALLBACK_URL = "/images/placeholder.jpeg";
+
+type ImageCarouselProps = ComponentProps<"div"> & {
+  images: RouterOutputs["productImages"]["getAll"];
+};
+
+export function ImageCarousel({ images, className, ...props }: ImageCarouselProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  return (
+    <div {...props} className={cn("space-y-3", className)}>
+      <Carousel opts={{ startIndex: activeIndex }}>
+        <CarouselContent>
+          {images.map((asset) => (
+            <CarouselItem key={asset.id}>
+              <Card className="overflow-hidden">
+                <CardContent className="relative flex aspect-square p-0">
+                  <Image
+                    src={getAssetURL(asset.id)}
+                    alt={asset.name ?? ""}
+                    width={1000}
+                    height={1000}
+                    className="w-full object-contain"
+                    loader={imageLoader}
+                  />
+                </CardContent>
+              </Card>
+            </CarouselItem>
+          ))}
+
+          {images.length === 0 && (
+            <CarouselItem>
+              <Card className="overflow-hidden">
+                <CardContent className="relative flex aspect-square p-0">
+                  <Image
+                    src={FALLBACK_URL}
+                    alt="Product Image"
+                    width={1000}
+                    height={1000}
+                    className="w-full object-contain"
+                  />
+                </CardContent>
+              </Card>
+            </CarouselItem>
+          )}
+        </CarouselContent>
+
+        {images.length > 1 && (
+          <>
+            <CarouselPrevious className="hidden md:flex" />
+            <CarouselNext className="hidden md:flex" />
+          </>
+        )}
+      </Carousel>
+
+      {images.length > 1 && (
+        <div className="flex w-full gap-3 overflow-x-auto">
+          {images.map((asset, index) => (
+            <Image
+              key={asset.id}
+              src={getAssetURL(asset.id)}
+              alt={asset.name ?? ""}
+              width={1000}
+              height={1000}
+              className="aspect-square w-20 cursor-pointer rounded-lg object-cover"
+              onClick={() => setActiveIndex(index)}
+              loader={imageLoader}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/products/_components/image-grid.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { arrayMove } from "@tulip-systems/core";
+import type { StorageAsset } from "@tulip-systems/storage";
+import { ImageGrid, UploadZone } from "@tulip-systems/storage/client";
+import { orpc } from "@/server/router/client";
+import { uploadClient } from "@/server/storage/client";
+
+export function ProductImagesGrid({ productId }: { productId: string }) {
+  const queryClient = useQueryClient();
+
+  const queryKey = orpc.productImages.getAll.queryKey({ input: { productId } });
+
+  const imagesQuery = useSuspenseQuery(
+    orpc.productImages.getAll.queryOptions({ input: { productId } }),
+  );
+
+  return (
+    <UploadZone
+      className="min-h-120"
+      variables={{}}
+      uploadClient={uploadClient}
+      uploadHooks={{
+        afterPresign: async (asset) => {
+          await orpc.productImages.create.call({ productId, assetId: asset.id });
+        },
+      }}
+      optimistic={{
+        add: (asset) => {
+          queryClient.setQueryData(queryKey, (prev) => [...(prev ?? []), asset as StorageAsset]);
+        },
+        remove: (ids) => {
+          queryClient.setQueryData(
+            queryKey,
+            (prev) => prev?.filter((node) => !ids.includes(node.id)) ?? [],
+          );
+        },
+        invalidate: () => queryClient.invalidateQueries({ queryKey }),
+        cancel: () => queryClient.cancelQueries({ queryKey }),
+      }}
+    >
+      <ImageGrid
+        assets={imagesQuery.data}
+        moveAction={(input) => orpc.productImages.move.call({ ...input, productId })}
+        optimistic={{
+          move: (input) => {
+            queryClient.setQueryData(queryKey, (prev) => arrayMove(prev ?? [], input));
+          },
+        }}
+      />
+    </UploadZone>
+  );
+}

package/dist/templates/spark/src/app/admin/products/_components/table-filters.tsx

@@ -0,0 +1,65 @@
+// import { PageSearchParams } from "@/lib/types/page";
+// import { convertFilterValue } from "@/lib/utils/filter";
+// import prisma from "@/prisma/db";
+// import {
+//   ServerDataTableFilter,
+//   ServerDataTableFilterOption,
+// } from "@/tulip/components/tables/server-data-tables/server-data-table-filter";
+// import { getServerDataTableSearchParams } from "@tulip-systems/data-tables/drizzle/server";
+// import { Prisma } from "@prisma/client";
+
+// /**
+//  * Get product table filters
+//  */
+// export async function getProductFilters(searchParams: PageSearchParams): Prisma.ProductWhereInput {
+//   const query = await getServerDataTableSearchParams();
+
+//   const category = convertFilterValue(searchParams.category);
+//   const brand = convertFilterValue(searchParams.brand);
+//   const isFavorite = convertFilterValue(searchParams.isFavorite);
+
+//   return {
+//     isDeleted: !!searchParams.isDeleted,
+//     ...(isFavorite && { isFavorite: !!isFavorite }),
+//     ...(category && { categoryId: { in: category } }),
+//     ...(brand && { brand: { in: brand } }),
+//   };
+// }
+// /**
+//  * Product category filter
+//  */
+// export async function ProductCategoryFilter(props: { searchParams: PageSearchParams }) {
+//   const filters = getProductFilters(props.searchParams);
+
+//   const categories = await prisma.category.findMany({
+//     where: { products: { some: filters } },
+//     orderBy: { name: "asc" },
+//     include: { _count: true },
+//   });
+
+//   const options: ServerDataTableFilterOption[] = categories.map((category) => {
+//     return { value: category.id, label: category.name, total: category._count.products };
+//   });
+
+//   return <ServerDataTableFilter id="category" title="Categorie" options={options} />;
+// }
+
+// /**
+//  * Product brand filter
+//  */
+// export async function ProductBrandFilter(props: { searchParams: PageSearchParams }) {
+//   const filters = getProductFilters(props.searchParams);
+
+//   const brands = await prisma.product.findMany({
+//     where: filters,
+//     orderBy: { brand: "asc" },
+//     select: { brand: true },
+//     distinct: ["brand"],
+//   });
+
+//   const options: ServerDataTableFilterOption[] = brands
+//     .filter(({ brand }) => brand)
+//     .map(({ brand }) => ({ value: brand || "", label: brand || "" }));
+
+//   return <ServerDataTableFilter id="brand" title="Merk" options={options} />;
+// }

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

@@ -0,0 +1,84 @@
+"use client";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import type { VisibilityState } from "@tanstack/react-table";
+import type { CommandFor } from "@tulip-systems/commands";
+import type { Selection, 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 { productsFilters } from "../_config/filters";
+import { productTableSorts } from "../_config/sorting";
+import type { Category, Product, ProductImage } from "../_lib/validators";
+
+export type ProductTableData = Product & { category?: Category; images: ProductImage[] };
+
+/**
+ * Client data table
+ */
+type ProductInfiniteTableProviderProps<TData extends ProductTableData> = {
+  columns: TableColumnDef<TData>[];
+  commands?: CommandFor<TData[]>[];
+  filterOptions?: UseFiltersOptions<typeof productsFilters>;
+  selection?: Selection;
+  columnVisibility?: VisibilityState;
+};
+
+export function ProductPaginationTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  selection,
+  columnVisibility,
+  children,
+}: PropsWithChildren<ProductInfiniteTableProviderProps<ProductTableData>>) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(productsFilters, filterOptions);
+  const sorting = useSorting(productTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseQuery(orpc.products.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<ProductTableData>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    selection,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

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

@@ -0,0 +1,94 @@
+"use client";
+
+import { keepPreviousData, 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, FilterSlider } from "@tulip-systems/query/client";
+import { type PropsWithChildren, useDeferredValue } from "react";
+import { orpc } from "@/server/router/client";
+import { productsFilters } from "../_config/filters";
+
+const productsFiltersDescriptors = resolveFilterDescriptors(productsFilters);
+
+export function ProductTableToolbar({ children }: PropsWithChildren) {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <FilterSearch placeholder="Zoeken..." filter={productsFiltersDescriptors.search} />
+
+        <ProductCategoryFilter />
+        <ProductBrandFilter />
+        <ProductSellPriceFilter />
+      </TableToolbarList>
+
+      <TableToolbarList>{children}</TableToolbarList>
+    </TableToolbar>
+  );
+}
+
+/**
+ * Filters
+ */
+export function ProductCategoryFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(
+    orpc.products.filterCategories.queryOptions({
+      input,
+      placeholderData: keepPreviousData,
+    }),
+  );
+
+  return (
+    <FilterCombobox
+      title="Categorie"
+      filter={productsFiltersDescriptors.categoryId}
+      options={data}
+    />
+  );
+}
+
+export function ProductBrandFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(
+    orpc.products.filterBrands.queryOptions({
+      input,
+      placeholderData: keepPreviousData,
+    }),
+  );
+  const options = data.flatMap(({ value, label, ...rest }) => {
+    if (!(value && label)) {
+      return [];
+    }
+
+    return { ...rest, value, label };
+  });
+
+  return (
+    <FilterCombobox title="Merk" filter={productsFiltersDescriptors.brand} options={options} />
+  );
+}
+
+export function ProductSellPriceFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(
+    orpc.products.filterSellPrices.queryOptions({
+      input,
+      placeholderData: keepPreviousData,
+    }),
+  );
+
+  return (
+    <FilterSlider
+      title="Verkoopprijs"
+      filter={productsFiltersDescriptors.sellPrice}
+      options={data}
+    />
+  );
+}

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

@@ -0,0 +1,83 @@
+"use client";
+
+import { formatCurrency } 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 { ProductImageCard } from "../_components/image-card";
+import type { ProductTableData } from "../_components/tables";
+
+export const productColumns: TableColumnDef<ProductTableData>[] = [
+  createTableSelectCell(),
+  {
+    id: "image",
+    header: () => <div />,
+    cell: ({ row }) => (
+      <TableCell className="size-9 py-0">
+        <ProductImageCard className="size-9 *:rounded-none" image={row.original.images[0]} />
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "articleNumber",
+    header: ({ column }) => (
+      <TableColumnHeader column={column} title="Artikel nummer" className="min-w-[200px]" />
+    ),
+    cell: ({ row }) => (
+      <TableCell>
+        <Link href={`/admin/products/${row.original.id}`} className="truncate hover:underline">
+          {row.getValue("articleNumber")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <TableColumnHeader column={column} title="Naam" className="min-w-[200px]" />
+    ),
+    cell: ({ row }) => (
+      <TableCell className="max-w-[400px] truncate">{row.getValue("name")}</TableCell>
+    ),
+  },
+  {
+    accessorKey: "buyPrice",
+    permissions: { product: ["view.buyPrice"] },
+    header: ({ column }) => (
+      <TableColumnHeader column={column} title="Aankoopprijs" className="min-w-[100px]" />
+    ),
+    cell: ({ row }) => (
+      <TableCell className="max-w-[500px] truncate">
+        {formatCurrency(row.getValue("buyPrice"))}
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "sellPrice",
+    permissions: { product: ["view.sellPrice"] },
+    header: ({ column }) => (
+      <TableColumnHeader column={column} title="Verkoopprijs" className="min-w-[100px]" />
+    ),
+    cell: ({ row }) => (
+      <TableCell className="max-w-[500px] truncate">
+        {formatCurrency(row.getValue("sellPrice"))}
+      </TableCell>
+    ),
+  },
+  {
+    id: "category.name",
+    header: ({ column }) => <TableColumnHeader column={column} title="Categorie" />,
+    accessorFn: (row) => row.category?.name ?? "",
+    cell: ({ row }) => (
+      <TableCell className="max-w-[500px] truncate">{row.getValue("category.name")}</TableCell>
+    ),
+    enableSorting: false,
+  },
+  {
+    accessorKey: "brand",
+    header: ({ column }) => <TableColumnHeader column={column} title="Merk" />,
+    cell: ({ row }) => (
+      <TableCell className="max-w-[500px] truncate">{row.getValue("brand")}</TableCell>
+    ),
+  },
+];