@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/tasks/import/quotation-items/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/tasks/import/quotation-items">) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Offerte importeren" }]} />
+        </Topbar>
+      </Header>
+
+      <TableLayout className="p-10 pb-40">{props.children}</TableLayout>
+    </>
+  );
+}

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

@@ -0,0 +1,93 @@
+"use client";
+
+import { useMutation, useSuspenseQuery } 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 { EmptyPage, EmptyPageTitle } from "@tulip-systems/ui/empty";
+import { toast } from "@tulip-systems/ui/sonner";
+import { notFound, useRouter } from "next/navigation";
+import { use, useState } from "react";
+import { QuotationItemPaginationTableProvider } from "@/app/admin/quotation-items/_components/tables";
+import { QuotationItemTableToolbar } from "@/app/admin/quotation-items/_components/toolbars";
+import { quotationItemColumns } from "@/app/admin/quotation-items/_config/columns-data";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+
+export default function Page(props: PageProps<"/admin/tasks/import/quotation-items">) {
+  const router = useRouter();
+
+  const searchParams = use(props.searchParams);
+  const projectId = searchParams.projectId?.toString();
+  if (!projectId) notFound();
+
+  const subprojectId = searchParams.subprojectId?.toString() ?? null;
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+  const projectQuery = useSuspenseQuery(
+    orpc.projects.getById.queryOptions({ input: { id: projectId } }),
+  );
+  if (!projectQuery.data) notFound();
+
+  const { mutate, status } = useMutation(
+    orpc.tasks.importQuotationItems.mutationOptions({
+      onSuccess: () => {
+        setRowSelection({});
+        toast.success("Succesvol geimporteerd");
+        router.push(`/admin/projects/${projectId}/tasks${subprojectId ? `/${subprojectId}` : ""}`);
+      },
+    }),
+  );
+
+  if (!projectQuery.data.quotationId) {
+    return (
+      <EmptyPage className="min-h-[80dvh]">
+        <EmptyPageTitle>Dit project heeft nog geen offerte</EmptyPageTitle>
+      </EmptyPage>
+    );
+  }
+
+  return (
+    <>
+      <QuotationItemPaginationTableProvider
+        columns={quotationItemColumns}
+        selection={{ rowSelection, setRowSelection }}
+        filterOptions={{ constraints: { quotationId: [projectQuery.data.quotationId] } }}
+      >
+        <QuotationItemTableToolbar />
+        <DataTable />
+      </QuotationItemPaginationTableProvider>
+
+      <div className="absolute right-0 bottom-0 left-0 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/quotations/${projectId}`);
+            }}
+          >
+            Annuleren
+          </Button>
+
+          <Button
+            type="button"
+            disabled={Object.keys(rowSelection).length === 0 || status === "pending"}
+            onClick={() => {
+              mutate({
+                projectId,
+                subprojectId,
+                quotationItemIds: Object.keys(rowSelection),
+              });
+            }}
+          >
+            {status === "pending" && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+            Importeren
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/tasks/import/template-tasks/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/tasks/import/template-tasks">) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Template importeren" }]} />
+        </Topbar>
+      </Header>
+
+      <TableLayout className="p-10 pb-40">{props.children}</TableLayout>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/tasks/import/template-tasks/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/tasks/import/template-tasks/page.tsx

@@ -0,0 +1,78 @@
+"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 { toast } from "@tulip-systems/ui/sonner";
+import { notFound, useRouter } from "next/navigation";
+import { use, useState } from "react";
+import { TemplateTaskPaginationTableProvider } from "@/app/admin/template-tasks/_components/tables";
+import { TemplateTaskTableToolbar } from "@/app/admin/template-tasks/_components/toolbars";
+import { templateTaskColumns } from "@/app/admin/template-tasks/_config/columns-data";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+
+export default function Page(props: PageProps<"/admin/tasks/import/template-tasks">) {
+  const router = useRouter();
+
+  const searchParams = use(props.searchParams);
+  const projectId = searchParams.projectId?.toString();
+  if (!projectId) notFound();
+
+  const subprojectId = searchParams.subprojectId?.toString() ?? null;
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+  const { mutate, status } = useMutation(
+    orpc.tasks.importTemplateTasks.mutationOptions({
+      onSuccess: () => {
+        setRowSelection({});
+        toast.success("Succesvol geimporteerd");
+        router.push(`/admin/projects/${projectId}/tasks${subprojectId ? `/${subprojectId}` : ""}`);
+      },
+    }),
+  );
+
+  return (
+    <>
+      <TemplateTaskPaginationTableProvider
+        columns={templateTaskColumns}
+        selection={{ rowSelection, setRowSelection }}
+      >
+        <TemplateTaskTableToolbar />
+        <DataTable />
+      </TemplateTaskPaginationTableProvider>
+
+      <div className="absolute right-0 bottom-0 left-0 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/quotations/${projectId}`);
+            }}
+          >
+            Annuleren
+          </Button>
+
+          <Button
+            type="button"
+            disabled={Object.keys(rowSelection).length === 0 || status === "pending"}
+            onClick={() => {
+              mutate({
+                projectId,
+                subprojectId,
+                templateTaskIds: Object.keys(rowSelection),
+              });
+            }}
+          >
+            {status === "pending" && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+            Importeren
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/technical-sheets/[id]/layout.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Header, Topbar, TopbarTitle, TopbarTools } from "@tulip-systems/app/components/client";
+import { ResponsiveCommandMenu } from "@tulip-systems/commands/client";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { orpc } from "@/server/router/client";
+import {
+  technicalSheetDeleteCommand,
+  technicalSheetDownloadCommand,
+  technicalSheetGenerateCommand,
+  technicalSheetImportSourcesCommand,
+  technicalSheetUpdateStatusCommand,
+} from "../_config/commands";
+import { TechnicalSheetStatusBadge } from "../_config/status";
+
+export default function Layout(props: LayoutProps<"/admin/technical-sheets/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.technicalSheets.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle
+            badge={<TechnicalSheetStatusBadge status={data.status} />}
+            breadcrumbs={[
+              {
+                label: "Technische fiches",
+                href: `/admin/projects/${data.project.id}/technical-sheets`,
+              },
+              { label: data.articleNumber ?? "" },
+            ]}
+          />
+
+          <TopbarTools>
+            <ResponsiveCommandMenu
+              data={data}
+              commands={[
+                technicalSheetImportSourcesCommand,
+                technicalSheetGenerateCommand,
+                technicalSheetUpdateStatusCommand,
+                technicalSheetDownloadCommand,
+                technicalSheetDeleteCommand,
+              ]}
+            />
+          </TopbarTools>
+        </Topbar>
+      </Header>
+
+      <div className="space-y-20 p-content">{props.children}</div>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/technical-sheets/[id]/page.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { DriveNavigationProvider, DriveViewProvider } from "@tulip-systems/drive/client";
+import { getLocalDriveFileUrl } from "@tulip-systems/drive-local";
+import { LocalDriveViewLoading } from "@tulip-systems/drive-local/client";
+import { EditorContent, EditorMenuBubble } from "@tulip-systems/editor/client";
+import {
+  InlineComboboxDropdown,
+  InlineEditor,
+  InlineField,
+  InlineFieldError,
+  InlineFieldLabel,
+  InlineStringInput,
+} from "@tulip-systems/inline/client";
+import { buttonVariants } from "@tulip-systems/ui/button";
+import { DataStackLayout, DataStackRow } from "@tulip-systems/ui/data-stack";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Suspense, use } from "react";
+import { z } from "zod";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+import { DriveFlatView } from "../../drive/_components/flat.client";
+
+export default function Page(props: PageProps<"/admin/technical-sheets/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+  if (!id) notFound();
+
+  const { data } = useSuspenseQuery(orpc.technicalSheets.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  const { productId, type, notes, sources } = data;
+
+  const productsQuery = useSuspenseQuery(orpc.products.getAll.queryOptions());
+
+  return (
+    <DataStackLayout className="basis-full">
+      <DataStackRow>
+        <InlineField>
+          <InlineFieldLabel>Product</InlineFieldLabel>
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <InlineComboboxDropdown
+                placeholder="Kies een product"
+                initialValue={productId ?? undefined}
+                items={productsQuery.data.map(({ id, name }) => ({ id, value: name }))}
+                variables={(value) => ({ id, productId: value })}
+                mutation={orpc.technicalSheets.updateProduct.mutationOptions()}
+                strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+                className="flex-1"
+              />
+              <InlineFieldError />
+            </div>
+
+            {productId && (
+              <Link
+                href={`/admin/products/${productId}`}
+                className={buttonVariants({ variant: "outline" })}
+                target="_blank"
+              >
+                <Icons.externalLink className="size-4" />
+              </Link>
+            )}
+          </div>
+        </InlineField>
+
+        <InlineField className="col-span-full">
+          <InlineFieldLabel>Type</InlineFieldLabel>
+          <InlineStringInput
+            initialValue={type ?? undefined}
+            variables={(value) => ({ id, data: { type: value } })}
+            mutation={orpc.technicalSheets.update.mutationOptions()}
+            strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+          />
+          <InlineFieldError />
+        </InlineField>
+      </DataStackRow>
+
+      <InlineField className="col-span-full">
+        <InlineFieldLabel>Notitie</InlineFieldLabel>
+        <InlineEditor
+          initialValue={notes ?? undefined}
+          variables={(value) => ({ id, data: { notes: value } })}
+          mutation={orpc.technicalSheets.update.mutationOptions()}
+          strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
+          className="min-h-24"
+        >
+          <EditorMenuBubble />
+          <EditorContent />
+        </InlineEditor>
+        <InlineFieldError />
+      </InlineField>
+
+      <Suspense fallback={<LocalDriveViewLoading />}>
+        <DriveNavigationProvider
+          parentId={null}
+          navigation={{ rootHref: `/admin/technical-sheets/import/${id}/drive` }}
+        >
+          <DriveViewProvider>
+            <DriveFlatView where={{ nodeIds: sources.flatMap(({ nodeId }) => nodeId) ?? [] }} />
+          </DriveViewProvider>
+        </DriveNavigationProvider>
+      </Suspense>
+
+      {data.generatedNodeId && (
+        <DataStackRow>
+          <iframe
+            title="Cover"
+            src={getLocalDriveFileUrl(data.generatedNodeId, { disposition: "inline" })}
+            className="h-screen w-full"
+            name="cover"
+          />
+        </DataStackRow>
+      )}
+    </DataStackLayout>
+  );
+}

package/dist/templates/spark/src/app/admin/technical-sheets/_components/command-download.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { CommandClick, CommandLabel } from "@tulip-systems/commands/client";
+import { getLocalDriveFileUrl } from "@tulip-systems/drive-local";
+import { toast } from "@tulip-systems/ui/sonner";
+import { BlobWriter, ZipWriter } from "@zip.js/zip.js";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+
+export function CommandTechnicalSheetDownload(props: { ids: string[] }) {
+  const { data } = useSuspenseQuery(
+    orpc.technicalSheets.getDownloadData.queryOptions({ input: { ids: props.ids ?? [] } }),
+  );
+
+  return (
+    <CommandClick
+      variables={{}}
+      mutation={{
+        mutationFn: async () => {
+          const zipWriter = new ZipWriter(new BlobWriter("application/zip"));
+
+          await Promise.all(
+            data
+              .filter((sheet) => !!sheet.generatedNode)
+              .flatMap(async ({ generatedNode }) => {
+                if (!generatedNode) return;
+
+                const response = await fetch(getLocalDriveFileUrl(generatedNode.id));
+                const content = await response.blob();
+                const body = new Response(content).body;
+                if (!body) return;
+
+                await zipWriter.add(generatedNode.name, body);
+              }),
+          );
+          const zipBlob = await zipWriter.close();
+
+          const url = URL.createObjectURL(zipBlob);
+          const link = document.createElement("a");
+          link.href = url;
+          link.download = "project-technical-sheets.zip";
+          link.click();
+          URL.revokeObjectURL(url);
+        },
+        onSuccess: () => {
+          toast.success("Succesvol gedownload");
+        },
+      }}
+      label="Downloaden"
+    >
+      <Icons.download className="w-4" />
+      <CommandLabel />
+    </CommandClick>
+  );
+}

package/dist/templates/spark/src/app/admin/technical-sheets/_components/cover-pdf.tsx

@@ -0,0 +1,84 @@
+import "@/components/pdf/pdf-config";
+
+import { Document, Image, Page, View } from "@react-pdf/renderer";
+import { tw } from "@/components/pdf/pdf-config";
+import {
+  PDFDataList,
+  PDFDataListHeader,
+  PDFDataListHeaderTitle,
+  PDFDataListRow,
+  PDFDataListRowTitle,
+  PDFDataListRowValueText,
+} from "@/components/pdf/pdf-data-list";
+import { PdfPageNumber } from "@/components/pdf/pdf-footer";
+import { PdfTopBar } from "@/components/pdf/pdf-header";
+import { PDFRichtext } from "@/components/pdf/pdf-richtext";
+import type { RouterOutputs } from "@/server/router/router";
+
+export type TechnicalSheetPDFProps = {
+  data: RouterOutputs["technicalSheets"]["getPDFData"];
+};
+
+export function TechnicalSheetPDF({ data }: TechnicalSheetPDFProps) {
+  if (!data) return null;
+
+  const { articleNumber, notes, type, project, coverImage } = data;
+
+  return (
+    <Document>
+      <Page size="A4">
+        <PdfTopBar title="Technische fiche" />
+
+        <View style={tw("flex flex-col w-full gap-4 mt-auto")}>
+          {coverImage && (
+            <Image src={coverImage} style={tw("w-full object-contain p-16 max-h-[30rem]")} />
+          )}
+
+          <PDFDataList className="px-16 pb-16" wrap={false}>
+            <PDFDataListHeader>
+              <PDFDataListHeaderTitle>Gegevens</PDFDataListHeaderTitle>
+            </PDFDataListHeader>
+
+            <PDFDataListRow>
+              <PDFDataListRowTitle>Project</PDFDataListRowTitle>
+              <PDFDataListRowValueText>{project.title}</PDFDataListRowValueText>
+            </PDFDataListRow>
+
+            <PDFDataListRow>
+              <PDFDataListRowTitle>Bouwheer</PDFDataListRowTitle>
+              <PDFDataListRowValueText>{project.owner}</PDFDataListRowValueText>
+            </PDFDataListRow>
+
+            <PDFDataListRow>
+              <PDFDataListRowTitle>Architect</PDFDataListRowTitle>
+              <PDFDataListRowValueText>{project.architect}</PDFDataListRowValueText>
+            </PDFDataListRow>
+
+            <PDFDataListRow>
+              <PDFDataListRowTitle>Artikelnummer</PDFDataListRowTitle>
+              <PDFDataListRowValueText>{articleNumber}</PDFDataListRowValueText>
+            </PDFDataListRow>
+
+            {notes && (
+              <PDFDataListRow>
+                <PDFDataListRowTitle>Omschrijving</PDFDataListRowTitle>
+                <PDFDataListRowValueText>
+                  <PDFRichtext content={notes} />
+                </PDFDataListRowValueText>
+              </PDFDataListRow>
+            )}
+
+            {type && (
+              <PDFDataListRow>
+                <PDFDataListRowTitle>Type</PDFDataListRowTitle>
+                <PDFDataListRowValueText>{type}</PDFDataListRowValueText>
+              </PDFDataListRow>
+            )}
+          </PDFDataList>
+        </View>
+
+        <PdfPageNumber />
+      </Page>
+    </Document>
+  );
+}

package/dist/templates/spark/src/app/admin/technical-sheets/_components/tables.tsx

@@ -0,0 +1,110 @@
+"use client";
+import { useSuspenseInfiniteQuery } 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,
+} 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 { Product } from "../../products/_lib/validators";
+import type { Project } from "../../projects/_lib/validators";
+import { technicalSheetsFilters } from "../_config/filters";
+import { technicalSheetTableSorts } from "../_config/sorting";
+import type { TechnicalSheet, TechnicalSheetSource } from "../_lib/validators";
+
+export type TechnicalSheetTableData = TechnicalSheet & {
+  project: Project;
+  sources: TechnicalSheetSource[];
+  product: Product | null;
+};
+
+/**
+ * Client data table
+ */
+type TechnicalSheetTableProviderProps = PropsWithChildren<{
+  columns: TableColumnDef<TechnicalSheetTableData>[];
+  commands?: CommandFor<TechnicalSheetTableData[]>[];
+  filterOptions?: UseFiltersOptions<typeof technicalSheetsFilters>;
+  columnVisibility?: VisibilityState;
+}>;
+
+/**
+ * Infinite table
+ */
+export function TechnicalSheetInfiniteTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+  children,
+}: TechnicalSheetTableProviderProps) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(technicalSheetsFilters, filterOptions);
+  const sorting = useSorting(technicalSheetTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseInfiniteQuery(
+    orpc.technicalSheets.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<TechnicalSheetTableData>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

package/dist/templates/spark/src/app/admin/technical-sheets/_components/toolbars.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";
+import { resolveFilterDescriptors } from "@tulip-systems/query";
+import { FilterSearch } from "@tulip-systems/query/client";
+import type { PropsWithChildren } from "react";
+import { technicalSheetsFilters } from "../_config/filters";
+
+const technicalSheetsFiltersDescriptors = resolveFilterDescriptors(technicalSheetsFilters);
+
+export function TechnicalSheetTableToolbar({ children }: PropsWithChildren) {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <FilterSearch placeholder="Zoeken..." filter={technicalSheetsFiltersDescriptors.search} />
+      </TableToolbarList>
+
+      <TableToolbarList>{children}</TableToolbarList>
+    </TableToolbar>
+  );
+}