@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/sales-invoices/(list)/paid/page.tsx

@@ -0,0 +1,22 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { SalesInvoicePaginationTableProvider } from "../../_components/tables";
+import { SalesInvoiceTableToolbar } from "../../_components/toolbars";
+import { salesInvoiceColumns } from "../../_config/columns-data";
+import { salesInvoiceStatusCommand } from "../../_config/commands";
+
+export default function Page() {
+  return (
+    <Allowed permission={{ salesInvoice: ["view"] }}>
+      <SalesInvoicePaginationTableProvider
+        columns={salesInvoiceColumns}
+        commands={[salesInvoiceStatusCommand]}
+        filterOptions={{ constraints: { status: ["paid"] } }}
+        columnVisibility={{ status: false }}
+      >
+        <SalesInvoiceTableToolbar />
+        <DataTable />
+      </SalesInvoicePaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/sales-invoices/(list)/sent/page.tsx

@@ -0,0 +1,22 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { SalesInvoicePaginationTableProvider } from "../../_components/tables";
+import { SalesInvoiceTableToolbar } from "../../_components/toolbars";
+import { salesInvoiceColumns } from "../../_config/columns-data";
+import { salesInvoiceStatusCommand } from "../../_config/commands";
+
+export default function Page() {
+  return (
+    <Allowed permission={{ salesInvoice: ["view"] }}>
+      <SalesInvoicePaginationTableProvider
+        columns={salesInvoiceColumns}
+        commands={[salesInvoiceStatusCommand]}
+        filterOptions={{ constraints: { status: ["sent"] } }}
+        columnVisibility={{ status: false }}
+      >
+        <SalesInvoiceTableToolbar />
+        <DataTable />
+      </SalesInvoicePaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/sales-invoices/[id]/(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/sales-invoices/[id]/(items)/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { TableLayout } from "@tulip-systems/data-tables";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { SalesInvoiceItemInfiniteTableProvider } from "@/app/admin/sales-invoice-items/_components/tables";
+import { SalesInvoiceItemTableToolbar } from "@/app/admin/sales-invoice-items/_components/toolbars";
+import { salesInvoiceItemColumns } from "@/app/admin/sales-invoice-items/_config/columns-data";
+import { salesInvoiceItemDeleteCommand } from "@/app/admin/sales-invoice-items/_config/commands";
+import { orpc } from "@/server/router/client";
+
+export default function SalesInvoiceItemsDetailPage(
+  props: PageProps<"/admin/sales-invoices/[id]">,
+) {
+  const params = use(props.params);
+  const salesInvoiceId = params.id?.toString();
+
+  const { data } = useSuspenseQuery(
+    orpc.salesInvoices.getById.queryOptions({ input: { id: salesInvoiceId } }),
+  );
+  if (!data) notFound();
+
+  return (
+    <TableLayout>
+      <SalesInvoiceItemInfiniteTableProvider
+        columns={salesInvoiceItemColumns}
+        commands={[salesInvoiceItemDeleteCommand]}
+        filterOptions={{ constraints: { salesInvoiceId: [salesInvoiceId] } }}
+      >
+        <SalesInvoiceItemTableToolbar />
+
+        <DataTable />
+      </SalesInvoiceItemInfiniteTableProvider>
+    </TableLayout>
+  );
+}

package/dist/templates/spark/src/app/admin/sales-invoices/[id]/@dashboard/default.tsx

@@ -0,0 +1 @@
+export { default } from "./page";

package/dist/templates/spark/src/app/admin/sales-invoices/[id]/@dashboard/page.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { formatDate } from "@tulip-systems/core";
+import { Card, CardContent, CardHeader, CardTitle } from "@tulip-systems/ui/card";
+import { DataList, DataListItem, DataListTitle, DataListValue } from "@tulip-systems/ui/data-list";
+import { DataStackLayout, DataStackRow } from "@tulip-systems/ui/data-stack";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { COUNTRIES } from "@/app/admin/addresses/_lib/constants";
+import { generateClientHref } from "@/app/admin/clients/_lib/helpers";
+import { orpc } from "@/server/router/client";
+
+export default function DetailPage(props: PageProps<"/admin/sales-invoices/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.salesInvoices.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  return (
+    // <div className="grid gap-x-20 gap-y-8 lg:grid-cols-2">
+    <DataStackLayout>
+      <DataStackRow>
+        <DataList className="flex-1">
+          <DataListItem>
+            <DataListTitle>Titel</DataListTitle>
+            <DataListValue>{data.title}</DataListValue>
+          </DataListItem>
+
+          <DataListItem>
+            <DataListTitle>Klant</DataListTitle>
+            <DataListValue>
+              <Link href={generateClientHref(data.client)} className="hover:underline">
+                {data.client.name}
+              </Link>
+            </DataListValue>
+          </DataListItem>
+
+          <DataListItem>
+            <DataListTitle>Verkoopbon</DataListTitle>
+            <DataListValue>
+              <Link href={`/admin/sales-orders/${data.salesOrder?.id}`} className="hover:underline">
+                {data.salesOrder?.number}
+              </Link>
+            </DataListValue>
+          </DataListItem>
+        </DataList>
+
+        <DataList className="flex-1">
+          <DataListItem>
+            <DataListTitle>Factuurdatum</DataListTitle>
+            <DataListValue>{formatDate(data.issueDate)}</DataListValue>
+          </DataListItem>
+
+          <DataListItem>
+            <DataListTitle>Vervaldatum</DataListTitle>
+            <DataListValue>{formatDate(data.dueDate)}</DataListValue>
+          </DataListItem>
+
+          <DataListItem>
+            <DataListTitle>Verzenddatum</DataListTitle>
+            <DataListValue>
+              {data.sentDate ? (
+                <span>{formatDate(data.sentDate)}</span>
+              ) : (
+                <span className="italic">Nog niet verzonden</span>
+              )}
+            </DataListValue>
+          </DataListItem>
+        </DataList>
+      </DataStackRow>
+
+      <DataStackRow>
+        {data.toAddress && (
+          <Card className="flex-1">
+            <CardHeader>
+              <CardTitle>Ontvanger</CardTitle>
+            </CardHeader>
+
+            <CardContent className="space-y-2 text-sm">
+              <div>{data.toName}</div>
+              <div>{data.toVatNumber}</div>
+              <div>{data.toAddress.street}</div>
+              <div>
+                {data.toAddress.postalCode}, {data.toAddress.city}
+              </div>
+              <div>
+                {COUNTRIES.find((country) => country.code === data.toAddress?.countryCode)?.name}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {data.fromAddress && (
+          <Card className="flex-1">
+            <CardHeader>
+              <CardTitle>Verzender</CardTitle>
+            </CardHeader>
+
+            <CardContent className="space-y-2 text-sm">
+              <div>{data.fromName}</div>
+              <div>{data.fromVatNumber}</div>
+              <div>{data.fromAddress.street}</div>
+              <div>
+                {data.fromAddress.postalCode}, {data.fromAddress.city}
+              </div>
+              <div>
+                {COUNTRIES.find((country) => country.code === data.fromAddress?.countryCode)?.name}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </DataStackRow>
+    </DataStackLayout>
+  );
+}

package/dist/templates/spark/src/app/admin/sales-invoices/[id]/layout.tsx

@@ -0,0 +1,74 @@
+"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 { formatCurrency } from "@tulip-systems/core";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import {
+  calculateNetAmount,
+  calculateTotalAmount,
+  calculateVatAmount,
+} from "@/lib/helpers/calculate";
+import { orpc } from "@/server/router/client";
+import {
+  salesInvoiceDeleteCommand,
+  salesInvoiceDownloadCommand,
+  salesInvoicePreviewCommand,
+  salesInvoiceStatusCommand,
+} from "../_config/commands";
+import { SalesInvoiceStatusBadge } from "../_config/status";
+
+export default function ProductListLayout(props: LayoutProps<"/admin/sales-invoices/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.salesInvoices.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  const netAmount = calculateNetAmount(data.items);
+  const vatAmount = calculateVatAmount(data.items);
+  const total = calculateTotalAmount(data.items);
+
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle
+            badge={<SalesInvoiceStatusBadge status={data.status} />}
+            breadcrumbs={[
+              { label: "Facturen", href: "/admin/sales-invoices" },
+              { label: data.number.toString() },
+            ]}
+          />
+
+          <TopbarTools>
+            <ResponsiveCommandMenu
+              data={data}
+              commands={[
+                salesInvoicePreviewCommand,
+                salesInvoiceDownloadCommand,
+                salesInvoiceStatusCommand,
+                salesInvoiceDeleteCommand,
+              ]}
+            />
+          </TopbarTools>
+        </Topbar>
+      </Header>
+
+      <div className="space-y-20 p-content pb-40">
+        {props.dashboard}
+        {props.children}
+      </div>
+
+      <div className="absolute right-0 bottom-0 left-0 flex justify-between overflow-auto border-t bg-background py-5 text-end">
+        <div className="flex w-max flex-row justify-end gap-20 px-content md:w-full">
+          <span className="text-base">Subtotaal: {formatCurrency(netAmount.toFixed(2))}</span>
+          <span className="text-base">BTW: {formatCurrency(vatAmount.toFixed(2))}</span>
+          <span className="font-bold text-base">Totaal: {formatCurrency(total.toFixed(2))}</span>
+        </div>
+      </div>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/sales-invoices/[id]/pdf/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { PDFViewer } from "@react-pdf/renderer";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { orpc } from "@/server/router/client";
+import { SalesInvoicePdf } from "../../_components/pdf-document";
+
+export default function DetailPage(props: PageProps<"/admin/sales-invoices/[id]/pdf">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.salesInvoices.getPDFData.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  return (
+    <PDFViewer className="h-[100dvh] w-full">
+      <SalesInvoicePdf data={data} />
+    </PDFViewer>
+  );
+}

package/dist/templates/spark/src/app/admin/sales-invoices/_components/pdf-commands.tsx

@@ -0,0 +1,57 @@
+// "use client";
+
+import { PDFDownloadLink, PDFViewer } from "@react-pdf/renderer";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import {
+  CommandDialog,
+  CommandDialogContent,
+  CommandDialogTrigger,
+  CommandEmpty,
+  CommandLabel,
+} from "@tulip-systems/commands/client";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+import { SalesInvoicePdf } from "./pdf-document";
+
+export function SalesInvoicePdfViewerCommand({ id }: { id: string }) {
+  const { data, isError, error } = useSuspenseQuery(
+    orpc.salesInvoices.getPDFData.queryOptions({ input: { id } }),
+  );
+
+  if (!data || isError) {
+    console.error(error);
+    return null;
+  }
+
+  return (
+    <CommandDialog>
+      <CommandDialogTrigger className="flex items-center gap-2" label="Preview">
+        <Icons.preview className="w-4" />
+        <CommandLabel />
+      </CommandDialogTrigger>
+
+      <CommandDialogContent className="h-[90dvh] overflow-y-hidden sm:max-w-[85vw]">
+        <PDFViewer className="h-full w-full">
+          <SalesInvoicePdf data={data} />
+        </PDFViewer>
+      </CommandDialogContent>
+    </CommandDialog>
+  );
+}
+
+export function SalesInvoicePDFDownloadCommand({ id }: { id: string }) {
+  const { data, isError } = useSuspenseQuery(
+    orpc.salesInvoices.getPDFData.queryOptions({ input: { id } }),
+  );
+
+  if (!data || isError) return null;
+
+  return (
+    <PDFDownloadLink document={<SalesInvoicePdf data={data} />} fileName={`${data.number}.pdf`}>
+      <CommandEmpty label="Download">
+        <Icons.download className="w-4" />
+        <CommandLabel />
+      </CommandEmpty>
+    </PDFDownloadLink>
+  );
+}

package/dist/templates/spark/src/app/admin/sales-invoices/_components/pdf-document.tsx

@@ -0,0 +1,171 @@
+import "@/components/pdf/pdf-config";
+import { Document, Page, Text, View } from "@react-pdf/renderer";
+import { formatCurrency, formatDate } from "@tulip-systems/core";
+import Decimal from "decimal.js";
+import { tw } from "@/components/pdf/pdf-config";
+import {
+  PDFDataList,
+  PDFDataListRow,
+  PDFDataListRowTitle,
+  PDFDataListRowValueText,
+} from "@/components/pdf/pdf-data-list";
+import { PdfContactFooter, PdfPageNumber } from "@/components/pdf/pdf-footer";
+import { PdfContactSection, PdfTopBar } from "@/components/pdf/pdf-header";
+import { PDFRichtext } from "@/components/pdf/pdf-richtext";
+import {
+  PDFTable,
+  PDFTableCellRichtext,
+  PDFTableCellText,
+  PDFTableHeader,
+  PDFTableHeaderTitle,
+  PDFTableRow,
+} from "@/components/pdf/pdf-table";
+import {
+  calculateNetAmount,
+  calculateTotalAmount,
+  calculateVatAmount,
+} from "@/lib/helpers/calculate";
+import type { RouterOutputs } from "@/server/router/router";
+import { formatSalesInvoicePaymentStatement } from "../_lib/helpers";
+
+export type SalesInvoicePdfProps = {
+  data: RouterOutputs["salesInvoices"]["getPDFData"];
+};
+
+export function SalesInvoicePdf({ data }: SalesInvoicePdfProps) {
+  if (!data) return null;
+
+  const netAmount = calculateNetAmount(data.items);
+  const vatAmount = calculateVatAmount(data.items);
+  const total = calculateTotalAmount(data.items);
+
+  return (
+    <Document title={data?.number}>
+      <Page size="A4" style={tw("text-[7px]")}>
+        <PdfTopBar title="Factuur" />
+
+        {/* 
+        
+            Order Header
+        */}
+        <View style={tw("flex flex-row mb-10 px-8")}>
+          <PdfContactSection
+            title="Gegevens"
+            name={data.toName}
+            vatNumber={data.toVatNumber}
+            addresses={data.toAddress ? [data.toAddress] : []}
+          />
+
+          {data.notes && (
+            <View style={tw("w-1/2 text-xs leading-relaxed")}>
+              <Text style={tw("text-xs font-bold mb-2.5")}>Opmerking</Text>
+              <PDFRichtext className="text-xs" content={data?.notes} />
+            </View>
+          )}
+        </View>
+
+        {/* Order information */}
+        <View style={tw("flex flex-row text-xs gap-16 px-8 mb-3")}>
+          <View style={tw("flex flex-row gap-2")}>
+            <Text style={tw("text-xs font-bold")}>Factuurnummer:</Text>
+            <Text style={tw("text-xs font-normal")}>{data?.number}</Text>
+          </View>
+
+          <View style={tw("flex flex-row gap-2")}>
+            <Text style={tw("text-xs font-bold")}>Datum:</Text>
+            <Text style={tw("text-xs font-normal")}>{formatDate(data.issueDate)}</Text>
+          </View>
+
+          <View style={tw("flex flex-row gap-2")}>
+            <Text style={tw("text-xs font-bold")}>Vervaldatum:</Text>
+            <Text style={tw("text-xs font-normal")}>{formatDate(data.dueDate)}</Text>
+          </View>
+        </View>
+
+        {/* 
+          
+            Order Items
+          */}
+        <PDFTable>
+          <PDFTableHeader>
+            <PDFTableHeaderTitle className="basis-[10%]">Nr.</PDFTableHeaderTitle>
+            <PDFTableHeaderTitle className="basis-[55%]">Omschrijving</PDFTableHeaderTitle>
+            <PDFTableHeaderTitle className="basis-[10%]">Aantal</PDFTableHeaderTitle>
+            <PDFTableHeaderTitle className="basis-[10%]">Prijs</PDFTableHeaderTitle>
+            <PDFTableHeaderTitle className="basis-[5%]">BTW</PDFTableHeaderTitle>
+            <PDFTableHeaderTitle className="basis-[10%] text-right">Totaal</PDFTableHeaderTitle>
+          </PDFTableHeader>
+
+          {data?.items?.map((item) => (
+            <PDFTableRow key={item.id}>
+              <PDFTableCellText className="basis-[10%]">{item.articleNumber}</PDFTableCellText>
+              <PDFTableCellRichtext className="basis-[55%]" content={item.description} />
+              <PDFTableCellText className="basis-[10%]">{item?.quantity}</PDFTableCellText>
+              <PDFTableCellText className="basis-[10%]">
+                {formatCurrency(item.price)}
+              </PDFTableCellText>
+
+              <PDFTableCellText className="basis-[5%] pr-0">
+                % {Decimal(item.vatRate).mul(100).toFixed(0)}
+              </PDFTableCellText>
+
+              <PDFTableCellText className="basis-[10%] pr-0 text-right">
+                {formatCurrency(item.netAmount)}
+              </PDFTableCellText>
+            </PDFTableRow>
+          ))}
+        </PDFTable>
+
+        {/* 
+          
+          Order footer
+          */}
+        <View style={tw("mt-auto font-medium border-t-[0.5px] flex flex-row justify-between")}>
+          <View style={tw("w-1/2 pl-8 pt-6")}>
+            <Text>Betalingstermijn van {data.client.paymentTerm ?? 30} dagen</Text>
+            {data.client?.vatRate === "0.00" && <Text>BTW Verlegd</Text>}
+            <br />
+            {data.paymentStatement && (
+              <Text style={{ marginTop: 10 }}>
+                Vermelden bij betaling: {formatSalesInvoicePaymentStatement(data.paymentStatement)}
+              </Text>
+            )}
+          </View>
+
+          <PDFDataList className="w-2/5">
+            <PDFDataListRow>
+              <PDFDataListRowTitle>Subtotaal</PDFDataListRowTitle>
+              <PDFDataListRowValueText className="text-right">
+                {formatCurrency(netAmount.toFixed(2))}
+              </PDFDataListRowValueText>
+            </PDFDataListRow>
+
+            <PDFDataListRow>
+              <PDFDataListRowTitle>BTW</PDFDataListRowTitle>
+              <PDFDataListRowValueText className="text-right">
+                {formatCurrency(vatAmount.toFixed(2))}
+              </PDFDataListRowValueText>
+            </PDFDataListRow>
+
+            <PDFDataListRow>
+              <PDFDataListRowTitle className="font-bold">Totaal</PDFDataListRowTitle>
+              <PDFDataListRowValueText className="text-right font-bold">
+                {formatCurrency(total.toFixed(2))}
+              </PDFDataListRowValueText>
+            </PDFDataListRow>
+          </PDFDataList>
+        </View>
+
+        <PdfPageNumber />
+
+        <PdfContactFooter
+          options={{
+            name: data.fromName,
+            vatNumber: data.fromVatNumber,
+            address: data.fromAddress,
+          }}
+        />
+      </Page>
+    </Document>
+  );
+}

package/dist/templates/spark/src/app/admin/sales-invoices/_components/tables.tsx

@@ -0,0 +1,89 @@
+"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 { orpc } from "@/server/router/client";
+import type { Client } from "../../clients/_lib/validators";
+import type { SalesInvoiceItem } from "../../sales-invoice-items/_lib/validators";
+import type { SalesOrder } from "../../sales-orders/_lib/validators";
+import { salesInvoicesFilters } from "../_config/filters";
+import { salesInvoiceTableSorts } from "../_config/sorting";
+import type { SalesInvoice } from "../_lib/validators";
+
+export type SalesInvoiceTableData = SalesInvoice & {
+  client: Client;
+  salesOrder: SalesOrder;
+  items: SalesInvoiceItem[];
+};
+
+/**
+ * Client data table
+ */
+type SalesInvoiceInfiniteTableProviderProps<TData extends SalesInvoiceTableData> = {
+  columns: TableColumnDef<TData>[];
+  commands?: CommandFor<TData[]>[];
+  filterOptions?: UseFiltersOptions<typeof salesInvoicesFilters>;
+  columnVisibility?: VisibilityState;
+};
+
+export function SalesInvoicePaginationTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+
+  children,
+}: PropsWithChildren<SalesInvoiceInfiniteTableProviderProps<SalesInvoiceTableData>>) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(salesInvoicesFilters, filterOptions);
+  const sorting = useSorting(salesInvoiceTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseQuery(orpc.salesInvoices.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<SalesInvoiceTableData>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}