@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/sales-order-items/_lib/helpers.ts

@@ -0,0 +1,30 @@
+import type { SalesOrderRatioType } from "../../sales-orders/_lib/validators";
+
+/**
+ * Calculate the remaining ratio of a list of associated items
+ * @param {{ ratio: number | null; }[]} items
+ * @returns {number}
+ */
+export function calculateAssociatedRatio(params: {
+  item: { ratio: number | null; quantity: number | null };
+  associatedItems: { ratio: number | null }[];
+  ratioType: SalesOrderRatioType;
+}): number {
+  const usedRatio = params.associatedItems.reduce((total, item) => total + (item?.ratio || 0), 0);
+
+  if (params.ratioType === "fixed" && params.item.quantity != null) {
+    return params.item.quantity - usedRatio;
+  }
+
+  return 100 - usedRatio;
+}
+
+/**
+ * Get the maximum ratio based on the ratio type
+ * @param {{ quantity: number | null; ratioType: RatioType; }} params
+ * @returns {number | null}
+ */
+export function getMaxRatio(params: { quantity: number | null; ratioType: SalesOrderRatioType }) {
+  if (params.quantity == null) return null;
+  return params.ratioType === "fixed" ? params.quantity : 100;
+}

package/dist/templates/spark/src/app/admin/sales-order-items/_lib/router.ts

@@ -0,0 +1,407 @@
+import "server-cli-only";
+
+import { ORPCError } from "@orpc/server";
+import { arrayMove } from "@tulip-systems/core";
+import { convertHTMLToEditorContent } from "@tulip-systems/editor";
+import {
+  bulkActionSchema,
+  offsetPaginationResponse,
+  offsetPaginationSchema,
+} from "@tulip-systems/query";
+import Decimal from "decimal.js";
+import { and, asc, desc, eq, inArray, not, sql } from "drizzle-orm";
+import { z } from "zod";
+import { getTableData } from "@/lib/helpers/table-data.server";
+import { products, salesOrders } from "@/server/db/schema";
+import { permissionMiddleware } from "@/server/router/middleware";
+import { protectedProcedure } from "@/server/router/procedures";
+import type { SalesOrderItemTableData } from "../_components/tables";
+import {
+  salesOrderItemDatabaseFiltersCompiler,
+  salesOrderItemFiltersParser,
+  salesOrderItemsFiltersSchema,
+} from "../_config/filters";
+import {
+  salesOrderItemTableDatabaseSortsCompiler,
+  salesOrderItemTableSortsParser,
+  salesOrderItemTableSortsSchema,
+} from "../_config/sorting";
+import { getAssociatedItems } from "./helpers.server";
+import { salesOrderItems } from "./schema";
+import {
+  createSalesOrderItemSchema,
+  type SalesOrderItem,
+  updateSalesOrderItemSchema,
+} from "./validators";
+
+export const salesOrderItemsRouter = {
+  list: protectedProcedure
+    .use(permissionMiddleware({ salesOrder: ["view"] }))
+    .input(
+      z.object({
+        pagination: offsetPaginationSchema,
+        filters: salesOrderItemsFiltersSchema,
+        sorts: salesOrderItemTableSortsSchema,
+      }),
+    )
+    .handler(async ({ context, input }) => {
+      const parsedSorts = salesOrderItemTableSortsParser.parse(input.sorts);
+      const orderBy = salesOrderItemTableDatabaseSortsCompiler(salesOrderItems).parse(parsedSorts);
+
+      const parsedFilters = salesOrderItemFiltersParser.parse(input.filters);
+      const where = salesOrderItemDatabaseFiltersCompiler(salesOrderItems).parse(parsedFilters);
+
+      const { data, total } = await getTableData(context, salesOrderItems, {
+        pagination: input.pagination,
+        where,
+        orderBy,
+        with: { salesOrder: true },
+      });
+
+      /*
+       * Get associated items
+       */
+      const associated = await getAssociatedItems(context, data);
+
+      /*
+       * Add associated items to data
+       */
+      const combinedData = data.map((item) => {
+        const group = associated.find((a) => a.associationId === item.associationId);
+
+        return {
+          ...item,
+          previousRatio: group?.previousRatio,
+          remainingRatio:
+            group?.remainingRatio != null
+              ? Decimal(group.remainingRatio)
+                  .sub(item.ratio ?? 0)
+                  .toFixed(3)
+              : null,
+          associated: group?.items ?? [],
+          associatedNetAmount: group?.netAmount,
+          associatedVatAmount: group?.vatAmount,
+          associatedTotalAmount: group?.totalAmount,
+        } as SalesOrderItemTableData;
+      });
+
+      /*
+       * Return data
+       */
+      return offsetPaginationResponse({ data: combinedData, pagination: input.pagination, total });
+    }),
+  getAssociated: protectedProcedure
+    .input(z.object({ salesOrderId: z.string() }))
+    .handler(async ({ context, input }) => {
+      const data = await context.db.query.salesOrderItems.findMany({
+        where: eq(salesOrderItems.salesOrderId, input.salesOrderId),
+        orderBy: [asc(salesOrderItems.index)],
+      });
+
+      /*
+       * Get associated items
+       */
+      const associatedId = Array.from(new Set(data.map((item) => item.associationId)));
+
+      const associated = await context.db
+        .select({
+          associationId: salesOrderItems.associationId,
+          items: sql<SalesOrderItem[]>`json_agg(${salesOrderItems})`.as("items"),
+          netAmount: sql<string>`sum(${salesOrderItems.netAmount})`.as("netAmount"),
+          vatAmount: sql<string>`sum(${salesOrderItems.vatAmount})`.as("vatAmount"),
+          totalAmount: sql<string>`sum(${salesOrderItems.totalAmount})`.as("totalAmount"),
+        })
+        .from(salesOrderItems)
+        .where(inArray(salesOrderItems.associationId, associatedId))
+        .groupBy(salesOrderItems.associationId);
+
+      /*
+       * Add associated items to data
+       */
+      return data.map((item) => {
+        const group = associated.find((a) => a.associationId === item.associationId);
+
+        return {
+          ...item,
+          associated: group?.items ?? [],
+          associatedNetAmount: group?.netAmount ?? null,
+          associatedVatAmount: group?.vatAmount ?? null,
+          associatedTotalAmount: group?.totalAmount ?? null,
+        };
+      });
+    }),
+  create: protectedProcedure
+    .input(createSalesOrderItemSchema)
+    .handler(async ({ context, input }) => {
+      const salesOrder = await context.db.query.salesOrders.findFirst({
+        where: eq(salesOrders.id, input.salesOrderId),
+        with: { client: true },
+      });
+
+      if (!salesOrder) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Verkoopbon kon niet worden gevonden",
+        });
+      }
+
+      const [lastSalesOrderItem] = await context.db
+        .select({ index: salesOrderItems.index })
+        .from(salesOrderItems)
+        .limit(1)
+        .where(eq(salesOrderItems.salesOrderId, input.salesOrderId))
+        .orderBy(desc(salesOrderItems.index));
+
+      const index = (lastSalesOrderItem?.index ?? 0) + 1;
+
+      const [result] = await context.db
+        .insert(salesOrderItems)
+        .values({
+          ...input,
+          ratioType: salesOrder.ratioType,
+          vatRate: salesOrder.client.vatRate,
+          index,
+        })
+        .returning();
+
+      if (!result) {
+        throw new ORPCError("INTERNAL_SERVER_ERROR", {
+          message: "Verkoopbon item kon niet worden aangemaakt",
+        });
+      }
+    }),
+  importProducts: protectedProcedure
+    .use(permissionMiddleware({ salesOrder: ["create"] }))
+    .input(z.object({ salesOrderId: z.string(), productIds: z.string().array() }))
+    .handler(async ({ context, input }) => {
+      const salesOrder = await context.db.query.salesOrders.findFirst({
+        where: eq(salesOrders.id, input.salesOrderId),
+        with: { client: true },
+      });
+
+      if (!salesOrder) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Verkoopbon kon niet worden gevonden",
+        });
+      }
+
+      const lastSalesOrderItem = await context.db
+        .select({ index: salesOrderItems.index })
+        .from(salesOrderItems)
+        .limit(1)
+        .where(eq(salesOrderItems.salesOrderId, input.salesOrderId))
+        .orderBy(desc(salesOrderItems.index));
+
+      const lastIndex = (lastSalesOrderItem[0]?.index ?? 0) + 1;
+
+      const selectedProducts = await context.db.query.products.findMany({
+        where: inArray(products.id, input.productIds),
+      });
+
+      await context.db.transaction(async (tx) =>
+        Promise.allSettled(
+          selectedProducts.map((product, index) =>
+            tx.insert(salesOrderItems).values({
+              articleNumber: product.articleNumber,
+              description: convertHTMLToEditorContent(product.name),
+              price: product.buyPrice != null ? Decimal(product.buyPrice).toFixed(3) : null,
+              salesOrderId: input.salesOrderId,
+              ratioType: salesOrder.ratioType,
+              vatRate: salesOrder.client.vatRate,
+              index: lastIndex + index,
+            }),
+          ),
+        ),
+      );
+    }),
+  update: protectedProcedure
+    .input(z.object({ id: z.string(), data: updateSalesOrderItemSchema.partial() }))
+    .output(z.void())
+    .handler(async ({ context, input }) => {
+      const salesOrderItem = await context.db.query.salesOrderItems.findFirst({
+        where: eq(salesOrderItems.id, input.id),
+        with: { salesOrder: true },
+      });
+
+      /*
+       * Check if salesOrderItem exists
+       */
+      if (!salesOrderItem) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Verkoopbon item kon niet worden gevonden",
+        });
+      }
+
+      /*
+       * Get associated item
+       */
+      const associated = await getAssociatedItems(context, [salesOrderItem]);
+
+      /*
+       * Check if is associated item
+       */
+      if (associated.length > 0) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Je mag geen item wijzigen van een verkoopbon met geassocieerde items",
+        });
+      }
+
+      /*
+       * Update salesOrderItem
+       */
+      const [result] = await context.db
+        .update(salesOrderItems)
+        .set(input.data)
+        .where(eq(salesOrderItems.id, input.id))
+        .returning();
+
+      if (!result) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Verkoopbon item kon niet worden gewijzigd",
+        });
+      }
+    }),
+  setRatio: protectedProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        ratio: z
+          .string()
+          .nullable()
+          .refine(
+            (value) => {
+              if (value === null) return true;
+              const num = Number(value);
+              return !Number.isNaN(num) && num >= 0;
+            },
+            { message: "Ratio mag niet negatief zijn" },
+          ),
+      }),
+    )
+    .handler(async ({ context, input }) => {
+      /**
+       * Set ratio to null
+       */
+      if (input.ratio === null) {
+        return await context.db
+          .update(salesOrderItems)
+          .set({ ratio: null })
+          .where(eq(salesOrderItems.id, input.id));
+      }
+
+      /**
+       * Set ratio
+       */
+      const [item] = await context.db
+        .select()
+        .from(salesOrderItems)
+        .where(eq(salesOrderItems.id, input.id))
+        .limit(1);
+
+      if (!item) {
+        throw new ORPCError("NOT_FOUND", { message: "Verkoopbon item kon niet worden gevonden" });
+      }
+
+      if (item.quantity == null) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Je mag geen ratio wijzigen op een item zonder hoeveelheid",
+        });
+      }
+
+      if (item.price == null) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Je mag geen ratio wijzigen op een item zonder prijs",
+        });
+      }
+
+      if (item.maxRatio == null) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Je mag geen ratio wijzigen op een item zonder maximale ratio",
+        });
+      }
+
+      const [associated] = await context.db
+        .select({ previousRatio: sql<number>`sum(${salesOrderItems.ratio})`.as("previousRatio") })
+        .from(salesOrderItems)
+        .where(
+          and(
+            not(eq(salesOrderItems.id, input.id)),
+            eq(salesOrderItems.associationId, item.associationId),
+          ),
+        )
+        .limit(1);
+
+      // Check if max ratio is reached
+      const newMaxRatio = Decimal(associated?.previousRatio ?? 0)
+        .add(input.ratio)
+        .toFixed(3);
+
+      if (Decimal(item.maxRatio).lt(newMaxRatio)) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "De maximale ratio is overschreden",
+        });
+      }
+
+      await context.db
+        .update(salesOrderItems)
+        .set({ ratio: input.ratio })
+        .where(eq(salesOrderItems.id, input.id));
+    }),
+  move: protectedProcedure
+    .input(z.object({ salesOrderId: z.string(), fromIndex: z.number(), toIndex: z.number() }))
+    .handler(async ({ context, input }) => {
+      // Check if is associated item
+      const [salesOrder] = await context.db
+        .select()
+        .from(salesOrders)
+        .where(eq(salesOrders.id, input.salesOrderId))
+        .limit(1);
+
+      if (!salesOrder) {
+        throw new ORPCError("NOT_FOUND", { message: "Verkoopbon kon niet worden gevonden" });
+      }
+
+      if (salesOrder.isAssociated) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Je mag geen item verplaatsen van een verkoopbon met geassocieerde items",
+        });
+      }
+
+      /**
+       * Get all items
+       */
+      const items = await context.db
+        .select({ id: salesOrderItems.id })
+        .from(salesOrderItems)
+        .where(eq(salesOrderItems.salesOrderId, input.salesOrderId))
+        .orderBy(asc(salesOrderItems.index));
+      const newItems = arrayMove(items, input);
+
+      /**
+       * Update the index of the items by splicing the item to the new index.
+       */
+      await context.db.transaction(async (tx) =>
+        Promise.allSettled(
+          newItems.map((item, index) =>
+            tx.update(salesOrderItems).set({ index }).where(eq(salesOrderItems.id, item.id)),
+          ),
+        ),
+      );
+    }),
+  delete: protectedProcedure.input(bulkActionSchema).handler(async ({ context, input }) => {
+    // Check if is associated item
+    const items = await context.db
+      .select()
+      .from(salesOrderItems)
+      .where(inArray(salesOrderItems.id, input.ids));
+
+    const associated = await getAssociatedItems(context, items);
+
+    if (associated.length > 0) {
+      throw new ORPCError("NOT_FOUND", {
+        message: "Je mag geen item verwijderen van een verkoopbon met geassocieerde items",
+      });
+    }
+
+    await context.db.delete(salesOrderItems).where(inArray(salesOrderItems.id, input.ids));
+  }),
+};

package/dist/templates/spark/src/app/admin/sales-order-items/_lib/schema.ts

@@ -0,0 +1,112 @@
+import type { EditorJSONContent } from "@tulip-systems/editor";
+import { relations, type SQL, sql } from "drizzle-orm";
+import { pgTable, uuid } from "drizzle-orm/pg-core";
+import { baseColumns } from "@/server/db/helpers";
+import { salesOrders } from "../../sales-orders/_lib/schema";
+import { salesOrderRatioTypeEnum } from "../../sales-orders/_lib/schema-enums";
+
+/**
+ * Table
+ */
+export const salesOrderItems = pgTable("sales_order_items", (t) => ({
+  ...baseColumns,
+  articleNumber: t.text(),
+  description: t.jsonb().$type<EditorJSONContent>().notNull(),
+  quantity: t.numeric({ precision: 12, scale: 3 }),
+  price: t.numeric({ precision: 12, scale: 3 }),
+  // Ratio
+  ratio: t.numeric({ precision: 12, scale: 3 }),
+  ratioType: salesOrderRatioTypeEnum().default("percentage").notNull(),
+  maxRatio: t.numeric({ precision: 12, scale: 3 }).generatedAlwaysAs(
+    (): SQL => sql<number>`
+      CASE
+        WHEN ${salesOrderItems.ratioType} = 'fixed'
+          THEN ${salesOrderItems.quantity}
+        WHEN ${salesOrderItems.ratioType} = 'percentage'
+          THEN 100
+        ELSE NULL
+      END
+    `,
+  ),
+  // Net
+  netQuantity: t
+    .numeric({ precision: 12, scale: 3 })
+    .generatedAlwaysAs((): SQL => netQuantityExpression(salesOrderItems)),
+  netAmount: t
+    .numeric({ precision: 12, scale: 2 })
+    .generatedAlwaysAs((): SQL => netAmountExpression(salesOrderItems)),
+  // VAT
+  vatRate: t.numeric({ precision: 5, scale: 3 }).notNull(),
+  vatAmount: t
+    .numeric({ precision: 12, scale: 2 })
+    .generatedAlwaysAs(
+      (): SQL =>
+        sql`round(${netAmountExpression(salesOrderItems)} * ${salesOrderItems.vatRate}, 2)`,
+    ),
+  // Total
+  totalAmount: t
+    .numeric({ precision: 12, scale: 2 })
+    .generatedAlwaysAs(
+      (): SQL =>
+        sql`round(${netAmountExpression(salesOrderItems)} * (1 + ${salesOrderItems.vatRate}), 2)`,
+    ),
+  // Absolute amounts
+  absoluteNetAmount: t
+    .numeric({ precision: 12, scale: 2 })
+    .generatedAlwaysAs((): SQL => absoluteNetAmountExpression(salesOrderItems)),
+  absoluteVatAmount: t
+    .numeric({ precision: 12, scale: 2 })
+    .generatedAlwaysAs(
+      (): SQL =>
+        sql`round(${absoluteNetAmountExpression(salesOrderItems)} * ${salesOrderItems.vatRate}, 2)`,
+    ),
+  absoluteTotalAmount: t
+    .numeric({ precision: 12, scale: 2 })
+    .generatedAlwaysAs(
+      (): SQL =>
+        sql`round(${absoluteNetAmountExpression(salesOrderItems)} * (1 + ${salesOrderItems.vatRate}), 2)`,
+    ),
+
+  index: t.integer().notNull(),
+  // Associations
+  associationId: t.uuid().notNull().defaultRandom(),
+  // Relations
+  salesOrderId: uuid()
+    .notNull()
+    .references(() => salesOrders.id, { onDelete: "cascade" }),
+}));
+
+/**
+ * Relations
+ */
+export const salesOrderItemsRelations = relations(salesOrderItems, ({ one }) => ({
+  salesOrder: one(salesOrders, {
+    fields: [salesOrderItems.salesOrderId],
+    references: [salesOrders.id],
+  }),
+}));
+
+/**
+ * Expressions
+ */
+function netQuantityExpression(alias: typeof salesOrderItems) {
+  return sql`
+    round(CASE
+      WHEN ${alias.ratioType} = 'percentage'
+        THEN ${alias.quantity} * (${alias.ratio} / 100)
+      WHEN ${alias.ratioType} = 'fixed'
+        THEN ${alias.ratio}
+      ELSE NULL
+    END, 3)
+`;
+}
+
+function netAmountExpression(alias: typeof salesOrderItems) {
+  return sql`
+     round(${alias.price} * ${netQuantityExpression(alias)}, 2)
+`;
+}
+
+function absoluteNetAmountExpression(alias: typeof salesOrderItems) {
+  return sql`round(${alias.price} * ${alias.quantity}, 2)`;
+}

package/dist/templates/spark/src/app/admin/sales-order-items/_lib/validators.ts

@@ -0,0 +1,51 @@
+import { createInsertSchema, createSelectSchema, createUpdateSchema } from "drizzle-zod";
+import { z } from "zod";
+
+export type { SalesOrderItemsFilters } from "../_config/filters";
+export { salesOrderItemsFiltersSchema } from "../_config/filters";
+
+import { salesOrderItems } from "./schema";
+
+/**
+ * SalesOrderItem type
+ */
+export type SalesOrderItem = typeof salesOrderItems.$inferSelect;
+
+export const selectSalesOrderItemSchema = createSelectSchema(salesOrderItems);
+export type SelectSalesOrderItemSchema = z.infer<typeof selectSalesOrderItemSchema>;
+
+/**
+ *  SalesOrderItem Schema
+ */
+export const createSalesOrderItemSchema = createInsertSchema(salesOrderItems).omit({
+  index: true,
+  ratioType: true,
+  vatRate: true,
+});
+export const updateSalesOrderItemSchema = createUpdateSchema(salesOrderItems).omit({ ratio: true });
+
+/**
+ * Create salesOrderItem schema
+ */
+export type CreateSalesOrderItemInput = z.input<typeof createSalesOrderItemSchema>;
+export type CreateSalesOrderItemSchema = z.infer<typeof createSalesOrderItemSchema>;
+
+export type UpdateSalesOrderItemInput = z.input<typeof updateSalesOrderItemSchema>;
+export type UpdateSalesOrderItemSchema = z.infer<typeof updateSalesOrderItemSchema>;
+
+/**
+ * Import excel schema
+ */
+export const importExcelSalesOrderItemsSchema = z.object({
+  salesOrderId: z.string(),
+  items: z.array(
+    z.object({
+      articleNumber: z.coerce.string(),
+      description: z.coerce.string(),
+      quantity: z.coerce.number(),
+    }),
+  ),
+});
+
+export type ImportExcelSalesOrderItemsInput = z.input<typeof importExcelSalesOrderItemsSchema>;
+export type ImportExcelSalesOrderItemsSchema = z.infer<typeof importExcelSalesOrderItemsSchema>;

package/dist/templates/spark/src/app/admin/sales-order-items/import/products/layout.tsx

@@ -0,0 +1,16 @@
+import { Header, Topbar, TopbarTitle } from "@tulip-systems/app/components/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+
+export default function Page(props: LayoutProps<"/admin/sales-order-items/import/products">) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Producten importeren" }]} />
+        </Topbar>
+      </Header>
+
+      <TableLayout className="p-10 pb-40">{props.children}</TableLayout>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/sales-order-items/import/products/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/sales-order-items/import/products/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import type { RowSelectionState } from "@tanstack/react-table";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { Button } from "@tulip-systems/ui/button";
+import { notFound, useRouter } from "next/navigation";
+import { use, useState } from "react";
+import { ProductPaginationTableProvider } from "@/app/admin/products/_components/tables";
+import { ProductTableToolbar } from "@/app/admin/products/_components/toolbars";
+import { productColumns } from "@/app/admin/products/_config/columns-data";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+
+export default function Page(props: PageProps<"/admin/sales-order-items/import/products">) {
+  const router = useRouter();
+
+  const searchParams = use(props.searchParams);
+  const salesOrderId = searchParams.salesOrderId?.toString();
+  if (!salesOrderId) notFound();
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+  const { mutate, status } = useMutation(
+    orpc.salesOrderItems.importProducts.mutationOptions({
+      onSuccess: () => {
+        setRowSelection({});
+        router.push(`/admin/sales-orders/${salesOrderId}`);
+      },
+    }),
+  );
+
+  return (
+    <>
+      <ProductPaginationTableProvider
+        columns={productColumns}
+        selection={{ rowSelection, setRowSelection }}
+      >
+        <ProductTableToolbar />
+        <DataTable />
+      </ProductPaginationTableProvider>
+
+      <div className="absolute right-0 bottom-0 left-0 z-10 overflow-auto border-t bg-background text-end">
+        <div className="flex w-max flex-row justify-end gap-10 px-10 py-6 md:w-full">
+          <Button
+            variant="ghost"
+            type="button"
+            onClick={() => {
+              setRowSelection({});
+              router.push(`/admin/sales-orders/${salesOrderId}`);
+            }}
+          >
+            Annuleren
+          </Button>
+
+          <Button
+            type="button"
+            disabled={Object.keys(rowSelection).length === 0 || status === "pending"}
+            onClick={() => {
+              mutate({ salesOrderId, productIds: Object.keys(rowSelection) });
+            }}
+          >
+            {status === "pending" && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+            Importeren
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}